Изучение веб-разработки

Изучение веб-разработки
=======================

Добро пожаловать в обучающий раздел MDN. Эта серия статей направлена на то, чтобы предоставить начинающим с нуля в веб-программировании всё необходимое для того, чтобы начать разрабатывать сайты.

Задача этого раздела не перевести вас из «новичка» в «эксперта», а перевести вас из «новичка» в «уверенного». Это должно дать вам возможность начать строить свой путь, изучая остальные материалы MDN и другие средние и продвинутые материалы, предполагающие существенные начальные знания.

Если вы начинаете с нуля, веб-разработка может оказаться непростой — мы будем держать вас за руку и давать вам достаточно подробностей, чтобы вы чувствовали себя комфортно и как следует изучили темы. Вы должны чувствовать себя как дома, независимо от того, студент ли вы, изучающий веб-разработку (самостоятельно или на занятиях), преподаватель, ищущий учебные материалы, любитель или кто-то, кто просто хочет больше узнать о том, как работают веб-технологии.

Что нового
----------

Контент в обучающем разделе регулярно пополняется. Мы начали вести примечания к версии обучающего раздела (en-US), чтобы показать, что изменилось.

Если у вас есть предложения о добавлении тем, которые вы хотели бы увидеть или которых, как вы считаете, не хватает, напишите нам на нашем форуме Discourse.

Хотите стать фронтенд-разработчиком?Мы составили курс, который включает всю важную информацию, необходимую для достижения вашей цели.Начать

С чего начать
-------------

Я новичок

Если вы совсем новичок в веб-разработке, мы рекомендуем вам начать работу со статьи «Начало работы с вебом», которая представляет собой практическое вступление в веб-разработку.

Уже что-то знаю

Если у вас уже есть какой-то набор знаний, то следующим шагом будет изучение HTML и CSS во всех подробностях: начните с нашей статьи «Введение в HTML», а затем загляните в статью «Вступление в CSS».

Погружаемся в программирование

Если вы уже чувствуете себя комфортно с HTML и CSS или в основном интересуетесь кодингом, то вы захотите погрузиться в JavaScript или разработку на стороне сервера. Загляните в разделы «Первые шаги в JavaScript» и «Первые шаги в программировании веб-сайтов на стороне сервера».

Фреймворки и инструменты

своив основы ванильного HTML, CSS и JavaScript, стоит приступить к изучению инструментов веб-разработки на стороне клиента (en-US), а затем углубиться в JavaScript-фреймворки для фронтенда и программирование веб-сайтов на стороне сервера.

**Примечание:** в нашем глоссарии вы можете найти термины и их определения. Кроме того, если у вас есть конкретный вопрос по веб-разработке, возможно, ответ найдётся в разделе «Распространённые вопросы».

Изучаемые темы
--------------

Ниже приводится список всех тем, которые мы рассматриваем в обучающем разделе MDN.

Начало работы с вебом

Практическое введение в веб-разработку для начинающих.

Изучение HTML: руководства и уроки

HTML — это язык, который мы используем для структурирования различных частей контента и определения их значения или цели. В этой теме подробно рассматривается HTML.

CSS: стилизация веб-страниц

CSS — это язык, который мы можем использовать для стилизации и разметки веб-контента, а также для описания такого поведения, как анимация. В этой теме подробно рассматривается CSS.

JavaScript: разработка клиентских скриптов для динамических веб-страниц

JavaScript — это язык сценариев, используемый для добавления динамической функциональности на веб-страницы. В этой теме рассказывается обо всём необходимом для того, чтобы научиться писать на JavaScript и понимать его.

Веб-формы: работа с пользовательскими данными

Веб-формы — мощный инструмент для взаимодействия с пользователями. Чаще всего они используются для сбора данных от пользователей или для управления пользовательским интерфейсом. В статьях, перечисленных ниже, мы рассмотрим все важные аспекты структурирования, стилизации и взаимодействия с веб-формами.

Доступность: сделаем интернет доступным для всех

Доступность — это практика предоставления доступа к веб-контенту как можно большему количеству людей, независимо от ограниченных возможностей здоровья, используемого устройства, региона или других отличительных факторов. В этой теме вы найдёте все, что вам нужно знать.

Производительность веб-приложений: делаем сайты быстрыми и отзывчивыми

Веб-производительность — это искусство обеспечения быстрой загрузки веб-приложений и их реагирования на действия пользователя, независимо от скорости соединения пользователя, размера экрана, сети или возможностей устройства.

Инструменты и тестирование (en-US)

В этой теме рассматриваются инструменты, которые разработчики используют для оптимизации своей работы, например: инструменты для кросс-браузерного тестирования, линтеры, средства форматирования, инструменты преобразования, системы контроля версий, инструменты развёртывания и клиентские JavaScript-фреймворки.

Серверное программирование веб-сайтов

Даже если вы преимущественно интересуетесь фронтенд-разработкой, всё равно полезно знать, как работают серверы и функции, написанные на серверном коде. В этой теме представлены общие сведения о том, как работает серверная часть, и подробные руководства по созданию серверного приложения с использованием двух популярных фреймворков: Django (Python) и Express (Node.js).

Получение наших примеров кода
-----------------------------

Представленные в обучающем разделе примеры кода доступны на GitHub. Если вы хотите скопировать их все на свой компьютер, самый простой способ — загрузить ZIP-архив с последней веткой основного кода.

Если вы предпочитаете копировать репозиторий более гибким способом, позволяющим автоматические обновления, вы можете использовать следующую, более сложную инструкцию:

1. Установите Git на свой компьютер. Это основное программное обеспечение системы контроля версий, разрабатываемое компанией GitHub.
2. Откройте командную строку (Windows) или терминал (Linux, macOS).
3. Чтобы скопировать репозиторий обучающего раздела в папку с именем learning-area в текущем местоположении, на которое указывает ваша командная строка/терминал, используйте следующую команду:
```

git clone https://github.com/mdn/learning-area
```

4. Теперь вы можете войти в директорию и найти нужные вам файлы (с помощью Finder/Проводника либо команды cd).

Вы можете обновить репозиторий `learning-area` и добавить любые изменения, внесённые в основную версию на GitHub, выполнив следующие действия:

1. В командной строке / терминале войдите в директорию `learning-area` командой `cd`. Например, если вы в родительской директории:
```

cd learning-area
```

2. Обновите репозиторий, выполнив следующую команду:
```

git pull
```

Связаться с нами
----------------

Если вы хотите оставаться с нами на связи, то лучший способ — отправить сообщение в наши списки рассылки или IRC-каналы. Мы хотели бы услышать от вас обо всём, чего не хватает или неправильно на нашем сайте, запросы новых тем по обучению, просьбы о помощи с тем, что вы не понимаете, или что-то ещё.

Если вам интересно создание или улучшение контента, посмотрите, как вы можете помочь, и оставайтесь на связи! Мы будем очень рады поговорить с вами, обучающийся ли вы, преподаватель, опытный веб-разработчик или кто-либо другой, заинтересованный в улучшении обучения.

Смотрите также
--------------

Codecademy

Крутой интерактивный сайт для изучения языков программирования с нуля.

Code.org

Базовая теория кода и практика, нацеленная в основном на детей или совсем новичков.

EXLskills

Бесплатные и открытые курсы для обучения техническим навыкам, с наставничеством и проектным обучением.

Карта веб-грамотности

Структура веб-грамотности начального уровня и навыков 21 века, которая предоставляет доступ к преподавательской деятельности, отсортированной по категориям.

Преподавательская деятельность

Серия материалов для обучения (и изучения), созданная Mozilla Foundation, покрывающая всё от базовой веб-грамотности и приватности JavaScript до взлома Minecraft.

Edabit

Тысячи интерактивных задач JavaScript.


Разработка игр

Разработка игр
==============

Игры являются одной из наиболее популярных компьютерных тем. С постоянным ростом новых технологий становится возможной разработка более мощных и красочных игр, которые можно запустить в любом современном браузере.

Введение в разработку web игр
-----------------------------

Введение в разработку игр для Web

Ознакомление с технологиями, полезными для разработчиков игр, а также - как начать разработку игр, используя Web-технологии. Эта статья также рассматривает бизнес-кейс для создания web-игр.

Анатомия видео игр (en-US)

Что такое видео игры на самом деле? Есть определённые вещи, которые являются общими для всех игр (даже если, на первый взгляд, так и не кажется). Данная статья попытается объяснить такие понятия, как основные циклы, в совершенно общем контексте. При этом она всё равно соответствует веб-стандартам.

Особые обсуждения для разработчиков игр

Эта статья из App Center бегло рассматривает вещи, которые необходимо учитывать при попытке создать игру, которая будет работать как открытое веб-приложение.

Дополнительные ресурсы
----------------------

Создание Новых Игр

Совместный сайт с участием большого количества открытых веб-обучающих программ по разработке игр. Не очень активно в последнее время, но всё же содержит несколько хороших ресурсов.

Creative JS

Коллекция впечатляющих JavaScript методов и экспериментов, не специфичных для игр, но тем не менее полезных. Не очень активно в последнее время, но всё же содержит несколько хороших ресурсов.

Шаблоны программирования игр

Онлайн-книга, написанная Bob Nystrom, которая рассказывает о шаблонах программирования в контексте разработки игр с целью помочь разработчикам создавать более эффективный, рациональный код.

Artillery blog

В играх HTML5 компании Artillery есть несколько полезных статей в своём блоге.

Создание игр для Firefox OS

Краткое руководство по созданию 2D-игр с HTML5 для распространения на Firefox и других мобильных платформах.

Gamedev.js Weekly

Еженедельная информационная бюллетень о разработке HTML5 игр, которая высылается каждую пятницу. Содержит последние статьи, руководства, инструменты и ресурсы.

HTML5 Game Devs Forum

Форумы для разработчиков, создателей фреймворков и издателей. Задавайте вопросы, получайте отзывы, помогайте другим.

HTML5 Game Engine

Список наиболее популярных игровых фреймворков HTML5, их рейтинг, функции и примеры.

JSBreakouts

Сравните JavaScript клоны Breakout в разных средах, чтобы помочь вам выбрать правильный для вас.

Tuts+ Game Development

Учебные пособия и статьи о развитии игры в целом.

#BBG IRC chat

Поговорите с разработчиками напрямую в режиме реального времени.

HTML5 Gamedev Starter

Starter для новых игровых разработчиков, кураторский список ссылок на различные полезные ресурсы в Интернете.

js13kGames

