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
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
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.
- Once you’re satisfied, copy the Editor Mode URL from CodePen
- 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.