Верстка: HTML+CSS

Знакомство

Что такое IT в целом и какое место занимает front-end в веб разработке в частности. Этапы разработки проекта

Обзор инструментов для разработки

Структура HTML документа. Основные теги

Особенности HTML5. Понятие кроссбраузерности и валидности

Внутренние стили. Основные CSS свойства

Рендеринг страницы. Поведение элементов.

Блочные-строчные. Различия, особенности, их выравнивание

Отступы. Схлопывание. box-sizing

Вендорные префиксы, caniuse

Селекторы. Глобальные таблицы стилей

Значимость селектора, вес от типа обращения. !important

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

Цветообразование. rgb. hex. opacity vs rgba

Комментирование кода

Абсолютный и относительный путь

Внешние таблицы стилей. Импорт стилей

Сброс стилей по-умолчанию. CSS reset

Изображения, как часть контента

Ссылки. Многостраничные сайты

FTP. Работа с сервером.

Выстраивание элементов с использованием свойства table-cell.

Выстраивание элементов с использованием свойства inline-block. Особенности

Выстраивание элементов с использованием свойства float. Отмена обтекания. Распорка.

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

Верстка с использованием flex. Все нюансы flexbox взаимодействия.

Сравнение способов взаимодействия. Плюсы и минусы. Кроссбраузерность взаимодействий.

Единиці измерения в web, абсолютные и относительные, разбор.

Позиционирование элементов, свойство position.

static, relative, absolute, fixed, sticky: детальное рассмотрение каждого поведения

Выравнивание absolute и fixed.

Использование нестандартных шрифтов. Как это “безопасные шрифты”

google fonts обзор, применение

fonts squirrel использование сервиса. Аналоги

Построение меню. Теги

Многоуровневое, выпадающее меню

Что такое фоновая картинка. Отличия от image.

Зона отображения фона. background-clip

Позиционирование, размеры фоновой картинки

Понятие спрайта. Назначение, плюсы и минусы

Построение меню с социальными иконками.

Взаимодействие блока с фиксированной и динамической шириной

Меню с иконками+контент

Линейные и радиальные градиенты. Примеры использования

Трансформация, как преобразование формы, размеров, местоположения обьектов

Матрица преобразования, простые свойства

Анимации с использованием свойства transition

Кривая Безье, простые свойства

Анимации через keyframes

Назначение, применение, анимирование

Скругления, примеры использования.

Бордеры. Треугольники

Тени блоков

Составные фигуры. Рисование картинок. Сервис single div

Формы. Назначение, принцип работы

Стилизация элементов форм

Подсказки, паттерны

Новые элементы в HTML5

Стилизация checkbox

Векторная графика. SVG. Анимирование

Тестирование по пройденной теории

Семантические теги. Назначение, использование, преимущества

Ускорение и автоматизация верстки. Emmet

Программы для работы с макетами: PS, avocode, photopea, figma, zeplin

Принцип верстки макета

Проверка сделанного. Рекомендации. Индивидуальные консультации

Идеальность верстки. PerfectPixel. Обзор плагинов

Особенности верстки под IE. Скрипты

Условное комментирование

Сдача макетов

Понятие адаптивной верстки. История появления. “Резиновые сайты”

Поведение контента при изменении размеров.

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

Принципы построение адаптивной верстки. Desktop and mobile first. Сравнение.

Сравнение breakpoints, популярные брикпойнты

DPR. Viewport

Визуальные особенности мобильных версий

Тестирование, инструменты для тестирования и дебаггинга

Что такое FrameWork, актуальность использования.

Bootstrap. Подключение, принцип работы

Bootstrap grid

Bootstrap компоненты.

Сравнение отличий версий bootstrap

Отличия в сетке и классах

Отличия в сетке и классах

Bootstrap 4 компоненты

Обзор и построение элементов на bootstrap js.

Недостатки BS slider. owl carousel, как аналог. Преимущества, подключение, опции

Принцип построения сайта AIDA

JS фреймворк Fullpage js

Выдача макетов для адаптивной верстки. Рекомендации по адаптации

Проверка сделанного. Рекомендации. Индивидуальные консультации

Идеальность верстки в адаптиве

Исправление популярных ошибок

Основы JS, принцип его работы

Что такое JS, как работает

Сравнение VanillaJS vs JQuery,React, VUE, Angular. Node.js

Основы синтаксиса. Построение функции.

Зависимые функции

Литература по теме

Переменные. Кеширование

Условия (if else)

Популярные функции на примерах

Практика. Построение scrollUp, popup, carousel, image gallery используя JS и разбор синтаксиса.

Разработка слайдера и карусели с использованием JS

Бесконечность в карусели, клонирование элементов

Фотогаллерея на JS

Разрабатіваем свою фотогалерею с индикацией прокрутки и бесконечными thumnails

Отслеживание скролла, создание “прилипающих” блоков

Получение координат расположений блоков

Смена скорости скролла объектов, принципы параллаксов

Построение параллакс эффекта с “замиранием” блоков и сменой скорости скрола

Рекомендации по самостоятельному изучению JS. Подборка литературы.

Удаленная работа с файлами

Использование препроцессоров, принципы, основы

Разбор препроцессоров на примере LESS

Сборщики. Обзор функциональности. Gulp. Плагины

Что такое GIT и зачем он нужен.

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

Freelance как возможность трудоустроится. Сам себе предприниматель.

Подводные камни, особенности работы, хитрости.

Что такое CMS и зачем их знать front-end разработчику. Обзор популярных CMS

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