Конкурс кодирования JavaScript для разработчиков игр HTML5 с ограничением размера файла, равным 13 килобайтам. Все представленные игры доступны в удобном для чтения виде на GitHub.

Mozilla Hacks blog

Категория игр в блоге Mozilla Hacks, содержащем интересные статьи, посвящённые gamedev.

Темы разработки игр
-------------------

Инструменты

Это раздел об инструментах, созданных для облегчения создания эффективных игр для Web, таких как фреймворки, компиляторы (например, Emscripten), и инструменты для отладки. Объясняются основные концепции каждого, даётся прочная база для работы с ними.

Технические приёмы (en-US)

Этот раздел содержит множество статей об очень важных техниках создания игр, таких как физика, обнаружение столкновения, анимация, 3D, хранение данных, и многое другое.

Рабочий процесс (en-US)

Этот раздел включает в себя несколько тематических исследований об основных инструментах и методах, охватываемых выше, и применение их к созданию удивительных игр. Здесь каждый найдёт что-то полезное, являетесь ли вы опытным веб-разработчиком, желающим писать 2D или 3D игры, С++ разработчиком, задумавшим портировать свои игры в веб, или мобильным разработчиком, ищущим помощь в написании лучших мобильных игр.

Примеры
-------

BananaBread

Многопользовательский трёхмерный шутер от первого лица, разработанный с использованием Emscripten, WebGL и WebRTC. Одна из первых демонстрационных игр для WebGL.

Monster Madness

Сетевой шутер на основе WebGL и asm.js, разработанный Nom Nom Games и Trendy entertainment.

Auralux

Стратегия WebGL и asm.js: захватите все солнца, чтобы победить!

Swooop

Полёт на самолёте в игре: контролируйте свой самолёт и собирайте драгоценности. Снова, созданный с PlayCanvas.

Polycraft

Кораблекрушение. Исследуйте остров и победите монстров.

Dead Trigger 2

Классический zombie splatter action, выполненная в Unity3D.

Biolab Disaster

Side-scrolling платформенный шутер . Ранняя попытка на холсте - классика.

**Примечание:** Для получения расширенного списка примеров см. нашу страницу примеров.

**Примечание:** Обратите внимание, что мы отслеживаем текущую работу над документацией по разработке игр на нашей Game development documentation status странице. Если вы хотите внести свой вклад в документацию по разработке игр, ознакомьтесь с этой страницей, чтобы узнать, что нужно делать.


Глоссарий MDN Web Docs: определения веб-терминов
================================================

В веб-технологиях используется большое количество аббревиатур и сленговых слов. В этом глоссарии собраны определения слов и сокращений, которые понадобятся для понимания и работы со всемирной сетью.

Термины глоссария перечислены в боковой панели слева.

**Примечание:** Глоссарий развивается непрерывно. Каждый может внести свой вклад в его развитие добавляя новые страницы или улучшая уже существующие.


WebAssembly

WebAssembly
===========

WebAssembly – это новый открытый формат байт-кода, исполняемого современными браузерами. Он позволяет переносить код, написанный на таких языках как C, C++, C#, Rust, в низкоуровневые ассемблерные инструкции и использовать его в сети. Формат имеет компактные размеры, высокую производительность, близкую к нативной, и может одновременно работать с JavaScript.

В двух словах
-------------

WebAssembly оказывает огромное влияние на веб-платформу — он предоставляет способ исполнения кода, написанного на различных языках, в сети, со скоростью близкой к нативной, чего ранее невозможно было достичь.

WebAssembly разработан для дополнения JavaScript – используя WebAssembly JavaScript API вы можете загружать модули WebAssembly в приложения JavaScript и обеспечивать взаимодействие между ними, используя общие функции. Такой подход позволяет вам получить производительность и мощность WebAssembly, а также выразительность и гибкость JavaScript в ваших приложениях, даже если вы не знаете как писать код WebAssembly, а используете готовые модули.

И что ещё лучше, так это то, что WebAssembly разрабатывается как веб-стандарт W3C WebAssembly Working Group и Community Group при активном участии основных производителей браузеров.

Руководства
-----------

Основы WebAssembly

Прежде всего, начните с чтения общего описания WebAssembly - что это такое, чем это может быть полезно, почему он подходит для веб-платформы и как его использовать.

Компиляция кода C/C++ в WebAssembly

После того как вы написали код на C / C ++, вы можете скомпилировать его в .wasm, например, с помощью инструмента Emscripten. Давайте посмотрим, как это работает.

Компиляция существующего кода C в WebAssembly (en-US)

Главное, что позволяет WebAssembly, это использование огромного множества разнообразных и проверенных временем библиотек, написанных на языке C, в сети.

Компиляция Rust в WebAssembly

Если у вас есть уже написанный код на Rust, вы можете скомпилировать его в WebAssembly. Из этого руководства вы узнаете всё, что вам нужно знать, чтобы скомпилировать проект на Rust в wasm и использовать его в существующем веб-приложении.

Загрузка и запуск кода WebAssembly

После того, как у вас появился .wasm, эта статья расскажет, как из него получить, скомпилировать и создать экземпляр модуля, совмещая WebAssembly JavaScript API c Fetch или XHR API.

Использование WebAssembly JavaScript API

После того, как вы загрузили модуль .wasm, вы захотите его использовать. В этой статье мы покажем вам, как использовать WebAssembly через WebAssembly JavaScript API.

Экспортируемые функции WebAssembly

Экспортируемые функции WebAssembly — это функции нативного модуля, доступные в JavaScript, которые позволяют вызывать код WebAssembly из JavaScript. В этой статье описывается, что они из себя представляют.

Описание текстового формата WebAssembly

Эта статья описывает текстовый формат WebAssembly. Это низкоуровневое текстовое представления модулей .wasm используемое в инструментах разработчика во время отладки.

Перевод из текстового формата WebAssembly в wasm

Эта статья содержит руководство по переводу модулей WebAssembly, написанных в текстовом формате, в двоичный файл .wasm.

Ссылки на API
-------------

`WebAssembly`

Этот объект является пространством имён для всех функций, связанных с WebAssembly.

`WebAssembly.Module()` (en-US)

Объект `WebAssembly.Module` содержит не контролируемый WebAssembly код, который уже скомпилирован браузером и может эффективно использоваться совместно с Workers и иметь несколько экземпляров.

`WebAssembly.Instance()` (en-US)

Объект `WebAssembly.Instance` это контролируемый, исполняемый экземпляр `Module`. `Instance` содержит все экспортированные функции WebAssembly, которые позволяют вызывать код WebAssembly из JavaScript.

`WebAssembly.instantiateStreaming()` (en-US)

Функция `WebAssembly.instantiateStreaming()` является основной для компиляции и создания экземпляра кода WebAssembly, возвращающая одновременно `Module` и `Instance`.

`WebAssembly.Memory()` (en-US)

`WebAssembly.Memory` это изменяемый `ArrayBuffer` содержащий в себе данные не имеющие типа к которым обращается `Instance`.

`WebAssembly.Table()`

`WebAssembly.Table` объект является изменяемым типизированным массивом значений, таких как ссылки на функции, которые доступны `Instance`.

`WebAssembly.CompileError()` (en-US)

Создаёт новый WebAssembly `CompileError` объект.

`WebAssembly.LinkError()` (en-US)

Создаёт новый WebAssembly `LinkError` объект.

`WebAssembly.RuntimeError()` (en-US)

Создаёт новый WebAssembly `RuntimeError` объект.

Примеры
-------

* WASMSobel
* Больше примеров вы можете найти в нашем репозитории webassembly-examples.
Спецификация
------------

| Specification |
| --- |
| WebAssembly JavaScript Interface  |

Совместимость с браузерами
--------------------------

{{Compat}}Смотрите также
--------------

* WebAssembly on Mozilla Research
* webassembly.org
* WebAssembly articles on Mozilla Hacks blog
* W3C WebAssembly Community Group
* Large-Allocation HTTP header (en-US)
* Emscripting a C Library to Wasm


Проект MDN

Проект MDN
==========

**Сеть Разработчиков Mozilla** (Mozilla Developer Network или MDN) — это вики, в которой мы описываем Открытый Интернет, технологии Mozilla, Firefox OS и другие темы, посвящённые веб-разработке. Любой желающий может добавить или отредактировать содержимое вики. Совсем не обязательно быть программистом или знать в совершенстве описываемые технологии; есть множество разных задач, не требующих особых знаний или умений, от простых (чтение с подтверждением о соответствии материала и исправление опечаток) до сложных (написание документации к API).

Цель проекта MDN — задокументировать Открытый Интернет, технологии и проекты Mozilla. Мы приглашаем вас помочь нам!

Нам требуется ваша помощь! Это просто. Вам не нужно просить разрешения или бояться совершить ошибку. C другой стороны, вы можете присоединиться к сообществу MDN; мы здесь, чтобы помочь вам! Приведённая ниже информация поможет вам начать.

* Быстрый старт для новичков
 Вы впервые столкнулись с MDN и желаете узнать, как сделать её ещё лучше? Начните отсюда!
* Я продвинутый пользователь
 Если вы уже комфортно чувствуете себя на MDN, получите доступ к нашему полному и глубокому руководству для участников сообщества.
* Расскажите другим о Mozilla
 Если вам нравится MDN, помогите нам популяризовать его! Получите инструменты, руководства, арт для продвижения и развития MDN.


Веб-технологии для разработчиков

Веб-технологии для разработчиков
================================

Современные веб-технологии предоставляют разработчикам неограниченные возможности для реализации своих идей. Для того, чтобы вы могли использовать весь их потенциал, необходимо знать как правильно их использовать. На этой странице мы постарались собрать ссылки на документацию по различным технологиям, которые могут быть вам полезны.

Веб-технологии
--------------

### Основы веб разработки

HTML

Язык гипертекстовой разметки — это язык, используемый для определения структуры и описания содержания веб-страницы в структурированной форме.

CSS

Каскадные таблицы стилей используются для описания внешнего вида веб-контента.

HTTP

HyperText Transfer Protocol (HTTP) — это протокол, по которому доставляются HTML и прочие медиа-документы.

### Написание сценариев

JavaScript

JavaScript — язык программирования, широко используемый для реализации взаимодействия пользователя с веб-сайтами и приложениями.

Веб API (en-US)

Данный раздел включает справочные материалы по каждому из отдельно взятых API, содержащих огромные возможности для создания веб-сценариев, включая DOM (en-US) и все связанные с ним API, которые вы можете использовать для построения веб-контента и приложений.

