For this mini-project, you’ll deconstruct an existing web page and rebuild it. Don’t worry if the links don’t go anywhere and the search box doesn’t do anything when you submit it. The goal is to start thinking about how elements get placed on the page and roughly how they get styled and aligned. For some of you, this may be the first time you’ve actually tried to "build" something in HTML (very exciting!).
Using the browser’s developer tools (right clicking something on the page and clicking "inspect element" will get you there) will be your best friend. Build the page in a .html text file and open it in your browser to check it out. We suggest you use VSCode and the Live Server extension to launch your web page to the browser. Alternatively, you can try CodePen or jsfiddle.net).
These skills will be helpful for you when you start building. Either try them yourself or at least make sure you know how to do it:
Instructions for the assignment can be found here.
If you still feel shaky on your understanding of HTML and CSS, that’s okay! You don’t need to be an expert by any means yet. These resources should help if you want to shore up your understanding of things:
If you want to see the art of CSS, check out the CSS Zen Garden, which collects submissions that use identical HTML and modify only the CSS but turn out wildly different (and beautiful).
Read through Shay Howe’s HTML&CSS Tutorial. Lesson 1 gives a solid overview and you can do the whole thing for a more in-depth understanding.