На первом занятии Вы узнаете:
- какие бывают сайты;
- все способы их разработки
- и, самое главное, из чего они строятся (увидите сайт изнутри).

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

На данном уроке Вы узнаете все виды тегов и в чем их ключевое отличие.

Также мы расскажем про атрибуты: какие они и какова их цель.

Любая веб-страница имеет четкую иерархию и структуру.

Мы подробно разберем всю структуру HTML документа и теги, которые для этого необходимы.

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

На данном занятии Вы узнаете:
- что такое CSS;
- для чего и как он используется;
- научимся подключать стили различными способами.

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

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

На 4 занятии Вы научитесь задавать различный дизайн тексту.

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

Вы узнаете все возможности свойства background и научитесь делать градиент.

После того как Вы освоите основные теги и стили, мы перейдем к очень Важной теме "Модульная сетка".

Вы узнаете:
- зачем она нужна;
- в чем ее особенность;
- как правильно ее использовать.

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

Вы изучите все HTML теги и CSS свойства для создания таблиц на сайте.

CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице.

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

В первой половине урока мы познакомимся с очень важным CSS свойством «position» и подробно рассмотрим на практике все его значения.

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

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

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

После данного занятия Вы:
- узнаете, виды форматов изображений;
- узнаете, какие форматы лучше всего подходят для сайта, а какие лучше не использовать;
- не будете задаваться вопросом, откуда взять изображения для сайта.
- освоите базовые навыки по работе с изображениями для сайта в программе Photoshop

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

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

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

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

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

После данного занятия Вы:
- узнаете виды форматов шрифтов;
- узнаете, какие шрифты лучше всего подходят для сайта, а какие лучше не использовать;
- не будете задаваться вопросом: откуда взять нужный шрифт для сайта?
- научитесь конвертировать шрифты и устанавливать их на сайт.

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

После данного занятия Вы:
- научитесь создавать и использовать переменные;
- узнаете, в каких случаях лучше всего использовать переменные на практике;
- узнаете все основные функции CSS и научитесь их использовать.

Если Вам необходимо получить обратную связь от своих пользователей или заполнение какой-либо информации, то Вам необходима форма. К примеру: "оставить заявку", "купить", "заказать звонок", "написать письмо" и.т.д.

На данном уроке Вы:
- научитесь создавать формы любой сложности;
- узнаете все поля, которые можно использовать в форме (к примеру: поле для ввода текста, поле для ввода eMail, поле для ввода пароля, и т.д.);
- узнаете все необходимы атрибуты для настройки полей;

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

После данного занятия Вы:
- узнаете как работает Grid Layout;
- изучите все свойства и возможности Grid Layout;
- научитесь использовать Grid Layout на практике.

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

В первой половине занятия мы разберем свойство Transform, которое позволяет трансформировать объекты на сайте.

Вы научитесь:
- перемещать объекты в пространстве;
- масштабировать объекты;
- поворачивать объект в двухмерном и трёхмерном пространстве;
- осуществлять деформацию объекта;
- задавать перспективу;

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

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

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

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

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

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

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

На данном занятии Вы научитесь разрабатывать различные слайдеры любой сложности

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

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

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

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

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

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

На данном дополнительном занятии Вы познакомитесь с языком программирования PHP.

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

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