[Stepik] Компетенция Верстальщик - HTML, CSS, JavaScript (Михаил Непомнящий)

​

Когда-то уже изучали HTML и CSS, но так и не научились верстать макеты? Или просто проявляете первый интерес к веб-работке? Курс Компетенция Верстальщик станет отличной стартовой площадкой для того, чтобы войти в мир IT.

Получите необходимый набор навыков по работе с HTML, CSS, JavaScript и дополнительными инструментами, создайте себе портфолио и станьте профессионалом.

В рамках курса вы научитесь верстать по дизайнерским макетам - адаптивно, семантически, кроссбраузерно, с анимацией и интерактивными JavaScript элементами. Научитесь писать js-код самостоятельно и использовать готовые, проверенные временем решения.

Начните свой путь в мир IT с веба. И этот курс станет для вас отличной платформой для дальнейших успехов в профессии.

Чему вы научитесь:

• Верстка веб-страниц по макетам
• Блочная верстка
• Семантическая и валидная верстка
• Адаптив и кроссбраузерность
• Анимации и трансформации
• БЭМ
• FlexBox и Grid
• Препроцессор SCSS
• Bootstrap 4
• Нарезка макетов Photoshop, Figma, Zeplin
• JavaScript для верстальщика
• Использование js-библиотек
• Проект верстки с нуля до результата

Для кого этот курс:

• Для тех, кто с нуля хочет выучить HTML, CSS и JavaScript и начать профессию верстальщика сайтов (в том числе с возможностью работать удалённо)
• Для тех, кто хочет актуализировать свои знания по верстке под современные требования рынка
• Для тех, кто хочет сделать себе сайт и не хочет зависеть от фрилансеров
• Для тех, кто хочет войти в богатый мир IT и не знает с чего начать. Верстка сайтов - это только начало большого пути в веб-разработке!

Начальные требования:

• Базовое владение ПК и Интернет

Что включено в курс:

• Основы HTML - базовое использование языка для начинающих
• Современный HTML5 - актуальные решения и возможности
• Основы CSS - знакомство со стилизацией сайта для начинающих
• Современный CSS3 - флексы, гриды, фильтры, трансформации и анимации
• Работа с макетами - преобразование шаблонов из Photoshop и Figma в реальные макеты
• Zeplin - верстка с использованием современного инструмента, чтобы не на глазок
• БЭМ - актуальная методология нейминга, решающая ряд типовых проблем верстальщиков
• Формы - поймем как создаются и стилизуются эти непростые элементы
• Адаптив и отзывчивость - научимся делать сайты, одинаково крутые на любых устройствах
• JavaScript - знакомство с языком для начинающих и необходимые знания для верстальщиков
• Плагины JavaScript - на реальных примерах научимся пользоваться сторонними библиотеками на JavaScript
• SASS (SCSS) - научимся упрощать и ускорять верстку за счет самого популярного препроцессора стилей
• Bootstrap - познакомимся с самым популярным фреймворком по созданию сайтов
• Полноценный проект - полностью сверстаем дизайн макет с UI-китом и адаптивом

Спойлер: Программа курса

Введение

1. Введение

Основы HTML и CSS

1. Основы HTML
2. Основы CSS
3. Работа с текстом
4. Работа с блочными элементами
5. Стилизация блочных элементов
6. Работа со ссылками и кнопками
7. Работа с изображениями и иконками
8. Псевдоклассы и псевдоэлементы CSS
9. Структура сайта и типы макетов
10. Таблицы и табличная верстка
11. Блочная модель верстки old-style
12. Позиционирование, выпадающее меню
13. Введение во FlexBox
14. Блочная модель верстки на флексах
15. Проверка знаний

Работа с макетами

1. Нарезка макета в Photoshop
2. Zeplin и импорт из Photoshop или Figma
3. Мастер-класс по верстке макета

Продвинутые техники HTML, CSS

1. Основы БЭМ
2. Элементы форм
3. Добавление аудио и видео
4. Фильтры CSS
5. Семантические теги HTML5
6. Кроссбраузерность
7. Трансформации CSS3
8. Анимации CSS3
9. Работа с адаптивом
10. Базовое использование препроцессора SASS|SCSS
11. Продвинутое использование SASS|SCSS

Bootstrap 4

1. Общие возможности Bootstrap
2. Работа с сеткой Bootstrap
3. Использование компонентов Bootstrap

JavaScript для верстальщика

1. Введение в JavaScript
2. Ветвления и циклы
3. Объекты и массивы JS
4. Функции JS
5. Понятие DOM и узлов
6. Обработка события по клику
7. Создание слайдера на JS
8. Создание модального окна
9. Создание табов
10. Создание фильтра карточек
11. Проверка знаний

Библиотеки JavaScript

1. Основы jQuery
2. Галерея FancyBox
3. Анимации ParollerJS, ParallaxJS
4. Анимации ScrollMagic
5. Адаптивный слайдер SwiperJS

БОНУС: Спецификация CSS Grid (видео с моего YouTube-канала)

1. CSS Grid. Базовая терминология
2. Базовые возможности CSS Grid
3. Шаблоны и фракции
4. Grid области и работа с ними
5. Выравнивание
6. Методы адаптива
7. Нюансы использования
8. CSS-переменные

Проект Верстки макета от и до

1. Обзор шаблона для вёрстки
2. UI Kit - что и зачем
3. Настройка окружения
4. Переменные и типографика
5. Компонент "Особенность"
6. Компонент "Скриншот"
7. Компонент "Отзыв"
8. Компонент "Цена"
9. Компоненты формы и соц иконок
10. Вводный блок сайта
11. Блок "О продукте"
12. Блок "Особенности"
13. Блок "Скриншоты"
14. Блок "Отзывы"
15. Блок "Цены"
16. Блок "Подвал сайта"
17. Валидация верстки
18. Production-сборка

Спойлер: Об авторе

Михаил Непомнящий (Software Engineer и преподаватель IT-дисциплин.)

Всем привет! Я - веб-разработчик и с удовольствием делюсь знаниями с другими. Через YouTube и через видео курсы. По образованию - прикладной информатик. По роду деятельности - 10 лет в журналистике, в самых разных ролях, в том числе теле-корреспондента, редактора новостной службы и руководителя отдела онлайн-трансляций. Профессиональный преподаватель с 2016-го. Работал в международной компьютерной академии ШАГ, создал собственный образовательный проект "Компьютерная грамота" с одноименным блогом на YouTube. Затем сосредоточился на веб-разработке и веду YouTube канал соответствующей тематики. Я - преподаватель-практик. Работаю веб-разработчиком в международной компании в Испании. Продолжаю постоянно учиться и совершенствовать способы передачи знаний дальше.

Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть...