HTML & CSS

Старт обучения
Дату уточните у администрации
30 час. по 2-3 раза в неделю

Описание курса

Курс HTML/CSS —  это обучение работе с языком разметки веб-страниц. Программа предназначена для новичков, которые желают изучить основы работы с front-end разработкой.

 

На курсе вы сможете освоить HTML с нуля: ознакомиться с теоретическими основами верстки и структурой HTML документа, порядком публикации документов в Web и сможете создавать полноценные страницы. HTML для начинающих является базисом для веб-разработчиков, а после его изучения уже можно начинать работать над реальными проектами. Уже первый урок даст возможность попрактиковаться в создании несложных HTML-страниц, работе с мультимедиа и таблицами стилей CSS.

 

После курса ты сможешь верстать простые страницы и работать с различными элементами HTML. Ты будешь понимать обязательную структуру веб-страницы и работать с разными видами верстки.

После курса вы сможете:

  • Создавать веб страницы
  • Наполнять их содержимым (текстом, ссылками, спецсимволами, изображениями, фонами, подключать иконочные и обычные шрифты и т.д.)
  • Добавлять стили всем элементам веб страницы
  • Выгружать сайты на хостинг
  • Понимать и разбираться в адаптивной, кроссбраузерной, попиксельной, резиновой, cмешаной и статичной верстками
  • Сверстать одностраничный сайт и выгрузить его на хостинг для общего доступа пользователей по ссылке

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

  • 1. Введение в веб-технологии
    • Предназначение технологий
    • Стек разработки для сайта
    • Принцип работы «клиент-сервер»
    • Консоль разработчика
    • Текстовый редактор и IDE
    • Что такое HTML, CSS, JS и их взаимодействие
  • 2. HTML
    • Базовые принципы верстки
    •  Знакомство с понятием тега и атрибута
    •  Обязательная структура любой веб-страницы
    •  Понятия строчных и блочных элементов веб страницы
    •  Понятия парных и непарных тегов;
    •  Семантические теги
    •  Спецсимволы
    •  Работа с тегами и атрибутами
    •  Работа с ссылками и якорями
    •  Работа с текстом и комментариями
    •  Работа с различными системами цветов в HTML
    •  Работа с изображениями
    •  Нумерованные и маркированные списки
    •  Работа с блоками (div)
    •  Таблицы
    •  Формы
    •  Элементы форм (инпуты)
    •  Айфреймы
    •  Подключение разных модулей к документу HTML
    • Форматирование элементов HTML
  • 3. CSS
    •  Что такое CSS?
    •  Базовые принципы написания стилей
    •  3 способа добавления CSS на HTML-страницу
    •  Внешние таблицы стилей
    •  Относительные и статичные единицы измерения
    •  Работа со шрифтами (семейства, стили, размеры, насыщенность)
    •  Работа с границами элементов (бордер, радиус, тени)
    •  Работа с отступами и размерами элементов
    •  Градиенты
    •  Работа со свойствами float и clear
    •  Flex box
    •  Работа с фоном (изображения и цвет, размеры, прозрачность)
    •  Селекторы
    •  Продвинутые селекторы
    •  Приоритеты стилей
    •  Перезапись стилей
    •  Псевдоклассы, псевдоэлементы
    •  Работа с анимацией элементов
    •  Валидация
    •  Медиазапросы
  • 4. Работа с браузером
    • Установка полезных расширений для верстки
    • Отладчик кода
  • 5. Хостинговые и доменные панели
    • Работа с Git и хостинг на Git
  • 6. Разные виды верстки
    • Адаптивная верстка
    • Резиновая верстка
    • Pixel perfect верстка
    • Статичная верстка
    • Кроссбраузерная верстка
    • Смешанная верстка
  • 7. Figma для разработчика
    • Понятие растровой и векторной графики
    • Преимущества и особенности Figma
    • Обзор панелей и инструментов
    • Сетки
    • Слои и компоненты
    • Экспорт параметров и графики
    • Редактирование элементов
  • 8. Grid Layout
    • Построение сетки
    • Работа с горизонтальным и вертикальным выравниванием
    • Объединение элементов
    • Методы работы с ячейками
  • 9. Правила именования классов по BEM
  • 10. Библиотека Bootstrap
  • 11. SASS
    • Подключение
    • Правила и дерективы
    • Управляющие директивы и выражения
    • Использование миксинов
    • Применение на практике

Минимальные требования:

  • Наличие собственного ноутбука для занятий в аудиториях
  • Установленные Sublime Text, Figma и файловый менеджер

* Указанные скидки не суммируются с другими действующими акциями и специальными предложениями. Если у Вас возникли вопросы, обращайтесь за консультацией к нашим менеджерам!

spinner-it