* Справочник по веб API содержит все интерфейсы в алфавитном порядке.
* WebAPI (en-US) — данная страница содержит перечень API для взаимодействия с устройствами и другие API не менее полезные для приложений.
* Справка по событиям содержит список событий, которые возникают на веб-странице или в веб-приложении.

Веб Компоненты

Веб Компоненты - это набор различных технологий, позволяющих создавать собственные переиспользуемые элементы - со своей функциональностью, инкапсулированной от остального кода - и использовать их в ваших веб-приложениях.

### Графика

Canvas

`<canvas>` элемент предоставляет API для рисования 2D-графики, с использованием JavaScript.

SVG

SVG (Scalable Vector Graphics - масштабируемая векторная графика) - позволяет вам описать изображение в виде линий, кривых и других геометрических фигур. Благодаря этому можно масштабировать рисунок без потери качества.

WebGL

WebGL - это JavaScript API, позволяющее рисовать 3D или 2D изображения используя HTML-элемент `<canvas>`. Эта технология позволяет использовать стандарт OpenGL ES в Web-содержимом.

### Аудио, видео и мультимедиа

Web медиа-технологии (en-US)

Список связанного с медиа API, со ссылками на документацию для каждого из них.

Media capture and streams API (en-US)

Справочник для API, используемого для потоковой передачи, записи и управления данным как локально, так и по сети. Также включает в себя инструменты для использования локальных камер и микрофонов для захвата видео, аудио и статичных изображений.

Использование HTML аудио и видео

Включение видео и\или аудио в веб-страницу и управление их воспроизведением.

WebRTC

RTC в WebRTC означает Real-Time Communications (связь в реальном времени) - технологию, обеспечивающую поток аудио или видео и обмен данным между одноранговыми клиентами браузера.

### Прочее

MathML

Математический язык разметки предоставляет возможность показа комплексных математических уравнений и синтаксиса.

XSLT

Extensible Stylesheet Language Transformations (XSLT) позволяет преобразовать XML-документ в человекочитаемый HTML.

EXSLT (en-US)

Функциональное расширение, которое предоставляет дополнительные возможности для XSLT.

XPath (en-US)

XPath позволяет вам выбрать DOM-узел в документе, используя более мощный синтаксис, чем предоставляется обычными CSS selectors.

Документация по типам
---------------------

Руководство веб-разработчика

Руководство веб-разработчика предоставляет полезные пошаговые материалы, которые помогут вам в полной мере использовать веб-технологии для выполнения ваших задач и реализации ваших идей.

Учебные материалы для веб-разработчиков

Перечень учебных материалов позволит вам пошагово изучить API, технологии и расширить свой кругозор в области веб-технологий.

Справочные материалы (en-US)

На данной странице будут представлены ссылки на всю справочную информацию, имеющуюся в MDN; а пока можно использовать ссылки на веб-технологии из левой части данной страницы.

Прочие разделы
--------------

Центр приложений (en-US)

Содержит документацию для разработчиков веб-приложений. При помощи данных материалов можно научиться создавать приложения для мобильных устройств, персональных компьютеров и Firefox OS.

Общедоступность

Общедоступность (доступность, accessibility) в веб-разработке означает предоставление возможности использования веб-сайтов максимально возможному числу людей, даже если эти люди имеют некоторые физиологические ограничения. Этот раздел содержит информацию о разработке наиболее доступного веб-контента для таких людей.

Безопасность

Этот раздел уделяет внимание вопросам безопасности веб-сайтов и веб-приложений.


Mozilla

Mozilla
=======

Узнайте как скачать и выполнить сборку кода проектов Mozilla. А также полезные статьи о том как работает этот код, и как собирать дополнения для приложений Mozlla, и т.д.

FirefoxFirefox - это популярный веб-браузер от Mozilla, доступный на многих платформах, включая Windows, Mac OS X и Linux, а также на мобильных устройствах под управлением Android и iOS. Firefox широко поддерживает самые современные веб-технологии и также имеет удобные встроенные инструменты для разработки веб-приложений, Firefox - это отличный выбор, как для обыкновенных пользователей, так и для веб-разработчиков.

ДополненияДополнения добавляют новые функциональные возможности в Gecko-приложения, такие, как Firefox, SeaMonkey и Thunderbird. Есть два основных типа дополнений: расширения, которые добавляют новые функции в приложение, и темы, изменяющие пользовательский интерфейс приложения.


Фронтенд разработчик - Изучение веб-разработки

Фронтенд разработчик
====================

Добро пожаловать на курс обучения Фронтенд разработчика!

Здесь мы предлагаем вам структурированный курс, который научит вас всему, что вам необходимо знать, чтобы стать фронтенд разработчиком. Изучение в рекомендуемом порядке каждого раздела позволит получить новые навыки, или улучшить имеющиеся. Также в каждом разделе вы найдёте упражнения и тесты. Прежде чем переходить к следующей теме обязательно проверьте себя.

Основные темы
-------------

В курсе рассматриваются темы:

* Базовая настройка и как правильно проходить курс
* Веб-стандарты и лучшие решения (такие как доступность и кросс-браузерная совместимость)
* HTML, язык, описывающий структуру и смысл контента
* CSS, язык, используемый для оформления страниц
* JavaScript, язык сценариев, используемый для создания динамических функций в веб содержимом
* Инструменты, используемые для облегчения современной веб-разработки на стороне клиента.

Различные разделы предназначены для проработки по порядку, но каждый из них также самодостаточен. Если вы, к примеру, уже хорошо знакомы с HTML, то можете перейти к разделу CSS.

Необходимые условия
-------------------

Вам не нужно никаких предварительных знаний, чтобы начать этот курс. Всё, что вам необходимо – это компьютер, который может работать с современными браузерами, интернет соединение и готовность учиться.

Если вы не уверены, подходит ли вам фронтенд разработка и/или вы хотите получить подробное представление, то прежде чем начинать полный курс, вам следует сначала изучить наш раздел Начало работы с веб модулем.

Получить помощь
---------------

Мы постарались сделать изучение фронтенд разработки настолько комфортным, насколько это возможно. Вероятно, вы всё равно рано или поздно попадёте в безвыходное положение, когда что-то будет непонятно или какой-то код не будет работать.

Не беспокойтесь. Мы все иногда застреваем, и начинающие, и профессиональные веб-разработчики. Статья Обучение и получение помощи предоставит вам серию советов и подсказок для поиска информации и помощи самому себе. Если вы всё ещё в замешательстве, задайте вопрос по возникшей проблеме на нашем Форуме.

Давайте начнём,

Удачи!

Путь обучения
-------------

### Начало работы

Время изучения: 1–2 часа

#### Необходимые условия

Ничего, кроме базовой компьютерной грамотности.

#### Как понять, что я могу двигаться дальше?

В этой части курса нет оценок, но обязательно убедитесь, что вы ничего здесь не пропустили — важно всё настроить и подготовиться к выполнению упражнений в дальнейшем.

#### Основные руководства

* Установка базового программного обеспечения— базовая настройка инструмента (15 минут чтения)
* История всемирной сети и веб-стандартов (45 минут чтения)
* Обучение и получение помощи (45 минут чтения)
### Семантика и структура с HTML

Время завершения: 35–50 часов

#### Необходимые условия

Ничего, кроме базовой компьютерной грамотности и базовой среды разработки веб-приложений.

#### Как понять, что я могу двигаться дальше?

Оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.

#### Основные модули

* Введение в HTML (15–20 часов чтения/упражнений)
* Мультимедиа и встраивание (15–20 часов чтения/упражнений)
* HTML таблицы (5–10 часов чтения/упражнений)
### Стилизация и размещение с помощью CSS

Время завершения: 90–120 часов

#### Необходимые условия

Рекомендуется иметь базовые знания HTML перед началом изучения CSS. Сначала вы должны изучить Введение в HTML.

#### Как понять, что я могу двигаться дальше?

Оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.

#### Основные модули

* Первые шаги в CSS (10–15 часов чтения/упражнений)
* Структурные элементы CSS (35–45 часов чтения/упражнений)
* Стилизирование текста (15–20 часов чтения/упражнений)
* CSS разметка (30–40 часов чтения/упражнений)

#### Дополнительные ресурсы

* Книга рецептов CSS
### Интерактивность с JavaScript

Время завершения: 135–185 часов

#### Необходимые условия

Рекомендуется иметь базовые знания HTML перед началом изучения JavaScript. Сначала вы должны изучить Введение в HTML.

#### Как понять, что я могу двигаться дальше?

Оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.

#### Основные модули

* Первые шаги в JavaScript (30–40 часов чтения/упражнений)
* Структурные элементы Javascript (25–35 часов чтения/упражнений)
* Клиентский веб API (30–40 часов чтения/упражнений)
* Введение в объекты Javascript (25–35 часов чтения/упражнений)
* Асинхронный Javascript (25–35 часов чтения/упражнений)
### Веб формы — Работаем с данными пользователя

Время завершения: 40–50 часов

#### Необходимые условия

Для эффективного использования форм требуется знание HTML, CSS и JavaScript. Они сложны и поэтому рассматриваются отдельно.

#### Как понять, что я могу двигаться дальше?

Упражнения и оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.

#### Основные модули

* Веб формы (40–50 часов)
### Заставляем веб работать для всех

Время завершения: 60–75 часов

#### Необходимые условия

Рекомендуется ознакомиться с HTML, CSS и JavaScript перед началом работы с этим разделом - многие из техник и лучших практик используются в нескольких технологиях.

#### Как понять, что я могу двигаться дальше?

Упражнения и оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.

#### Основные модули

* Кросс-браузерное тестирование (25–30 часов чтения/упражнений)
* Доступность (20–25 часов чтения/упражнений)
### Современные инструменты

Время завершения: 55–90 часов

#### Необходимые условия

Рекомендуется ознакомиться с HTML, CSS и JavaScript перед началом работы с этим разделом, так как обсуждаемые инструменты работают со многими из этих технологий.

#### Как понять, что я могу двигаться дальше?

В этом наборе модулей нет специальных статей для оценки, но учебные примеры в конце 2-го и 3-го модулей хорошо подготовят вас к пониманию основ современного инструментария.

#### Основные модули

* Git и Github (5 часов чтения)
* Понимание инструментов на стороне клиента (en-US) (20–25 часов чтения/упражнений)
* Понимание JavaScript-фреймворков для фронтенда (30-60 часов чтения/упражнений)


Изучение HTML: руководства и уроки - Изучение веб-разработки

