Register to get access to free programming courses with interactive exercises

Introduction CSS: Site Adaptability

Adaptive layout design is an integral part of modern development. When creating adaptive layouts, we change the design of the page depending on user behavior, screen size, and device orientation.

Previously, designers used a separate template to create a mobile version of a site, which was often loaded from a subdomain. This solution was difficult in terms of support for the site because you needed to do double the amount of work to create or remove elements: both for the main site and the mobile version. We can now save a lot of time and instead of giving the user a new layout, we can modify the current one.

This course will cover standard practices for creating adaptive websites:

  • flexible elements;
  • using Flex features;
  • using CSS media-queries;
  • creating breakpoints.

Adaptive layout

We'd like to use this introduction to emphasise a few points that'll make it easier to study this topic. Separation of adaptive and fluid layout design is a thing of the past. It used to be the thing to separate layouts according to specific screen resolutions, and completely change the CSS accordingly. The variety of different devices in today's world is too great for us to choose 3-5 specific resolutions and design layouts for them. You need to use as many approaches as possible and create a layout that will display well on all devices at all resolutions.

In this course, all approaches will be combined into one concept — adaptive layout.

Practice

Many of the lessons in this course will include a practice section with web view. It's a good idea to do more than just complete the task. Once you've completed the task successfully, try experimenting with the code and the features you've learned.

Practice segments in this course are built around screenshot testing. Unlike other courses, this one doesn't check against the values you specify, but rather takes a screenshot of the page with your styles and compares it to the screenshots from the teacher's solution. You can easily see how the page should look at different viewport resolutions.

You can see screenshots of the styles from the teacher's solution in the __tests_/_image_snapshots__.

Developer tools

Every modern browser has a special developer toolkit. In Google Chrome you can call it using the context menu, which has the option Inspect, or use the Ctrl+ Shift+I (Command+Option+I on Mac). key combination. In this panel, we're currently concerned with the Toggle Device Toolbar button. This will bring up a special view of the browser, within which you can specify the screen resolution and check the layout of the site.


Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Layout Designer icon
Profession
New Under development beginner
Layout with the latest CSS standards
start anytime 5 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.