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

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

Bang Bang Education
Онлайн-школа дизайна
Подробнее
Начало
Ежедневно
Уровень
С нуля
Длительность
1 месяц
Формат
Видео
Перейти

О курсе

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

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

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

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

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

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

Стоимость

По частям
3 333 ₽ / мес
Полная стоимость
20 000 ₽
25 000 ₽
Перейти

Вам может быть интересно

Начало
Длительность
14 месяцев
Рассрочка
5 953 ₽ / мес
Трудоустройство
Вебинары
Домашние задания
SkillFactory
skillfactory.ru
Скидка 30%
Начало
Длительность
1 год
Рассрочка
7 000 ₽ / мес
Тренажеры
Трудоустройство
Видео
Skillbox
skillbox.ru
Скидка 30%
Начало
Ежедневно
Длительность
2 года
Рассрочка
4 510 ₽ / мес
Подарок при покупке
Трудоустройство
Видео
Разработчик Python
Продвинутый уровень
Начало
Длительность
5 месяцев
Рассрочка
22 500 ₽ / мес
Стоимость
100 000 ₽
Трудоустройство
Вебинары
Домашние задания
GeekBrains
geekbrains.ru
Скидка 40%
Факультет веб-разработки
Начальный уровень
Начало
Длительность
1,5 года
Рассрочка
13 500 ₽ / мес
Стоимость
162 000 ₽
Вебинары
Видео
Трудоустройство
Начало
Ежедневно
Длительность
5 месяцев
Рассрочка
2 850 ₽ / мес
Тренажеры
Домашние задания
Видео
Начало
Ежедневно
Длительность
4 месяца
Рассрочка
Нет
Стоимость
32 000 ₽
Видео
Домашние задания