Изучение HTML: руководства и уроки
==================================

Чтобы создавать веб-сайты, вы должны знать о HTML — фундаментальной технологии, которая используется для определения структуры веб-страницы. HTML применяется для того, чтобы определить как должен отображаться ваш контент: в виде абзаца, списка, заголовка, ссылки, изображения, мультимедийного проигрывателя, формы или же в виде одного из множества других доступных элементов, а также возможного нового элемента, который вы сами создадите.

Путь обучения (образовательная траектория)
------------------------------------------

В идеале вы должны начать своё учебное путешествие с изучения HTML. Начните с прочтения раздела "Введение в HTML". Затем вы можете перейти к изучению более продвинутых тем, таких как:

* "CSS (Каскадные таблицы стилей)", и как их использовать для оформления (стилизации) HTML-документа (например, изменение шрифта и его размера, добавление границы и теней для элементов, разбиение страницы на несколько столбцов, добавление анимации и других визуальных эффектов).
* "JavaScript", и как его использовать для придания динамической функциональности веб-страницам (например, определение вашего местоположения и отображение его на карте, создание элементов, которые будут появляться/исчезать при нажатии на кнопку, сохранение данных пользователей локально на их компьютерах и многое другое).

Прежде чем приступить к этой теме, вы должны иметь хотя бы базовое представление об использовании компьютеров вообще и уметь "пассивно" использовать Интернет (т.е. уметь просматривать веб-страницы, быть потребителем контента). У вас должна быть базовая рабочая среда, описанная в разделе "Установка базового программного обеспечения", а также вы должны понимать, как создавать файлы и управлять ими, что подробно описано в разделе "Работа с файлами" — обе статьи являются частью нашего модуля для новичков - "Начало работы с вебом".

Перед тем, как начать эту тему, рекомендуется пройтись по разделу "Начало работы с вебом", однако это необязательно; многое из того, что описано в статье "Основы HTML", также рассматривается и во "Введении в HTML", причём даже более подробно.

Модули
------

Данный раздел содержит модули, которые расположены в порядке, наиболее оптимальном для их изучения. Вам определённо следует начать с первого модуля.

Введение в HTML

Этот модуль даёт основу, которая позволит вам использовать важные понятия и синтаксис, вы рассмотрите применение HTML к тексту, узнаете как создать гиперссылки и как использовать HTML для структурирования веб-страницы.

Мультимедиа и встраивание

В этом модуле рассматривается использование HTML для подключения мультимедиа-контента к вашим веб-страницам, включая различные способы встраивания изображений, видео и аудио и даже других веб-страниц.

HTML Таблицы

Представление табличных данных на веб-странице в понятном, доступном образе, может стать проблемой. Этот модуль описывает основы табличной разметки, а также более сложные функции, такие как реализация подписок и резюме.

HTML Формы

Формы - очень важная часть интернета, они обеспечивают большую часть функциональных возможностей, необходимых для взаимодействия с веб-сайтом, например, регистрация и вход в систему, отправка отзывов, покупка продуктов и многое другое. В этом модуле вы начнёте с создания частей форм на стороне клиента.

Решение общих HTML задач
------------------------

Использование HTML для решения общих задач содержит ссылки на разделы контента, объясняющего, как использовать HTML для решения очень распространённых проблем при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение содержимого, создание базовой формы и т.д.

Смотрите также
--------------

HTML (HyperText Markup Language) на MDN.

Отправная точка HTML документации на MDN, там вы сможете найти как подробное описание основных элементов и их атрибутов, так и более продвинутые уроки по языку, это отличное место для старта.


Научитесь стилизовать HTML с помощью CSS - Изучение веб-разработки

Научитесь стилизовать HTML с помощью CSS
========================================

Каскадные таблицы стилей — или CSS — это технология, которую следует изучать непосредственно после HTML. В отличие от HTML, который служит для определения структуры и семантики содержимого, CSS отвечает за его внешний вид и отображение. К примеру, с помощью CSS можно изменять шрифт, цвет, размер, межстрочный интервал, разделять содержимое на колонки, а также добавлять анимацию и другие декоративные элементы.

#### Хотите стать frontend-разработчиком?

Мы составили курс, который содержит всю необходимую информацию для достижения этой цели.

**Начать изучение курса**

Необходимые условия
-------------------

Прежде чем браться за CSS, вам стоит разобраться с основами HTML. Мы рекомендуем сначала изучить модуль Введение в HTML

После того как вы разберётесь с основами HTML, мы рекомендуем продолжать изучение HTML и CSS одновременно, переключаясь между темами. HTML гораздо интереснее в сочетании с CSS, и вы не можете по настоящему изучить CSS не зная HTML

В данном разделе содержится информация, которая требует базового знакомства с компьютером и интернетом. В статье Установка рабочего пространства подробно описано необходимое ПО и способы его установки, необходимо также будет уметь создавать и управлять файлами, в чём поможет статья Работа с файлами, которая включена в полное руководство для новичка Основы веб.

Перед тем как начинать данный раздел, мы рекомендуем пройти руководство Основы веб, хотя это вовсе не обязательно — большая часть того, что вы найдёте в статье об основах CSS также встречается в разделе Введение в CSS, хотя и более детально.

Модули
------

Этот раздел содержит модули в порядке, наиболее подходящем для работы с ними. Лучше всего начать с самого первого.

Введение в CSS

CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц — например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML.

Устройство CSS

Этот модуль продолжается с того места, где закончился модуль введение в CSS — теперь, после того как вы познакомились с языком и получили опыт его использования, пришло время погрузится немного глубже. В этот модуле рассказывается про каскад и наследование, все доступные типы селекторов, единицы измерения, размеры, стилизацию фона и рамок, отладку, и многое другое.

Цель этого модуля — предоставить вам инструментарий для написания компетентного CSS, перед переходом к более специфичным дисциплинам, как стилизация текста и CSS раскладки.

Стилизация текста

После изучения основ, следующая тема, которую стоит изучить — стилизация текста. Это одна из самых распространенных вещей, для которых используется CSS. В этом модуле мы рассмотрим основы стилизации текста, включая установку шрифта, жирность, курсив, межстрочный и межбуквенный интервалы, тени и другие особенности оформления. В завершении модуля мы рассмотрим подключение пользовательских шрифтов на странице, а так же стилизацию списков и ссылок

CSS раскладки

К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение раскладки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как использовать современные методы раскладки, такие как Flexbox и CSS grid, и некоторые традиционные методы раскладки, которые все ещё применяются.

Решаем часто встречающиеся проблемы в CSS
-----------------------------------------

В разделе **Использование CSS для решения общих проблем** даны ссылки на разделы, объясняющие, как следует использовать CSS для решения самых распространённых проблем при создании веб-страницы.

В самом начале вы будете применять цвет к тексту и фону HTML-элементов, изменять их размер, форму, местоположение, добавлять и стилизовать границы. Однако с углублённым знанием даже основ CSS вы сможете сделать практически что угодно. Одним из плюсов изучения CSS является то, что вы быстро начнёте понимать, можно или нельзя что-то сделать средствами CSS, даже если вы ещё не уверены, как это сделать.

"CSS странный"
--------------

CSS иначе, чем большинство языков программирования и инструментов для дизайна, с которыми вы можете столкнуться. Почему это работает именно так? В следующем видео, Мириам Сюзанна дает объяснение того, почему CSS работает так, как он работает, и почему он так развивался:

Смотрите также
--------------

CSS на MDN

Основная точка входа для CSS документации на MDN, где вы найдете вы найдете справочную информацию по функциям языка CSS. Хотите знать все значения, которые может принимать какое-либо свойство? Тогда вам сюда


Веб-производительность - Изучение веб-разработки

Веб-производительность
======================

Для разработки веб-сайтов необходимы HTML, CSS и JavaScript. Чтобы создавать веб-сайты и приложения, которые люди хотят использовать, которые привлекают и удерживают пользователей, вам нужно создать ?? хороший пользовательский опыт. Частью такого пользовательского опыта является обеспечение быстрой загрузки контента и отзывчивости на взаимодействие с пользователем. Это известно как веб-performance, и в этом разделе вы сосредоточитесь на основах создания эффективных веб-сайтов.

В оставшихся частях учебного материала для новичков мы старались максимально придерживаться лучших практик Интернета, таких как производительность и доступность, однако было бы хорошо сосредоточиться и на таких темах. Убедиться, что вы знакомы с ними.

Путь Обучения
-------------

Хотя знание HTML, CSS и JavaScript необходимо для реализации многих рекомендаций по повышению производительности сети, знание того, как создавать приложения, не является необходимым предварительным условием для понимания и измерения perfomance сети. Однако мы рекомендуем, чтобы перед тем, как вы приступили к работе с этим модулем, вы получили хотя бы общее представление о веб-разработке, проработав наше Начало работы с сетью модулем.

Также было бы полезно углубиться в эти темы с помощью таких модулей, как:

* Введение в HTML
* CSS первые шаги
* JavaScript первые шаги

После того, как вы проработаете этот модуль, вы, вероятно, захотите глубже изучить веб-производительность - вы можете найти много дополнительных учений в нашем разделе веб-производительности, включая обзоры API performance, инструментов тестирования и анализа, а также ошибки, связанные с узкими местами performance.

Справочники
-----------

This topic contains the following guides. The following is a suggested order for working through them; you should definitely start with the first one.

Важность веб-производительности (en-US)

В этой статье обсуждается важность производительности для доступности, пользователей и ваших бизнес-целей

What is web performance? (en-US)

You know web performance is important, but what is constitutes web performance? This article introduces the components of performance, from web page loading and rendering, including how your content makes it into your users browser to be viewed, to what groups of people we need to consider when thinking about performance,

How do users perceive performance? (en-US)

More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.

Measuring performance (en-US)

Now that you understand a few performance metrics, we take a deeper dive into performance tools, metrics, and APIs and how we can make performance part of the web development workflow.

Multimedia: images (en-US)

The lowest hanging fruit of web performance is often media optimization. Serving different media files based on each user agent's capability, size, and pixel density is possible. In this article we discuss the impact images have on performance, and the methods to reduce the number of bytes sent per image.

Multimedia: video (en-US)

The lowest hanging fruit of web performance is often media optimization. In this article we discuss the impact video content has on performance, and cover tips like removing audio tracks from background videos can improve performance.

JavaScript performance best practices (en-US)

JavaScript, when used properly, can allow for interactive and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. This article outlines some JavaScript best practices that should be considered to ensure even complex content is as performant as possible.

