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:
- Two ways to move a div around on the page
- Stick a div onto the bottom or top of the page
- Identify the background color of an existing webpage
- Grab the URL for an image from an existing webpage
- Center an element horizontally
- Identify three ways you can include your CSS styles in a page
- Understand how to use classes and ids to target CSS at specific elements on the page
- Build a very basic form (even if it doesn’t "go" anywhere)
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.
Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?
When looking for help, try doing so in the following order:
- Did you try everything you could?
- Did you read the documentation?
- Did you Google for it?
- Did you post your question on Slack/Forum?
- Did you ask your fellow students for help?
- Did you ask your Mentors for help?
- Did you leave a comment on the comments section of this page?
- Did you ask your Instructor for help?
- Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.