Travel Blog
Responsive Travel Blog website designed on Figma and developed using only HTML and CSS.
Role: UX/UI Design Student @Drexel University
Tools: Figma, VS Code, GitHub, Netlify
My Process
Content Development
I began this project by jumping right in and creating a list of all the countries I have traveled to, collecting all of the images from my travels that I might want to use, and writing my blog posts with AI assistance.
Color Scheme
I then began applying a color scheme to my wireframes to decide on the color scheme, design, and branding that I want to achieve.
Typography
I then chose my font and applied it to my, now mid-fidelity, mobile screens.
HTML and CSS
Once my mid-fi design was completed, I began developing. I started by coding each of my HTML pages on VSCode. Once all nineteen of my HTML pages were completed, I began styling them using CSS. When my HTML, CSS, and full website functionality was completed, I began to deal with responsivity.
Back to Wireframing
Before adding media queries to my CSS, I made wireframes of what I want my medium (tablet) and large (desktop) screens to look like based on my small screen (mobile).
Adding media queries to my CSS
Once my wireframes were done, I added two media queries to my CSS. One fore medium (tablet) screens and one for large (desktop) screens.
Publishing and Hosting
I published my finished product using GitHub and hosted my site using netlify!
Feel free to explore my site here!: https://idm222-mdc389.netlify.app/
Wireframing
Once I had finished collecting all of my content, I began wireframing my mobile screens.