Core learning modules  Основные учебные модули

While there is no prerequisite knowledge for starting this set of modules, we would recommend that you familiarize yourself with your computer, make sure you've got a basic set of required applications installed (such as web browsers and a code editor), and do some background reading on the web and web technologies, if you have not already done so. All these topics are covered in our Getting started modules.
Хотя для начала работы с этим набором модулей не требуется никаких предварительных знаний, мы рекомендуем вам ознакомиться с компьютером, убедиться, что у вас установлен базовый набор необходимых приложений (например, веб-браузеры и редактор кода), а также ознакомиться с дополнительной информацией о веб-технологиях и веб-технологиях, если вы этого ещё не сделали. Все эти темы рассматриваются в наших модулях для начинающих .

In particular, if you've never done any coding before, we'd recommend the Your first website module, which introduces you web technologies very gently and takes you through the process of building a simple website.
В частности, если вы никогда раньше не занимались кодированием, мы рекомендуем модуль «Ваш первый веб-сайт» , который очень подробно познакомит вас с веб-технологиями и проведет через процесс создания простого веб-сайта.

Structuring content with HTML
Структурирование контента с помощью HTML

To build a high-quality, usable, accessible website, you need to understand how to define your content structure using semantic HTML. This module covers the basics of the HTML language, before looking at key areas such as document structure, links, lists, images, forms, and more.
Чтобы создать качественный, удобный и доступный веб-сайт, необходимо понимать, как определять структуру контента с помощью семантического HTML. Этот модуль охватывает основы языка HTML, а затем рассматривает такие ключевые аспекты, как структура документа, ссылки, списки, изображения, формы и многое другое.

CSS styling basics  Основы стилей CSS

CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides all the CSS fundamentals you'll need for now, including syntax, features, and techniques.
CSS (каскадные таблицы стилей) используется для стилизации и разметки веб-страниц, например, для изменения шрифта, цвета, размера и интервалов между элементами контента, разделения его на несколько колонок, а также добавления анимации и других декоративных элементов. Этот модуль содержит все необходимые вам основы CSS, включая синтаксис, функции и методы.

CSS text styling  CSS-стили текста

With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.
После изучения основ языка CSS, следующая тема, на которой вам следует сосредоточиться, — это стилизация текста — одна из самых распространённых задач, которые вы будете выполнять с помощью CSS. Здесь мы рассмотрим такие основы, как настройка шрифта, жирности, курсива, межстрочного и буквенного интервалов, отбрасывания теней и других функций текста. Завершаем модуль рассмотрением применения пользовательских шрифтов на странице, а также стилизации списков и ссылок.

CSS layout  CSS-макет

In previous modules we looked at how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to correctly lay out your boxes in relation to one another, and the browser viewport. This module looks at floats, positioning, other modern layout tools, and building responsive designs that will adapt to different devices, screen sizes, and resolutions.
В предыдущих модулях мы рассматривали, как оформлять и управлять блоками, в которых находится ваш контент. Теперь пора разобраться, как правильно размещать блоки относительно друг друга и области просмотра браузера. В этом модуле рассматриваются плавающие элементы, позиционирование, другие современные инструменты вёрстки и создание адаптивных дизайнов, которые будут адаптироваться к различным устройствам, размерам экранов и разрешениям.

Dynamic scripting with JavaScript
Динамическое написание сценариев с использованием JavaScript

JavaScript is a huge topic, with so many different features, styles, and techniques to learn, and so many APIs and tools built on top of it. This module focuses mostly on the essentials of the core language, plus some key surrounding topics — learning these topics will give you a solid basis to work from.
JavaScript — обширная тема, предлагающая множество различных функций, стилей и техник для изучения, а также множество API и инструментов, созданных на его основе. Этот модуль посвящен в основном основам базового языка, а также некоторым ключевым сопутствующим темам — изучение этих тем даст вам прочную основу для дальнейшей работы.

JavaScript frameworks and libraries
JavaScript-фреймворки и библиотеки

JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience. In this set of articles, we aim to give you a comfortable starting point to help you begin learning frameworks.
Фреймворки JavaScript являются неотъемлемой частью современной frontend-разработки, предоставляя разработчикам проверенные инструменты для создания масштабируемых интерактивных веб-приложений. Многие современные компании используют фреймворки в качестве стандартного инструментария, поэтому многие вакансии frontend-разработчиков требуют опыта работы с фреймворками. В этом цикле статей мы стремимся предоставить вам удобную отправную точку для начала изучения фреймворков.

Accessibility  Доступность

Access to web content such as public services, education, e-commerce sites, and entertainment is a human right. No one should be excluded based on disability, race, geography, or other human characteristics. This module discusses the best practices and techniques you should learn to make your websites as accessible as possible.
Доступ к веб-контенту, такому как государственные услуги, образование, сайты электронной коммерции и развлечения, является неотъемлемым правом человека. Никто не должен быть исключен из доступа по признаку инвалидности, расы, географического положения или других человеческих особенностей. В этом модуле рассматриваются передовые практики и методы, которые вам следует освоить, чтобы сделать ваши веб-сайты максимально доступными.

Design for developers  Дизайн для разработчиков

The idea of this module is to (re-)introduce developers to design thinking. They may not want to work as designers, but having some basic user experience and design theory is good for everyone involved in building websites, no matter what their role. At the very least, even the most technical, "non-designer" developer should understand design briefs, why things are designed as they are, and be able to get into the mindset of the user. And it'll help them make their portfolios look better.
Идея этого модуля — (заново) познакомить разработчиков с дизайн-мышлением. Возможно, они не хотят работать дизайнерами, но базовый пользовательский опыт и знание теории дизайна полезны всем, кто занимается созданием веб-сайтов, независимо от их роли. Как минимум, даже самый технически подкованный, «не дизайнер» разработчик должен понимать дизайн-брифы, причины, по которым всё спроектировано именно так, и уметь понять образ мышления пользователя. И это поможет им улучшить свои портфолио.

Version control

Version control tools are an essential part of modern workflows, for backing up and collaborating on codebases. This module takes you through the essentials of version control using Git and GitHub.

The Frontend Developer Career Path ^{MDN learning partner}

Scrimba's Frontend Developer Career Path teaches all you need to know to be a competent front-end web developer, with fun interactive lessons and challenges, knowledgeable teachers, and a supportive community. Go from zero to landing your first front-end job! Many of the course components are available as standalone free versions.