Overview

Introduction

Welcome to the Applying Box Model Practice Lab. In this module, you will be provided with the instructions and devices needed to develop your hands-on skills.

Exam Objectives

The following exam objective is covered in this lab:

5.1 Construct and analyze styles that position content

Lab Duration

It will take approximately 20 minutes to complete this lab.

Exercise 1 - Working with CSS Box Model

When you design the layout of HTML pages, you can define various CSS properties for the page elements. The CSS considers individual elements on the page as different boxes. Using CSS, you can place HTML elements within rectangular boxes and apply styles to them. This is known as the CSS box model. Thus, it becomes easy to apply a group of styles to individual boxes on the page. The CSS box model also helps to depict or highlight certain important content on the page. Generally, you need to define certain important properties such as margin, padding, width, height, and border for the boxes around the page elements.

In the Smart Learning Solutions website, you will enclose the office address in a box on the Contact page. This will showcase the address on the page.

In this exercise, in the first task, you will download the Visual Studio Code workspace from the Intranet and extract it.

In the second task, you will add code in contact.html to apply the CSS box model to the elements on the Contact page.

Learning Outcomes

After completing this exercise, you will be able to:

Apply CSS box model to elements in HTML pages

Comprehensive Learning

See the full benefits of our immersive learning experience with interactive courses and guided career paths.