Using Viewports and Media Query

Practice Labs Module
Time
3 minutes
Difficulty
Intermediate

Welcome to the "Using Viewports and Media Query" Practice Lab. In this module, you will be provided with the instructions and devices needed to develop your hands-on skills.

Join over 3 million cybersecurity professionals advancing their career
Sign up with
or

Already have an account? Sign In »

Overview

Introduction

Welcome to the Using Viewports and Media Query 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.4 Analyze styles that implement a simple responsive layout

Lab Duration

It will take approximately 20 minutes to complete this lab.

Exercise 1 - Implementing Responsive Web Design in HTML Pages

The concept of responsive web design was developed to enhance the look and feel of the HTML pages on all kinds of portable and mobile devices such as tablets, smartphones, laptops, and desktop systems. Based on the device screen size, the web page contents are adjusted and displayed accordingly. You can implement responsive web design features using HMTL tags and CSS in web pages.

In this exercise, the first task will be to download the Visual Studio Code workspace, extract the workspace file, and save the image files in the images folder.

In the second task, you will create a new responsive HTML help page named help.html in the sls workspace. You will use viewports and media queries to implement responsive web design features in help.html.

Learning Outcomes

After completing this exercise, you will be able to:

Create a responsive HTML page using viewports and media queries

Learning Partner
Comprehensive Learning

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