Session 13: Layout Exercise
Your goal: re-create the layout for the top of the course homepage using two techniques available in CSS.
To get you started, I provide a starter kit containing two identical folders. Each folder contains:
- a stripped down HTML file for the course homepage, focused on the content header at the top
- a stripped down CSS file for the course homepage, focused on the content header at the top
- the image used in the content header
Download the starter code, unzip the file, and proceed.
Float
Go to the exercise-code/v1 folder. Open the CSS file
in VS Code. Search for 'content header' to find the code to edit.
Use the float: property to make the image
float left and the aside float right.
Look at the HTML page in a browser. Does this achieve our goal? If not, how might we fix it?
Flex
Go to the exercise-code/v2 folder. Open the CSS file
in VS Code. Search for 'content header' to find the code to edit.
Lay out article as a flex
container. Use the flex: property to allow the div
in the middle to grow and shrink, and to ensure that the image
and aside do not.
Look at the HTML page in a browser. Does this achieve our goal? If not, how might we fix it?