Придбаний [Skillbox] Онлайн-курс «Веб-вёрстка» [2020]

[Gadzhi]

• .

[Skillbox] Онлайн-курс «Веб-вёрстка» [2020]

Старт курса 20 марта. Успейте записаться!

На курсе Вы научитесь верстать сайты, пройдете путь от новичка до уверенного верстальщика и получите новый востребованный навык!
​

Чему вы научитесь

• Блочная, резиновая и адаптивная верстка
• Верстка интернет-магазина
• Работа с с системой контроля версий Git
• Проверка сайта на доступность
• Основы CSS, HTML и JavaScript
• Работа с современными инструментами

Программа курса
Веб-верстка с нуля
Основы вёрстки

1. Как работают сайты. Верстка. Backend и frontend
2. Возможности HTML, CSS, JS
3. Настройка рабочего окружения
4. Правила написания кода. Работа с devtools
5. Github pages. Интеграция с vs code

HTML

1. Элементы HTML разметки. Теги
2. Виды тегов. Парные/непарные теги
3. Служебные теги
4. Основные теги
5. Атрибуты тегов
6. Текстовые теги. Преобразование текста
7. Теги картинок и ссылок
8. Теги для списка
9. Теги для таблиц
10. Прочие теги
11. HTML5-семантика
12. Стандарты и валидность

Формы и медиа-элементы

1. Тег form
2. Как правильно размечать формы
3. Атрибуты элементов формы
4. Теги для аудио и видео. Нюансы использования
5. Тег iframe

Доступность

1. Понятие доступности
2. Аria
3. Вредные и полезные советы
4. Проверка доступности
5. Проверка сайта. Исправление

Работаем с макетом

1. Работа с макетом. Photoshop и Avocode, Figma
2. Форматы изображений
3. Подключение изображений
4. SVG. Введение и вставка на страницу

CSS

1. Знакомство с CSS
2. Селекторы: как обращаться к элементам, вес селектора
3. Единицы измерения CSS
4. Свойства для текста
5. Блочные и инлайн элементы
6. Позиционирование, float, отступы
7. Цвета, фон
8. Подключение шрифтов
9. Форматирование css-кода
10. БЭМ-нейминг
11. Псевдоклассы и псевдоэлементы, сложные селекторы, функции

Практика. Flexbox

1. Создаем каркас
2. Стилизация. Flexbox
3. Дополнительные свойства flexbox
4. Бонус. Видео по bootstrap 4

Адаптивность и кроссбраузерность

1. Что такое адаптивная, резиновая, мобильная верстка. Pixel perfect. Mobile first
2. Относительные единицы измерения
3. Медиа запросы, viewport
4. Кроссбраузерность: общие подходы и тестирование

Javascript для верстальщика

1. Типы данных и переменные
2. Условия
3. Циклы и функции
4. Массивы и объекты
5. Обработка событий
6. Работа с DOM
7. Ajax
8. Плагины. Установка и гибкая настройка слайдера на сайте
9. jQuery

Бонус. Практикум

1. Введение. Разбираем макет на блоки
2. Верстка блока №1
3. Верстка блока №2
4. Верстка блока №3

Работа с хостингом

1. Покупка и настройка хостинга
2. FTP. Работа с файлами, выгрузка сайта
3. Создание поддоменов и почты

Курсовая. Мини-проект в портфолио
Веб-верстка PRO
Вёрстка HTML-писем

1. Общие правила верстки писем. Почтовики
2. Инструменты
3. Практика: верстаем письмо

Сборщики

1. Введение. Настраиваем окружение
2. Gulp. Пишем первый таск
3. Gulp. Дорабатываем сборку
4. Webpack. Делаем простую сборку
5. Webpack. Дорабатываем сборку
6. Союз двух сборщиков

Препроцессоры и постпроцессоры

1. Введение в препроцессоры
2. Sass. Возможности
3. Обзор Less, postcss

CSS Grid

1. Понятие Display: grid
2. Свойства контейнера
3. Свойства дочерних элементов
4. Практика: создаем сайт

Анимация

1. Введение в анимацию CSS3
2. Как можно анимировать проще — animate.css
3. Возможности анимации через JavaScript

CMS

1. Введение в CMS
2. CMS WordPress. Установка
3. CMS WordPress. Разделение шаблона
4. CMS WordPress. Подключение стилей и скриптов
5. CMS WordPress. Выводим данные на страницу из административной панели

Будущее вёрстки

1. Что нас ждет в будущем?
2. Новые HTML-теги
3. Новые CSS-свойства

Дипломные проекты

Программу курса Вы закрепите сверстав Лендинг и интернет-магазин.

​

Продажник: skillbox.ru/course/weblayout