Узнайте о снижении цены

Оставьте ваш email и мы напишем вам когда цена снизится

Познавая вёрстку: HTML, CSS и кое-что ещё

Вы получите структурные знания по html-вёрстке и созданию стилей CSS.
5 990 ₽
стоимость обучения
Узнать о снижении цены
Уровень сложности
для новичков
Длительность
0.5 мес.
Демо доступ
да
Формат обучения
видеоуроки
Домашние задания
да
Обратная связь
нет
Стажировка
нет
Помощь в трудоустройстве
нет
Документ по окончании
сертификат

Программа обучения

  • Основное
  • Содержание программы

Обучение на практике для тех, кто интересуется веб-разработкой.

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

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

 

Введение
  • О чём этот курс
  • Советы по обучению
  • Что такое страница сайта
  • Что такое тег
  • Анатомия тега
  • Страница изнутри
Вёрстка бегло на примере очень простой страницы
  • Списки
  • Инструменты разработчика
  • Особенности поведения некоторых тегов
  • Как привязать стили к странице
  • Как писать стили
Фундамент вёрстки
  • Структура html страницы
  • Разбиение страницы на блоки
  • Разбиение блоков на элементы
  • Группировка элементов
  • Советы по решению заданий
  • Задание 1 - решение
  • От разбиения к верстке условным тегом
  • Даём названия классам правильно
Применяем знания к тестовому проекту
  • Несколько популярных тегов
  • Меняем условный тег на нужный
  • Выпадающие спики
  • Таблицы
  • Задание 2
  • Задание 2 - разбор
  • Обзор пройденного
Основы стилей CSS
  • Правильное подключение стилей
  • Верстка макета для примера
  • Что такое CSS селекторы
  • Приоритет селекторов
  • Шпаргалка по стилям в виде mindmap
  • Отступы
  • Блоковая модель box model
  • Шрифты
  • Техника pixel perfect
  • Позиционирование элементов
  • Задание 3
  • Задание 3 - разбор
  • Обзор пройденного
Продвинутые техники
  • Препроцессоры и что это тако
  • Препроцессор scss и visual studio code
  • Методология на примере RSCSS
  • Понятие контекста
Создаём шапку тестового проекта
  • Верстка шапки
  • Подключение шрифтов
  • Стили для шапки - способ 1
  • Нормализация
  • Стили для шапки - способ 2, на флексбоксах
  • Добавляем кнопки соц сетей
  • Пытаемся сделать pixel perfect для шапки
  • Цвета как переменные
Верстаем календари
  • Ограничиваем максимальную ширину сайта - создаём контейнер
  • Снова про выпадающие списки
  • Аналог функций в SASS
  • Приближаем календарь к pixel perfect
  • Ещё раз про таблицы (ньюансы)
  • Что такое псевдоклассы
  • Иконочные шрифты
  • Задание 4
  • Задание 4 - разбор
Адаптивность и кроссбраузерность
  • Введение в адаптивность
  • Выравнивание календарей
  • SASS и миксины
  • Префиксы для старых версий браузеров
  • Media запросы
  • Пару слов о bootstrap
Решаем популярные задачи
  • Стиль кодирования
  • Изображение в виде фона на всю ширину
  • Элементы формы
  • Методы отправки формы
  • Снова формы: fieldset и radio
  • Меняем стили для формы
  • О свойстве box-sizing
  • Варианты в методологии RSCSS
  • Варианты задания размеров
  • Анимация
  • Структура папок проекта
  • Ещё о кроссбраузерности
  • Оптимизация
  • Внезапно: баг в проекте
  • Комментарии в коде
  • Организация кода в разных файлах
  • HTML5
Нюансы, о которых надо знать
  • Бойцы невидимого фронта: мета теги
  • Ещё одни возможности для адаптивности: мета тег viewport
  • Последний штрих: фавикон
  • Бонус: навыки верстки

Чему научат

Как от дизайна или идеи прийти к верной структуре кода
Как написать правильные стили
Как писать стили с учётом адаптивности и кроссбраузерности
Как все знания связать вместе и использовать в работе
Как организовать файлы проекта

Преимущества курса

4 полезных ресурса для скачивания

Отзывы пользователей

Оставить отзыв о курсе

    Оставьте отзыв о курсе

    Ваш адрес Email не будет опубликован
    Ваша оценка:
    Ваш отзыв:
    Достоинства:
    Недостатки:
    Имя:
    Email: