CSS Basic Layout

Points

4

Assigned

February 19, 2020

Due

February 26, 2020

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.

Background colors: (Optional use)

• Light Blue: #82d3eb
  
• Orange: #f68c23
  
• Army Green: #9ab55f
  
• Light Grey: #9d9fa2
  
• Charcoal: #404041
  
• Dark Blue: #23408f
  
• Green: #25b784
  
• Mustard: #dfd373

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

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 but you can use the list at the top of the assignment) and floats or flexbox to build this basic structural skeleton.

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

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

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:

• 4: CSS and styles are written appropriately and with proper indentation. All steps were followed, "content" is include and grids are correct. Code is organized and utilizes comments.
• 2 - 3: CSS/HTML is mostly structured correctly, but there are some syntax and/or style issue (for example, you forgot to close a rule with a semicolon). Some of the steps were missed or elements are not included. Code is messy or comments are missing.
• 0 - 1: CSS does not use appropriate style attributes. Grids are not structured correctly. Syntax is incorrect and many of the steps were missed. The pen was not set up or submitted according to instructions.