Real-world project from Front End Web Developer at Udacity.
A personal blog website where shippers can share posts about the couples they are shipping.
demo.mov
Create a multi-page blog website, using best practices for content and page styling with HTML and CSS. We’ll practice using responsive layouts, Flexbox, and CSS Grid to create the structure and design for our own blog. Along with webpage design considerations, we'll work to appropriately structure our files, as well as use proper CSS and HTML formatting & style.
In this project, we'll get to start from scratch. This should include, at minimum, HTML files related to:
- the blog website
- an example blog post
as well as any related CSS files for styling.
- Decide on the overall structure of the project. We'll want separate HTML files, and related CSS files, for each piece of the website: the main page, a blog post, and the (optional) design system (feel free to add more!). Note that these should not all fall in the parent directory, but should also be organized into subdirectories.
- Draw out some mock pages of the website. Just a quick sketch of the different headers, boxes, etc. can help us think through what we want to do later with the layout.
- (Optional) Begin considering the design system. Doing a first draft of our webpages can help us take the first steps toward the design system. We don't need to build the page out yet, but hopefully drawing these pages has us thinking more in-depth on how everything should look.
- Start building out the HTML for the main page. Building out the HTML will allow us to start looking at the basics of what we are building, whether in the browser or in our IDE.
- Build the HTML for the example blog post. Now that we've made one HTML page already. Think about what items we might want on the blog post that weren't present on the main page, and vice versa.
- (Optional) Formalize the design system. Now that we have the primary HTML pages built, it's time to formalize our approach to design and styling. Note that we are fully able to iterate on this later, but make sure we keep the design system consistent to what is in our actual CSS coming up. We can make the HTML page for the design system at this time.
- Begin styling the pages with CSS. We should have a primary CSS file that is linked to from each of the HTML pages, and then import separate CSS files for each page into this primary CSS file. If we are using an (optional) design system, make sure we are staying true to it (or update it accordingly).
- Take a look back at the initial drawings, and iterate. It's perfectly fine to have decided to go a different direction than we drew out, but this is a good chance to see if we are missing something we wanted on the page. From there, iterate, iterate, iterate, until each page looks how we want it to look.
- Link between pages. A user should be able to click on those links to go between the main page, an example blog post, and the (optional) design system without issue.
- Test and more iteration. Finally, just make sure we have tested out that everything on each page is working and looks as we want it to look.