HTML performance features (en-US)

Some attributes and the source order of your mark-up can impact the performance or your website. By minimizing the number of DOM nodes, making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience. This article looks in detail at how HTML can be used to ensure maximum performance.

CSS performance features (en-US)

CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others. In this article we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted.

Fonts and performance

A look at whether you need to include external fonts and, if you do, how to include the fonts your design requires with the least impact on your sites performance.

Mobile performance

With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU and battery life, it is important to consider the performance of your web content on these platforms. This article looks at mobile-specific performance considerations.

Focusing on performance

There are many different things a developer can do to improve performance, but how fast is fast enough? How can you convince powers that be of the importance of these efforts? Once optimized, how can you ensure bloat doesn't come back? In this article we look at convincing managements, developing a performance culture and performance budget, and introduce ways to ensure regressions don't sneak into your code base.

Смотрите также
--------------

Web performance resources (en-US)

In addition to the front end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, developer tools, best practices, and bad practices relating to web performance. Here we'll introduce many of these features ad the basic level and provide links to deeper dives to improve performance for each topic.

Responsive images

In this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them. This helps to improve performance across difference devices. Responsive images are just one part of responsive design, a future CSS topic for you to learn.

Main web performance section on MDN

Our main web performance section — here you'll find much more detail on web performance including overviews of performance APIs, testing and analysis tools, and performance bottleneck gotchas.


Доступность - Изучение веб-разработки

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

Изучение HTML, CSS, и JavaScript полезно, если вы хотите стать веб-разработчиком, но ваши знания должны быть глубже обычного использования технологий — вы должны быть ответственны и максимизировать доступность ваших веб-приложений, не лишая никого возможности их использования. Чтобы достигнуть этого, вы можете следовать общепринятым лучшим практикам (которые демонстрируются в статьях посвящённых HTML, CSS и JavaScript), проводить кросс-браузерное тестирование и обращать внимание на доступность с самого начала. В этом модуле мы рассмотрим эту тему в деталях.

Прежде чем начать
-----------------

Чтобы разобраться с большей частью материалов этого модуля, хорошей идеей будет проходить одновременно один или несколько из модулей других тем (HTML, CSS или JavaScript), или, что ещё лучше, пройти соответствующие части данного модуля во время изучения этих технологий.

**Примечание:** Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать большую часть примеров кода в онлайн программах, таких как JSBin или Thimble.

Справочники
-----------

Что такое доступность?

Данная статья открывает модуль, в котором рассматривается, что такое доступность на самом деле — она включает в себя группы людей, которые нам нужно учитывать и почему, какие инструменты используют разные пользователи для взаимодействия с вебом, и как мы можем сделать доступность частью нашего рабочего процесса веб-разработки.

HTML: Хорошая основа для доступности

Большая часть содержимого интернета может быть сделана доступной просто благодаря использованию HTML-элементов по назначению. В этой статье подробно рассмотрено как HTML может быть использован для обеспечения максимальной доступности.

Лучшие практики CSS и JavaScript для обеспечения доступности

CSS и JavaScript, при правильном использовании, также имеют потенциал для обеспечения доступности, но при неправильном использовании они могут существенно ухудшить доступность. Эта статья раскрывает некоторые из лучших практик CSS и JavaScript которые должны помочь сделать даже очень сложное содержимое как можно более доступным.

Основы WAI-ARIA (en-US)

*Web Accessibility Initiative - Accessible Rich Internet Applications* — это технологический стандарт для предоставления возможности полноценного использования Интернета людьми с физическими ограничениями.
 Исходя из предыдущей статьи, иногда создание сложных элементов управления пользовательским интерфейсом, которые включают в себя не семантический HTML и динамический контент, обновляемый с помощью JavaScript, может быть затруднено. WAI-ARIA — это технология, которая может помочь в решении таких проблем, добавляя дополнительную семантику, которую браузеры и вспомогательные технологии могут распознавать и использовать, чтобы пользователи знали, что происходит. Здесь мы покажем, как использовать его на базовом уровне для улучшения доступности.

Доступный мультимедиа контент (en-US)

Другая категория контента, которая может создавать проблемы с доступностью, это мультимедиа — видео, аудио и изображения, которые должны быть предоставлены с надлежащей текстовой альтернативой, чтобы их могли понять с помощью вспомогательных технологий и их пользователи. В этой статье показано, как это можно сделать.

Доступность на мобильных устройствах (en-US)

Поскольку веб-доступ на мобильных устройствах является настолько популярным, и на популярных платформах, таких как iOS и Android, есть полноценные средства обеспечения доступности, важно учитывать доступность вашего веб-контента для этих платформ. В этой статье рассматриваются соображения доступности для мобильных устройств.

Проверка знаний
---------------

Найди недочёты в доступности

В этом блоке представлен достаточно простой сайт, в котором, однако, есть множество недочётов в доступности. Необходимо найти их и починить.

Также советуем посмотреть
-------------------------

* Начать создание доступных веб-приложений сегодня — отличная серия видеоуроков Марси Саттона.
* Ресурсы университета Deque — включает примеры кода, ссылки для чтения с экрана и другие полезные ресурсы.
* Ресурсы WebAIM — включает руководства, контрольные списки, инструменты и многое другое.


Начало работы с Вебом - Изучение веб-разработки

Начало работы с Вебом
=====================

*Начало работы с Вебом* - это серия коротких уроков, которые познакомят вас с практическими аспектами веб-разработки. Вы настроите инструменты, необходимые для создания простой веб-страницы и публикации своего собственного кода.

История вашего первого веб-сайта
--------------------------------

Необходимо много работать, чтобы создать профессиональный веб-сайт, так что, если вы новичок в веб-разработке, мы рекомендуем начать с малого. Вы не будете создавать ещё один Facebook прямо сейчас, но создать свой простой веб-сайт не так уж и сложно, так что мы начнём с этого.

Прорабатывая статьи, перечисленные ниже по порядку, вы пройдёте путь от нуля до создания своей первой веб-страницы. Ну что, давайте начнём!

### Установка базового программного обеспечения

Когда речь заходит об инструментах для создания веб-сайта, тут есть из чего выбрать. Если вы только начинаете, вас может смутить количество текстовых редакторов, фреймворков и инструментов тестирования. В главе Установка базового программного обеспечения мы покажем вам шаг за шагом, как установить только то программное обеспечение, которое вам понадобится для веб-разработки на начальном этапе.

### Каким должен быть ваш веб-сайт?

Перед тем, как вы начнёте писать код для вашего веб-сайта, нужно составить план. Какую информацию вы демонстрируете? Какие шрифты и цвета вы используете? Каким должен быть ваш веб-сайт? Мы опишем простой метод, которому вы сможете следовать, чтобы спланировать содержание и дизайн вашего сайта.

### Работа с файлами

Веб-сайт состоит из множества файлов: текстового содержания, кода, таблиц стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вам нужно собрать эти файлы в разумную структуру и убедиться, что они могут взаимодействовать друг с другом. Работа с файлами объясняет, как создать разумную файловую структуру для вашего веб-сайта и про какие проблемы вы должны знать.

### Основы HTML

Язык гипертекстовой разметки (Hypertext Markup Language, HTML) - это код, который вы используете для структурирования веб-содержимого и придания ему смысла и цели. Например, является ли моё содержимое набором абзацев, либо списком маркированных пунктов? Нужно ли вставить изображения на мою страницу? Есть ли у меня таблица данных? Не перегружая вас, статья Основы HTML предоставляет достаточно информации для вашего знакомства с HTML.

### Основы CSS

Каскадные таблицы стилей (Cascading Stylesheets, CSS) - это код, который вы используете для стилизации своего веб-сайта. Например, хотите ли вы, чтобы текст был черным или красным? Где должно быть нарисовано содержимое на экране? Какие фоновые изображения и цвета должны быть использованы, чтобы украсить ваш веб-сайт? Основы CSS проведёт вас через то, что вам нужно знать, чтобы начать.

### Основы JavaScript

JavaScript - это язык программирования, который вы используете для добавления интерактивных функций для вашего веб-сайта, например, игр, событий, которые происходят при нажатии кнопок или ввода данных в формы, динамических эффектов стилизации, анимации и многого другого. Основы JavaScript даёт вам представление о том, что можно сделать с помощью этого захватывающего языка, и как начать.

### Публикация вашего веб-сайта

После того как вы закончили писать код и организовали файлы, которые составляют ваш веб-сайт, нужно разместить все это в Интернете так, чтобы люди могли его найти. Публикация вашего сайта описывает, как отобразить ваш простой пример кода в Интернете с минимальными усилиями.

### Как работает Интернет

Когда вы заходите на свой любимый веб-сайт, в фоновом режиме происходит много сложных вещей, о которых вы можете не знать. Статья Как работает Интернет описывает, что происходит, когда вы просматриваете веб-страницы на своём компьютере.

Смотрите также
--------------

* Web Demystified(web обзор): большая серия видеороликов, объясняющая основы web, нацеленных на начинающих веб-разработчиков. Создано Жереми Патонье.
* The web and web standards (веб и веб стандарты): В этой статье приведена полезная информация о Вебе — как он появился, что такое технологии веб-стандартов, как они работают вместе, почему "веб-разработчик" - это отличная карьера, и какие виды наилучшей практики вы узнаете в ходе курса.


Руководство по HTML-формам - Изучение веб-разработки

Руководство по HTML-формам
==========================

Данное руководство представляет собой серию статей, которые помогут вам освоить HTML-формы. HTML формы являются очень мощным инструментом для взаимодействия с пользователями; однако, в силу исторических и технических причин, не всегда очевидно, как использовать их в полной мере. В этом руководстве мы рассмотрим все аспекты HTML-форм, от структуры к стилизации, от обработки данных до пользовательских виджетов. Вы научитесь пользоваться Великой силой, которую они предлагают!

Необходимые условия
-------------------

Перед началом этого модуля вам следует изучить хотя бы Введение в HTML. На данный момент у вас не должно возникнуть сложностей с пониманием Основных руководств и использованием нашего руководства по Стандартным виджетам форм.

Остальные части модуля немного сложнее — легко поместить виджет формы на страницу, но вы не сможете много сделать без использования продвинутых особенностей форм, CSS и JavaScript. Поэтому, перед тем как вы перейдёте к другим частям модуля, мы рекомендуем изучить немного CSS и JavaScript.

>
> \*\*Примечание:\*\*Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например JSBin или Thimble.
>
>
>

Основные руководства
--------------------

