Search Header Logo
Modern HTML and CSS from the Beginning (Including Sass) - Footer With Grid

Modern HTML and CSS from the Beginning (Including Sass) - Footer With Grid

Assessment

Interactive Video

Information Technology (IT), Architecture

University

Practice Problem

Hard

Created by

Wayground Content

FREE Resource

This video tutorial guides viewers through the process of designing and styling a website footer using HTML and CSS. It begins with setting up the footer as a grid container and adding various elements such as a logo, newsletter signup, and site links. The tutorial then covers styling these elements using CSS, including setting colors, aligning content, and creating responsive designs. Advanced styling techniques are also discussed, such as using utility classes and handling hover states. The video concludes with finalizing the footer design and preparing for future development of inner pages and mobile versions.

Read more

10 questions

Show all answers

1.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

What is the purpose of adding a 'footer container' class in the footer section?

To apply a specific font style

To create a responsive layout

To add a background image

To center the content within the footer

2.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

Which HTML element is used to include a logo image in the footer?

3.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

What type of input field is used for the newsletter subscription form?

Text

Number

Password

Email

4.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

How is the background color of the footer set in CSS?

background-color: #fff;

background-color: var(--dark-color);

background-color: blue;

background-color: transparent;

5.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

What CSS property is used to align grid items in the footer?

align-items: center;

display: flex;

display: grid;

justify-content: space-between;

6.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

Which CSS property is used to make the copyright text span across the entire footer?

width: 100%;

flex-grow: 1;

grid-row: span 4;

grid-column: span 4;

7.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

What is the purpose of setting the width of input fields to 90%?

To center them within the grid

To align them to the left

To make them responsive

To ensure they fit within the container

Access all questions and much more by creating a free account

Create resources

Host any resource

Get auto-graded reports

Google

Continue with Google

Email

Continue with Email

Classlink

Continue with Classlink

Clever

Continue with Clever

or continue with

Microsoft

Microsoft

Apple

Apple

Others

Others

Already have an account?