CSS Basic Layout

Points
4
Assigned
February 21, 2019
Due
February 28, 2019

This assignment is practice using float/flexbox to create basic CSS grids structures.

This is an individual assignment, and it will be turned in via Blackboard Learn.

Do not copy and paste another student’s code. If I catch you doing so, you’ll receive a 0 for the assignment.

WHAT TO DO

Build each of these grid structures using widths, min-heights, background colors and padding/margin as needed. Build them all in one Pen with space in-between and designated with HTML comments.

Structures

You can use this pdf for reference, or the instructions below: CSS-Basic-Layout.pdf

Final Outcome

Your final pen should look something like this: Basic Grids


Grid Structure 1

Getting started

Create a Pen in codepen. Start with a 1200px wrapping container that is centered using margins. Each of these grid "islands" will sit inside this container with space in-between.

Grid Structure 1

Recreate the grid structure you see above. Use min-height, background-color (background colors are open) and floats or flexbox to build this basic structural skeleton.


Grid Structure 2

Grid Structure 2

Make sure to add margin between the first grid structure and this one.

Recreate the grid structure you see above. Use min-height, background-color (background colors are open) and floats or flexbox to build this basic structural skeleton.


Grid Structure 3

Grid Structure 3

Make sure to add margin between the previous grid structure and this one.

Recreate the grid structure you see above. Use min-height, background-color (background colors are open) and floats or flexbox to build this basic structural skeleton.

Add the sample "content" into the header section. Position with padding or flexbox controls or floats.


Grid Structure 4

Grid Structure 4

Make sure to add margin between the previous grid structure and this one.

Recreate the grid structure you see above. Use min-height, background-color (background colors are open) and floats or flexbox to build this basic structural skeleton.


Submitting the Assignment

Your final product should look close to the example, understanding that background color and screen widths may vary.

  1. Once you’re satisfied, copy the Editor Mode URL from CodePen
  2. Log in to Blackboard Learn to submit your assignment. Go to Assignments > Assignment Name. Under Write Submission, Paste the URL of the Pen (Editor Mode). Click Submit.

RUBRIC

Use the following rubric to ensure you receive the highest possible grade for the assignment:

Return to Assignments