Prep 5: HTML + CSS
Due Date: Thursday, October 3rd at 10:00 am
Purpose
In this prep, you will learn the basics of HTML Elements and CSS Styling/Alignment. You will go over the HTML tutorial, play 2 games to learn CSS basics, and apply your new HTML/CSS skills to a Posts feed.
Tasks
HTML For the first part of your prep, please go through the W3 HTML tutorial from sections HTML Introduction through HTML JavaScript, as well as the HTML Forms tutorial (HTML Forms through HTML Input Forms attributes).
There is no deliverable for this exercise, but please do not skip out on this! These mini tutorials will be incredibly helpful for recitation and your assignments moving forward. We also encourage you to try out the demos in the tutorials, as they will show you how HTML gets rendered into a frontend UI.
CSS Alignment For the next part of your prep, you will play the game Flex Froggy, which will teach you the basics of CSS alignment. Once you have gone through all 24 levels, submit a screenshot of your completed results.
CSS Selectors Next, play the game CSS Diner, which will go over CSS Selectors. Once you have gone through all 32 levels, submit a screenshot of your completed results.
HTML/CSS Together Finally, combine all your knowledge by finishing the 4 small TODOs in this repo. Once you have fixed the layout and added your own images, submit a screenshot of your completed page with your mouse hovering over the Post button.
Submission form: https://forms.gle/LfNLA1Fuzh79J1VF6