<!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="3IttPgIF-fGeyGHGW7I49aOC5y0kvSsi8KVxeb9dNtqPTQAII27CEfnCni7pLA80ryhpduijMS5SILtq8oHpAQ";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 «JS: Object oriented design»: online education</title>
<meta name="description" content="Take the JS: Object oriented design 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/js-object-oriented-design">
<meta property="og:description" content="Take the JS: Object oriented design 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 «JS: Object oriented design»: online education
">
<meta property="og:url" content="https://hexlet.io/courses/js-object-oriented-design">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="iI9zyCzVyhhKAQVxGD2LAIFEOv7g7e3tmpFU8vmTlBHbSR7-Db7x-C0L-pmqo7zBje60pSzz9-E4FJ7htE9Lyg" />
<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/eyJfcmFpbHMiOnsiZGF0YSI6MTIzNTMsInB1ciI6ImJsb2JfaWQifX0=--f1948fb0c5a45a6d76671a1a32b8cf6f0b53ee57/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Software%20code%20testing-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/eyJfcmFpbHMiOnsiZGF0YSI6NjYwNiwicHVyIjoiYmxvYl9pZCJ9fQ==--f56687c7a9f01672e30a943d43276c6fce7889f0/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":"3qCLxCJiuug8oL5R6XskeOV9CZfhiMRgRlT4I31eF3iNZubyAwmBCFuqQblb5RO56deHzC2W3mzk0TIwMILIow","course":{"start_lesson":{"exercise":null,"units":[{"id":7430,"name":"theory","url":"/courses/js-object-oriented-design/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":7430,"name":"theory","url":"/courses/js-object-oriented-design/lessons/about/theory_unit"}],"id":3320,"slug":"about","state":"approved","name":"About","course_order":100,"goal":"Learn about the course, its structure, tasks and goals.","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"While the previous course was about how to describe abstractions using classes, this one focuses on using objects based on examples from real libraries. Building call chains, working with data structures, and handling dates and strings in an object-oriented style are just some of the things we'll encounter in this course.\n\nThis course won't teach any new syntax, we've seen plenty of it already. OOP is a complex subject, and it's important to introduce new concepts fairly carefully, waiting until after we've gained some experience with basic concepts. A separate topic that will run like a thread through the rest of the course is design patterns or patterns – approaches for solving typical problems.\n\n* Fluent Interface.\n* Message passing.\n* Proxy objects.\n* Data structures (OOP versions).\n* Working with dates.\n* Class configurators.\n"},"id":324,"slug":"js-object-oriented-design","challenges_count":4,"name":"JS: Object oriented design","allow_indexing":true,"state":"approved","course_state":"not_finished","pricing_type":"paid","description":"Designing object-oriented code is a complex story with many nuances. In this course we will look at the basic principles of OO code design and get acquainted with popular libraries implemented in this style.","kind":"advanced","updated_at":"2026-01-20T11:42:30.910Z","language":"javascript","duration_cache":30900,"skills":["Properly write and structure code in class languages.","Understand how to configure code depending on the task.","Create user-friendly object interfaces for your subject area."],"keywords":[],"lessons_count":9,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NjYwNiwicHVyIjoiYmxvYl9pZCJ9fQ==--f56687c7a9f01672e30a943d43276c6fce7889f0/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"courseMember":null,"questionsCount":20,"exercisesCount":6,"lessons":[{"ordered_units":[{"id":7430,"name":"theory","url":"/courses/js-object-oriented-design/lessons/about/theory_unit"}],"id":3320,"slug":"about","state":"approved","name":"About","course_order":100,"goal":"Learn about the course, its structure, tasks and goals.","exercise_id":null},{"ordered_units":[{"id":7431,"name":"theory","url":"/courses/js-object-oriented-design/lessons/patterns/theory_unit"}],"id":3321,"slug":"patterns","state":"approved","name":"Design Patterns","course_order":200,"goal":"Learn how to solve typical problems in programming","exercise_id":null},{"ordered_units":[{"id":7432,"name":"theory","url":"/courses/js-object-oriented-design/lessons/configuration/theory_unit"},{"id":7433,"name":"quiz","url":"/courses/js-object-oriented-design/lessons/configuration/quiz_unit"},{"id":7586,"name":"exercise","url":"/courses/js-object-oriented-design/lessons/configuration/exercise_unit"}],"id":3322,"slug":"configuration","state":"approved","name":"Configuration","course_order":300,"goal":"Learn one of the basic principles of class design","exercise_id":2203},{"ordered_units":[{"id":7434,"name":"theory","url":"/courses/js-object-oriented-design/lessons/configuration-setters/theory_unit"},{"id":7435,"name":"quiz","url":"/courses/js-object-oriented-design/lessons/configuration-setters/quiz_unit"},{"id":7587,"name":"exercise","url":"/courses/js-object-oriented-design/lessons/configuration-setters/exercise_unit"}],"id":3323,"slug":"configuration-setters","state":"approved","name":"Mutable configuration","course_order":400,"goal":"Learn how to correctly override the base configuration without creating dangerous situations","exercise_id":2205},{"ordered_units":[{"id":7437,"name":"theory","url":"/courses/js-object-oriented-design/lessons/modeling/theory_unit"},{"id":7438,"name":"quiz","url":"/courses/js-object-oriented-design/lessons/modeling/quiz_unit"},{"id":7588,"name":"exercise","url":"/courses/js-object-oriented-design/lessons/modeling/exercise_unit"}],"id":3325,"slug":"modeling","state":"approved","name":"Entity Objects, Value Objects, and Embedded Objects","course_order":450,"goal":"Learn basic principles of organizing objects that describe the subject area","exercise_id":2201},{"ordered_units":[{"id":7439,"name":"theory","url":"/courses/js-object-oriented-design/lessons/fluent-interface/theory_unit"},{"id":7440,"name":"quiz","url":"/courses/js-object-oriented-design/lessons/fluent-interface/quiz_unit"},{"id":7591,"name":"exercise","url":"/courses/js-object-oriented-design/lessons/fluent-interface/exercise_unit"}],"id":3326,"slug":"fluent-interface","state":"approved","name":"Fluent Interface","course_order":600,"goal":"Learn how to create a fluid interface","exercise_id":2206},{"ordered_units":[{"id":7441,"name":"theory","url":"/courses/js-object-oriented-design/lessons/builder/theory_unit"},{"id":7590,"name":"exercise","url":"/courses/js-object-oriented-design/lessons/builder/exercise_unit"}],"id":3327,"slug":"builder","state":"approved","name":"Builders","course_order":700,"goal":"Learn phased assembly of complex objects using composition and a fluid interface","exercise_id":2202},{"ordered_units":[{"id":7442,"name":"theory","url":"/courses/js-object-oriented-design/lessons/proxy/theory_unit"},{"id":7443,"name":"quiz","url":"/courses/js-object-oriented-design/lessons/proxy/quiz_unit"},{"id":7589,"name":"exercise","url":"/courses/js-object-oriented-design/lessons/proxy/exercise_unit"}],"id":3328,"slug":"proxy","state":"approved","name":"Proxy","course_order":800,"goal":"Learn about the Proxy object, which can change the behavior of the object without changing the object code.","exercise_id":2204},{"ordered_units":[{"id":7444,"name":"theory","url":"/courses/js-object-oriented-design/lessons/right-way-to-write-code/theory_unit"},{"id":7445,"name":"quiz","url":"/courses/js-object-oriented-design/lessons/right-way-to-write-code/quiz_unit"}],"id":3329,"slug":"right-way-to-write-code","state":"approved","name":"Code correctly","course_order":900,"goal":"Learn how to properly structure a program in OOP stylе","exercise_id":null}],"challenges":[{"exercise":{"id":2200,"slug":"js_object_oriented_design_custom_object_exercise","name":"Special object","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"JavaScript objects allow you to access their own properties. When accessing a non-existing property, undefined is returned:\n\n```javascript\nconst obj = {\n key: 'value',\n key2: {\n key3: 'value3',\n },\n};\n\nobj.key2 // { key3: 'value3' }\nobj.key2.key1 // undefined\nobj.key2.key1.key0 // Uncaught TypeError: Cannot read property 'key0' of undefined\n```\n\nIn this challenge, we'll implement a special object that enables us to access nonexistent properties without getting an error.\n\n## object.js\n\nImplement and export as default a function that takes an object and allows you to access its properties by any name. When attempting to access a property that doesn't exist, neither exceptions nor the `undefined` should be thrown. The function should return a Proxy object.\n\n```javascript\nimport createObject from './object.js';\n\nconst obj = createObject({\n key: 'value',\n key2: {\n key3: 'value3',\n },\n});\n\nobj.key2 // { key3: 'value3' }\n\n// the code keeps executing:\nobj.key2.key1\nobj.key2.key1.key0\nobj.obj.obj\n```\n\n## Tips\n\n* [Lesson on Proxy](https://hexlet.io/courses/js-object-oriented-design/lessons/proxy/theory_unit)\n* [Proxy MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)\n","prepared_readme":"JavaScript objects allow you to access their own properties. When accessing a non-existing property, undefined is returned:\n\n```javascript\nconst obj = {\n key: 'value',\n key2: {\n key3: 'value3',\n },\n};\n\nobj.key2 // { key3: 'value3' }\nobj.key2.key1 // undefined\nobj.key2.key1.key0 // Uncaught TypeError: Cannot read property 'key0' of undefined\n```\n\nIn this challenge, we'll implement a special object that enables us to access nonexistent properties without getting an error.\n\n## object.js\n\nImplement and export as default a function that takes an object and allows you to access its properties by any name. When attempting to access a property that doesn't exist, neither exceptions nor the `undefined` should be thrown. The function should return a Proxy object.\n\n```javascript\nimport createObject from './object.js';\n\nconst obj = createObject({\n key: 'value',\n key2: {\n key3: 'value3',\n },\n});\n\nobj.key2 // { key3: 'value3' }\n\n// the code keeps executing:\nobj.key2.key1\nobj.key2.key1.key0\nobj.obj.obj\n```\n\n## Tips\n\n* [Lesson on Proxy](https://hexlet.io/courses/js-object-oriented-design/lessons/proxy/theory_unit)\n* [Proxy MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)\n","has_solution":true,"entity_name":"Special object"},"course":{"start_lesson":{"exercise":null,"units":[{"id":7430,"name":"theory","url":"/courses/js-object-oriented-design/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":7430,"name":"theory","url":"/courses/js-object-oriented-design/lessons/about/theory_unit"}],"id":3320,"slug":"about","state":"approved","name":"About","course_order":100,"goal":"Learn about the course, its structure, tasks and goals.","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"While the previous course was about how to describe abstractions using classes, this one focuses on using objects based on examples from real libraries. Building call chains, working with data structures, and handling dates and strings in an object-oriented style are just some of the things we'll encounter in this course.\n\nThis course won't teach any new syntax, we've seen plenty of it already. OOP is a complex subject, and it's important to introduce new concepts fairly carefully, waiting until after we've gained some experience with basic concepts. A separate topic that will run like a thread through the rest of the course is design patterns or patterns – approaches for solving typical problems.\n\n* Fluent Interface.\n* Message passing.\n* Proxy objects.\n* Data structures (OOP versions).\n* Working with dates.\n* Class configurators.\n"},"id":324,"slug":"js-object-oriented-design","challenges_count":4,"name":"JS: Object oriented design","allow_indexing":true,"state":"approved","course_state":"not_finished","pricing_type":"paid","description":"Designing object-oriented code is a complex story with many nuances. In this course we will look at the basic principles of OO code design and get acquainted with popular libraries implemented in this style.","kind":"advanced","updated_at":"2026-01-20T11:42:30.910Z","language":"javascript","duration_cache":30900,"skills":["Properly write and structure code in class languages.","Understand how to configure code depending on the task.","Create user-friendly object interfaces for your subject area."],"keywords":[],"lessons_count":9,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NjYwNiwicHVyIjoiYmxvYl9pZCJ9fQ==--f56687c7a9f01672e30a943d43276c6fce7889f0/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":635,"slug":"js_object_oriented_design_custom_object_exercise","percent_of_success":"-"},{"exercise":{"id":2198,"slug":"js_object_oriented_design_lazy_exercise","name":"Lazy collections","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"Here you need to build a [lazy collection](https://en.wikipedia.org/wiki/Lazy_initialization).\n\n## enumerable.js\n\nImplement and export as default a class handling collections of objects. The main feature of this class is that it uses lazy processing.\n\n```javascript\nimport Enumerable from './enumerable.js';\n\nconst elements = [\n { key: 'value' },\n { key: '' },\n];\nconst coll = Enumerable.wrap(elements);\nconst result = coll.where('key', 'value');\n\nresult.all() // [{ key: 'value' }]\n```\n\n### Tips\n\n* The usage examples are given in more detail in the tests\n* Advanced challenge: add the `allWithMemoization()` method implementing [memoization](https://en.wikipedia.org/wiki/Memoization) and test it by running the `make test-memo` command in the exercise terminal\n<!-- * [Ленивые коллекции](https://ru.hexlet.io/courses/js_collections/lessons/lazy/theory_unit) -->\n","prepared_readme":"Here you need to build a [lazy collection](https://en.wikipedia.org/wiki/Lazy_initialization).\n\n## enumerable.js\n\nImplement and export as default a class handling collections of objects. The main feature of this class is that it uses lazy processing.\n\n```javascript\nimport Enumerable from './enumerable.js';\n\nconst elements = [\n { key: 'value' },\n { key: '' },\n];\nconst coll = Enumerable.wrap(elements);\nconst result = coll.where('key', 'value');\n\nresult.all() // [{ key: 'value' }]\n```\n\n### Tips\n\n* The usage examples are given in more detail in the tests\n* Advanced challenge: add the `allWithMemoization()` method implementing [memoization](https://en.wikipedia.org/wiki/Memoization) and test it by running the `make test-memo` command in the exercise terminal\n<!-- * [Ленивые коллекции](https://ru.hexlet.io/courses/js_collections/lessons/lazy/theory_unit) -->\n","has_solution":true,"entity_name":"Lazy collections"},"course":{"start_lesson":{"exercise":null,"units":[{"id":7430,"name":"theory","url":"/courses/js-object-oriented-design/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":7430,"name":"theory","url":"/courses/js-object-oriented-design/lessons/about/theory_unit"}],"id":3320,"slug":"about","state":"approved","name":"About","course_order":100,"goal":"Learn about the course, its structure, tasks and goals.","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"While the previous course was about how to describe abstractions using classes, this one focuses on using objects based on examples from real libraries. Building call chains, working with data structures, and handling dates and strings in an object-oriented style are just some of the things we'll encounter in this course.\n\nThis course won't teach any new syntax, we've seen plenty of it already. OOP is a complex subject, and it's important to introduce new concepts fairly carefully, waiting until after we've gained some experience with basic concepts. A separate topic that will run like a thread through the rest of the course is design patterns or patterns – approaches for solving typical problems.\n\n* Fluent Interface.\n* Message passing.\n* Proxy objects.\n* Data structures (OOP versions).\n* Working with dates.\n* Class configurators.\n"},"id":324,"slug":"js-object-oriented-design","challenges_count":4,"name":"JS: Object oriented design","allow_indexing":true,"state":"approved","course_state":"not_finished","pricing_type":"paid","description":"Designing object-oriented code is a complex story with many nuances. In this course we will look at the basic principles of OO code design and get acquainted with popular libraries implemented in this style.","kind":"advanced","updated_at":"2026-01-20T11:42:30.910Z","language":"javascript","duration_cache":30900,"skills":["Properly write and structure code in class languages.","Understand how to configure code depending on the task.","Create user-friendly object interfaces for your subject area."],"keywords":[],"lessons_count":9,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NjYwNiwicHVyIjoiYmxvYl9pZCJ9fQ==--f56687c7a9f01672e30a943d43276c6fce7889f0/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":636,"slug":"js_object_oriented_design_lazy_exercise","percent_of_success":"-"},{"exercise":{"id":2199,"slug":"js_object_oriented_design_range_of_dates_exercise","name":"Range of dates","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"## dates.js\n\nImplement and export as default a function that converts input data into a format suitable for plotting.\n\nThis function takes three arguments: a data array, the period's start date, and the period's end date. The data is given as an object of the form `{value: 14, date: '08/02/2018' }`, and the dates format is `'yyyy-MM-dd'`.\n\nThe date range specifies the output array size that the implemented function should produce. Rules for forming the output array:\n\n* it is filled with entries for each day in the `begin - end` range\n* if there is no day data in the input array, then set the value `0` in the `value` property of a day entry\n\n```javascript\nimport buildRange from './dates.js';\n\nconst dates = [\n { value: 14, date: '02.08.2018' },\n { value: 43, date: '03.08.2018' },\n];\nconst beginDate = '2018-08-01';\nconst endDate = '2018-08-04';\n\nbuildRange(dates, beginDate, endDate);\n// [\n// { value: 0, date: '01.08.2018' },\n// { value: 14, date: '02.08.2018' },\n// { value: 43, date: '03.08.2018' },\n// { value: 0, date: '04.08.2018' },\n// ]\n```\n\n### Tips\n\nDocumentation on functions for working with dates:\n* https://date-fns.org/v2.16.1/docs/eachDayOfInterval\n* https://date-fns.org/v2.16.1/docs/format\n","prepared_readme":"## dates.js\n\nImplement and export as default a function that converts input data into a format suitable for plotting.\n\nThis function takes three arguments: a data array, the period's start date, and the period's end date. The data is given as an object of the form `{value: 14, date: '08/02/2018' }`, and the dates format is `'yyyy-MM-dd'`.\n\nThe date range specifies the output array size that the implemented function should produce. Rules for forming the output array:\n\n* it is filled with entries for each day in the `begin - end` range\n* if there is no day data in the input array, then set the value `0` in the `value` property of a day entry\n\n```javascript\nimport buildRange from './dates.js';\n\nconst dates = [\n { value: 14, date: '02.08.2018' },\n { value: 43, date: '03.08.2018' },\n];\nconst beginDate = '2018-08-01';\nconst endDate = '2018-08-04';\n\nbuildRange(dates, beginDate, endDate);\n// [\n// { value: 0, date: '01.08.2018' },\n// { value: 14, date: '02.08.2018' },\n// { value: 43, date: '03.08.2018' },\n// { value: 0, date: '04.08.2018' },\n// ]\n```\n\n### Tips\n\nDocumentation on functions for working with dates:\n* https://date-fns.org/v2.16.1/docs/eachDayOfInterval\n* https://date-fns.org/v2.16.1/docs/format\n","has_solution":true,"entity_name":"Range of dates"},"course":{"start_lesson":{"exercise":null,"units":[{"id":7430,"name":"theory","url":"/courses/js-object-oriented-design/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":7430,"name":"theory","url":"/courses/js-object-oriented-design/lessons/about/theory_unit"}],"id":3320,"slug":"about","state":"approved","name":"About","course_order":100,"goal":"Learn about the course, its structure, tasks and goals.","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"While the previous course was about how to describe abstractions using classes, this one focuses on using objects based on examples from real libraries. Building call chains, working with data structures, and handling dates and strings in an object-oriented style are just some of the things we'll encounter in this course.\n\nThis course won't teach any new syntax, we've seen plenty of it already. OOP is a complex subject, and it's important to introduce new concepts fairly carefully, waiting until after we've gained some experience with basic concepts. A separate topic that will run like a thread through the rest of the course is design patterns or patterns – approaches for solving typical problems.\n\n* Fluent Interface.\n* Message passing.\n* Proxy objects.\n* Data structures (OOP versions).\n* Working with dates.\n* Class configurators.\n"},"id":324,"slug":"js-object-oriented-design","challenges_count":4,"name":"JS: Object oriented design","allow_indexing":true,"state":"approved","course_state":"not_finished","pricing_type":"paid","description":"Designing object-oriented code is a complex story with many nuances. In this course we will look at the basic principles of OO code design and get acquainted with popular libraries implemented in this style.","kind":"advanced","updated_at":"2026-01-20T11:42:30.910Z","language":"javascript","duration_cache":30900,"skills":["Properly write and structure code in class languages.","Understand how to configure code depending on the task.","Create user-friendly object interfaces for your subject area."],"keywords":[],"lessons_count":9,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NjYwNiwicHVyIjoiYmxvYl9pZCJ9fQ==--f56687c7a9f01672e30a943d43276c6fce7889f0/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":637,"slug":"js_object_oriented_design_range_of_dates_exercise","percent_of_success":"-"},{"exercise":{"id":2197,"slug":"js_object_oriented_design_drunkard_exercise","name":"War","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"\"War\" is a card game to win all of the cards. Our challenge based on a modification of a two-player game. Players are dealt an equal number of cards. Players do not look at their cards and put them in a pile nearby. Then each player removes the top card and shows it to the opponent. The player whose card turned out to be of a higher denomination takes both cards and puts them in his deck from below (so that his own card goes first). If the cards have the same value, they are thrown out of the game. There are three possible game outcomes:\n\n* Both players have no cards left\n* The game continues infinitely\n* One of the players won\n\n## war.js\n\nImplement and export as default a class with the `run()` method that takes two numbers arrays representing the first and second player cards.\n\n* If the first player wins, the method should return `First player. Round: <round number>`\n* If the second player wins, the method should return `Second player. Round: <round number>`\n* If the players have no cards left, then the method should return `Peace!`\n* If it was not possible to identify the winner in 100 rounds, then `Peace!` is also returned\n\nCheck the actual examples in the tests.\n","prepared_readme":"\"War\" is a card game to win all of the cards. Our challenge based on a modification of a two-player game. Players are dealt an equal number of cards. Players do not look at their cards and put them in a pile nearby. Then each player removes the top card and shows it to the opponent. The player whose card turned out to be of a higher denomination takes both cards and puts them in his deck from below (so that his own card goes first). If the cards have the same value, they are thrown out of the game. There are three possible game outcomes:\n\n* Both players have no cards left\n* The game continues infinitely\n* One of the players won\n\n## war.js\n\nImplement and export as default a class with the `run()` method that takes two numbers arrays representing the first and second player cards.\n\n* If the first player wins, the method should return `First player. Round: <round number>`\n* If the second player wins, the method should return `Second player. Round: <round number>`\n* If the players have no cards left, then the method should return `Peace!`\n* If it was not possible to identify the winner in 100 rounds, then `Peace!` is also returned\n\nCheck the actual examples in the tests.\n","has_solution":true,"entity_name":"War"},"course":{"start_lesson":{"exercise":null,"units":[{"id":7430,"name":"theory","url":"/courses/js-object-oriented-design/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":7430,"name":"theory","url":"/courses/js-object-oriented-design/lessons/about/theory_unit"}],"id":3320,"slug":"about","state":"approved","name":"About","course_order":100,"goal":"Learn about the course, its structure, tasks and goals.","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"While the previous course was about how to describe abstractions using classes, this one focuses on using objects based on examples from real libraries. Building call chains, working with data structures, and handling dates and strings in an object-oriented style are just some of the things we'll encounter in this course.\n\nThis course won't teach any new syntax, we've seen plenty of it already. OOP is a complex subject, and it's important to introduce new concepts fairly carefully, waiting until after we've gained some experience with basic concepts. A separate topic that will run like a thread through the rest of the course is design patterns or patterns – approaches for solving typical problems.\n\n* Fluent Interface.\n* Message passing.\n* Proxy objects.\n* Data structures (OOP versions).\n* Working with dates.\n* Class configurators.\n"},"id":324,"slug":"js-object-oriented-design","challenges_count":4,"name":"JS: Object oriented design","allow_indexing":true,"state":"approved","course_state":"not_finished","pricing_type":"paid","description":"Designing object-oriented code is a complex story with many nuances. In this course we will look at the basic principles of OO code design and get acquainted with popular libraries implemented in this style.","kind":"advanced","updated_at":"2026-01-20T11:42:30.910Z","language":"javascript","duration_cache":30900,"skills":["Properly write and structure code in class languages.","Understand how to configure code depending on the task.","Create user-friendly object interfaces for your subject area."],"keywords":[],"lessons_count":9,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NjYwNiwicHVyIjoiYmxvYl9pZCJ9fQ==--f56687c7a9f01672e30a943d43276c6fce7889f0/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":638,"slug":"js_object_oriented_design_drunkard_exercise","percent_of_success":"-"}],"recommendedLandings":[{"stack":{"id":15,"slug":"frontend","title":"Frontend Developer","audience":"for_beginners","start_type":"anytime","pricing_model":"purchase","priority":"low","kind":"profession","state":"published","stack_state":"finished","order":1,"duration_in_months":10},"id":22,"slug":"frontend","title":"Frontend Developer","subtitle":"","subtitle_for_lists":"","locale":"en","current":true,"duration_in_months_text":"10 months","stack_slug":"frontend","price_text":"from $49","duration_text":"10 months","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzNTMsInB1ciI6ImJsb2JfaWQifX0=--f1948fb0c5a45a6d76671a1a32b8cf6f0b53ee57/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Software%20code%20testing-cuate.png"}]},"url":"/courses/js-object-oriented-design","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 “JS: Object oriented design”</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>9 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>6 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>20 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>9 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>Designing object-oriented code is a complex story with many nuances. In this course we will look at the basic principles of OO code design and get acquainted with popular libraries implemented in this style.</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">Properly write and structure code in class languages.</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">Understand how to configure code depending on the task.</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 user-friendly object interfaces for your subject area.</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/js-object-oriented-design/lessons/about/theory_unit">About</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn about the course, its structure, tasks and goals.</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/js-object-oriented-design/lessons/patterns/theory_unit">Design Patterns</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn how to solve typical problems in programming</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/js-object-oriented-design/lessons/configuration/theory_unit">Configuration</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn one of the basic principles of class design</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/js-object-oriented-design/lessons/configuration-setters/theory_unit">Mutable configuration</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn how to correctly override the base configuration without creating dangerous situations</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/js-object-oriented-design/lessons/modeling/theory_unit">Entity Objects, Value Objects, and Embedded Objects</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn basic principles of organizing objects that describe the subject area</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/js-object-oriented-design/lessons/fluent-interface/theory_unit">Fluent Interface</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn how to create a fluid interface</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/js-object-oriented-design/lessons/builder/theory_unit">Builders</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn phased assembly of complex objects using composition and a fluid interface</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">8</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/js-object-oriented-design/lessons/proxy/theory_unit">Proxy</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn about the Proxy object, which can change the behavior of the object without changing the object code.</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">9</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/js-object-oriented-design/lessons/right-way-to-write-code/theory_unit">Code correctly</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn how to properly structure a program in OOP stylе</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">Special object</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">Lazy collections</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">Range of dates</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">War</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/frontend?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">10 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 beginners</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">Frontend Developer</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/eyJfcmFpbHMiOnsiZGF0YSI6MTIzNTMsInB1ciI6ImJsb2JfaWQifX0=--f1948fb0c5a45a6d76671a1a32b8cf6f0b53ee57/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Software%20code%20testing-cuate.png" alt="Frontend Developer" 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/eyJfcmFpbHMiOnsiZGF0YSI6NjYwNiwicHVyIjoiYmxvYl9pZCJ9fQ==--f56687c7a9f01672e30a943d43276c6fce7889f0/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>