<!DOCTYPE html>
<html class="h-100" data-bs-theme="light" data-mantine-color-scheme="light" lang="en" prefix="og: https://ogp.me/ns#">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<link crossorigin="true" href="https://cdn.hexlet.io" rel="preconnect">
<meta content="aa2vrdtq64dub8knuf83lwywit311w" name="facebook-domain-verification">
<link href="/favicon.ico" rel="icon" sizes="any">
<link href="/favicon.svg" rel="icon" type="image/svg+xml">
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
<link href="/manifest.webmanifest" rel="manifest">
<script>
//<![CDATA[
window.gon={};gon.ym_counter="25559621";gon.is_bot=true;gon.applications={};gon.current_user={"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false};gon.token="7dBba9Yx2zxf_vtk83au2YrOgPQPxuOymJL95Hb_wWG-FjZd91rg3Dj0BIxB6JkYhmQOr8PY-b46Fzf3OyMeug";gon.locale="en";gon.language="en";gon.theme="light";gon.rails_env="production";gon.mobile=false;gon.google={"analytics_key":"UA-1360700-51","optimize_key":"GTM-5QDVFPF"};gon.captcha={"google_v3_site_key":"6LenGbgZAAAAAM7HbrDbn5JlizCSzPcS767c9vaY","yandex_site_key":"ysc1_Vyob5ZPPUdPBsu0ykt8bVFdzsfpoVjQChLGl2b4g19647a89","verification_failed":null};gon.social_signin=false;gon.typoreporter_google_form_id="1FAIpQLScNwxM8rjQRRWqW5G6dn6-0NvLUblFemy7EvA9VsJ7Ov5wXqA";
//]]>
</script>
<meta charset="utf-8">
<title>Course «CSS: Layout on the Grid»: online education</title>
<meta name="description" content="Take the CSS: Layout on the Grid course at the Hexlet online school. Experienced mentors, practice on simulators, open-source projects in your portfolio. Individual and group online learning at Hexlet.">
<link rel="canonical" href="https://hexlet.io/courses/css-grid">
<meta property="og:description" content="Take the CSS: Layout on the Grid course at the Hexlet online school. Experienced mentors, practice on simulators, open-source projects in your portfolio. Individual and group online learning at Hexlet.
">
<meta property="og:title" content="Course «CSS: Layout on the Grid»: online education
">
<meta property="og:url" content="https://hexlet.io/courses/css-grid">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="swQnnG36Yb5QiRXiQn578uAzFR-NcOHi1yCKGsE0uPLgwkqqTJFaXjeD6grw4Ewz7JmbREFu--51pUAJjOhnKQ" />
<script src="/vite/assets/inertia-CgrHVkgd.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/preload-helper-C1cfMHAs.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-0bhwJkNI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ahoy-BXKrsWjp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/analytics-Du9ljYPK.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-V3hfk_CP.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/RootLayout-CUZzAr0T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Surface-DbDKujDz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-B-jV56Ol.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-DOJkeu70.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-ClTF9s_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/index.esm-DATLpQdV.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Modal-BhY0AP_c.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Textarea-P1s4q94S.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/exports-BsSGGK2I.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-Bfba02I7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-CYyKzrjQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-SJZekO2j.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-bo78L81P.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-BhqaZ6vG.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-DlXMvSuQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CFtMU8gd.js" as="script" crossorigin="anonymous">
<link rel="stylesheet" href="/vite/assets/application-BhDYOUva.css" />
<script src="/vite/assets/application-ZyVHkzwO.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/autocomplete-BokUl44d.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/createPopper-gQnwoPhY.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/js.cookie-CB1F2-VC.js" as="script" crossorigin="anonymous"><link rel="stylesheet" href="/vite/assets/application-BhDYOUva.css" media="screen" />
<!-- Google Tag Manager - deferred -->
<script>
// dataLayer stub сразу — пуши работают до загрузки скрипта
window.dataLayer = window.dataLayer || [];
// Сам скрипт — отложенно после load
window.addEventListener('load', function() {
setTimeout(function() {
dataLayer.push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
var j = document.createElement('script');
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-WK88TH';
document.head.appendChild(j);
}, 1500);
});
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe height="0" src="https://www.googletagmanager.com/ns.html?id=GTM-WK88TH" style="display:none;visibility:hidden" width="0"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<header class="sticky-top bg-body">
<nav class="navbar navbar-expand-lg">
<div class="container-xxl">
<a class="navbar-brand" href="/"><img alt="Hexlet logo" height="24" src="https://hexlet.io/vite/assets/logo_en_light-FS-yL6XB.svg" width="96">
</a><button aria-controls="collapsable" aria-expanded="false" aria-label="Menu" class="navbar-toggler border-0 mb-0 mt-1" data-bs-target="#collapsable" data-bs-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsable">
<ul class="navbar-nav mb-lg-0 mt-lg-1">
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
All courses
<span class="bi bi-chevron-down align-middle ms-1"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item d-flex py-2" href="/courses"><div class="fw-bold me-auto">Everything</div>
<div class="text-muted">8</div>
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Popular categories</b>
</li>
<li>
<a class="dropdown-item py-2" href="/courses_backend-development">Backend Development
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_devops">DevOps
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_frontend-development">Frontend Development
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_testing">Testing
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Popular courses</b>
</li>
<li>
<a class="dropdown-item py-2" href="/programs/frontend">Frontend Developer
</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
About Hexlet
<span class="bi bi-chevron-down align-middle"></span>
</button>
<ul class="dropdown-menu bg-body">
<li>
<a class="dropdown-item py-2" href="/pages/about">About company
</a></li>
<li>
<a class="dropdown-item py-2" href="/blog">Blog
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/hse-research" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.results">Results</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://career.hexlet.io" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.career">Career</span>
</span></li>
<li>
<a class="dropdown-item py-2" href="/testimonials">Testimonials
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://t.me/hexlet_help_bot" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.support">Support</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/referal-program/?promo_creative=priglasite-druzei&promo_name=referal-program&promo_position=promo_position&promo_start=010724&promo_type=link" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.referal_program">Referal Program</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/certificate" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.certificates">Certificates</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://hh.ru/employer/4307094" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.vacancies">Vacancies</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://b2b.hexlet.io" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.teams">Teams</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexly.ru/" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.college">College</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexlyschool.ru/" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.private_school">Private School</span>
</span></li>
</ul>
</li>
</ul>
<ul class="navbar-nav flex-lg-row align-items-lg-center gap-2 ms-auto">
<li>
<a class="nav-link" aria-label="Switch theme" href="/theme/switch?new_theme=dark"><span aria-hidden="true" class="bi bi-moon"></span>
</a></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="/u/new" role="button"><span>Sign up</span>
</span></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="https://hexlet.io/session/new" role="button"><span>Sign in</span>
</span></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="x-container-xxxl">
</div>
<main class="mb-6 min-vh-100 h-100">
<link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzMzUsInB1ciI6ImJsb2JfaWQifX0=--f8607de9d6d23daf38a4dc6c25bda62ecf665f95/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Hand%20coding-cuate.png"/><link rel="preload" as="image" href="/vite/assets/development-BVihs_d5.png"/><link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ODU4OSwicHVyIjoiYmxvYl9pZCJ9fQ==--2a4df319c27e67469d3cb2f82553cbec6d64e136/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"/><div id="app" data-page="{"component":"web/courses/show","props":{"errors":{},"locale":"en","language":"en","httpsHost":"https://hexlet.io","host":"hexlet.io","colorScheme":"light","auth":{"user":{"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false}},"cloudflareTurnstileSiteKey":"0x4AAAAAAA15KmeFXzd2H0Xo","vkIdClientId":"51586979","yandexIdClientId":null,"formAuthToken":"Oi4C3AQdGg0JF3Onj00iIZCd4qVDzKhkODwgqu-QQ0Vp6G_qJXYh7W4djE890xXgnDds_o_Ssmiaueq5okycng","course":{"start_lesson":{"exercise":null,"units":[{"id":8062,"name":"theory","url":"/courses/css-grid/lessons/intro/theory_unit"}],"links":[],"ordered_units":[{"id":8062,"name":"theory","url":"/courses/css-grid/lessons/intro/theory_unit"}],"id":3597,"slug":"intro","state":"approved","name":"Introduction","course_order":100,"goal":"Getting to know the Grid concept, the key points and differences from Flex","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Now you're acquainted with positioning and Flex. You might have noticed that with all the variety of tools available, it's not as easy to use these tools to create layouts directly as you'd like. By adding so many techniques, Flex has missed the most important feature — you cannot create a grid for a site quickly.\n\nWhen you want to create a good structure, you do additional nesting because Flex is essentially a one-dimensional system. We can easily manage something on either the **x-axis** or the **y-axis**. It helps to work with content but not with a page structure.\n\nFlex's creators intended to change layout standards, ridding developers of awkward positioning and endless suffering from Float. Even though it does that perfectly, there's still one main problem, what do you do with complex patterns? The number of Flex containers grew in proportion to the number of non-standard elements.\n\nHowever, managing all this got much more difficult. Without a structured web page grid all described in one place, everything is unbelievably fragile. It's liable to break faster than you can blink.\n\n**CSS Grid Layout** or just **often abbreviated to _Grid* is another powerful tool to solve this problem. Unlike Flex, CSS Grid Layout is a two-dimensional layout system for content on the page.\n\nIt is important to note that Grid doesn't replace Flex. These are two different modules that work perfectly together.\n\n### Practice\n\nMany of the lessons in this course will include a practice section with a web view. Don't stop at the bare minimum in practice. When you finish an assignment, have a go and experiment a little with the code and the features you've learned.\n\nDuring the course, you'll come across independent assignments. Also, there are code samples for you to study or to look for clues.\n\n### CodePen\n\nAnother opportunity to apply the skills you learn in the course is to use [CodePen](https://codepen.io). You can create your own **pen**, and use it to experiment with positioning.\n\nIn each lesson of the course, there'll be examples from **CodePen**. They're available for review, and you can make edits in real-time and monitor the result. Don't miss out on this opportunity.\n"},"id":342,"slug":"css-grid","challenges_count":5,"name":"CSS: Layout on the Grid","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"This course is dedicated to the CSS Grid Layout module, a technological tool for creating grids in CSS. After the Flex module arrived, there was a need to control elements in two axes simultaneously. The developers wanted to take the grid system used in print products for a hundred years. To do this, they used a table layout using Float and Flex. Each of these methods had limitations and development challenges. CSS Grid Layout appeared in 2011 and has acquired many features and approaches that make it easier to create layouts using CSS.","kind":"basic","updated_at":"2026-01-20T11:51:51.539Z","language":"html","duration_cache":18480,"skills":["The basic properties of CSS Grid Layout.","Create and manage the space within grids.","Manage the layout of HTML elements within a grid.","Adapt grids for different screen resolutions."],"keywords":[],"lessons_count":7,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ODU4OSwicHVyIjoiYmxvYl9pZCJ9fQ==--2a4df319c27e67469d3cb2f82553cbec6d64e136/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"courseMember":null,"questionsCount":23,"exercisesCount":3,"lessons":[{"ordered_units":[{"id":8062,"name":"theory","url":"/courses/css-grid/lessons/intro/theory_unit"}],"id":3597,"slug":"intro","state":"approved","name":"Introduction","course_order":100,"goal":"Getting to know the Grid concept, the key points and differences from Flex","exercise_id":null},{"ordered_units":[{"id":8063,"name":"theory","url":"/courses/css-grid/lessons/terminology/theory_unit"},{"id":8427,"name":"quiz","url":"/courses/css-grid/lessons/terminology/quiz_unit"}],"id":3598,"slug":"terminology","state":"approved","name":"Terminology","course_order":200,"goal":"Learning the concepts of grids and their components in CSS Grid Layout","exercise_id":null},{"ordered_units":[{"id":8064,"name":"theory","url":"/courses/css-grid/lessons/first-grid/theory_unit"},{"id":8428,"name":"quiz","url":"/courses/css-grid/lessons/first-grid/quiz_unit"},{"id":8378,"name":"exercise","url":"/courses/css-grid/lessons/first-grid/exercise_unit"}],"id":3599,"slug":"first-grid","state":"approved","name":"First grid","course_order":300,"goal":"Learning about the properties that allow you to create grids using CSS Grid Layout","exercise_id":2432},{"ordered_units":[{"id":8065,"name":"theory","url":"/courses/css-grid/lessons/element-position/theory_unit"},{"id":8429,"name":"quiz","url":"/courses/css-grid/lessons/element-position/quiz_unit"},{"id":8462,"name":"exercise","url":"/courses/css-grid/lessons/element-position/exercise_unit"}],"id":3600,"slug":"element-position","state":"approved","name":"Arrangement of elements in the grid","course_order":400,"goal":"Learning the properties that allow you to arbitrarily arrange elements within a grid","exercise_id":2433},{"ordered_units":[{"id":8066,"name":"theory","url":"/courses/css-grid/lessons/grid-property/theory_unit"},{"id":8430,"name":"quiz","url":"/courses/css-grid/lessons/grid-property/quiz_unit"},{"id":8379,"name":"exercise","url":"/courses/css-grid/lessons/grid-property/exercise_unit"}],"id":3601,"slug":"grid-property","state":"approved","name":"Working with a grid","course_order":500,"goal":"Learning about the indentation between strips and the alignment of the grid strips","exercise_id":2434},{"ordered_units":[{"id":8067,"name":"theory","url":"/courses/css-grid/lessons/implicit-grid/theory_unit"},{"id":8431,"name":"quiz","url":"/courses/css-grid/lessons/implicit-grid/quiz_unit"}],"id":3602,"slug":"implicit-grid","state":"approved","name":"Implicit grid","course_order":600,"goal":"Learning the differences between the explicit and implicit grid, grid-auto-rows and grid-auto-columns","exercise_id":null},{"ordered_units":[{"id":8068,"name":"theory","url":"/courses/css-grid/lessons/position-in-grid/theory_unit"},{"id":8432,"name":"quiz","url":"/courses/css-grid/lessons/position-in-grid/quiz_unit"}],"id":3603,"slug":"position-in-grid","state":"approved","name":"Positioning and Grid","course_order":700,"goal":"Studying the effect of positioning properties and z-index when used within a grid","exercise_id":null}],"challenges":[{"exercise":{"id":2444,"slug":"css_grid_instagram_exercise","name":"Instagram","state":"active","kind":"challenge","language":"html","locale":"en","has_web_view":true,"has_test_view":false,"reviewable":true,"readme":"Instagram is one of the most popular social networks for sharing photos. In this challenge, you implement one of the screens that appear when viewing new posts.\n\n\n\n---\n\nThe challenge does not involve using only CSS Grid. Now you know many different tools for positioning elements. Use the ones you see fit.\n\n---\nThe whole application can be divided into 4 sections:\n\n* Application header.\n* Section with stories.\n* Section with post.\n* Application footer.\n\n## Header\n\nThe application title uses the _GrandHotel_ font. This is the most similar font to the original, which can be found under a free license. The title is centered relative to the entire application and is 32 pixels in size with normal saturation.\n\n* Padding between icons: 15px\n* Icon size: 25x25. Use the available classes in the style file to create icons. All icons in layout are buttons. This is the most accurate option in terms of accessibility, since each button performs a specific action, and is not a link. Use the `aria-label` attribute to describe icons. The value of this attribute will be read by screen readers.\n* Header background: `#fafafa`\n* Padding: 20 pixels vertically and 15 pixels horizontally.\n\n## Stories section\n\n* Padding between stories: 20px\n* Section padding: 10px\n* There is a border at the top and bottom of the section. Take advantage of the available atomic classes.\n* Each story box is a button and is 65 pixels wide. Make sure text overflow works correctly. The text has a top padding of 5 pixels and a font size of 12 pixels. Font weight: 500.\n* Image padding: 5px\n* Border color: `#e0e0e0`.\n\nNames and avatars:\n\n* _Your story_ — avatar_1\n* _alex_-avatar_2\n* _jediAcademy_-avatar_3\n* _PythonCool_-avatar_4\n\nAll images are in the _assets/images_ directory\n\n## Post section\n\nThe section can be divided into three logical parts:\n\n* User section.\n* Image.\n* Footer with interaction buttons and text.\n\nThe section has a font size of 13 pixels. Padding: 15px vertically and 10px horizontally.\n\n### User section\n\n* Avatar Width: 35px\n* Border: 1px with color `#e0e0e0`\n* Right padding: 10px\n* More Actions button is 15px wide\n\n### Footer\n\n* Bottom border: 1px with color `#c6c6c8`\n* Font size: 13px\n* Padding: 20 pixels vertically and 15 pixels horizontally\n* Padding between buttons: 20px\n* Indent from the bottom of the buttons: 20px\n\nTexts:\n\n* **Likes: 2,165**\n* **hexlet_code** And soon we are opening the photography course. Sign up\n\nIndent between texts: standard.\n\n## Application Footer\n\nThere are 5 buttons in the footer with equal distances between them.\n\n* Section color: `#fafafa`\n* Padding: 20px each\n\n## Hints\n\n* Use the `<button>` tag to create buttons. To make these buttons have basic accessibility, add the `aria-label` attribute with a description of the action.\n* Pay attention to available classes in _app.css_. It contains all available fonts and paths to icons.\n* Icons are located in the _assets/icons_ directory. Check with them.\n* Add headings to sections. This will help with validation. To hide unnecessary visual text, use the _sr-only_ class","prepared_readme":"Instagram is one of the most popular social networks for sharing photos. In this challenge, you implement one of the screens that appear when viewing new posts.\n\n\n\n---\n\nThe challenge does not involve using only CSS Grid. Now you know many different tools for positioning elements. Use the ones you see fit.\n\n---\nThe whole application can be divided into 4 sections:\n\n* Application header.\n* Section with stories.\n* Section with post.\n* Application footer.\n\n## Header\n\nThe application title uses the _GrandHotel_ font. This is the most similar font to the original, which can be found under a free license. The title is centered relative to the entire application and is 32 pixels in size with normal saturation.\n\n* Padding between icons: 15px\n* Icon size: 25x25. Use the available classes in the style file to create icons. All icons in layout are buttons. This is the most accurate option in terms of accessibility, since each button performs a specific action, and is not a link. Use the `aria-label` attribute to describe icons. The value of this attribute will be read by screen readers.\n* Header background: `#fafafa`\n* Padding: 20 pixels vertically and 15 pixels horizontally.\n\n## Stories section\n\n* Padding between stories: 20px\n* Section padding: 10px\n* There is a border at the top and bottom of the section. Take advantage of the available atomic classes.\n* Each story box is a button and is 65 pixels wide. Make sure text overflow works correctly. The text has a top padding of 5 pixels and a font size of 12 pixels. Font weight: 500.\n* Image padding: 5px\n* Border color: `#e0e0e0`.\n\nNames and avatars:\n\n* _Your story_ — avatar_1\n* _alex_-avatar_2\n* _jediAcademy_-avatar_3\n* _PythonCool_-avatar_4\n\nAll images are in the _assets/images_ directory\n\n## Post section\n\nThe section can be divided into three logical parts:\n\n* User section.\n* Image.\n* Footer with interaction buttons and text.\n\nThe section has a font size of 13 pixels. Padding: 15px vertically and 10px horizontally.\n\n### User section\n\n* Avatar Width: 35px\n* Border: 1px with color `#e0e0e0`\n* Right padding: 10px\n* More Actions button is 15px wide\n\n### Footer\n\n* Bottom border: 1px with color `#c6c6c8`\n* Font size: 13px\n* Padding: 20 pixels vertically and 15 pixels horizontally\n* Padding between buttons: 20px\n* Indent from the bottom of the buttons: 20px\n\nTexts:\n\n* **Likes: 2,165**\n* **hexlet_code** And soon we are opening the photography course. Sign up\n\nIndent between texts: standard.\n\n## Application Footer\n\nThere are 5 buttons in the footer with equal distances between them.\n\n* Section color: `#fafafa`\n* Padding: 20px each\n\n## Hints\n\n* Use the `<button>` tag to create buttons. To make these buttons have basic accessibility, add the `aria-label` attribute with a description of the action.\n* Pay attention to available classes in _app.css_. It contains all available fonts and paths to icons.\n* Icons are located in the _assets/icons_ directory. Check with them.\n* Add headings to sections. This will help with validation. To hide unnecessary visual text, use the _sr-only_ class","has_solution":true,"entity_name":"Instagram"},"course":{"start_lesson":{"exercise":null,"units":[{"id":8062,"name":"theory","url":"/courses/css-grid/lessons/intro/theory_unit"}],"links":[],"ordered_units":[{"id":8062,"name":"theory","url":"/courses/css-grid/lessons/intro/theory_unit"}],"id":3597,"slug":"intro","state":"approved","name":"Introduction","course_order":100,"goal":"Getting to know the Grid concept, the key points and differences from Flex","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Now you're acquainted with positioning and Flex. You might have noticed that with all the variety of tools available, it's not as easy to use these tools to create layouts directly as you'd like. By adding so many techniques, Flex has missed the most important feature — you cannot create a grid for a site quickly.\n\nWhen you want to create a good structure, you do additional nesting because Flex is essentially a one-dimensional system. We can easily manage something on either the **x-axis** or the **y-axis**. It helps to work with content but not with a page structure.\n\nFlex's creators intended to change layout standards, ridding developers of awkward positioning and endless suffering from Float. Even though it does that perfectly, there's still one main problem, what do you do with complex patterns? The number of Flex containers grew in proportion to the number of non-standard elements.\n\nHowever, managing all this got much more difficult. Without a structured web page grid all described in one place, everything is unbelievably fragile. It's liable to break faster than you can blink.\n\n**CSS Grid Layout** or just **often abbreviated to _Grid* is another powerful tool to solve this problem. Unlike Flex, CSS Grid Layout is a two-dimensional layout system for content on the page.\n\nIt is important to note that Grid doesn't replace Flex. These are two different modules that work perfectly together.\n\n### Practice\n\nMany of the lessons in this course will include a practice section with a web view. Don't stop at the bare minimum in practice. When you finish an assignment, have a go and experiment a little with the code and the features you've learned.\n\nDuring the course, you'll come across independent assignments. Also, there are code samples for you to study or to look for clues.\n\n### CodePen\n\nAnother opportunity to apply the skills you learn in the course is to use [CodePen](https://codepen.io). You can create your own **pen**, and use it to experiment with positioning.\n\nIn each lesson of the course, there'll be examples from **CodePen**. They're available for review, and you can make edits in real-time and monitor the result. Don't miss out on this opportunity.\n"},"id":342,"slug":"css-grid","challenges_count":5,"name":"CSS: Layout on the Grid","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"This course is dedicated to the CSS Grid Layout module, a technological tool for creating grids in CSS. After the Flex module arrived, there was a need to control elements in two axes simultaneously. The developers wanted to take the grid system used in print products for a hundred years. To do this, they used a table layout using Float and Flex. Each of these methods had limitations and development challenges. CSS Grid Layout appeared in 2011 and has acquired many features and approaches that make it easier to create layouts using CSS.","kind":"basic","updated_at":"2026-01-20T11:51:51.539Z","language":"html","duration_cache":18480,"skills":["The basic properties of CSS Grid Layout.","Create and manage the space within grids.","Manage the layout of HTML elements within a grid.","Adapt grids for different screen resolutions."],"keywords":[],"lessons_count":7,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ODU4OSwicHVyIjoiYmxvYl9pZCJ9fQ==--2a4df319c27e67469d3cb2f82553cbec6d64e136/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":686,"slug":"css_grid_instagram_exercise","percent_of_success":"-"},{"exercise":{"id":2445,"slug":"css_grid_keyboard_exercise","name":"keyboard component","state":"active","kind":"challenge","language":"html","locale":"en","has_web_view":true,"has_test_view":false,"reviewable":true,"readme":"Create a keyboard component using the capabilities of the _CSS Flex_ and _CSS Grid_ modules\n\n\n\nIn this challenge, you have access to the layout of the top row of the keyboard and helper classes. Based on them, finalize the component in accordance with the layout.\n\n## Keys\n\n* By default, each key occupies 2 columns inside the grid\n* Text inside keys must be centered on all axes\n* Spacing between keys: `10px`\n* Mnemonics that will help to mark up buttons:\n * `<`: `&lt;`\n * `>`: `&gt;`\n * `ᐊ`: `&#5130;`\n * `ᐃ`: `&#5123;`\n * `ᐁ`: `&#5121;`\n * `ᐅ`: `&#5125;`\n\nBased on the layout of the keys in the template, you will need to create additional helper classes like `span-*`\n\n## Hints\n\n* Before you start, calculate the optimal number of columns within the grid. The size of each column will be `1fr`. For calculations, analyze the first row, which is available in the _index.html_ file\n* The classes `p-0`, `border-none`, and `w-100` will help you lay out the up and down keys\n","prepared_readme":"Create a keyboard component using the capabilities of the _CSS Flex_ and _CSS Grid_ modules\n\n\n\nIn this challenge, you have access to the layout of the top row of the keyboard and helper classes. Based on them, finalize the component in accordance with the layout.\n\n## Keys\n\n* By default, each key occupies 2 columns inside the grid\n* Text inside keys must be centered on all axes\n* Spacing between keys: `10px`\n* Mnemonics that will help to mark up buttons:\n * `<`: `&lt;`\n * `>`: `&gt;`\n * `ᐊ`: `&#5130;`\n * `ᐃ`: `&#5123;`\n * `ᐁ`: `&#5121;`\n * `ᐅ`: `&#5125;`\n\nBased on the layout of the keys in the template, you will need to create additional helper classes like `span-*`\n\n## Hints\n\n* Before you start, calculate the optimal number of columns within the grid. The size of each column will be `1fr`. For calculations, analyze the first row, which is available in the _index.html_ file\n* The classes `p-0`, `border-none`, and `w-100` will help you lay out the up and down keys\n","has_solution":true,"entity_name":"keyboard component"},"course":{"start_lesson":{"exercise":null,"units":[{"id":8062,"name":"theory","url":"/courses/css-grid/lessons/intro/theory_unit"}],"links":[],"ordered_units":[{"id":8062,"name":"theory","url":"/courses/css-grid/lessons/intro/theory_unit"}],"id":3597,"slug":"intro","state":"approved","name":"Introduction","course_order":100,"goal":"Getting to know the Grid concept, the key points and differences from Flex","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Now you're acquainted with positioning and Flex. You might have noticed that with all the variety of tools available, it's not as easy to use these tools to create layouts directly as you'd like. By adding so many techniques, Flex has missed the most important feature — you cannot create a grid for a site quickly.\n\nWhen you want to create a good structure, you do additional nesting because Flex is essentially a one-dimensional system. We can easily manage something on either the **x-axis** or the **y-axis**. It helps to work with content but not with a page structure.\n\nFlex's creators intended to change layout standards, ridding developers of awkward positioning and endless suffering from Float. Even though it does that perfectly, there's still one main problem, what do you do with complex patterns? The number of Flex containers grew in proportion to the number of non-standard elements.\n\nHowever, managing all this got much more difficult. Without a structured web page grid all described in one place, everything is unbelievably fragile. It's liable to break faster than you can blink.\n\n**CSS Grid Layout** or just **often abbreviated to _Grid* is another powerful tool to solve this problem. Unlike Flex, CSS Grid Layout is a two-dimensional layout system for content on the page.\n\nIt is important to note that Grid doesn't replace Flex. These are two different modules that work perfectly together.\n\n### Practice\n\nMany of the lessons in this course will include a practice section with a web view. Don't stop at the bare minimum in practice. When you finish an assignment, have a go and experiment a little with the code and the features you've learned.\n\nDuring the course, you'll come across independent assignments. Also, there are code samples for you to study or to look for clues.\n\n### CodePen\n\nAnother opportunity to apply the skills you learn in the course is to use [CodePen](https://codepen.io). You can create your own **pen**, and use it to experiment with positioning.\n\nIn each lesson of the course, there'll be examples from **CodePen**. They're available for review, and you can make edits in real-time and monitor the result. Don't miss out on this opportunity.\n"},"id":342,"slug":"css-grid","challenges_count":5,"name":"CSS: Layout on the Grid","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"This course is dedicated to the CSS Grid Layout module, a technological tool for creating grids in CSS. After the Flex module arrived, there was a need to control elements in two axes simultaneously. The developers wanted to take the grid system used in print products for a hundred years. To do this, they used a table layout using Float and Flex. Each of these methods had limitations and development challenges. CSS Grid Layout appeared in 2011 and has acquired many features and approaches that make it easier to create layouts using CSS.","kind":"basic","updated_at":"2026-01-20T11:51:51.539Z","language":"html","duration_cache":18480,"skills":["The basic properties of CSS Grid Layout.","Create and manage the space within grids.","Manage the layout of HTML elements within a grid.","Adapt grids for different screen resolutions."],"keywords":[],"lessons_count":7,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ODU4OSwicHVyIjoiYmxvYl9pZCJ9fQ==--2a4df319c27e67469d3cb2f82553cbec6d64e136/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":687,"slug":"css_grid_keyboard_exercise","percent_of_success":"-"},{"exercise":{"id":2443,"slug":"css_grid_future_poster_exercise","name":"Futuristic poster","state":"active","kind":"challenge","language":"html","locale":"en","has_web_view":true,"has_test_view":false,"reviewable":true,"readme":"Complete the futuristic poster presented on the mockup\n\n\n\n## Basic styles\n\n### Poster\n\n* Grid consists of 6 columns and 6 rows with automatic size\n* Poster aligned to the center of the page\n* Poster Width: 980px\n* Poster height: full viewport height\n* Color of each cell: `#15141c`\n* Cells overlaying the image have the color `#673ab7` and a transparency value of 60%.\n\n### The first level heading\n\n* The first level heading \"The Future Is Now\" is three cells wide\n* Font size: 4em\n* Padding: 50px left and right\n\n### The second level heading Hexlet\n\n* Font size: 2em\n* Padding: 50px left and right\n\nThe image and font can be found in the _assets_ directory. For the background image, use the following styles:\n\n```\nbackground-position-x: center;\nbackground-size: cover;\n```\n\nInclude `Roboto` font in _app.css_ file\n\nThe finished layout grid looks like this:\n\n\n\nThe image only illustrates the `future-poster` area, not the entire page","prepared_readme":"Complete the futuristic poster presented on the mockup\n\n\n\n## Basic styles\n\n### Poster\n\n* Grid consists of 6 columns and 6 rows with automatic size\n* Poster aligned to the center of the page\n* Poster Width: 980px\n* Poster height: full viewport height\n* Color of each cell: `#15141c`\n* Cells overlaying the image have the color `#673ab7` and a transparency value of 60%.\n\n### The first level heading\n\n* The first level heading \"The Future Is Now\" is three cells wide\n* Font size: 4em\n* Padding: 50px left and right\n\n### The second level heading Hexlet\n\n* Font size: 2em\n* Padding: 50px left and right\n\nThe image and font can be found in the _assets_ directory. For the background image, use the following styles:\n\n```\nbackground-position-x: center;\nbackground-size: cover;\n```\n\nInclude `Roboto` font in _app.css_ file\n\nThe finished layout grid looks like this:\n\n\n\nThe image only illustrates the `future-poster` area, not the entire page","has_solution":true,"entity_name":"Futuristic poster"},"course":{"start_lesson":{"exercise":null,"units":[{"id":8062,"name":"theory","url":"/courses/css-grid/lessons/intro/theory_unit"}],"links":[],"ordered_units":[{"id":8062,"name":"theory","url":"/courses/css-grid/lessons/intro/theory_unit"}],"id":3597,"slug":"intro","state":"approved","name":"Introduction","course_order":100,"goal":"Getting to know the Grid concept, the key points and differences from Flex","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Now you're acquainted with positioning and Flex. You might have noticed that with all the variety of tools available, it's not as easy to use these tools to create layouts directly as you'd like. By adding so many techniques, Flex has missed the most important feature — you cannot create a grid for a site quickly.\n\nWhen you want to create a good structure, you do additional nesting because Flex is essentially a one-dimensional system. We can easily manage something on either the **x-axis** or the **y-axis**. It helps to work with content but not with a page structure.\n\nFlex's creators intended to change layout standards, ridding developers of awkward positioning and endless suffering from Float. Even though it does that perfectly, there's still one main problem, what do you do with complex patterns? The number of Flex containers grew in proportion to the number of non-standard elements.\n\nHowever, managing all this got much more difficult. Without a structured web page grid all described in one place, everything is unbelievably fragile. It's liable to break faster than you can blink.\n\n**CSS Grid Layout** or just **often abbreviated to _Grid* is another powerful tool to solve this problem. Unlike Flex, CSS Grid Layout is a two-dimensional layout system for content on the page.\n\nIt is important to note that Grid doesn't replace Flex. These are two different modules that work perfectly together.\n\n### Practice\n\nMany of the lessons in this course will include a practice section with a web view. Don't stop at the bare minimum in practice. When you finish an assignment, have a go and experiment a little with the code and the features you've learned.\n\nDuring the course, you'll come across independent assignments. Also, there are code samples for you to study or to look for clues.\n\n### CodePen\n\nAnother opportunity to apply the skills you learn in the course is to use [CodePen](https://codepen.io). You can create your own **pen**, and use it to experiment with positioning.\n\nIn each lesson of the course, there'll be examples from **CodePen**. They're available for review, and you can make edits in real-time and monitor the result. Don't miss out on this opportunity.\n"},"id":342,"slug":"css-grid","challenges_count":5,"name":"CSS: Layout on the Grid","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"This course is dedicated to the CSS Grid Layout module, a technological tool for creating grids in CSS. After the Flex module arrived, there was a need to control elements in two axes simultaneously. The developers wanted to take the grid system used in print products for a hundred years. To do this, they used a table layout using Float and Flex. Each of these methods had limitations and development challenges. CSS Grid Layout appeared in 2011 and has acquired many features and approaches that make it easier to create layouts using CSS.","kind":"basic","updated_at":"2026-01-20T11:51:51.539Z","language":"html","duration_cache":18480,"skills":["The basic properties of CSS Grid Layout.","Create and manage the space within grids.","Manage the layout of HTML elements within a grid.","Adapt grids for different screen resolutions."],"keywords":[],"lessons_count":7,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ODU4OSwicHVyIjoiYmxvYl9pZCJ9fQ==--2a4df319c27e67469d3cb2f82553cbec6d64e136/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":685,"slug":"css_grid_future_poster_exercise","percent_of_success":"-"},{"exercise":{"id":2442,"slug":"css_grid_neoplastitsizm_exercise","name":"Neoplasticism","state":"active","kind":"challenge","language":"html","locale":"en","has_web_view":true,"has_test_view":false,"reviewable":true,"readme":"Neoplasticism is one of the concepts of geometric abstractionism. Its founder is the Dutch artist Pieter Mondriaan. In this artistic direction, geometric shapes, lines and basic colors of the spectrum became the main elements. This makes neoplasticism associated to the works of Kazimir Malevich and his Suprematism, as well as to Wassily Kandinsky.\n\nIn this challenge, you have to reproduce a work that is written in the style of Piet Mondrian's work. The final result will be the following layout:\n\n\n\nAll the necessary input data for building the layout is given in the _app.css_ file. Your task is to fit the entire layout into the given frames. This ensures that the original layout is repeated. You must choose the number of rows and columns yourself.","prepared_readme":"Neoplasticism is one of the concepts of geometric abstractionism. Its founder is the Dutch artist Pieter Mondriaan. In this artistic direction, geometric shapes, lines and basic colors of the spectrum became the main elements. This makes neoplasticism associated to the works of Kazimir Malevich and his Suprematism, as well as to Wassily Kandinsky.\n\nIn this challenge, you have to reproduce a work that is written in the style of Piet Mondrian's work. The final result will be the following layout:\n\n\n\nAll the necessary input data for building the layout is given in the _app.css_ file. Your task is to fit the entire layout into the given frames. This ensures that the original layout is repeated. You must choose the number of rows and columns yourself.","has_solution":true,"entity_name":"Neoplasticism"},"course":{"start_lesson":{"exercise":null,"units":[{"id":8062,"name":"theory","url":"/courses/css-grid/lessons/intro/theory_unit"}],"links":[],"ordered_units":[{"id":8062,"name":"theory","url":"/courses/css-grid/lessons/intro/theory_unit"}],"id":3597,"slug":"intro","state":"approved","name":"Introduction","course_order":100,"goal":"Getting to know the Grid concept, the key points and differences from Flex","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Now you're acquainted with positioning and Flex. You might have noticed that with all the variety of tools available, it's not as easy to use these tools to create layouts directly as you'd like. By adding so many techniques, Flex has missed the most important feature — you cannot create a grid for a site quickly.\n\nWhen you want to create a good structure, you do additional nesting because Flex is essentially a one-dimensional system. We can easily manage something on either the **x-axis** or the **y-axis**. It helps to work with content but not with a page structure.\n\nFlex's creators intended to change layout standards, ridding developers of awkward positioning and endless suffering from Float. Even though it does that perfectly, there's still one main problem, what do you do with complex patterns? The number of Flex containers grew in proportion to the number of non-standard elements.\n\nHowever, managing all this got much more difficult. Without a structured web page grid all described in one place, everything is unbelievably fragile. It's liable to break faster than you can blink.\n\n**CSS Grid Layout** or just **often abbreviated to _Grid* is another powerful tool to solve this problem. Unlike Flex, CSS Grid Layout is a two-dimensional layout system for content on the page.\n\nIt is important to note that Grid doesn't replace Flex. These are two different modules that work perfectly together.\n\n### Practice\n\nMany of the lessons in this course will include a practice section with a web view. Don't stop at the bare minimum in practice. When you finish an assignment, have a go and experiment a little with the code and the features you've learned.\n\nDuring the course, you'll come across independent assignments. Also, there are code samples for you to study or to look for clues.\n\n### CodePen\n\nAnother opportunity to apply the skills you learn in the course is to use [CodePen](https://codepen.io). You can create your own **pen**, and use it to experiment with positioning.\n\nIn each lesson of the course, there'll be examples from **CodePen**. They're available for review, and you can make edits in real-time and monitor the result. Don't miss out on this opportunity.\n"},"id":342,"slug":"css-grid","challenges_count":5,"name":"CSS: Layout on the Grid","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"This course is dedicated to the CSS Grid Layout module, a technological tool for creating grids in CSS. After the Flex module arrived, there was a need to control elements in two axes simultaneously. The developers wanted to take the grid system used in print products for a hundred years. To do this, they used a table layout using Float and Flex. Each of these methods had limitations and development challenges. CSS Grid Layout appeared in 2011 and has acquired many features and approaches that make it easier to create layouts using CSS.","kind":"basic","updated_at":"2026-01-20T11:51:51.539Z","language":"html","duration_cache":18480,"skills":["The basic properties of CSS Grid Layout.","Create and manage the space within grids.","Manage the layout of HTML elements within a grid.","Adapt grids for different screen resolutions."],"keywords":[],"lessons_count":7,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ODU4OSwicHVyIjoiYmxvYl9pZCJ9fQ==--2a4df319c27e67469d3cb2f82553cbec6d64e136/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":684,"slug":"css_grid_neoplastitsizm_exercise","percent_of_success":"-"},{"exercise":{"id":2441,"slug":"css_grid_swiss_poster_exercise","name":"Swiss poster","state":"active","kind":"challenge","language":"html","locale":"en","has_web_view":true,"has_test_view":false,"reviewable":true,"readme":"International Typographic Style, also known as \"Swiss Style\", is one of the most famous trends in graphic design. It is distinguished by rigor in typing, building on grids and ease of reading. Most often, these are asymmetrical layouts with left-aligned text and sans-serif fonts. Also, posters often have slanted elements.\n\nIn this challenge, you'll have to make a Swiss poster inspired by Mike Joyce's work. The final result of the challenge will be the following layout:\n\n\n\nCreate layout and styles. The main project settings can be found in the variables that are in the _app.css_ file\n\nBasic poster styles:\n\n* One line height: **25vh**. The `vh` unit is a percentage of the _viewport_ height.\n* Blue line height: two normal line heights. The line starts from the middle of the orange line vertically.\n* Distance between columns: **40px** vertically and **55px** horizontally.\n* The poster uses a 5-column system. Column width: **85px**.\n* To blend colors, use the `opacity` property with a value of **0.7**.\n\nLeft text:\n\n```\n4 weekends\nwith guest bands\n```\n\nRight text:\n\n```\nJanuary 12, 17, 18, 24, 25\nplus sunday february 2 1975\n```\n\nTitle:\n\n```\ntelevision\n```\n\n## Hints\n\n* In this challenge, the skills to positioning inside a grid container will come in handy.\n* Analyze layout. Find the place where the grid starts.","prepared_readme":"International Typographic Style, also known as \"Swiss Style\", is one of the most famous trends in graphic design. It is distinguished by rigor in typing, building on grids and ease of reading. Most often, these are asymmetrical layouts with left-aligned text and sans-serif fonts. Also, posters often have slanted elements.\n\nIn this challenge, you'll have to make a Swiss poster inspired by Mike Joyce's work. The final result of the challenge will be the following layout:\n\n\n\nCreate layout and styles. The main project settings can be found in the variables that are in the _app.css_ file\n\nBasic poster styles:\n\n* One line height: **25vh**. The `vh` unit is a percentage of the _viewport_ height.\n* Blue line height: two normal line heights. The line starts from the middle of the orange line vertically.\n* Distance between columns: **40px** vertically and **55px** horizontally.\n* The poster uses a 5-column system. Column width: **85px**.\n* To blend colors, use the `opacity` property with a value of **0.7**.\n\nLeft text:\n\n```\n4 weekends\nwith guest bands\n```\n\nRight text:\n\n```\nJanuary 12, 17, 18, 24, 25\nplus sunday february 2 1975\n```\n\nTitle:\n\n```\ntelevision\n```\n\n## Hints\n\n* In this challenge, the skills to positioning inside a grid container will come in handy.\n* Analyze layout. Find the place where the grid starts.","has_solution":true,"entity_name":"Swiss poster"},"course":{"start_lesson":{"exercise":null,"units":[{"id":8062,"name":"theory","url":"/courses/css-grid/lessons/intro/theory_unit"}],"links":[],"ordered_units":[{"id":8062,"name":"theory","url":"/courses/css-grid/lessons/intro/theory_unit"}],"id":3597,"slug":"intro","state":"approved","name":"Introduction","course_order":100,"goal":"Getting to know the Grid concept, the key points and differences from Flex","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Now you're acquainted with positioning and Flex. You might have noticed that with all the variety of tools available, it's not as easy to use these tools to create layouts directly as you'd like. By adding so many techniques, Flex has missed the most important feature — you cannot create a grid for a site quickly.\n\nWhen you want to create a good structure, you do additional nesting because Flex is essentially a one-dimensional system. We can easily manage something on either the **x-axis** or the **y-axis**. It helps to work with content but not with a page structure.\n\nFlex's creators intended to change layout standards, ridding developers of awkward positioning and endless suffering from Float. Even though it does that perfectly, there's still one main problem, what do you do with complex patterns? The number of Flex containers grew in proportion to the number of non-standard elements.\n\nHowever, managing all this got much more difficult. Without a structured web page grid all described in one place, everything is unbelievably fragile. It's liable to break faster than you can blink.\n\n**CSS Grid Layout** or just **often abbreviated to _Grid* is another powerful tool to solve this problem. Unlike Flex, CSS Grid Layout is a two-dimensional layout system for content on the page.\n\nIt is important to note that Grid doesn't replace Flex. These are two different modules that work perfectly together.\n\n### Practice\n\nMany of the lessons in this course will include a practice section with a web view. Don't stop at the bare minimum in practice. When you finish an assignment, have a go and experiment a little with the code and the features you've learned.\n\nDuring the course, you'll come across independent assignments. Also, there are code samples for you to study or to look for clues.\n\n### CodePen\n\nAnother opportunity to apply the skills you learn in the course is to use [CodePen](https://codepen.io). You can create your own **pen**, and use it to experiment with positioning.\n\nIn each lesson of the course, there'll be examples from **CodePen**. They're available for review, and you can make edits in real-time and monitor the result. Don't miss out on this opportunity.\n"},"id":342,"slug":"css-grid","challenges_count":5,"name":"CSS: Layout on the Grid","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"This course is dedicated to the CSS Grid Layout module, a technological tool for creating grids in CSS. After the Flex module arrived, there was a need to control elements in two axes simultaneously. The developers wanted to take the grid system used in print products for a hundred years. To do this, they used a table layout using Float and Flex. Each of these methods had limitations and development challenges. CSS Grid Layout appeared in 2011 and has acquired many features and approaches that make it easier to create layouts using CSS.","kind":"basic","updated_at":"2026-01-20T11:51:51.539Z","language":"html","duration_cache":18480,"skills":["The basic properties of CSS Grid Layout.","Create and manage the space within grids.","Manage the layout of HTML elements within a grid.","Adapt grids for different screen resolutions."],"keywords":[],"lessons_count":7,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ODU4OSwicHVyIjoiYmxvYl9pZCJ9fQ==--2a4df319c27e67469d3cb2f82553cbec6d64e136/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":683,"slug":"css_grid_swiss_poster_exercise","percent_of_success":"-"}],"recommendedLandings":[{"stack":{"id":142,"slug":"layout-designer-positioning","title":"Position CSS","audience":"for_programmers","start_type":"anytime","pricing_model":"subscription","priority":"medium","kind":"track","state":"published","stack_state":"finished","order":null,"duration_in_months":2},"id":239,"slug":"layout-designer-positioning","title":"Position CSS","subtitle":"Skill in creating responsive interfaces for building convenient, functional solutions across a wide range of devices","subtitle_for_lists":"","locale":"en","current":true,"duration_in_months_text":"2 months","stack_slug":"layout-designer-positioning","price_text":"from $49","duration_text":"2 months","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzMzUsInB1ciI6ImJsb2JfaWQifX0=--f8607de9d6d23daf38a4dc6c25bda62ecf665f95/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Hand%20coding-cuate.png"}]},"url":"/courses/css-grid","version":"1656487db0d1dd5f33634fe1070e57e55135cbeb","encryptHistory":false,"clearHistory":false}"><style data-mantine-styles="true">:root, :host{--mantine-font-family: Arial, sans-serif;--mantine-font-family-headings: Arial, sans-serif;--mantine-heading-font-weight: normal;--mantine-radius-default: 0rem;--mantine-primary-color-filled: var(--mantine-color-indigo-filled);--mantine-primary-color-filled-hover: var(--mantine-color-indigo-filled-hover);--mantine-primary-color-light: var(--mantine-color-indigo-light);--mantine-primary-color-light-hover: var(--mantine-color-indigo-light-hover);--mantine-primary-color-light-color: var(--mantine-color-indigo-light-color);--mantine-spacing-xxl: calc(4rem * var(--mantine-scale));--mantine-font-size-xs: 12px;--mantine-font-size-sm: 14px;--mantine-font-size-md: 16px;--mantine-font-size-lg: clamp(16.0000px, calc(15.2727px + 0.2273vw), 18.0000px);--mantine-font-size-xl: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-display-3: clamp(32.0000px, calc(26.1818px + 1.8182vw), 48.0000px);--mantine-font-size-display-2: clamp(36.0000px, calc(25.8182px + 3.1818vw), 64.0000px);--mantine-font-size-display-1: clamp(40.0000px, calc(25.4545px + 4.5455vw), 80.0000px);--mantine-font-size-h1: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-font-size-h2: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-font-size-h3: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-font-size-h4: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-font-size-h5: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-h6: 1rem;--mantine-primary-color-0: var(--mantine-color-indigo-0);--mantine-primary-color-1: var(--mantine-color-indigo-1);--mantine-primary-color-2: var(--mantine-color-indigo-2);--mantine-primary-color-3: var(--mantine-color-indigo-3);--mantine-primary-color-4: var(--mantine-color-indigo-4);--mantine-primary-color-5: var(--mantine-color-indigo-5);--mantine-primary-color-6: var(--mantine-color-indigo-6);--mantine-primary-color-7: var(--mantine-color-indigo-7);--mantine-primary-color-8: var(--mantine-color-indigo-8);--mantine-primary-color-9: var(--mantine-color-indigo-9);--mantine-color-red-0: #ffeaea;--mantine-color-red-1: #fed4d4;--mantine-color-red-2: #f4a7a8;--mantine-color-red-3: #ec7878;--mantine-color-red-4: #e55050;--mantine-color-red-5: #e03131;--mantine-color-red-6: #e02829;--mantine-color-red-7: #c71a1c;--mantine-color-red-8: #b21218;--mantine-color-red-9: #9c0411;--mantine-color-violet-0: #fce9ff;--mantine-color-violet-1: #f1cfff;--mantine-color-violet-2: #e09bff;--mantine-color-violet-3: #d16fff;--mantine-color-violet-4: #be37fe;--mantine-color-violet-5: #b51afe;--mantine-color-violet-6: #b009ff;--mantine-color-violet-7: #9b00e4;--mantine-color-violet-8: #8a00cc;--mantine-color-violet-9: #7800b3;--mantine-color-indigo-0: #edecff;--mantine-color-indigo-1: #d6d5fe;--mantine-color-indigo-2: #aaa9f4;--mantine-color-indigo-3: #7b79eb;--mantine-color-indigo-4: #5451e4;--mantine-color-indigo-5: #3b37e0;--mantine-color-indigo-6: #2d2adf;--mantine-color-indigo-7: #1f1ec7;--mantine-color-indigo-8: #1819b2;--mantine-color-indigo-9: #0c149e;--mantine-color-cyan-0: #dffdff;--mantine-color-cyan-1: #caf5ff;--mantine-color-cyan-2: #99e8ff;--mantine-color-cyan-3: #64daff;--mantine-color-cyan-4: #3ccffe;--mantine-color-cyan-5: #24c8fe;--mantine-color-cyan-6: #00c2ff;--mantine-color-cyan-7: #00ade4;--mantine-color-cyan-8: #009acd;--mantine-color-cyan-9: #0085b5;--mantine-color-green-0: #e9fdec;--mantine-color-green-1: #d7f6dc;--mantine-color-green-2: #b0eab9;--mantine-color-green-3: #86df94;--mantine-color-green-4: #62d574;--mantine-color-green-5: #4ccf5f;--mantine-color-green-6: #3fcc54;--mantine-color-green-7: #2fb344;--mantine-color-green-8: #25a03b;--mantine-color-green-9: #138a2e;--mantine-color-yellow-0: #fff7e2;--mantine-color-yellow-1: #ffeecd;--mantine-color-yellow-2: #ffdc9c;--mantine-color-yellow-3: #ffc966;--mantine-color-yellow-4: #feb93a;--mantine-color-yellow-5: #feae1e;--mantine-color-yellow-6: #ffa90f;--mantine-color-yellow-8: #ca8200;--mantine-color-yellow-9: #af7000;--mantine-h1-font-size: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-h1-font-weight: normal;--mantine-h2-font-size: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-h2-font-weight: normal;--mantine-h3-font-size: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-h3-font-weight: normal;--mantine-h4-font-size: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-h4-font-weight: normal;--mantine-h5-font-size: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-h5-font-weight: normal;--mantine-h6-font-size: 1rem;--mantine-h6-font-weight: normal;}
:root[data-mantine-color-scheme="dark"], :host([data-mantine-color-scheme="dark"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-dark-filled: var(--mantine-color-dark-5);--mantine-color-dark-filled-hover: var(--mantine-color-dark-6);--mantine-color-dark-light: rgba(105, 105, 105, 0.15);--mantine-color-dark-light-hover: rgba(105, 105, 105, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-0);--mantine-color-dark-outline: var(--mantine-color-dark-1);--mantine-color-dark-outline-hover: rgba(184, 184, 184, 0.05);--mantine-color-gray-filled: var(--mantine-color-gray-5);--mantine-color-gray-filled-hover: var(--mantine-color-gray-6);--mantine-color-gray-light: rgba(222, 226, 230, 0.15);--mantine-color-gray-light-hover: rgba(222, 226, 230, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-0);--mantine-color-gray-outline: var(--mantine-color-gray-1);--mantine-color-gray-outline-hover: rgba(241, 243, 245, 0.05);--mantine-color-red-filled: var(--mantine-color-red-5);--mantine-color-red-filled-hover: var(--mantine-color-red-6);--mantine-color-red-light: rgba(236, 120, 120, 0.15);--mantine-color-red-light-hover: rgba(236, 120, 120, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-0);--mantine-color-red-outline: var(--mantine-color-red-1);--mantine-color-red-outline-hover: rgba(254, 212, 212, 0.05);--mantine-color-pink-filled: var(--mantine-color-pink-5);--mantine-color-pink-filled-hover: var(--mantine-color-pink-6);--mantine-color-pink-light: rgba(250, 162, 193, 0.15);--mantine-color-pink-light-hover: rgba(250, 162, 193, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-0);--mantine-color-pink-outline: var(--mantine-color-pink-1);--mantine-color-pink-outline-hover: rgba(255, 222, 235, 0.05);--mantine-color-grape-filled: var(--mantine-color-grape-5);--mantine-color-grape-filled-hover: var(--mantine-color-grape-6);--mantine-color-grape-light: rgba(229, 153, 247, 0.15);--mantine-color-grape-light-hover: rgba(229, 153, 247, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-0);--mantine-color-grape-outline: var(--mantine-color-grape-1);--mantine-color-grape-outline-hover: rgba(243, 217, 250, 0.05);--mantine-color-violet-filled: var(--mantine-color-violet-5);--mantine-color-violet-filled-hover: var(--mantine-color-violet-6);--mantine-color-violet-light: rgba(209, 111, 255, 0.15);--mantine-color-violet-light-hover: rgba(209, 111, 255, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-0);--mantine-color-violet-outline: var(--mantine-color-violet-1);--mantine-color-violet-outline-hover: rgba(241, 207, 255, 0.05);--mantine-color-indigo-filled: var(--mantine-color-indigo-5);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-6);--mantine-color-indigo-light: rgba(123, 121, 235, 0.15);--mantine-color-indigo-light-hover: rgba(123, 121, 235, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-0);--mantine-color-indigo-outline: var(--mantine-color-indigo-1);--mantine-color-indigo-outline-hover: rgba(214, 213, 254, 0.05);--mantine-color-blue-filled: var(--mantine-color-blue-5);--mantine-color-blue-filled-hover: var(--mantine-color-blue-6);--mantine-color-blue-light: rgba(116, 192, 252, 0.15);--mantine-color-blue-light-hover: rgba(116, 192, 252, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-0);--mantine-color-blue-outline: var(--mantine-color-blue-1);--mantine-color-blue-outline-hover: rgba(208, 235, 255, 0.05);--mantine-color-cyan-filled: var(--mantine-color-cyan-5);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-6);--mantine-color-cyan-light: rgba(100, 218, 255, 0.15);--mantine-color-cyan-light-hover: rgba(100, 218, 255, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-0);--mantine-color-cyan-outline: var(--mantine-color-cyan-1);--mantine-color-cyan-outline-hover: rgba(202, 245, 255, 0.05);--mantine-color-teal-filled: var(--mantine-color-teal-5);--mantine-color-teal-filled-hover: var(--mantine-color-teal-6);--mantine-color-teal-light: rgba(99, 230, 190, 0.15);--mantine-color-teal-light-hover: rgba(99, 230, 190, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-0);--mantine-color-teal-outline: var(--mantine-color-teal-1);--mantine-color-teal-outline-hover: rgba(195, 250, 232, 0.05);--mantine-color-green-filled: var(--mantine-color-green-5);--mantine-color-green-filled-hover: var(--mantine-color-green-6);--mantine-color-green-light: rgba(134, 223, 148, 0.15);--mantine-color-green-light-hover: rgba(134, 223, 148, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-0);--mantine-color-green-outline: var(--mantine-color-green-1);--mantine-color-green-outline-hover: rgba(215, 246, 220, 0.05);--mantine-color-lime-filled: var(--mantine-color-lime-5);--mantine-color-lime-filled-hover: var(--mantine-color-lime-6);--mantine-color-lime-light: rgba(192, 235, 117, 0.15);--mantine-color-lime-light-hover: rgba(192, 235, 117, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-0);--mantine-color-lime-outline: var(--mantine-color-lime-1);--mantine-color-lime-outline-hover: rgba(233, 250, 200, 0.05);--mantine-color-yellow-filled: var(--mantine-color-yellow-5);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-6);--mantine-color-yellow-light: rgba(255, 201, 102, 0.15);--mantine-color-yellow-light-hover: rgba(255, 201, 102, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-0);--mantine-color-yellow-outline: var(--mantine-color-yellow-1);--mantine-color-yellow-outline-hover: rgba(255, 238, 205, 0.05);--mantine-color-orange-filled: var(--mantine-color-orange-5);--mantine-color-orange-filled-hover: var(--mantine-color-orange-6);--mantine-color-orange-light: rgba(255, 192, 120, 0.15);--mantine-color-orange-light-hover: rgba(255, 192, 120, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-0);--mantine-color-orange-outline: var(--mantine-color-orange-1);--mantine-color-orange-outline-hover: rgba(255, 232, 204, 0.05);--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-9) 0%, var(--mantine-color-cyan-7) 100%);--app-color-surface: #2e2e2e;}
:root[data-mantine-color-scheme="light"], :host([data-mantine-color-scheme="light"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-red-light: rgba(224, 40, 41, 0.1);--mantine-color-red-light-hover: rgba(224, 40, 41, 0.12);--mantine-color-red-outline-hover: rgba(224, 40, 41, 0.05);--mantine-color-violet-light: rgba(176, 9, 255, 0.1);--mantine-color-violet-light-hover: rgba(176, 9, 255, 0.12);--mantine-color-violet-outline-hover: rgba(176, 9, 255, 0.05);--mantine-color-indigo-light: rgba(45, 42, 223, 0.1);--mantine-color-indigo-light-hover: rgba(45, 42, 223, 0.12);--mantine-color-indigo-outline-hover: rgba(45, 42, 223, 0.05);--mantine-color-cyan-light: rgba(0, 194, 255, 0.1);--mantine-color-cyan-light-hover: rgba(0, 194, 255, 0.12);--mantine-color-cyan-outline-hover: rgba(0, 194, 255, 0.05);--mantine-color-green-light: rgba(63, 204, 84, 0.1);--mantine-color-green-light-hover: rgba(63, 204, 84, 0.12);--mantine-color-green-outline-hover: rgba(63, 204, 84, 0.05);--mantine-color-yellow-light: rgba(255, 169, 15, 0.1);--mantine-color-yellow-light-hover: rgba(255, 169, 15, 0.12);--mantine-color-yellow-outline-hover: rgba(255, 169, 15, 0.05);--app-color-surface: #f1f3f5;--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-5) 100%);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><div style="--container-size:var(--container-size-lg);margin-top:var(--mantine-spacing-xl);height:100%" class="m_7485cace mantine-Container-root" data-size="lg" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_eub_{margin-bottom:var(--mantine-spacing-xs);}@media(min-width: 36em){.__m__-_R_eub_{margin-bottom:var(--mantine-spacing-xs);}}</style><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root __m__-_R_eub_"><style data-mantine-styles="inline">.__m__-_R_deub_{width:100%;}@media(min-width: 62em){.__m__-_R_deub_{width:66%;}}</style><div class="__m__-_R_deub_"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="m_8a5d1357 mantine-Title-root" data-order="1">Course “CSS: Layout on the Grid”</h1></div></div></div><style data-mantine-styles="inline">.__m__-_R_1iub_{width:100%;}@media(min-width: 62em){.__m__-_R_1iub_{width:66%;}}</style><div style="margin-bottom:var(--mantine-spacing-xl)" class="__m__-_R_1iub_"><div style="margin-bottom:var(--mantine-spacing-lg)" class=""></div><div style="margin-top:var(--mantine-spacing-lg)" class="mantine-hidden-from-md"><div style="--stack-gap:var(--mantine-spacing-xs);--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><a style="--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-color:var(--mantine-color-white);text-decoration:none" class="mantine-focus-auto m_849cf0da mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-size="md" data-underline="hover" href="https://hexlet.io/subscription/new"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Subscribe</span></span></a><p style="color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm);text-align:center" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Access this and all courses with a subscription</p></div></div></div><style data-mantine-styles="inline">.__m__-_R_2iub_{--grid-gutter:var(--mantine-spacing-md);}</style><div class="m_410352e9 mantine-Grid-root __m__-_R_2iub_"><div class="m_dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-_R_dmiub_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-_R_dmiub_{--col-flex-grow:auto;--col-flex-basis:66.66666666666667%;--col-max-width:66.66666666666667%;}}</style><div class="m_96bdd299 mantine-Grid-col __m__-_R_dmiub_"><div style="margin-bottom:var(--mantine-spacing-xl);padding-inline:var(--mantine-spacing-xl);padding-block:var(--mantine-spacing-lg)" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><p style="margin-bottom:var(--mantine-spacing-md);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">What's included</p><style data-mantine-styles="inline">.__m__-_R_ajddmiub_{--sg-spacing-x:var(--mantine-spacing-xs);--sg-spacing-y:var(--mantine-spacing-xs);--sg-cols:1;}@media(min-width: 48em){.__m__-_R_ajddmiub_{--sg-cols:2;}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_ajddmiub_"><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_1mqjddmiub_"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:var(--mantine-spacing-xs);color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div>7 lessons (video and/or text)</div><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_2mqjddmiub_"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:var(--mantine-spacing-xs);color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div>3 exercises in the simulator</div><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_3mqjddmiub_"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:var(--mantine-spacing-xs);color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div>23 verification tests</div><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_4mqjddmiub_"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:var(--mantine-spacing-xs);color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div>Self-study tasks</div><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_5mqjddmiub_"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:var(--mantine-spacing-xs);color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div>Extra materials</div><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_6mqjddmiub_"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:var(--mantine-spacing-xs);color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus "><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></div>7 extended materials</div></div></div><div style="margin-bottom:var(--mantine-spacing-xl)" class=""><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md)" class="m_8a5d1357 mantine-Title-root" data-order="2">Description</h2><div class="m_d08caa0 mantine-Typography-root"><p>This course is dedicated to the CSS Grid Layout module, a technological tool for creating grids in CSS. After the Flex module arrived, there was a need to control elements in two axes simultaneously. The developers wanted to take the grid system used in print products for a hundred years. To do this, they used a table layout using Float and Flex. Each of these methods had limitations and development challenges. CSS Grid Layout appeared in 2011 and has acquired many features and approaches that make it easier to create layouts using CSS.</p></div></div><div style="margin-bottom:var(--mantine-spacing-xl)" class=""><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md)" class="m_8a5d1357 mantine-Title-root" data-order="2">You will learn</h2><ul class="m_abbac491 mantine-List-root" data-type="none"><li style="margin-bottom:var(--mantine-spacing-xs);line-height:var(--mantine-line-height-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true" data-centered="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus "><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></div></span><span class="mantine-List-itemLabel">The basic properties of CSS Grid Layout.</span></div></li><li style="margin-bottom:var(--mantine-spacing-xs);line-height:var(--mantine-line-height-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true" data-centered="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus "><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></div></span><span class="mantine-List-itemLabel">Create and manage the space within grids.</span></div></li><li style="margin-bottom:var(--mantine-spacing-xs);line-height:var(--mantine-line-height-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true" data-centered="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus "><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></div></span><span class="mantine-List-itemLabel">Manage the layout of HTML elements within a grid.</span></div></li><li style="margin-bottom:var(--mantine-spacing-xs);line-height:var(--mantine-line-height-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true" data-centered="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus "><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></div></span><span class="mantine-List-itemLabel">Adapt grids for different screen resolutions.</span></div></li></ul></div><div style="margin-bottom:var(--mantine-spacing-xl)" class=""><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md)" class="m_8a5d1357 mantine-Title-root" data-order="2">Syllabus</h2><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m_b23fa0ef mantine-Table-table"><tbody class="m_b2404537 mantine-Table-tbody"><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">1</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/css-grid/lessons/intro/theory_unit">Introduction</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Getting to know the Grid concept, the key points and differences from Flex</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">2</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/css-grid/lessons/terminology/theory_unit">Terminology</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learning the concepts of grids and their components in CSS Grid Layout</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">3</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/css-grid/lessons/first-grid/theory_unit">First grid</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learning about the properties that allow you to create grids using CSS Grid Layout</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">4</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/css-grid/lessons/element-position/theory_unit">Arrangement of elements in the grid</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learning the properties that allow you to arbitrarily arrange elements within a grid</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">5</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/css-grid/lessons/grid-property/theory_unit">Working with a grid</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learning about the indentation between strips and the alignment of the grid strips</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">6</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/css-grid/lessons/implicit-grid/theory_unit">Implicit grid</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learning the differences between the explicit and implicit grid, grid-auto-rows and grid-auto-columns</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">7</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/css-grid/lessons/position-in-grid/theory_unit">Positioning and Grid</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Studying the effect of positioning properties and z-index when used within a grid</p></td></tr></tbody></table></div><div style="margin-bottom:var(--mantine-spacing-xl)" class=""><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:wrap;margin-bottom:var(--mantine-spacing-md)" class="m_4081bf90 mantine-Group-root"><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="m_8a5d1357 mantine-Title-root" data-order="2">Challenges</h2><button style="--ai-size:var(--ai-size-sm);--ai-bg:transparent;--ai-hover:transparent;--ai-color:var(--mantine-color-indigo-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:var(--mantine-color-dimmed)" class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" data-size="sm" type="button" aria-haspopup="dialog" aria-expanded="false" id="mantine-_R_amtddmiub_-target"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-info-square-rounded "><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path><path d="M12 3c7.2 0 9 1.8 9 9c0 7.2 -1.8 9 -9 9c-7.2 0 -9 -1.8 -9 -9c0 -7.2 1.8 -9 9 -9"></path></svg></span></button></div><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m_b23fa0ef mantine-Table-table"><tbody class="m_b2404537 mantine-Table-tbody"><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">1</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Instagram</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">2</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">keyboard component</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">3</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Futuristic poster</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">4</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Neoplasticism</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">5</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Swiss poster</p></td></tr></tbody></table></div><div class=""><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md)" class="m_8a5d1357 mantine-Title-root" data-order="2">Recommended programs</h2><style data-mantine-styles="inline">.__m__-_R_avddmiub_{--carousel-slide-gap:var(--mantine-spacing-xs);--carousel-slide-size:70%;}@media(min-width: 36em){.__m__-_R_avddmiub_{--carousel-slide-gap:var(--mantine-spacing-xl);--carousel-slide-size:50%;}}</style><div style="--carousel-control-size:calc(2.5rem * var(--mantine-scale));--carousel-controls-offset:var(--mantine-spacing-sm);margin-bottom:var(--mantine-spacing-lg);padding-block:var(--mantine-spacing-sm);background:var(--app-color-surface)" class="m_17884d0f mantine-Carousel-root responsiveClassName" data-orientation="horizontal" data-include-gap-in-size="true"><div class="m_39bc3463 mantine-Carousel-controls" data-orientation="horizontal"><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="previous" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="next" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(-90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><div class="m_a2dae653 mantine-Carousel-viewport" data-type="media"><div class="m_fcd81474 mantine-Carousel-container __m__-_R_avddmiub_" data-orientation="horizontal"><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/layout-designer-positioning?promo_name=programs_list&promo_position=course&promo_creative=catalog_card&promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">2 months</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">For advanced</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Position CSS</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root"></p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzMzUsInB1ciI6ImJsb2JfaWQifX0=--f8607de9d6d23daf38a4dc6c25bda62ecf665f95/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Hand%20coding-cuate.png" alt="Position CSS" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">from $49</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Explore →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses?promo_name=programs_list&promo_position=course&promo_creative=catalog_card&promo_type=card"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md);font-size:var(--mantine-font-size-h3)" class="m_8a5d1357 mantine-Title-root" data-order="2" data-responsive="true">Catalog</h2><p style="margin-bottom:auto" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">A complete list of available courses by direction</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="/vite/assets/development-BVihs_d5.png" alt="Orientation"/></div></div></div></a></div></div></div></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_lmiub_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-_R_lmiub_{--col-flex-grow:auto;--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}}</style><div class="m_96bdd299 mantine-Grid-col __m__-_R_lmiub_"><div style="--paper-shadow:var(--mantine-shadow-sm);margin-top:calc(-10.625rem * var(--mantine-scale));padding:0rem;position:sticky;top:calc(3.125rem * var(--mantine-scale))" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root mantine-visible-from-md"><div class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><div style="margin-bottom:var(--mantine-spacing-md)" class="m_599a2148 mantine-Card-section" data-first-section="true"><img class="m_9e117634 mantine-Image-root" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ODU4OSwicHVyIjoiYmxvYl9pZCJ9fQ==--2a4df319c27e67469d3cb2f82553cbec6d64e136/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png" alt="Course Cover"/></div><ul style="margin-bottom:var(--mantine-spacing-md)" class="m_abbac491 mantine-List-root"><li style="line-height:var(--mantine-line-height-xl)" class="m_abb6bec2 mantine-List-item" data-with-icon="true" data-centered="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-device-desktop-code "><path d="M12.5 16h-8.5a1 1 0 0 1 -1 -1v-10a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v8"></path><path d="M7 20h4"></path><path d="M9 16v4"></path><path d="M20 21l2 -2l-2 -2"></path><path d="M17 17l-2 2l2 2"></path></svg></span><span class="mantine-List-itemLabel">Run code right in the browser</span></div></li><li style="line-height:var(--mantine-line-height-xl)" class="m_abb6bec2 mantine-List-item" data-with-icon="true" data-centered="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-infinity "><path d="M9.828 9.172a4 4 0 1 0 0 5.656a10 10 0 0 0 2.172 -2.828a10 10 0 0 1 2.172 -2.828a4 4 0 1 1 0 5.656a10 10 0 0 1 -2.172 -2.828a10 10 0 0 0 -2.172 -2.828"></path></svg></span><span class="mantine-List-itemLabel">Lifetime access</span></div></li><li style="line-height:var(--mantine-line-height-xl)" class="m_abb6bec2 mantine-List-item" data-with-icon="true" data-centered="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-clock "><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 7v5l3 3"></path></svg></span><span class="mantine-List-itemLabel">Learn at your own pace</span></div></li></ul><div style="--stack-gap:var(--mantine-spacing-xs);--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><a style="--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-color:var(--mantine-color-white);text-decoration:none" class="mantine-focus-auto m_849cf0da mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-size="md" data-underline="hover" href="https://hexlet.io/subscription/new"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Subscribe</span></span></a><p style="color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm);text-align:center" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Access this and all courses with a subscription</p></div></div></div></div></div></div></div></div>
</main>
<footer class="bg-dark fw-light text-light px-3 py-5">
<div class="row small">
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 mb-3">About Hexlet</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/about">About us</a>
</li>
<li>
<span class="nav-link link-light py-1 ps-0 external-link" data-href="https://help.hexlet.io/category/4316" data-target="_blank" role="button">Help</span>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" target="_blank" rel="noopener noreferrer" href="/map">Site Map</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 fw-normal mb-3">Learn</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_backend-development">Backend
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_devops">DevOps
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_frontend-development">Frontend
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_python">Python
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_testing">Testing
</a></li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5"><span class="translation_missing" title="translation missing: en.layouts.footer_content.popular_courses_for_beginners">Popular Courses For Beginners</span></div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/frontend">Frontend Developer</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5"><span class="translation_missing" title="translation missing: en.layouts.footer_content.popular_courses_for_advanced">Popular Courses For Advanced</span></div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/web-development-free">Fundamentals of Web Development</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/js-react-development">React</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/css-animation">CSS Animation</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/http-api">HTTP API</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/layout-designer-positioning">Position CSS</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/cli-basics">Command line basics</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/git-basics-free">Git fundamentals</a>
</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 col-sm-4 col-md-2">
<div class="fs-4">
<ul class="list-unstyled d-flex">
<li class="me-3">
<a aria-label="Facebook" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.facebook.com/hexlethq"><span class="bi bi-facebook"></span>
</a></li>
<li class="me-3">
<a aria-label="Instagram" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.instagram.com/hello_hexlet/"><span class="bi bi-instagram"></span>
</a></li>
<li>
<a aria-label="Twitter" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://twitter.com/Hexlet_IO"><span class="bi bi-twitter-x"></span>
</a></li>
</ul>
</div>
<div class="mb-2 d-flex flex-column">
<a class="link-light text-decoration-none" rel="nofollow" href="mailto:support@hexlet.io">support@hexlet.io</a>
<a class="link-light text-decoration-none py-2" target="_blank" href="https://t.me/hexlet_help_bot">t.me/hexlet_help_bot</a>
</div>
<ul class="list-unstyled d-flex">
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 opacity-100 external-link" rel="nofollow" data-href="https://hexlet.io/locale/switch?new_locale=en" data-target="_self" role="button"><span class="my-auto">EN</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://ru.hexlet.io/locale/switch?new_locale=ru" data-target="_self" role="button"><span class="my-auto">RU</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://kz.hexlet.io/locale/switch?new_locale=kz" data-target="_self" role="button"><span class="my-auto">KZ</span>
</span></li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled fs-4">
<li class="mb-3">
<a class="link-light text-decoration-none" href="tel:%2B7%20717%20272%2076%2070">+7 717 272 76 70</a>
<span class="d-block opacity-50 small">free call</span>
</li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled small">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/legal">Legal</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/offer"><span class="translation_missing" title="translation missing: en.layouts.footer_content.offer">Offer</span></a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/contacts"><span class="translation_missing" title="translation missing: en.layouts.footer_content.contacts">Contacts</span></a>
</li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4 small">
<div class="mb-2">
<div>TOO "Hexlet"</div>
<div>The Republic of Kazakhstan, Almaty</div>
<div>Auezova St., 14A</div>
<div>BIN 230340043714
</div>
</div>
</div>
</div>
</footer>
<div id="root-assistant-offcanvas"></div>
<script src="/vite/assets/assistant-CIOaBlj-.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-0bhwJkNI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-V3hfk_CP.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/MarkdownBlock-DejNWqwz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-B-jV56Ol.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-DOJkeu70.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/shiki-DZwEN4Zo.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-ClTF9s_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-CJocDKTE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Box-DH3_MBnL.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/notifications.store-Cj65YiRw.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useIsomorphicEffect-Csl7vw8x.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-DeAQqnBE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/axios-CN66HKVH.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/classnames-DQgTDFJJ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-Bfba02I7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/debounce-BcxwEZ7X.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/prop-types-DGBR76ns.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-CYyKzrjQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-SJZekO2j.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-bo78L81P.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-BhqaZ6vG.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-DlXMvSuQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CFtMU8gd.js" as="script" crossorigin="anonymous">
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"d11015b65d11429ea6b4a2ef37dd7e0b","server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>