Using Viewports and Media Query
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.
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.
The following exam objective is covered in this lab:
5.4 Analyze styles that implement a simple responsive layout
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.
After completing this exercise, you will be able to:
Create a responsive HTML page using viewports and media queries
IT & Cybersecurity certification hands on practice labs and practice exams for certifications and skill development.
See the full benefits of our immersive learning experience with interactive courses and guided career paths.