💻
[JS] The Interactive Web
CS4All Resources
  • Curriculum Overview
  • 📬Leave Us Feedback
  • Unit 1: HTML & CSS: Good vs Bad Design
    • 🔮Unit 1 Overview
    • U1LA1.1: Building with HTML
    • U1LA1.2: Structuring Pages with Divs, Classes, IDs
    • 🗃️U1LA1 Mini Project: My Fan Page Part 1
    • U1LA2.1: Styling your page with CSS
    • 🗃️U1LA2 Lab: My Fan Page Part 2
    • U1LA3.1: Layout with CSS Grid
    • 🗃️U1LA3.1 Lab: Grid Interview
    • U1LA3.2: Layout with Flexbox
    • 🗃️U1LA3.2 Lab: Flexbox Interview
    • U1LA4.1: Focus on Design in HTML && CSS
    • U1LA4.2: Breakpoint Lesson
    • 🗃️U1LA4 Lab: ChefHub Goes Mobile
    • U1LA5.1: Creating Accessible Websites
    • 🗃️U1LA5 Lab: What Do You Hear? Make it Accessible
    • U1LA6.1: Working with CSS Frameworks - Bulma
    • 🗃️U1LA6 Lab: CheeseBook Computers with Bulma
    • 🎨Unit 1 Final Project: My Travel Page
  • Unit 2: Intro to DOM Manipulation Basics
    • 🔮Unit 2 Overview
    • U2LA1: JavaScript Essentials - Variables to Arrow Functions
    • 🗃️U2LA1 Mini Project: JavaScript Essentials
    • U2LA2.1: DOM Manipulation with JavaScript Click Interactions
    • U2LA2.2: Accessible Shopping Cart
    • 🗃️U2LA2 Mini Project: The National Horse Race
    • U2LA3: Inputs and Conditionals
    • 🗃️U2LA3 Mini Project: The Interactive Site
    • U2LA4: Add, Remove, and Toggle
    • 🗃️U2LA4 Mini Project: The Cross-Wired Lightbulbs Puzzle
    • 🎨Unit 2 Final Project: Input-Output Helper Site
  • Unit 3: Advanced DOM
    • 🔮Unit 3 Overview
    • U3LA1: JavaScript Arrays, Iteration, and Objects
    • 🗃️U3LA1 Mini Project: Arrays, Iteration, and Objects Lab
    • U3LA2.1: JavaScript Essentials - Variables to Arrow Functions
    • U3LA2.2: Typeahead Search
    • U3LA2.3: Fuzzy Matching - Autocorrect
    • 🗃️U3LA2 Mini Project: Fuzzy Matching Personality Quiz
    • U3LA3.1 JavaScript Mutability
    • U3LA3.2: Advanced DOM Manipulation
    • 🗃️U3LA3 Mini Project: Card Organizer
    • U3LA4: Local Storage
    • 🎨Unit Final/U3LA4 Project: Twenty in Ten Game
  • Unit 4: Intro to APIs
    • 🔮Unit 4 Overview
    • U4LA1: Intro to APIs
    • U4LA1.2: JavaScript Arrays, Iteration, and Objects
    • 🗃️U4LA1 Mini Project: Deck of Cards: Higher Lower
    • U4LA2: Connecting to Closed APIs using the Giphy API
    • 🗃️U4LA2 Mini Project: DIY Dictionary
    • U4LA3.1: APIs vs SDKs
    • U4LA3.2: Requests on the Web - GET & POST
    • 🎨Unit 4 Final Project: API GUIs
  • Unit 5: Simple Websockets and Final Project
    • 🔮Unit 5 Overview
    • U5LA1: Servers and Express
    • 🗃️U5LA1 Mini Project: Express Lab
    • U5LA2: Intro to WebSockets
    • 🗃️U5LA2 Mini Project: Simple Sockets Lab
    • U5LA3: Socket Servers
    • 🗃️U5LA3 Mini Project: Socket Server Lab
    • U5LA4 [TBD]
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Teacher Notes
  • Prompt
  • Culturally Responsive Best Practice
  • Extra Help?
  • Extensions
  1. Unit 1: HTML & CSS: Good vs Bad Design

U1LA3.1 Lab: Grid Interview

How can I use CSS Grid to format sections of a webpage into different sizes and orientations?

PreviousU1LA3.1: Layout with CSS GridNextU1LA3.2: Layout with Flexbox

Last updated 1 year ago

Teacher Notes

This lab is a way for students to get some at bats at applying CSS Grid to pre-written HTML code. In the extension, students will have the opportunity to duplicate the general structure of a webpage. We find that Apple's website is a straight forward exemplar, but feel free to find other similar websites or allow students to use a website they prefer to recreate.

Students will utilize the starter code ( | ) to begin. .

Especially for level 3 and harder, students will want to use the Dev Tools to visualize how Grid is being applied. For level 3 and 4, two mock up views are provided. One is used to illustrate the exemplar result, and the other is used to illustrate how the result should be conceptualized in order to incorporate Grid effectively. Take some time to show students how to use the Dev Tools on their own computers to work through these problems.

Prompt

You are applying to work side by side a busy politician who will need a nicely organized website, and they want to make sure you know your stuff before giving you the job. They've given you a couple of challenges to test your competency.

