CSS Layout
Intro
In the early days of HTML and CSS, you would have to use tables or invisible images to layout their webpages. Since then, CSS has improved to allow for much more creative layout methods.
There are a lot of new ways to do layout (such as Transforms, Flexbox or CSS Grids). This requirement will focus on the display, position, float, and related attributes.
Suggested Learning
- Learn CSS Layout - There’s a lot of extra stuff in here too, so pay attention!
- CSS Box Model
- Z-Index
Requirements
- Fork and complete the following CodePen assignments:
- CSS Layout Assignment 1
- Using CSS Layout, change the CSS of the Codepen to look like this reference image. Don’t worry about getting the sizes exactly right. Just make it look similar:
- CSS Layout Assignment 1
- CSS Layout Assignment 2
- Using CSS Layout, change the CSS of the Codepen to look like this reference image. Don’t worry about getting the sizes exactly right. Just make it look similar:
Send a link to your forked CodePen assignment to the #requirements Discord channel to show you have passed this requirement off.
Extra Learning
- HTML & CSS is Hard - More in-depth tutorial