Основы веб-вёрстки

С помощью этого курса Вы научитесь:

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

Программа курса:

• Инструментарий
  • Редактор кода Atom
  • Браузер Google Chrome
• Что такое HTML
  • Основные понятия
  • Что такое тег и как устроена его анатомия
  • Как объяснить браузеру на каком языке мы с ним будем говорить
  • Базовая структура HTML
• Что такое CSS
  • Основные понятия
  • Откуда берутся стили в браузере
  • Синтаксис и способы написания стилей
  • Свойства, значения свойств и величины
  • Составные правила
  • Селекторы
• Подготовка к вёрстке
  • Почему важен сброс предустановленных стилей и как его сделать
  • Как подключить шрифты
  • Как вывести изображение
  • Упрощённый способ вёрстки
• Основные понятия веб-типографики
  • Свойства для работы с текстом
  • Основные понятия бокс модели
  • Взаимозависимость свойств при работе с текстом
  • Вёрстка текста по макету пиксель в пиксель
  • Создание устойчивой к действиям пользователя системы правил
• Основы веб-вёрстки
  • Семантика в HTML и какие бывают теги
  • Что такое DOM и почему важно это понимать
  • Что такое поток, блочные и строчные элементы
  • Что такое позиционирование элементов и как оно работает
  • Что такое псевдоэлементы, зачем и как их использовать
  • Как создать меню, закреплённое на экране
• Основы отзывчивой веб-вёрстки
  • Какие экраны сегодня популярны и как за этим следить в будущем
  • Что такое медиа-запросы, какие бывают и как их использовать
  • Как запретить телефону масштабировать сайт без нашего ведома
  • Адаптируем страницу под планшет
  • Адаптируем страницу под смартфон
• Современная веб-вёрстка
  • Что такое флексбокс и как с помощью него быстро сделать меню
  • Структурируем файлы в проекте и учимся работать с путями
  • Объединяем несколько страниц в сайт
  • Верстаем ленту постов
  • Спецэффекты в вебе: тени, скругление углов, эффекты при наведении
• Немного про скрипты
  • Зачем нужны скрипты
  • Что такое JavaScript
  • Подключение библиотек и их использование
• Подготовка к вёрстке лендинга
  • Изучаем макет и планируем вёрстку
  • Подготавливаем пространство для вёрстки
  • Подготавливаем растровую графику
  • Подготавливаем векторную графику
  • Используем графику в виде фонового изображения
  • Выводим текст и другие необходимые элементы
• Вёрстка лендинга
  • Вёрстка основных элементов под 13−15″ экраны
  • Вёрстка основных элементов под горизонтальный планшет и экраны до 13″
  • Вёрстка основных элементов под вертикальный планшет
  • Вёрстка основных элементов под смартфоны
  • Вёрстка оставшихся элементов под все разрешения экранов
• Подготовка сайта к публикации
  • Какие инструменты аналитики существуют
  • Подключаем Google Analytics и Яндекс Метрику
  • Подготавливаем сайт к индексации поисковиками
  • Подготавливаем сайт к шейру в социальных сетях
• Публикуем сайт
  • Выбираем хостинг
  • Покупаем домен
  • Публикуем сайт
• Качаем скилл дальше
  • Что изучать дальше в веб-вёрстке
  • Как устроен мир веб-разработки и куда дальше идти

Перспективы:

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