Directions: Your task is to use Grid to style the CSS for each level matching the corresponding exemplar.

  1. For this first layout, you'll want to focus on grid-template-columns and grid-template-rows. The end goal for this level is a simple row (at a height of 400px) with four equal sized columns (each at 1fr).

    Mock Up 1:

  2. Busy politicians rely heavily on calendars to organize their tasks. In this next section, you'll be using the same properties that you worked with in the last level, but you'll need to format it two-dimensionally:

    • For the first part organize the months of the year into 3 rows of 4. The width of each column should be evenly spaced (1fr), and the height of each row should be 100px.

    • For the month of February, it should be formatted as 5 rows of 7 columns. The days themselves should be three times as large as the first row of day titles, and horizontally, all the columns should be equally sized.

    Mock Up 2 Months and Mock Up 2 "February"

  3. Things get quite a bit trickier for the month of December in level 3. You'll need to use grid-column-start and grid-column-end to specify how much space each section takes up horizontally. You could also use span or specific column-line values as seen in from w3schools. Either way, head into the level_three.html for this level so you can extract the ID needed for special styling. Notice that the first row of day titles are still smaller than the other rows. Use the same proportion (1:3) you used in level 2.

    Mock Up 3 and Mock Up 3 - Dev Tools View

  4. Now that you proven your skills and have shown what's needed to format a quality calendar, it's time to demonstrate how you can format a webpage. For this level, there is actually 2 ways it can be done. Choose which ever method you're most comfortable with:

    • Method 1: use grid-column and grid-row to match the starter code to the image below. The "Navbar", "Page Title", and "Footer" sections are each 90px in height, and the content section is 630px. The "Side Bar" takes up 1/5 of the horizontal width. You can do this one of two ways as illustrated below. Choose the one that makes most sense to you for now.

    • Method 2: use grid-template-areas and grid-area. This method is a a bit trickier to understand, but once you learn it, it makes styling with Grid much easier. If you're interested check out for a quick tutorial.

    Mock Up 4 - Mock Up 4 - Dev Tools View (Option 1: 2 Columns) - Mock Up 4 - Dev Tools View (Option 2: 5 Columns)

Culturally Responsive Best Practice

This project is fairly direct in that is an organizational challenge. While we want students to practice mimicking set organization to see their mastery of grid, in future projects, students will be able to set the organization in whatever way they think will best serve theri webpage.

Extra Help?

Can't tell if my proportions are right! If you're having problems sizing things up, inspect your page. Right click on you page and click on inspect. When you hover over the portion you're working on, you should be able to see a "grid" as indicated above that will show you whether or not you're on track. On top of that, be sure to go with the trial and error method.

Extensions

Directions:

  1. Go back to #4 and apply the proportional width in which ever way you haven't yet. If you did it in 2 uneven parts, now try it in 5 equal parts, and if you tried it in 5 equal parts, try completing it in just 2 uneven parts.

  2. You will need to add the rest of the divs in the level_five.html and make sure they're styled in the level_five.css to look like a skeleton of what the apple page looks like. Your finished product won't have all the inside details like text and images, but it should look like the below gif when it's done. Try to be as precise as possible to match the width and height of the apple website, and stop once you get to the "Tiny Promotions" as you see in the gif below.

  1. The demo above only goes about halfway down the actual webpage it's based off of. Continue with the rest of the website and see how far you can go!

Reflection Questions:

  • How do you like grid? Why or why not? Do you think websites look better with grid or without grid? Explain what about grid makes websites look better or worse.

  • What were the biggest challenges you faced while applying grid to the webpage?

  • Do a search for some websites with good looking layouts. What makes them look so appealing?

What's the difference between using fr (fraction) and px (pixels)? In short, you want to use fraction for width of the page and pixels for length or height of the page. Later we will be looking at how your webpage can adjust based on screen size, and this best practice will make more sense. If you're itching to know now, check out for more information on the difference between fr, px, %, and more.

Okay, the politician now wants a website set up similar to . Here all your skills learned thus far are put to the test. Take a moment to look through the level_five.html and level_five.css starter files already created for you, and compare it with the aesthetic of the website. The first 2 Navbars are created in the level_five.html and semi formatted in the level_five.css. If you scroll down on the apple page, you'll see a small black promotion similar to the one thats defaulted for you on the level_five.html. That div is the first div which marks the second half of the webpage. The margin is already set to the appropriate width.

Explore other websites such as , , or the . Go above and beyond by creating the skeleton for one of these websites from scratch!

🗃️
this resource
Apple's website
Spotify's website
HubSpot
NYC DOE website
repl.it
github
Exemplars can be viewed on github
this documentation
this video
Mock Up 1 with four equally spaced columns that say 'winter, spring, summer, fall'
Mock Up 2: Months, with four equal columns and 3 equal rows displaying months
Mock Up 2: February, displaying 7 equal columns, one row for days, and 4 equal rows for day numbers.
Mock Up 3 with a variety of column spacing across 6 rows
Mock Up 3 with a variety of column spacing across 6 rows
Mock Up 4
Mock Up 4 - Dev Tools View (Option 1:2 Columns)
Mock Up 4 - Dev Tools View (Option 2: 5 Columns)
Level 5 Exemplar