<!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="hhJEzdG371Vdh8MK5CKxGcVDzBfqZJGJxWAUx6cFHQvV1Cn78NzUtTqNPOJWvIbYyelCTCZ6i4Vn5d7U6tnC0A";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 Position CSS</title>
<meta name="description" content="Skill in creating responsive interfaces for building convenient, functional solutions across a wide range of devices">
<link rel="canonical" href="https://hexlet.io/programs/layout-designer-positioning">
<link rel="image_src" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzMzUsInB1ciI6ImJsb2JfaWQifX0=--f8607de9d6d23daf38a4dc6c25bda62ecf665f95/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Hand%20coding-cuate.png">
<meta property="og:title" content="Course Position CSS">
<meta property="og:description" content="Skill in creating responsive interfaces for building convenient, functional solutions across a wide range of devices">
<meta property="og:url" content="https://hexlet.io/programs/layout-designer-positioning">
<meta property="og:image" content="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzMzUsInB1ciI6ImJsb2JfaWQifX0=--f8607de9d6d23daf38a4dc6c25bda62ecf665f95/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Hand%20coding-cuate.png">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="SY3jh2PROO1LFjqFrN5iNB7-bnjnnZ5Mj5unlGdSkcgaS46xQroDDSwcxW0eQFX1ElTgIyuDhEAtHm2HKo5OEw" />
<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="/vite/assets/15-DYqgXwlz.png" fetchPriority="high"/><link rel="preload" as="image" href="/vite/assets/welcome_projects-BEwoYMXD.jpg"/><div id="app" data-page="{"component":"web/programs/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":"116kSp2Au1TxN6nGPH6r8z2D2i-FpfY8f5QPxgs8jx-EmMl8vOuAtJY9Vi6O4JwyMSlUdEm77DDdEcXVRuBQxA","landing":{"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,"lessons_count":31,"projects_count":1},"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":"","skill_list":["Responsive Page Design","CSS","Flexbox","Grid","Media Queries"],"locale":"en","current":true,"duration_in_months_text":"2 months","stack_slug":"layout-designer-positioning","price_text":"from $49","duration_text":"2 months","audience_text":"Translation missing: en.views.web.shared.courses.cards.it.advanced_level"},"projects":[{"id":94,"name":"«Music Box» website","slug":"css_l2_musicbox_project_en","state":"published","language":"html","description":"## Goal\n\n### Setting up environment\n\nThe second project provides students with a more comprehensive environment setup. In addition to working with **Git** and **Surge**, students are required to configure their project to include the **SASS** preprocessor.\n\nThe fully developed ecosystem established in the second project benefits not only current assignments, but also future personal projects. Using the **npm** utility, students can compile **SASS** to **CSS** and deploy it to the Surge service.\n\nInstalling **Linux** _(Ubuntu, Mint, Manjaro)_ as a secondary operating system is a popular choice for many students during the second project. This allows for a basic understanding of the operating system. **Linux** exposes students to package manager mechanisms for application installation, terminal use, and file system management.\n\nThe second project places a strong emphasis on organizing the file structure. Unlike the first project, students are required to have separate **SASS** files in addition to a stylesheet and an HTML file. The key feature of the project is the interaction between these files, and the preprocessor files must be linked correctly to produce a proper **CSS** file.\n\n**GitHub** is the central location for storing files and directories in the second project. It is not just a code storage service, but a social network where you can find like-minded people and make new acquaintances. Having a portfolio on **GitHub** is highly valued by employers and increases your chances of getting a job. The second project is an excellent addition to a student's portfolio.\n\nTo work with the layout, the student will use **Figma**'s online environment, which offers a wide range of possibilities for both designers and developers. With **Figma**, the student can view the layout in multiple resolutions and measure the width and margins of each element.\n\n### HTML markup\n\nThe second project revisits the concepts covered in the first project. It combines approaches such as OOCSS and Atomic CSS to create highly reusable CSS, effectively forming a customized framework.\n\nClass naming is also a central theme of the second project. This is often a challenging task, even for experienced developers who have worked on independent projects. Proper class naming is essential for smooth interaction with the layout and effective organization.\n\nDuring the layout process, students rely on several key principles:\n\n* Modular blocks: Each block in the project is an independent unit that can be relocated or removed without impacting other blocks or the layout of the entire project\n* Class reuse: Similar to the first project, creating classes that can be used in both the current and future projects is a key task.\n* Future-proof layout: The ability to anticipate and accommodate future changes is a hallmark of a skilled developer. They create layouts that can accommodate future client needs, such as adding text or new elements to existing blocks\n\n## Mentor review\n\nDuring the project review, the evaluation covers the following issues. If there are significant problems at the highest level, the review process will be postponed until they are resolved:\n\n1. Compliance with the template's visual appearance. While complete adherence to all dimensions and proportions may not be required in the first project, it's important to maintain the fundamental design concepts\n\n2. Review of layout architecture. This can be a time-consuming process, especially when working with a mentor. It often involves revising the overall layout structure and creating one that allows elements to be added or removed with ease\n\n3. Assessment of class usage, naming, and semantics. Naming classes and assigning semantic meanings can be challenging, even for experienced layout designers. Therefore, we place great importance on class naming and semantic meaning\n\n4. Adherence to the principle of maximum CSS code reuse\n\n### Description\n\nThe second project requires the student to construct two layouts for the \"Music Box\" music website, which offers online music streaming services\n\n\n\n\n","summary":"In the second project, you will create two pages for the \"Music Box\" website. This project is a continuation of the first one and will involve using OOCSS and Atomic CSS methodologies for layout creation. In addition, you will apply the skills you learned in the Adaptivity and SASS courses. You will need to implement an adaptive layout on your own. The Figma service will allow you to work directly with the layout file in the project.\n","cover":"/vite/assets/welcome_projects-BEwoYMXD.jpg"}],"landingLearningModules":[{"items":[{"id":632,"title":"Element Positioning","description":"Types of element positioning, floating elements, element stacking","order":1},{"id":633,"title":"Grid and Flex","description":"Flex container, aligning elements along axes, Flex item properties, placing elements in a grid","order":2},{"id":634,"title":"Website Responsiveness","description":"Checking site responsiveness, viewport, flexible elements, media queries","order":3}],"id":207,"title":"Positioning","duration_value":5,"duration_unit":"week","exercises_count":36,"quizzes_count":24,"order":1,"project_title":"","project_description":"","project_cover":{"name":"project_cover","record":{"id":207,"title":"Positioning","order":1,"duration_value":5,"duration_unit":"week","exercises_count":36,"quizzes_count":24,"stack_landing_id":239,"tags":["Responsive Page Design","Element Positioning","Flexbox","Grid"],"created_at":"2025-04-23T12:55:41.948Z","updated_at":"2025-04-30T10:47:50.314Z","project_title":"","project_description":"","project_image_data":null}},"tags":["Responsive Page Design","Element Positioning","Flexbox","Grid"]}],"landingQnaItems":[]},"url":"/programs/layout-designer-positioning","version":"1656487db0d1dd5f33634fe1070e57e55135cbeb","encryptHistory":false,"clearHistory":false,"flash":{"events":[{"type":"Ecommerce::ProductViewedEvent","name":"Product Viewed","event_id":"7a1ba252-328e-4762-b8f2-b0f47036050b","metadata":{},"data":{"user_id":null,"product_id":"142","name":"Position CSS","category":"program","locale":"en","language":"en"}}]}}"><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="overflow:hidden" class=""><style data-mantine-styles="inline">.__m__-_R_1mb_{padding-bottom:var(--mantine-spacing-xs);}@media(min-width: 75em){.__m__-_R_1mb_{padding-bottom:var(--mantine-spacing-xxl);}}</style><div style="--container-size:var(--container-size-lg);overflow:visible" class="m_7485cace mantine-Container-root __m__-_R_1mb_" data-size="lg" data-strategy="block"><div style="--group-gap:var(--mantine-spacing-xs);--group-align:center;--group-justify:flex-start;--group-wrap:wrap;margin-top:var(--mantine-spacing-xl);margin-bottom:var(--mantine-spacing-xl)" class="m_4081bf90 mantine-Group-root"><div style="--badge-dot-color:var(--mantine-color-indigo-filled);font-weight:normal" class="m_fbd81e3d m_347db0ec mantine-Badge-root" data-variant="dot"><span class="m_5add502a mantine-Badge-label">Responsive Page Design</span></div><div style="--badge-dot-color:var(--mantine-color-indigo-filled);font-weight:normal" class="m_fbd81e3d m_347db0ec mantine-Badge-root" data-variant="dot"><span class="m_5add502a mantine-Badge-label">CSS</span></div><div style="--badge-dot-color:var(--mantine-color-indigo-filled);font-weight:normal" class="m_fbd81e3d m_347db0ec mantine-Badge-root" data-variant="dot"><span class="m_5add502a mantine-Badge-label">Flexbox</span></div><div style="--badge-dot-color:var(--mantine-color-indigo-filled);font-weight:normal" class="m_fbd81e3d m_347db0ec mantine-Badge-root" data-variant="dot"><span class="m_5add502a mantine-Badge-label">Grid</span></div><div style="--badge-dot-color:var(--mantine-color-indigo-filled);font-weight:normal" class="m_fbd81e3d m_347db0ec mantine-Badge-root" data-variant="dot"><span class="m_5add502a mantine-Badge-label">Media Queries</span></div></div><style data-mantine-styles="inline">.__m__-_R_2lmb_{--grid-gutter:var(--mantine-spacing-md);}</style><div style="overflow:visible;height:100%" class="m_410352e9 mantine-Grid-root __m__-_R_2lmb_"><div class="m_dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-_R_dmlmb_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-_R_dmlmb_{--col-flex-grow:auto;--col-flex-basis:58.333333333333336%;--col-max-width:58.333333333333336%;}}</style><div style="flex-direction:column" class="m_96bdd299 mantine-Grid-col __m__-_R_dmlmb_ m_8bffd616 mantine-Flex-root __m__-_R_1ddmlmb_"><style data-mantine-styles="inline">.__m__-_R_6rddmlmb_{width:100%;}@media(min-width: 48em){.__m__-_R_6rddmlmb_{width:80%;}}@media(min-width: 62em){.__m__-_R_6rddmlmb_{width:90%;}}</style><div style="margin-bottom:var(--mantine-spacing-xxl)" class="__m__-_R_6rddmlmb_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size);font-size:var(--mantine-font-size-display-2);line-height:1" class="m_8a5d1357 mantine-Title-root" data-order="1">Position CSS</h1><p style="--text-fz:var(--mantine-font-size-lg);--text-lh:var(--mantine-line-height-lg);margin-top:var(--mantine-spacing-md)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="lg">Skill in creating responsive interfaces for building convenient, functional solutions across a wide range of devices</p></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap;margin-top:auto" class="m_4081bf90 mantine-Group-root"><div class=""><a style="--button-height:var(--button-height-xl);--button-padding-x:var(--button-padding-x-xl);--button-fz:var(--mantine-font-size-xl);--button-color:var(--mantine-color-white);margin-bottom:var(--mantine-spacing-md);display:block" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-size="xl" href="/programs/layout-designer-positioning/goto"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Start learning</span></span></a><div style="color:var(--mantine-color-dimmed)" class="m_4451eb3a mantine-Center-root" data-inline="true"><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="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pyramid-plus "><path d="M18.719 11.985l-5.889 -9.539a.999 .999 0 0 0 -1.664 0l-8.54 13.836a1.005 1.005 0 0 0 .386 1.452l8.092 4.054a1.994 1.994 0 0 0 1.789 0l.149 -.074"></path><path d="M12 2v20"></path><path d="M16 19h6"></path><path d="M19 16v6"></path></svg></div><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Included in subscription (over 50 courses)</p></div></div><div style="margin-top:auto" class=""><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root"></p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root"></p></div></div></div><style data-mantine-styles="inline">.__m__-_R_lmlmb_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-_R_lmlmb_{--col-flex-grow:auto;--col-flex-basis:41.66666666666667%;--col-max-width:41.66666666666667%;}}</style><div style="overflow:visible" class="m_96bdd299 mantine-Grid-col __m__-_R_lmlmb_ mantine-visible-from-md"><div style="overflow:visible;height:calc(29.375rem * var(--mantine-scale));position:relative" class=""><style data-mantine-styles="inline">@media(min-width: 62em){.__m__-_R_bdlmlmb_{right:calc(-10rem * var(--mantine-scale));}}@media(min-width: 75em){.__m__-_R_bdlmlmb_{right:calc(-6.875rem * var(--mantine-scale));}}</style><img style="width:calc(43.75rem * var(--mantine-scale));position:absolute" class="m_9e117634 mantine-Image-root __m__-_R_bdlmlmb_" src="/vite/assets/15-DYqgXwlz.png" fetchPriority="high"/></div></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_6mb_{padding-block:var(--mantine-spacing-md);}@media(min-width: 75em){.__m__-_R_6mb_{padding-block:var(--mantine-spacing-xl);}}</style><div style="--container-size:var(--container-size-lg)" class="m_7485cace mantine-Container-root __m__-_R_6mb_" data-size="lg" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_d6mb_{margin-bottom:var(--mantine-spacing-xl);}@media(min-width: 48em){.__m__-_R_d6mb_{margin-bottom:var(--mantine-spacing-xxl);}}</style><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);font-size:var(--mantine-font-size-display-3)" class="m_8a5d1357 mantine-Title-root __m__-_R_d6mb_" data-order="2">Learning syllabus</h2><div style="--accordion-chevron-size:auto" class="m_9bdbb667 mantine-Accordion-root" data-variant="separated" id="mantine-_R_l6mb_" data-accordion="true"><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item" data-active="true"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-active="true" data-chevron-position="right" type="button" aria-expanded="true" aria-controls="mantine-_R_l6mb_-panel-module-207" id="mantine-_R_l6mb_-control-module-207"><span class="m_3f35ae96 mantine-Accordion-chevron" data-rotate="true" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="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></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--stack-gap:var(--mantine-spacing-md);--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><div style="--group-gap:var(--mantine-spacing-xs);--group-align:center;--group-justify:space-between;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-h3)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">1<!-- -->. <!-- -->Positioning</p><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:wrap;color:var(--mantine-color-dimmed)" class="m_4081bf90 mantine-Group-root"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">36 exercises</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">24 quizzes</p></div></div><div style="--group-gap:var(--mantine-spacing-xs);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">Responsive Page Design</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">Element Positioning</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">Flexbox</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">Grid</span></div></div></div></span></button><div style="box-sizing:border-box;opacity:1;transition:opacity 200ms ease;padding-top:var(--mantine-spacing-xl)" class="m_df78851f mantine-Accordion-panel" aria-hidden="false" role="region" id="mantine-_R_l6mb_-panel-module-207" aria-labelledby="mantine-_R_l6mb_-control-module-207"><div class="m_4ba554d4 mantine-Accordion-content"><style data-mantine-styles="inline">.__m__-_R_5lrl6mb_{--sg-spacing-x:var(--mantine-spacing-md);--sg-spacing-y:var(--mantine-spacing-md);--sg-cols:1;}@media(min-width: 36em){.__m__-_R_5lrl6mb_{--sg-cols:2;}}@media(min-width: 62em){.__m__-_R_5lrl6mb_{--sg-cols:3;}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_5lrl6mb_"><style data-mantine-styles="inline">.__m__-_R_rdlrl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_rdlrl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_rdlrl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Element Positioning</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Types of element positioning, floating elements, element stacking</p></div><style data-mantine-styles="inline">.__m__-_R_1bdlrl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_1bdlrl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_1bdlrl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Grid and Flex</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Flex container, aligning elements along axes, Flex item properties, placing elements in a grid</p></div><style data-mantine-styles="inline">.__m__-_R_1rdlrl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_1rdlrl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_1rdlrl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Website Responsiveness</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Checking site responsiveness, viewport, flexible elements, media queries</p></div></div></div></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_amb_{padding-block:var(--mantine-spacing-md);}@media(min-width: 75em){.__m__-_R_amb_{padding-block:var(--mantine-spacing-xl);}}</style><div style="--container-size:var(--container-size-lg)" class="m_7485cace mantine-Container-root __m__-_R_amb_" data-size="lg" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_damb_{margin-bottom:var(--mantine-spacing-xl);}@media(min-width: 48em){.__m__-_R_damb_{margin-bottom:var(--mantine-spacing-xxl);}}</style><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);font-size:var(--mantine-font-size-display-3)" class="m_8a5d1357 mantine-Title-root __m__-_R_damb_" data-order="2">Projects</h2><style data-mantine-styles="inline">.__m__-_R_lamb_{--carousel-slide-gap:0rem;--carousel-slide-size:100%;}</style><div style="--carousel-control-size:calc(1.625rem * var(--mantine-scale));--carousel-controls-offset:var(--mantine-spacing-sm)" class="m_17884d0f mantine-Carousel-root responsiveClassName" data-orientation="horizontal" data-include-gap-in-size="true"><div class="m_a2dae653 mantine-Carousel-viewport" data-type="media"><div class="m_fcd81474 mantine-Carousel-container __m__-_R_lamb_" data-orientation="horizontal"><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:nowrap;height:100%" class="m_4081bf90 mantine-Group-root"><div style="--ar-ratio:1.3333333333333333" class="m_71ac47fc mantine-AspectRatio-root"><img style="width:calc(25rem * var(--mantine-scale))" class="m_9e117634 mantine-Image-root mantine-visible-from-sm" src="/vite/assets/welcome_projects-BEwoYMXD.jpg"/></div><div style="height:100%" class=""><p style="font-size:var(--mantine-font-size-h1)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">«Music Box» website</p><p style="white-space:pre-line" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">In the second project, you will create two pages for the "Music Box" website. This project is a continuation of the first one and will involve using OOCSS and Atomic CSS methodologies for layout creation. In addition, you will apply the skills you learned in the Adaptivity and SASS courses. You will need to implement an adaptive layout on your own. The Figma service will allow you to work directly with the layout file in the project.
</p></div></div></div></div></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_emb_{padding-block:var(--mantine-spacing-xl);}@media(min-width: 75em){.__m__-_R_emb_{padding-block:var(--mantine-spacing-xl);}}</style><div style="--container-size:var(--container-size-lg)" class="m_7485cace mantine-Container-root __m__-_R_emb_" data-size="lg" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_demb_{margin-bottom:var(--mantine-spacing-xl);}@media(min-width: 75em){.__m__-_R_demb_{margin-bottom:var(--mantine-spacing-xxl);}}</style><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);font-size:var(--mantine-font-size-display-3)" class="m_8a5d1357 mantine-Title-root __m__-_R_demb_" data-order="2">How learning is organised</h2><style data-mantine-styles="inline">.__m__-_R_lemb_{--grid-gutter:var(--mantine-spacing-md);}</style><div class="m_410352e9 mantine-Grid-root __m__-_R_lemb_"><div class="m_dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-_R_3dlemb_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 48em){.__m__-_R_3dlemb_{--col-flex-grow:auto;--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}}</style><div class="m_96bdd299 mantine-Grid-col __m__-_R_3dlemb_"><div style="--accordion-chevron-size:auto" class="m_9bdbb667 mantine-Accordion-root" data-variant="separated" id="mantine-_R_bbdlemb_" data-accordion="true"><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item" data-active="true"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-active="true" data-chevron-position="right" type="button" aria-label="Simple, clear and always at hand" aria-expanded="true" aria-controls="mantine-_R_bbdlemb_-panel-theory" id="mantine-_R_bbdlemb_-control-theory"><span class="m_3f35ae96 mantine-Accordion-chevron" data-rotate="true" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="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></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><div class=""><p style="font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Simple, clear and always at hand</p></div></div></span></button><div style="box-sizing:border-box;opacity:1;transition:opacity 200ms ease" class="m_df78851f mantine-Accordion-panel" aria-hidden="false" role="region" id="mantine-_R_bbdlemb_-panel-theory" aria-labelledby="mantine-_R_bbdlemb_-control-theory"><div class="m_4ba554d4 mantine-Accordion-content"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">You learn the theory in a convenient text format - easy to read even from your phone. Live examples help you immediately understand how everything works in practice. The material is organised in such a way that you move step by step from simple to complex without missing important details</p></div></div></div><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-label="Check and consolidate knowledge" aria-expanded="false" aria-controls="mantine-_R_bbdlemb_-panel-quizzes" id="mantine-_R_bbdlemb_-control-quizzes"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="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></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><div class=""><p style="font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Check and consolidate knowledge</p></div></div></span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;height:0;overflow:hidden;display:none" class="m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_bbdlemb_-panel-quizzes" aria-labelledby="mantine-_R_bbdlemb_-control-quizzes" inert=""><div class="m_4ba554d4 mantine-Accordion-content"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">After each topic, you go through quizzes to make sure you understand everything. Questions of varying levels of difficulty will give you the opportunity to both test your knowledge base and practise your application of knowledge</p></div></div></div><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-label="Learn from real-life challenges" aria-expanded="false" aria-controls="mantine-_R_bbdlemb_-panel-exercises" id="mantine-_R_bbdlemb_-control-exercises"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="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></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><div class=""><p style="font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn from real-life challenges</p></div></div></span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;height:0;overflow:hidden;display:none" class="m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_bbdlemb_-panel-exercises" aria-labelledby="mantine-_R_bbdlemb_-control-exercises" inert=""><div class="m_4ba554d4 mantine-Accordion-content"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">We've created a convenient virtual environment where you solve problems right in your browser. You have a code editor, a console and automatic tests that instantly show results</p></div></div></div><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-label="AI mentor in your studies" aria-expanded="false" aria-controls="mantine-_R_bbdlemb_-panel-totaAI" id="mantine-_R_bbdlemb_-control-totaAI"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="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></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><div class=""><p style="font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">AI mentor in your studies</p></div></div></span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;height:0;overflow:hidden;display:none" class="m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_bbdlemb_-panel-totaAI" aria-labelledby="mantine-_R_bbdlemb_-control-totaAI" inert=""><div class="m_4ba554d4 mantine-Accordion-content"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">Our AI-powered Learning Assistant is like a mentor that's always on hand. It understands where you are in the course, what you need to do, and what your code looks like. If something goes wrong, you get clear and helpful hints right away</p></div></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_5dlemb_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 48em){.__m__-_R_5dlemb_{--col-flex-grow:auto;--col-flex-basis:66.66666666666667%;--col-max-width:66.66666666666667%;}}</style><div style="text-align:center" class="m_96bdd299 mantine-Grid-col __m__-_R_5dlemb_"><div style="--ar-ratio:1.7777777777777777" class="m_71ac47fc mantine-AspectRatio-root"><div style="background:var(--mantine-color-gray-1);width:calc(37.5rem * var(--mantine-scale));height:100%" class=""></div></div></div></div></div></div><div style="background-color:light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6))" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><style data-mantine-styles="inline">.__m__-_R_dimb_{padding-block:var(--mantine-spacing-xl);}@media(min-width: 75em){.__m__-_R_dimb_{padding-block:var(--mantine-spacing-xl);}}</style><div style="--container-size:var(--container-size-md)" class="m_7485cace mantine-Container-root __m__-_R_dimb_" data-size="md" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_2timb_{--sg-spacing-x:0rem;--sg-spacing-y:0rem;--sg-cols:1;}@media(min-width: 36em){.__m__-_R_2timb_{--sg-spacing-x:var(--mantine-spacing-xs);--sg-spacing-y:var(--mantine-spacing-xs);--sg-cols:2;}}@media(min-width: 48em){.__m__-_R_2timb_{--sg-spacing-x:var(--mantine-spacing-xxl);--sg-spacing-y:var(--mantine-spacing-xxl);}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_2timb_"><div style="margin-bottom:var(--mantine-spacing-lg)" class=""><p style="font-size:var(--mantine-font-size-h3);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Subscription 3,900 ₽/month</p><p style="margin-bottom:var(--mantine-spacing-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">The subscription gives access to all courses in the "subscription" catalog. Cancel anytime. Company payments are available.</p><a style="--button-height:var(--button-height-lg);--button-padding-x:var(--button-padding-x-lg);--button-fz:var(--mantine-font-size-lg);--button-color:var(--mantine-color-white)" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-size="lg" href="https://hexlet.io/subscription/new?back_to=https%3A%2F%2Fhexlet.io%2Fprograms%2Flayout-designer-positioning"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Subscribe →</span></span></a></div><div style="align-items:center;height:100%" class="m_8bffd616 mantine-Flex-root __m__-_R_lmtimb_"><ul style="padding:0rem" class="m_abbac491 mantine-List-root"><li class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-sm);--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="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div></div></span><span class="mantine-List-itemLabel">50+ courses</span></div></li><li class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-sm);--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="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div></div></span><span class="mantine-List-itemLabel">Lifetime access to theory</span></div></li><li class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-sm);--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="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div></div></span><span class="mantine-List-itemLabel">Learn in parallel</span></div></li><li class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-sm);--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="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div></div></span><span class="mantine-List-itemLabel">Learning with an AI assistant</span></div></li></ul></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>