Ваша первая HTML-форма

Первая статья в серии даёт вам начальный опыт в создании HTML-форм, включая разработку простой формы, её реализация при помощи элементов HTML, стилизация при помощи CSS и то, как данные отправляются на сервер.

Как структурировать HTML-форму

Изучив основы, рассмотрим более подробно элементы, используемые для структурирования и придания смысла различным частям HTML-форм.

Какие виджеты форм доступны?
----------------------------

Стандартные виджеты форм

Рассмотрим подробнее функционал различных виджетов форм; какие варианты доступны для сбора различных типов данных.

Валидация и подтверждение данных форм
-------------------------------------

Отправка данных форм

Данная статья рассматривает что происходит, когда пользователь подтверждает форму — куда отправляются данные и как мы их там обрабатываем. Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.

Валидация данных форм

Одной отправки данных не достаточно — нам нужно убедиться что данные, введённые пользователем в формы, в правильном формате и не испортят наши приложения. Мы также хотим помочь пользователям правильно заполнить формы и не разочароваться при использовании наших приложений. Валидация форм поможет нам в достижении этих целей — эта статья расскажет вам всё, что нужно знать.

Продвинутые руководства
-----------------------

Как создавать собственные виджеты форм

В некоторых случая стандартные виджеты форм не предоставляют того, что вам нужно, например из-за стиля или функциональности. В таких случаях вам придётся создать собственный виджет формы из чистого HTML. В этой статье (с практическим примером) объясняется, как вы это сделаете, а также особенности, на которые необходимо обратить внимание.

Отправка форм при помощи JavaScript

В этой статье рассматриваются способы использования формы для сборки HTTP-запроса и отправки его через пользовательский JavaScript вместо стандартного представления формы. А также почему вы захотите это сделать и способы реализации (см. использование объектов FormData).

HTML-формы в старых браузерах (en-US)

Статья раскрывает особенности обнаружения и т.д. (см. Кросс-браузерное тестирование для более глубокого понимания)

Руководства по стилизации форм
------------------------------

Стилизация HTML-форм

Вступительная статья по стилизации форм с помощью CSS, включая все необходимые основы.

Продвинутая стилизация HTML-форм (en-US)

В этой статье мы рассмотрим продвинутые техники стилизации форм, которые необходимо использовать при работе с некоторыми более сложными для стилизации элементами.

Таблица совместимости свойств для виджетов форм (en-US)

Последняя статья содержит удобный справочник, позволяющий узнать, с какими элементами формы совместимы свойства CSS.

Смотрите также
--------------

* Ссылка на элементы HTML-форм
* Ссылка на виды HTML-элемента <input>


JavaScript - Изучение веб-разработки

JavaScript
==========

JavaScript — это язык программирования, который даёт возможность реализовывать сложное поведение веб-страницы. Каждый раз, когда вы видите веб-страницу, она не только отображает статическое содержимое, но и делает большее - своевременно отображает обновление контента, выводит интерактивные карты, 2D/3D анимацию, прокручивает видео и т.д. - будьте уверены, здесь не обошлось без JavaScript.

Учебный план
------------

Считается, что JavaScript сложнее изучить, чем связанные с ним технологии, наподобие HTML и CSS. Поэтому, перед изучением JavaScript, настоятельно рекомендуем сначала ознакомиться хотя бы с этими двумя технологиями. Начните с проработки следующих модулей:

* Начало работы с Веб
* Введение в HTML
* Введение в CSS

Имеющийся опыт программирования на других языках также может помочь в обучении.

После изучения основ JavaScript вы будете готовы к ознакомлению с более сложными темами, например:

* Углублённый курс JavaScript, изложенный в нашем Руководстве по JavaScript
* Программный интерфейс WebAPI
Модули
------

Этот раздел содержит следующие модули, проходить которые рекомендуется в порядке перечисления.

Первые шаги в JavaScript

В нашем первом модуле, посвящённом JavaScript, мы сначала ответим на несколько главных вопросов, таких, как "Что такое JavaScript?", "На что он похож?" и "Что с его помощью можно сделать?", а затем перейдём к практике - расскажем, как писать и выполнять код на JavaScript. После чего подробнее рассмотрим некоторые ключевые конструкции JavaScript: переменные, строки, числа и массивы.

Структурные элементы JavaScript

В этом модуле мы продолжим изучение главных составных частей JavaScript и обратим внимание на повсеместно встречающиеся типы конструкций: условные операторы, циклы, функции и события. В ходе обучения вы уже сталкивались с ними, но только мимоходом. Теперь мы поговорим именно о них.

Введение в объекты JavaScript

Практически всё, что встречается в JavaScript, является объектом. Начиная с таких ключевых конструкций, как строки и массивы, и заканчивая интерфейсом взаимодействия с браузером, который построен поверх JavaScript. Вы даже можете создавать собственные объекты, заключая взаимосвязанные функции и переменные в готовые пакеты. Если вы хотите продолжить изучение языка и писать более эффективный код, то очень важно понять объектно-ориентированную природу JavaScript. Чтобы помочь вам в этом, мы представляем этот модуль. В нем мы подробно рассматриваем основы и синтаксис ООП (объектно-ориентированного программирования), показываем, как создавать свои объекты, и объясняем, что такое данные в формате JSON и как с ними работать.

Клиентский Web API

При написании клиентского JavaScript для сайтов или приложений вы не обойдётесь без использования API - то есть интерфейсов для работы с различными функциями браузера или операционной системы, на которой работает сайт, или даже для работы с данными, получаемыми с других сайтов или сервисов. В этом модуле мы изучим, какие это API и как использовать некоторые наиболее распространённые API, которые вам будут часто попадаться во время разработки.

Решение общих проблем на JavaScript
-----------------------------------

Статья Использование JavaScript для решения общих проблем предоставляет ссылки к секциям контента, раскрывающих суть того, как использовать JavaScript для решения очень часто встречающихся проблем при создании веб-страницы.

Смотрите также
--------------

JavaScript на MDN

Главная точка входа к ядру JavaScript-документации на MDN — то место, где вы найдёте обширную справочную документация по всем аспектам языка JavaScript, и некоторые продвинутые учебники для опытных JavaScript-разработчиков.

Learn JavaScript

Отличный ресурс для начинающих веб-разработчиков - изучайте JavaScript в интерактивной среде, с короткими уроками и интерактивными тестами с автоматизированной оценкой. Первые 40 уроков бесплатно, а полный курс доступен за небольшую разовую плату.

JavaScript Fundamentals на EXLskills

Изучайте JavaScript бесплатно с курсом с открытым исходным кодом EXLskills, который знакомит вас со всем необходимым, чтобы начать создавать приложения в JS.

Математика для программиста

Великолепная серия видеоуроков по математике от Keith Peters, которую необходимо понимать каждому эффективному программисту


Серверное программирование веб-сайтов - Изучение веб-разработки

Серверное программирование веб-сайтов
=====================================

**Тема *Динамические веб-сайты – серверное программирование*** состоит из ряда модулей, рассматривающих создание динамических веб-сайтов; сайтов, которые доставляют персонализированную информацию в ответ на HTTP запрос. Этот модуль предоставляет общее введение в серверное программирование, наряду со специальными руководствами начального уровня о том, как использовать Django (Python) и Express (Node.js/JavaScript) веб-фреймворки для создания простых приложений.

Подавляющее большинство веб-сайтов используют какую-либо из серверных технологий для динамического отображения различных требуемых данных. К примеру, вообразите себе сколь много товаров доступны на Amazon, и представьте как много постов расположено на Facebook? Отображение всех их посредством отдельных статических страниц было бы крайне неэффективно, вместо этого подобные сайты используют шаблоны (созданные из HTML, CSS, и JavaScript), и затем динамически обновляют данные, отображаемые внутри этих шаблонов, когда это необходимо , т.е. когда вы хотите увидеть другой товар на Amazon.

В современном мире веб-разработки крайне рекомендуется изучить разработку на стороне сервера.

Программа обучения
------------------

Начинать с серверного программирования обычно легче, чем с разработки на стороне клиента, поскольку динамические веб-сайты склонны производить множество однообразных операций (извлекать данные из базы данных и помещать их на странице, подтверждать пользовательский ввод и сохранять его в базе данных, проверять пользовательские права и выполнение входа, и.т.д.) и сконструированы с использованием веб-фреймворков, которые выполняют эти и другие привычные веб-серверу операции с лёгкостью.

Общее понимание концепций программирования (или определённого программного языка) будет полезным, но не обязательным. Сходным образом, опыт программирования на клиентской стороне не требуется, но базовое знание поможет вам успешнее взаимодействовать с разработчиками клиентской стороны веб-приложения - "фронтенда".

Вам потребуется понимать "как работает веб". Мы рекомендуем вам сначала ознакомиться с темами:

* Что такое веб-сервер
* Какое ПО мне нужно для построения веб-сайта?
* Как заливать файлы на веб-сервер?

С этим базовым набором знаний вы будете готовы освоить модули в этой секции.

Модули
------

Эта тема состоит из следующих модулей. Начинайте с самого первого модуля, а затем переходите на выбор к любому из двух следующих, рассматривающих работу с парой популярных серверных языков с использованием соответствующих веб-фреймворков.

Первые шаги в программировании веб-сайтов на стороне сервера

Этот модуль посвящён информации о технологиях программирования веб-сайтов на стороне сервера, попутно отвечая и на фундаментальные вопросы о серверном программировании — "что это такое", "чем оно отличается от программирования на стороне клиента", и "почему оно так востребовано" — и обозревая некоторые из наиболее популярных серверных веб-фреймворков, а также объясняя как выбрать подходящий для вашего сайта. Напоследок мы организуем вводный раздел о безопасности веб-сервера.

Веб-фреймворк Django (Python)

Django является чрезвычайно популярным и полнофункциональным серверным веб-фреймворком, написанным на Python. Этот модуль объяснит почему Django настолько хороший серверный веб-фреймворк, как установить среду разработки и как с его помощью можно выполнять привычные задачи.

Веб-фреймворк Express (Node.js/JavaScript)

Express - популярный веб-фреймворк, написанный на JavaScript и размещённый в среде окружения node.js. Модуль объясняет некоторые из ключевых преимуществ этой структуры, как настроить среду разработки и как выполнять общие задачи для веб-разработки и развёртывания.

Сервер на Node без фреймворков

В этой статье представлен простой статический файловый сервер, построенный с использованием чистого Node.js, для тех из вас, кто не хочет использовать фреймворк.


