[Genius Space] Html/css-специалист [Дмитрий Рябовол]

Язык украинский
Освойте современную 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-элементов, когда над проектом работает целая команда, и измените названия классов в соответствии с методологией БЭМ.
• На занятии рассмотрим основные методологии для удобства будущей поддержки сайта.

Модуль 18. Адаптивность и адаптивная графика

• Типы и виды вёрстки
• CSS media запросы
• Стратегии Mobile и Desktop first
• Адаптив и ретинизация фоновых и контентных изображений

Результат:

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