components-on-a-grid's Introduction

summary	time	deliverables
Review using CSS Grid & Flexbox to create a website design.	2 hours	1 HTML file, 1 CSS file, images

Components on a grid

Overview

Fork this repository.
Use CSS Grid & Flexbox to create the web design layout.
Refer to the in-class exercise “Sketch those grids” for reference.
A teensy bit of the CSS is started for you.
DO NOT change the HTML file.
Run it through Markbot and make sure it passes all the checks.
Record yourself speaking out the CSS answers.

Details

Typefaces: Patua One, Georgia
Text sizes: 2rem
Line-heights: 1.5
Colours: #fff, #f2f1ed, #30658d, #000
Gaps: 1rem
Margins: 1rem
Paddings: 1rem
Logo width: 14rem

Goal

Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.

Final screenshots in the “screenshots” folder.

Hand in

Submit the code

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.

Speak the answers

On GitHub’s website, on your forked repository, create an Issue labeled “Solution”—and tag your teacher.

Record yourself speaking the final CSS—and upload/drop it into the GitHub Issue body. (You’ll have to zip the audio file before GitHub will allow you to drop it into an Issue.)

Here’s an example of what the recording would sound like (using different content).

Don’t forget to tag your teacher!

components-on-a-grid's People

Contributors