CSS: Site Adaptability

Included in the course

What you'll learn

• Check the site's adaptability using online tools
• Use the unit of measure percentage to create responsive layouts
• Work with Flex when creating adaptive layouts
• Create media queries that allow you to use styles for different screen resolutions
• Work with different types of devices and create styles for them

Description

The course is devoted to adaptivity, the main element of the site. The adaptive layout allows layouts to be viewed comfortably on cell phones, tablets, and PC screens. This course will reveal the mechanisms of creating adaptive HTML markup using CSS mechanisms. You will learn about a powerful tool — media queries. They help to add CSS styles for different resolutions and screen types.

Course program

• 1

  Introduction

  Learning about the course on adaptive makeup

  theory
• 2

  Checking site adaptability

  Learning how to test your site on different devices

  theory
• 3

  Viewport

  Learning about the viewport meta tag and how it helps with adaptivity

  theory

  quiz

• 4

  Flexible elements

  Getting to know the layout using percentages

  theory

  quiz

  exercise

• 5

  Flex

  Learning about Flex's capabilities when creating adaptive layouts

  theory

  quiz

  exercise

• 6

  Media Queries

  Getting to know Media Queries, one of the most powerful tools for creating adaptive websites

  theory

  quiz

  exercise

• 7

  Media queries and other devices

  Learning about what devices you can apply your styles to

  theory

  quiz

  exercise

• 8

  Additional resources

  Some materials the Hexlet team have picked up. This will give you a more in-depth understanding of the topic

Challenges

We recommend working on these challenges after completing the course. They'll help you obtain more experience in programming and strengthen your new skills.