Распространённые вопросы - Изучение веб-разработки

Распространённые вопросы
========================

Данный раздел создан для обеспечения ответами на распространённые вопросы, которые могут возникнуть и которые не обязательно являются основным материалом при изучении веб-технологий (например, обучающих статей по HTML или CSS). Ниже приведённые статьи созданы для самостоятельной работы над их содержимым.

Как работает Всемирная паутина?
-------------------------------

Данный раздел покрывает "механику" Всемирной паутины — вопросы, относящиеся к общим знаниям о экосистеме Всемирной паутины и тому, как эта экосистема работает.

Как работает Интернет?

**Интернет** - основа Всемирной паутины; техническая инфраструктура, благодаря которой возможно существование Всемирной паутины. Выражаясь проще, Интернет - это большая сеть компьютеров, которые "общаются" друг с другом. В данной статье обсуждается, как он (Интернет) работает на базовом уровне.

В чём разница между веб-страницей, веб-сайтом, веб-сервером и поисковым движком?

В этой статье мы рассмотрим различные связанные с вебом концепции: веб-страницы, веб-сайты, веб-сервера и поисковые движки. Новички в вебе часто путают или неправильно используют данные термины. Давайте узнаем, что они означают!

Что такое URL?

Наряду с понятиями гипертекста и протокола HTTP, понятие URL является одной из основных концепций Всемирной паутины. Это механизм, используемый браузерами для получения любого опубликованного во Всемирной сети ресурса.

Что такое доменное имя?

Доменные имена являются ключевой частью инфраструктуры сети Интернет. С их помощью обеспечивается удобочитаемый адрес для любого веб-сервера, доступного в сети Интернет.

Что такое веб-сервер?

Термин «веб-сервер (en-US)» может относиться к оборудованию или программному обеспечению (ПО), которое предоставляет клиентам доступ к веб-сайтам через сеть Интернет, или к ним обоим (оборудованию и ПО), работающим вместе. В этой статье мы рассмотрим, как работают веб-серверы и то, почему они важны.

Что такое гиперссылки?

В этой статье мы рассмотрим, что такое гиперссылки (en-US) и почему они важны.

Инструменты и настройка
-----------------------

Вопросы, связанные с инструментами / программным обеспечением, которое вы можете использовать для создания веб-сайтов.

Сколько стоит сделать что-то в Интернете?

Когда вы запускаете веб-сайт, вы можете ничего не потратить, или ваши расходы могут быть достаточно высокими. В этой статье мы обсудим, сколько всё стоит и что вы получаете за то, за что вы платите (или не платите).

Какое ПО мне необходимо для создания веб-сайта?

В этой статье мы объясним, какие программные компоненты необходимы вам при редактировании, выгрузке или просмотре веб-сайта.

Какие текстовые редакторы доступны?

В этой статье мы выделили некоторые моменты, которые следует учитывать при выборе и установке текстового редактора для веб-разработки.

Что такое "Инструменты разработчика" браузера?

Каждый браузер имеет набор инструментов разработчика для отладки HTML, CSS и другого веб-кода. В этой статье объясняется, как использовать основные функции из инструментов разработчика вашего браузера.

Как убедиться в том, что веб-сайт работает правильно? (en-US)

Итак, вы опубликовали свой сайт в Интернете - очень хорошо! Но уверены ли вы в том, что он работает правильно? В этой статье приведены некоторые основные шаги по устранению неполадок.

Как настроить локальный сервер тестирования?

В этой статье объясняется, как настроить простой локальный сервер тестирования на вашем компьютере, и основы его использования.

Как загрузить файлы на веб-сервер?

В этой статье показано, как публиковать свой сайт в Интернете с помощью инструментов FTP - одним из самых распространённых способов сделать сайт общедоступным, чтобы другие пользователи могли получить доступ к нему со своих компьютеров.

Как использовать GitHub Pages?

В этой статье представлено базовое руководство по публикации контента с использованием функции **gh-pages** сайта GitHub.

Как разместить сайт в Интернете при помощи платформы Google App Engine?

Ищете место для размещения вашего сайта? Здесь представлено пошаговое руководство по размещению вашего сайта с помощью платформы Google App Engine.

Какие существуют инструменты для отладки сайта и увеличения его производительности?

В этом группе статей рассказывается, как использовать инструменты разработчика в браузере Firefox для отладки и повышения производительности вашего веб-сайта, а именно инструменты для проверки использования памяти, просмотра дерева вызовов JavaScript, количества отображаемых узлов DOM и т. д.

Дизайн и удобство использования
-------------------------------

В этом разделе перечислены вопросы, связанные с эстетикой, структурой страницы, техниками для достижения удобства пользованием сайта и т. д.

С чего мне следует начать создание дизайна веб-сайта?

В этой статье рассматривается крайне важный первый шаг каждого проекта: определение того, чего вы хотите достичь с его помощью.

Какова структура наиболее используемых макетов сайтов? (en-US)

При разработке страниц вашего сайта хорошо иметь представление о наиболее распространённых макетах. В этой статье приведены некоторые типичные макеты веб-сайтов, а также части, которые входят в каждый макет.

Что такое удобство использования? (en-US)

В этой статье представлены основные концепции достижения удобства пользования веб-страницами.

Как разрабатывать сайты для всех категорий пользователей?

В этой статье приводятся основные методы, которые помогут вам создавать веб-сайты для любого пользователя.

Какие средства HTML используются для обеспечения удобства использования? (en-US)

В этой статье описываются специфические особенности HTML, которые могут использоваться для того, чтобы сделать веб-страницу более доступной для людей с различными нарушениями.

Вопросы по HTML, CSS и JavaScript
---------------------------------

Чтобы узнать о распространённых решениях большинства проблем в HTML / CSS / JavaScript, используйте следующие статьи:

* Использование HTML для решения распространённых проблем
* Использование CSS для решения распространённых проблем
* Использование JavaScript для решения распространённых проблем


Введение в CSS - Изучение веб-разработки

Введение в CSS
==============

CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц - например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML.

Необходимые условия
-------------------

Перед запуском этого модуля вы должны иметь:

1. Базовое знакомство с использованием компьютеров и пассивным использованием Интернета (то есть, просматривая его, потребляя контент).
2. Базовая рабочая среда, описанная в разделе Установка базового программного обеспечения, и понимание того, как создавать файлы и управлять ими, подробно описано в разделе Работа с файлами.
3. Основное знакомство с HTML, как описано в модуле Введение в HTML.

**Примечание:** Если вы работаете на компьютере / планшете / другом устройстве, на котором у вас нет возможности создавать свои собственные файлы, вы можете опробовать (большую часть) примеры кода в онлайн-программах кодирования, таких как JSBin или Thimble.

Руководства
-----------

Этот модуль содержит следующие статьи, в которых вы ознакомитесь со всеми основными теориями CSS и сможете проверить некоторые навыки.

Что такое CSS?

