In this project, you'll write code across a handful of HTML and CSS files. Note that it's very important that you plan your project before you start writing any code! Break your project down into small pieces of work and strategize your approach to each one. With these bite-sized amounts, it'll be easier to debug and fix any issues that appear.

Feel free to implement your own design workflow, but if you get stuck -- here is a brief primer to get you up and running!

Decide on the overall structure of your project. You'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. Even you aren't confident in your own drawing skills, that's okay - just a quick sketch of the different headers, boxes, etc. can help you think through what you want to do later with the layout. (Optional) Begin considering your design system. This is really 2a, but doing a first draft of your webpages can help you take the first steps toward the design system. You don't need to build the page out yet, but hopefully drawing these pages has you thinking more in-depth on how everything should look. If you want some ideas, you can also check out Veritas, Udacity's design system (yours does not need to be anywhere near as detailed). Start building out the HTML for the main page. Building out the HTML will allow you to start looking at the basics of what you are building, whether in the browser or in your IDE. Make sure to take a look at the Udacity HTML Style Guide as well from the get-go - it will be easier to follow this throughout than to have to re-format all your code once you've finished. Need a refresher? Head back into the lesson to review HTML structure! Build the HTML for your example blog post. Now that you've made one HTML page already, you're on a roll! Think about what items you might want on the blog post that weren't present on the main page, and vice versa. (Optional) Formalize your design system. Now that you have the primary HTML pages built, it's time to formalize your approach to design and styling. Note that you are fully able to iterate on this later, but make sure you keep the design system consistent to what is in your actual CSS coming up. You can make the HTML page for the design system at this time. Begin styling your pages with CSS. You 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. Be sure to take a look at the Udacity CSS Style Guide, and if you are using an (optional) design system, make sure you are staying true to it (or update it accordingly). Note that you need to use both Flexbox and Grid per the project rubric as part of your CSS. Take a look back at your initial drawings, and iterate. Is the page coming together as you initially planned? It's perfectly fine to have decided to go a different direction than you drew out, but this is a good chance to see if you are missing something you wanted on the page. From there, iterate, iterate, iterate, until each page looks how you want it to look. Link between pages. If your project structure is set up correctly and you add the appropriate links within your HTML, 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. Note that it is fine to have certain links, like "Subscribe", be fake links. Test and more iteration. Finally, just make sure you have tested out that everything on each page is working and looks as you want it to look. Take another look at the project rubric to double-check you have covered each item, and if you want, try to implement some of the ways to stand out at the end of the rubric. Deploying to Github Pages, for instance, is a good way to get your project up live where you can check it out on multiple devices, and even show your friends and family your work.