Homework Assignments Based on Flexbox / CSS Grid Lab

1) Written HW: HTML & CSS Grid Questions

Instructions: Answer the following 10 questions related to HTML and CSS Grid. This exercise aims to reinforce your understanding of the layout mechanisms.

  1. What is the role of the display: grid; property in CSS?
  2. How do you define rows and columns in a CSS grid layout?
  3. What is the purpose of grid-template-areas?
  4. How can you make a grid item span multiple rows or columns?
  5. Explain the use of grid-gap.
  6. What is the difference between grid-template-columns and grid-auto-columns?
  7. What does the justify-items property do in a grid layout?
  8. How does align-items affect grid items?
  9. What is the function of the grid-area property?
  10. Describe a scenario where Flexbox is more appropriate to use than CSS Grid.

Instructions

  1. Go to CodePen and create a new pen.
  2. Answer the above questions in the html tab
  3. Create an ol
  4. Then create an li for each question
  5. Inside each li place 2 span tags
  6. In 1 span tag write the question
  7. In the other span tag write the answer
  8. Above the ol add a h1 tag and put your name in the h1
  9. Below the h1 place an h3 and inside here type the name of your class and the Week this homework was assigned.

2) Practical HW: CSS Grid & Flexbox Layout

Platform: CodeSandbox
Goal: Create a 3x3 layout using CSS Grid, populate squares with X's and O's, and center them using Flexbox.

Instructions:

  1. Create a new project on CodeSandbox and name it "3x3 Grid Layout".
  2. Use CSS Grid to create a 3-row by 3-column layout.
  3. Place X's and O's in the squares.
  4. Use Flexbox to center the X's and O's within each square.

Tips:

  • Utilize justify-content: center; and align-items: center; for Flexbox centering.
  • Make use of grid-template-areas for easier layout management.

3) Theoretical HW: Easy-Level JavaScript Challenge

Challenge: "The Alphabet Printer"

Goal: Write a JavaScript function that prints each letter of the alphabet on a new line.

Instructions:

  1. Write a function named printAlphabet.
  2. Use a for loop to iterate through the values of 'a' to 'z'.
  3. Print each letter on a new line.
  4. If the letter is a vowel, captalize it.

Key Takeaways:

  • These homework assignments are designed to deepen your understanding of HTML, CSS, and JavaScript.
  • They build upon the skills you've acquired during the Flexbox/CSS Grid class & lab.
  • The theoretical hw builds upon your fizzbuzz solutions, but the way you get the answer will not be a mathematical operation. (the answer is closer than it appears)
  • Proper submission ensures that your progress can be tracked and that you receive appropriate feedback.

Hungry For More

eCardly

Learning Objectives

  • HTML & CSS

Prerequisites

  • HTML & CSS

Deliverables

index.html and styles.css files that try to recreate the eCardly mockup as best as you can. The images you'll need are in the /ecardly/images directory inside this folder.

  • Cut and paste
  • Post card
  • Submit Your Own
  • Background
  • Courage
  • NYC Startups
  • Logo
  • FB
  • Pinterest
  • Twitter

Tips

Body

  • The <body> should have a background of the background.jpg provided for you in the images folder. The image should repeat only going left and right. The rest of the page should have a background of #d6d6d6.

    • Hint: define the background image repeating in only one direction AND the background color on the same line.
  • The <body> has a default font of Helvetica with font size of 12px.
  • Define a line height for the body of 1.7. This gives every line of text .35 padding above and below it.
  • Links on the page should be red (#ff3300) and not be underlined.