**CSS** (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.

Начало работы с CSS

В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.

Как структурирован CSS

Теперь, когда у вас есть представление о том, что такое CSS и как его использовать, пришло время немного углубиться в структуру самого языка. Мы уже встречали множество концепций, обсуждаемых здесь; вы можете вернуться к этому, чтобы повторить, если вы находите какие-либо более поздние концепции запутанными.

Как работает CSS

Мы изучили основы CSS — для чего он нужен и как писать простые таблицы стилей. В этом уроке мы рассмотрим, как браузер берёт CSS и HTML и превращает их в веб-страницу.

Использование ваших новых знаний

С учётом того, что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам шанс сделать это.

Смотрите также
--------------

Intermediate Web Literacy 1: Intro to CSS

Отличный базовый курс от Mozilla, в котором рассматриваются и тестируются многие навыки, о которых говорилось в модуле *Введение в CSS*. Узнайте о стилях элементов HTML на веб-странице, селекторах CSS, атрибутах и значениях.


Использование CSS для решения общих проблем - Изучение веб-разработки

Использование CSS для решения общих проблем
===========================================

Следующие ссылки указывают на решения общих повседневных проблем, вам придётся решать их с помощью CSS.

Примеры и использование
-----------------------

### Основы

* Как применить CSS к HTML
* Как использовать пробелы в CSS
* Как писать комментарии в CSS
* Как выбрать элементы через имя элемента, класс или ID
* Как выбрать элементы через имя атрибута и содержания
* Как использовать псевдоклассы
* Как использовать псевдо-элементы
* Как применить несколько селекторов к тому же правилу
* Как определить цвета в CSS
* Как отлаживать CSS в браузере
### CSS и текст

* Как стилизовать текст
* How to customize a list of elements
* Как стилизовать ссылки
* How to add shadows to text
### Блоки и разметка

* How to size CSS boxes
* How to control overflowing content
* How to control the part of a CSS box that the background is drawn under
* How do I define inline, block, and inline-block?
* How to create fancy boxes (en-US) (also see the Styling boxes module, generally).
* How to use `background-clip` to control how much of the box your background image covers.
* How to change the box model completely using `box-sizing`
* How to control backgrounds
* How to control borders
* How to style an HTML table
* How to add shadows to boxes
Необычное или передовые технологии
----------------------------------

Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.

### Общие

* How to calculate specificity of a CSS selector
* How to control inheritance in CSS
### Дополнительные эффекты

* How to use filters in CSS
* How to use blend modes in CSS
### Разметка

* Using CSS flexible boxes (en-US)
* Using CSS multi-column layouts
* Using CSS generated content (en-US)
Смотрите также
--------------

CSS FAQ — A collection of smaller bits of information, covering a variety of topics from debugging to selector usage.


Стилизация текста - Изучение веб-разработки

Стилизация текста
=================

Разобравшись с основами синтаксиса CSS, следующей темой над которой вам следует сосредоточиться, это стилизация текста — одна из наиболее распространённых вещей, которые вы будете делать с помощью CSS. В этой теме мы рассмотрим основные принципы оформления, включая выбор и определение шрифтов, использование курсива и жирного шрифта, отступов, теней и других средств придания уникальности вашему тексту. В завершение темы мы рассмотрим использование на вашей странице пользовательских шрифтов, а также оформление списков и ссылок

Необходимые условия
-------------------

Перед началом работы с этим модулем, вы должны уже иметь базовые знания HTML, как это описано во Введение в HTML, и с основами CSS, как описано в Введение в CSS.

**Примечание:** В случае, если вы работаете на компьютере, планшете или ином устройстве, на котором у вас нет возможности создавать свои собственные файлы, вы можете попробовать выполнить примеры кода (по крайней мере, большинство из них) в специальных онлайн-программах, таких как JSBin или Thimble.

Руководство
-----------

Данный модуль состоит из следующих далее статей, которые дадут вам всё необходимое для оформления текстового HTML-контента.

Основы стилизации текста и шрифта

В этой статье мы детально изучим стилизацию текста и шрифтов, включая параметры weight, family, style, font shorthand, text alignment и прочие эффекты, а также line и letter spacing.

Стилизация списков

 Списки, по большей части, ведут себе так же, как и любой другой текст, но они имеют некоторые особые CSS-свойства о которых нужно знать, и
 некоторые методы которые стоит принять во внимание. Эта статья все разъясняет.

Стилизация ссылок

При стилизации ссылок важно понимать, как эффективно использовать псевдоклассы для стилизации состояний ссылок, и как стилизовать ссылки для использования в общих разнообразных функциях интерфейса, таких как навигационные меню и вкладки. Мы рассмотрим все эти темы в этой статье.

Веб-шрифты

Здесь мы подробно рассмотрим веб-шрифты — они позволяют загружать пользовательские шрифты вместе с вашей веб-страницей, чтобы обеспечить более разнообразный, индивидуальный стиль текста.

Проверка
--------

Следующие задания проверят ваше понимание методов стилизации текста, описанных в вышеприведённых руководствах.

Вёрстка домашней страницы муниципальной школы

В этом задании мы проверим ваше понимание стилизации текста, заставив вас оформить текст для домашней страницы общеобразовательной школы.


CSS layout - Изучение веб-разработки

CSS layout
==========

К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение разметки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как использовать современные методы разметки, такие как Flexbox и CSS grid, и некоторые традиционные методы разметки, которые все ещё применяются.

Необходимые условия
-------------------

Перед изучением этого раздела вы должны:

1. Иметь общее представление об HTML, как указано в разделе Вступление в HTML.
2. Ориентироваться в основах CSS, как указано в разделе Вступление в CSS.
3. Понимать, как стилизовать блочные элементы.

**Примечание:** Если вы работаете на компьютере/планшете/других устройствах, где нет возможности создать ваш собственный файл, вы можете попробовать (большую часть) примеры кода в онлайн-программах для написания кода JSBin и Thimble.

Руководство
-----------

Эти разделы содержат инструкции по основным инструментам и методам вёрстки, доступным в CSS. На последнем уроке у вас будет возможность оценить понимание пройденного материала посредством вёрстки веб-страницы.

Введение в CSS вёрстку

В этом разделе будут описаны некоторые возможности CSS вёрстки, которых мы уже касались в предыдущих модулях - различные значения `display` — и представлены некоторые концепции, которые мы рассмотрим в этом модуле.

Нормальный поток

Элементы на веб-страницах размещаются в соответствии с нормальным потоком - пока мы не сделаем что-либо, чтобы это изменить. Этот раздел объясняет основы нормального потока как фундамент для изучения влияния на него.

Flexbox

Flexbox (en-US) - это метод одномерной вёрстки для размещения элементов в строках или столбцах. Элементы растягиваются, чтобы заполнить дополнительное пространство и сжимаются, чтобы поместиться в меньшее пространство. Данный раздел объясняет фундаментальные принципы.

Grids

CSS Grid Layout - это двумерная система вёрстки для веб. Она позволяет вам размещать контент в строках и столбцах и имеет множество возможностей, которые упрощают построение сложных макетов. Этот раздел даст вам все, что нужно знать для начала работы с макетом страницы.

Floats

Изначально созданное для плавающих изображений внутри текстовых блоков, свойство `float` стало одним из наиболее часто используемых инструментов для создания мульти-колоночной вёрстки веб-страниц. С появлением Flexbox и Grid оно вернулось к первоначальному предназначению, как объясняется в этом разделе.

Позиционирование

Позиционирование позволяет вам брать элементы из нормального потока и изменять их поведение, например, заставляет находиться друг под другом или всегда оставаться в одном и том же месте внутри окна просмотра браузера. В этом разделе объясняются различные значения `position` и способы их применения.

Мульти-колоночная вёрстка

Спецификация мульти-колоночной вёрстки даёт вам способ размещения содержимого в столбцах по аналогии с вёрсткой газет. Этот раздел объясняет, как использовать эту возможность.

Отзывчивый дизайн

По мере того, как появлялись устройства для выхода в интернет с экранами разных размеров, возникла концепция отзывчивого веб-дизайна (RWD): набор методов, позволяющих веб-страницам изменять свой макет и внешний вид в соответствии с шириной экрана, разрешением и т.д. Это изменило подход к разработке веб-страниц для различных устройств, и в этом руководстве вы познакомитесь с основными приёмами, которые необходимо знать для создания отзывчивого дизайна.

Введение в медиавыражения (en-US)

**CSS Media Query** позволяют писать CSS под разные условия, например "область просмотра шире 480 пикселей". Медиавыражения являются ключевой частью отзывчивого веб-дизайна, поскольку они позволяют создавать различные макеты в зависимости от размера области просмотра. Они также могут использоваться для определения других особенностей среды, в которой работает ваш сайт, например, использует ли пользователь сенсорный экран, а не мышь. В этом руководстве вы сперва познакомитесь с синтаксисом медиавыражений, а после разберёте их использование на интерактивном примере, показывающем, как простой дизайн можно сделать отзывчивым.

Устаревшие методы вёрстки (en-US)

Grid-системы - это очень распространённая возможность, используемая в CSS layouts, и до CSS Grid Layout они, как правило, реализовывались с помощью floats или других возможностей вёрстки. Вы представляете свою вёрстку в виде заданного числа столбцов (например, 4 или 6), а затем вы помещаете содержимое в эти воображаемые столбцы. В этом разделе мы рассмотрим, как работают эти старые методы, чтобы вы понимали, как они использовались, если столкнётесь со старыми проектами.

Поддержка старыми браузерами (en-US)

В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы вёрстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появления новых возможностей, для различных браузеров будут приоритетны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.

Фундаментальное понятие вёрстки

Оценка ваших знаний различных методов вёрстки посредством вёрстки веб-страницы.

Смотрите также
--------------

Практические примеры позиционирования

Этот раздел показывает, как построить пример из реальной жизни, чтобы проиллюстрировать, что вы можете сделать при помощи позиционирования.


Устройство CSS - Изучение веб-разработки

Устройство CSS
==============

Этот модуль — продолжение раздела Введение в CSS: вы уже знакомы с синтаксисом языка и опробовали основные функции; пришло время углубиться в CSS. В этом модуле рассматриваются каскады и наследование, все доступные типы селекторов, блоков, изменений размеров, фонов, границ, а также отладка и многое другое.

Наша цель в этом модуле — обеспечить вас необходимым набором инструментов для написания хорошего CSS-кода, а также помочь вам понять необходимую теорию для перехода к особым дисциплинам, таким как стилизация текста и размещение элементов с помощью CSS.

Необходимые умения
------------------

Перед изучением этого раздела вы должны иметь:

1. Стандартную рабочую среду (Установке базового программного обеспечения), а также понимание того, как создавать файлы и работать с ними (Работа с файлами).
2. Общее представление о HTML (модуль Введение в HTML).
3. Общее представление о CSS (модуль Начало работы с CSS).

**Примечание:** Если вы работаете на компьютере/планшете/другом устройстве, где нет возможности создавать файлы, вы можете опробовать примеры (большую часть) на таких онлайн-программах, как JSBin или Thimble.

Руководства
-----------

В этом модуле содержатся следующие статьи, в которых рассказывается об основных составляющих языка. По мере обучения вы встретите упражнения, позволяющие вам усвоить пройденный материал.

Каскад и наследование

Цель данного урока — углубить ваше понимание основных концепций CSS — каскадов, спецификаций и наследования, — которые контролируют, как CSS добавляется в HTML и как разрешаются конфликты.

CSS-селекторы

Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы рассмотрим разные типы в мельчайших подробностях и увидим как они работают. Подстатьи по порядку:

* Селекторы типа, класса и ID
* Селекторы атрибутов
* Псевдоклассы, псевдоэлементы
* Комбинации селекторов

Блоки в CSS

Всё в CSS имеет форму блока, и понимание блоков позволяет вам размещать элементы с помощью CSS или согласовывать их друг с другом. В этом уроке мы как следует рассмотрим *CSS-блоки.*

Фон и границы

В этом уроке мы рассмотрим всякие интересные вещи, которые вы можете делать благодаря CSS-фонам и границам, — от добавления градиентов и фоновых изображений до скругления углов, фонов и границ.

Изменение направления текста

Раньше CSS развивался, чтобы лучше поддерживать разные **режимы написания**, включая *справа налево* или *сверху вниз* (как в японском языке). Мы рассмотрим их в этой статье.

Перекрытие содержимого

В этом уроке мы рассмотрим ещё одну важную концепцию CSS — **overflow**. Переполнение происходит, когда слишком много информации находится в пределах ограниченного блока. В этой статье мы рассмотрим, как это исправить.

Значения свойств CSS

У каждого CSS-свойства есть значения. В этом уроке мы рассмотрим основные значения и их единицы.

Изменение размеров в CSS

В предыдущих уроках вы встречались с различными способами изменения размеров элементов с использованием CSS. В этой статье мы собрали разные способы изменить размер через CSS.

Элементы изображений, форм и медиа-элементы

Мы рассмотрим, как некоторые элементы относятся к CSS. Изображения, формы и другие медиа-элементы ведут себя по-другому, когда вы стилизуете их через CSS. Некоторые функции могут не работать, поэтому в этой статье мы рассмотрим то, что вам нужно знать про эти элементы.

Стилизация таблиц

Стилизация HTML таблиц — это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья описывает, как сделать, чтобы Ваши HTML-таблицы выглядели хорошо, и некоторые свойства, подробно рассмотренные в предыдущих статьях.

Отладка CSS

При написании CSS вы можете столкнуться с тем, что ваш CSS-код работает не так, как вы того хотели. Вы узнаете, как отлаживать CSS и как с помощью инструментов разработчика понять, где неполадка.

Организация CSS-кода (en-US)

Как только вы начнёте работать над большими проектами и таблицами стилей, вы поймёте, что обслуживать такие таблицы не так-то и легко. В статье мы рассмотрим, как лучше писать CSS, чтобы его было легче обслуживать.

Смотрите также
--------------

Узконаправленные функции CSS

В этой статье описаны некоторые хитрости, которые познакомят вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.