Description
Tutorial: CSS Grid Layout is an interactive lab that teaches the student the basic elements of CSS Grid for page layout.
This tutorial is excellent for an in-class lab. It can also be used as an online, self-paced, learning activity.
OBJECTIVES:
This tutorial covers the following objectives:
- Describe how CSS Grid can be used to control the layout of a web page.
- Create a grid to hold page elements.
- Assign rows and columns to each object.
- Span rows and columns.
- Use CSS Flexbox to control elements inside a CSS Grid block.
This hands-on tutorial comes with a standard PDF file as well as an interactive version written using Articulate Storyline that you can upload to Moodle or Canvas. Watch this video showing how to install the interactive, Articulate Storyline files, into your LMS (Learning Management System)
Tutorial: CSS Grid Layout includes the full source code solution used in the lab as well as multiple screenshots showing the student each stage as new code is added.
A self-graded, 9-question quiz tests the students' knowledge at the end of the lesson. A screenshot of the student's final score can be submitted to the teacher for credit.
The tutorial includes a 10-step student lab with START and FINAL code for your classroom activities. (This list is included in the comment section at the top of the CSSGridSTART.html file located in the code folder.)
SUGGESTED ACTIVITY LIST FOR THE LAB using the tutorial as a guide:
1) In the code locate the two main div containers (#bigContainer and #content)
2) Put borders around each element (#item1 to #item6) to help see the grid itself. 3) Change the background color of each element using rgba( ) so you can see through them.
4) Create the actual grid with 3 auto-adjusting columns and 6 rows 100p high
5) Position the #item2 through #item6 over item#1 (the background)
6) Position the header and logo (#item2 and #item3)
7) Position the menu #item4, one column on the left)
8) Position the body copy #item5, taking up 2 columns next to the menu
9) Position the footer #item6, all three columns along the bottom.
10) Use FireFox to inspect the actual grid lines.
11) Use Flexbox to arrange the logo and company name along the top of the page.
12) Make the page responsive by changing px to fr for the grid-template-rows. This will allow the page to be viewed nicely on a wide screen as well as a smart phone.
Highlights
Save even more with bundles
Description
Tutorial: CSS Grid Layout is an interactive lab that teaches the student the basic elements of CSS Grid for page layout.
This tutorial is excellent for an in-class lab. It can also be used as an online, self-paced, learning activity.
OBJECTIVES:
This tutorial covers the following objectives:
- Describe how CSS Grid can be used to control the layout of a web page.
- Create a grid to hold page elements.
- Assign rows and columns to each object.
- Span rows and columns.
- Use CSS Flexbox to control elements inside a CSS Grid block.
This hands-on tutorial comes with a standard PDF file as well as an interactive version written using Articulate Storyline that you can upload to Moodle or Canvas. Watch this video showing how to install the interactive, Articulate Storyline files, into your LMS (Learning Management System)
Tutorial: CSS Grid Layout includes the full source code solution used in the lab as well as multiple screenshots showing the student each stage as new code is added.
A self-graded, 9-question quiz tests the students' knowledge at the end of the lesson. A screenshot of the student's final score can be submitted to the teacher for credit.
The tutorial includes a 10-step student lab with START and FINAL code for your classroom activities. (This list is included in the comment section at the top of the CSSGridSTART.html file located in the code folder.)
SUGGESTED ACTIVITY LIST FOR THE LAB using the tutorial as a guide:
1) In the code locate the two main div containers (#bigContainer and #content)
2) Put borders around each element (#item1 to #item6) to help see the grid itself. 3) Change the background color of each element using rgba( ) so you can see through them.
4) Create the actual grid with 3 auto-adjusting columns and 6 rows 100p high
5) Position the #item2 through #item6 over item#1 (the background)
6) Position the header and logo (#item2 and #item3)
7) Position the menu #item4, one column on the left)
8) Position the body copy #item5, taking up 2 columns next to the menu
9) Position the footer #item6, all three columns along the bottom.
10) Use FireFox to inspect the actual grid lines.
11) Use Flexbox to arrange the logo and company name along the top of the page.
12) Make the page responsive by changing px to fr for the grid-template-rows. This will allow the page to be viewed nicely on a wide screen as well as a smart phone.
