Программа и содержание
Сайт: Сайт автора
Язык украинский
Освойте современную IT-профессию, получите массу ценных навыков и начните зарабатывать уже через 2 месяца на крутых проектах и любимом деле.
Кто такой HTML/CSS-специалист?
HTML-верстальщик — это тот, кто превращает нарисованный дизайнером макет в живой сайт, переводит картинку-макет на язык, понятный любому браузеру.
Этот курс точно для тебя, если ты:
Мечтаешь стать IT-специалистом — но не имеешь технического образования
Желаешь освоить новую профессию — и зарабатывать от 1000$, путешествовать и работать из любой точки мира
Хочешь стать HTML/CSS верстальщиком — но не понимаешь, как начать свой путь, чтобы быстрее получить результат
Мама в декрете — которая ищет дополнительный заработок, который сможет совмещать с семьёй
Офисный сотрудник — который устал от рутинной работы, хочет свободы, развития и финансового роста
Студент — который ищет себя и дело, в котором сможет реализовать свой потенциал и получать прибыль
Преимущества быть HTML/CSS разработчиком:
Работа в крупных IT-компаниях, свободный график, соц. пакеты и другие бонусы от компаний
Профессия, которая быстро осваивается
Перспектива развития в любом IT-направлении
Большой растущий спрос на специалистов во всём мире
Высокая зарплата (около 1000 $ на старте и до 3000 $ - 4000 $ через 1-2 года)
Перспектива изучения разных продуктов и направлений, технологий
Формат обучения:
Изучаем видеоурок
Знакомимся со всеми дополнительными материалами, чек-листами и шаблонами
Внедряем в жизнь все инструменты
Повышаем свой доход
Программа:
Модуль 1. Разработка интерфейсов с нуля
Что нужно знать
Для чего нужна эта профессия
Что такое веб
Пути развития
Результат:
Освоите базовые навыки о работе веб-сайта и узнаете, как загружается веб-страница.
На занятии разберём, чем занимается HTML/CSS специалист и какие направления развития доступны после прохождения курса.
Модуль 2. Начало работы
Настройка среды
Программы для работы
Загрузка первого сайта
Результат:
Загрузите программы для начала работы и настроите комфортную среду разработки для дальнейшего обучения.
На занятии разберём, как загрузить первую страницу в интернет и как сдавать домашнее задание.
Модуль 3. Введение в HTML
Теги и атрибуты
Семантика
Работа с текстом
Изображения
Интерактивные элементы
Списки
Результат:
Узнаете об основах HTML, как работают теги и атрибуты.
На занятии выполним первую разметку сайта для современной пекарни «SHOP bakery», разберём, как работать с изображениями и интерактивными элементами.
Модуль 4. Продолжение HTML
Инструменты разработчика
Таблицы
Символьные подстановки
Медиаконтент, фрейм
Оформление и валидация кода
Результат:
Продолжите изучать HTML и работать с инструментами разработчика в браузере.
На занятии выполним разметку таблицы, добавим на сайт карту с Google Maps и видео с YouTube.
Модуль 5. Введение в CSS
Подключение стилей
Синтаксис, селекторы
Каскадность и специфичность
CSS переменные
Результат:
Узнаете, как подключать стили к HTML-странице, и впервые измените внешний вид сайта.
На занятии разберём, как правильно писать стили, поговорим о каскадности, специфичности и наследовании стилей. Также добавим первые CSS-переменные.
Модуль 6. Шрифты
Подключение шрифтов
Локальные шрифты
Оформление текста
Результат:
Узнаете, как работают шрифты в браузере.
На занятии подключим шрифты из сервиса Google Fonts на сайт, а также загрузим шрифты локально в проект. Также добавим базовые стили шрифта к текстовым элементам.
Модуль 7. Блочная модель
Геометрия элемента
Типы элемента
Структурные псевдоклассы
Результат:
Поймёте, что такое блочная модель элемента и как браузер отображает блочные и строчные элементы.
На занятии добавим внешние и внутренние отступы к секциям, кнопкам, ссылкам, заголовкам и т.д.
Модуль 8. Flexbox
Основные концепции
Flex-контейнер и flex-элемент
Практическое применение
Результат:
Научитесь гибко размещать элементы с помощью раскладки флексов.
На занятии сделаем первую флекс-разметку и разместим элементы в соответствии с макетом.
Модуль 9. Раскладка CSS Grid
Основные концепции
Grid-контейнер
Grid-элемент
Практическое применение
Результат:
На этом занятии мы научимся работать с декором в CSS, а также рассмотрим, какие есть типы изображений. Разберём, как добавлять различные декоративные эффекты и элементы.
Основные темы: типы изображений, фон и градиент, тень элемента, псевдоэлементы.
Модуль 10. Декоративные эффекты
Типы изображений
Фон
Градиенты
Тень
Псевдоэлементы
Результат:
Поймёте, какие бывают типы изображений и как добавлять декоративные эффекты на сайт. Например, тень, градиент, или фоновое изображение элемента.
Также на занятии поработаем с псевдоэлементами для добавления декоративных элементов.
Модуль 11. Графика
Растровая графика
Векторная графика. SVG
Добавление SVG на страницу
SVG-спрайт
Результат:
Освоите навыки работы с растровой и векторной графикой на сайте.
На занятии разберём, как добавлять SVG иконки на страницу и правильно их использовать.
Модуль 12. Позиционирование
Типы позиционирования
Свойство overflow
Наложение элементов
Результат:
Узнаете, как позиционировать элементы на странице. Например, сделать шапку сайта фиксированной в верхней части, или разместить текст поверх изображения.
Также на занятии поговорим о порядке наложения элементов друг на друга и управлении отображением содержимого элемента.
Модуль 13. Анимация
Трансформация
Переходы
Анимация
Результат:
Добавите первую плавную анимацию на сайт.
На занятии приобретём навыки работы с вращением, масштабированием и искривлением элементов. Также добавим плавные переходы смены цвета при наведении.
Модуль 14. Создание веб-форм
Основы работы
Элементы форм
Группировка полей
Результат:
Создадите первую форму на сайте.
На занятии узнаем, как работают формы, и выполним разметку полей ввода на странице.
Модуль 15. Валидация веб-форм
Виды валидации
Проверка введённых значений
Псевдоклассы состояния
Результат:
Добавите проверку введённых значений в полях формы.
Научитесь делать поля обязательными для заполнения и добавите валидацию полей по разным критериям.
Модуль 16. Препроцессоры
Препроцессор SASS, SCSS
Вложенные правила
Директивы
Вендорные префиксы
Результат:
Освоите навыки работы с препроцессором.
На занятии разобьём файл стилей на отдельные файлы для визуальной структуры и удобной навигации по проекту.
Модуль 17. CSS Методологии
Зачем нужны методологии
Методология БЭМ
Блок, элемент, модификатор
Результат:
Узнаете, как добавляют имена классов для HTML-элементов, когда над проектом работает целая команда, и измените названия классов в со