Мы используем cookie для стабильной работы сервиса. Подробнее

Компетенция Верстальщик — HTML, CSS, JavaScript

ФорматОнлайн
Длительность2-3 часа в неделю
Объём9 занятий
О курсе

Подробнее

Когда-то уже изучали HTML и CSS, но так и не научились верстать макеты? Или просто проявляете первый интерес к веб-работке? Курс Компетенция Верстальщик станет отличной стартовой площадкой для того, чтобы войти в мир IT. Получите необходимый набор навыков по работе с HTML, CSS, JavaScript и дополнительными инструментами, создайте себе портфолио и станьте профессионалом. В рамках курса вы научитесь верстать по дизайнерским макетам - адаптивно, семантически, кроссбраузерно, с анимацией и интерактивными JavaScript элементами. Научитесь писать js-код самостоятельно и использовать готовые, проверенные временем решения. Начните свой путь в мир IT с веба. И этот курс станет для вас отличной платформой для дальнейших успехов в профессии.   *** ЧТО ВКЛЮЧЕНО В КУРС? *** Основы HTML - базовое использование языка для начинающих Современный HTML5 - актуальные решения и возможности Основы CSS - знакомство со стилизацией сайта для начинающих Современный CSS3 - флексы, гриды, фильтры, трансформации и анимации Работа с макетами - преобразование шаблонов из Photoshop и Figma в реальные макеты Zeplin - верстка с использованием современного инструмента, чтобы не на глазок БЭМ - актуальная методология нейминга, решающая ряд типовых проблем верстальщиков Формы - поймем как создаются и стилизуются эти непростые элементы Адаптив и отзывчивость - научимся делать сайты, одинаково крутые на любых устройствах JavaScript - знакомство с языком для начинающих и необходимые знания для верстальщиков Плагины JavaScript - на реальных примерах научимся пользоваться сторонними библиотеками на JavaScript SASS (SCSS) - научимся упрощать и ускорять верстку за счет самого популярного препроцессора стилей Bootstrap - познакомимся с самым популярным фреймворком по созданию сайтов Полноценный проект - полностью сверстаем дизайн макет с UI-китом и адаптивом   Почему это именно тот, курс который даст результат? Меня зовут Михаил, и я профессиональный веб-разработчик. Я занимаюсь frontend'ом и верстка - неизменная составляющая каждого рабочего дня. Я расскажу, как пользоваться ей грамотно и эффективно. Я также профессиональный преподаватель и обучаю людей веб-разработке с 2016 года. Курсы по верстке я вел в университете "Синергия", в GeekBrains и в нескольких очных учебных центрах. В своих курсах я стараюсь подавать материал максимально доступно, так как сам испытывал трудности, изучая многие темы из мира верстки, а теперь пользуюсь ими ежедневно. Работая с людьми вживую, я научился подавать любую тему так, чтобы каждому было понятно. А видео курсы - результат этого опыта.
Требования

Что нужно для старта

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

Что вы получите

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

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

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

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

9 занятий
ТемаЧто внутри
01Введение

- Введение

02Основы HTML и CSS

- Основы HTML
- Основы CSS
- Работа с текстом
- Работа с блочными элементами
- Стилизация блочных элементов
- Работа со ссылками и кнопками
- Работа с изображениями и иконками
- Псевдоклассы и псевдоэлементы CSS
- Структура сайта и типы макетов
- Таблицы и табличная верстка
- Блочная модель верстки old-style
- Позиционирование, выпадающее меню
- Введение во FlexBox
- Блочная модель верстки на флексах
- Проверка знаний

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

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

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

- Основы БЭМ
- Элементы форм
- Добавление аудио и видео
- Фильтры CSS
- Семантические теги HTML5
- Кроссбраузерность
- Трансформации CSS3
- Анимации CSS3
- Работа с адаптивом
- Базовое использование препроцессора SASS|SCSS
- Продвинутое использование SASS|SCSS

05Bootstrap

- Общие возможности Bootstrap
- Работа с сеткой Bootstrap
- Использование компонентов Bootstrap
- Формы в Bootstrap
- Кастомизация компонентов

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

- Введение в JavaScript
- Ветвления и циклы
- Объекты и массивы JS
- Функции JS
- Понятие DOM и узлов
- Обработка события по клику
- Создание слайдера на JS
- Создание модального окна
- Создание табов
- Создание фильтра карточек
- Проверка знаний

07Библиотеки JavaScript

- Основы jQuery
- Галерея FancyBox
- Анимации ParollerJS, ParallaxJS
- Анимации ScrollMagic
- Адаптивный слайдер SwiperJS

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

- CSS Grid. Базовая терминология
- Базовые возможности CSS Grid
- Шаблоны и фракции
- Grid области и работа с ними
- Выравнивание
- Методы адаптива
- Нюансы использования
- CSS-переменные
- Проверка знаний

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

- Обзор шаблона для вёрстки
- UI Kit - что и зачем
- Настройка окружения
- Переменные и типографика
- Компонент "Особенность"
- Компонент "Скриншот"
- Компонент "Отзыв"
- Компонент "Цена"
- Компоненты формы и соц иконок
- Вводный блок сайта
- Блок "О продукте"
- Блок "Особенности"
- Блок "Скриншоты"
- Блок "Отзывы"
- Блок "Цены"
- Блок "Подвал сайта"
- Валидация верстки
- Production-сборка

01Введение

- Введение

02Основы HTML и CSS

- Основы HTML
- Основы CSS
- Работа с текстом
- Работа с блочными элементами
- Стилизация блочных элементов
- Работа со ссылками и кнопками
- Работа с изображениями и иконками
- Псевдоклассы и псевдоэлементы CSS
- Структура сайта и типы макетов
- Таблицы и табличная верстка
- Блочная модель верстки old-style
- Позиционирование, выпадающее меню
- Введение во FlexBox
- Блочная модель верстки на флексах
- Проверка знаний

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

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

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

- Основы БЭМ
- Элементы форм
- Добавление аудио и видео
- Фильтры CSS
- Семантические теги HTML5
- Кроссбраузерность
- Трансформации CSS3
- Анимации CSS3
- Работа с адаптивом
- Базовое использование препроцессора SASS|SCSS
- Продвинутое использование SASS|SCSS

05Bootstrap

- Общие возможности Bootstrap
- Работа с сеткой Bootstrap
- Использование компонентов Bootstrap
- Формы в Bootstrap
- Кастомизация компонентов

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

- Введение в JavaScript
- Ветвления и циклы
- Объекты и массивы JS
- Функции JS
- Понятие DOM и узлов
- Обработка события по клику
- Создание слайдера на JS
- Создание модального окна
- Создание табов
- Создание фильтра карточек
- Проверка знаний

07Библиотеки JavaScript

- Основы jQuery
- Галерея FancyBox
- Анимации ParollerJS, ParallaxJS
- Анимации ScrollMagic
- Адаптивный слайдер SwiperJS

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

- CSS Grid. Базовая терминология
- Базовые возможности CSS Grid
- Шаблоны и фракции
- Grid области и работа с ними
- Выравнивание
- Методы адаптива
- Нюансы использования
- CSS-переменные
- Проверка знаний

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

- Обзор шаблона для вёрстки
- UI Kit - что и зачем
- Настройка окружения
- Переменные и типографика
- Компонент "Особенность"
- Компонент "Скриншот"
- Компонент "Отзыв"
- Компонент "Цена"
- Компоненты формы и соц иконок
- Вводный блок сайта
- Блок "О продукте"
- Блок "Особенности"
- Блок "Скриншоты"
- Блок "Отзывы"
- Блок "Цены"
- Блок "Подвал сайта"
- Валидация верстки
- Production-сборка

Организатор

Автор курса

StepikStepik
Stepik — образовательная платформа и конструктор онлайн-курсов. Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем в проведении олимпиад и программ переподготовки. Наша цель — сделать образование открытым и удобным. Stepik — широко известная российская образовательная платформа, основанная в 2013 году. На Stepik зарегистрировано более миллиона пользователей из России и стран СНГ. В настоящее время на Stepik представлены несколько тысяч учебных курсов на самые разные темы.
Подробнее об авторе
Мнения учеников

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

Оставьте отзыв

Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.

Напишите ваш коментарий, не менее 30 символов

Нажимая кнопку, вы даете согласие на обработку персональных данных

Оставьте заявку

Консультант ответит на вопросы о курсе «Компетенция Верстальщик — HTML, CSS, JavaScript» и поможет разобраться в деталях обучения.

Комментарий ...

Нажимая кнопку, вы даете согласие на обработку персональных данных

Информация обновлена 3 сентября 2026 г.

Продолжить выбор

Похожие курсы

Vue.js 3, Vue Router и Pinia
Vue.js 3, Vue Router и Pinia

В этом курсе мы изучим Vue, Vue Router и Pinia, создавая два полноценных приложения. Мы сделаем приложение для отображения прогноза погоды и Saas сервис хранения веб закладок. Это…

Онлайн15 занятий
3 999 ₽
Разработка на Angular
−10%14 сентября
Разработка на Angular

Освойте промышленную разработку на Angular: создавайте динамические веб-приложения с нуля. Изучите TypeScript, компоненты, шаблоны, пайпы, сервисы, маршрутизацию и сложные формы.…

Онлайн13 занятийСредний
42 900 ₽−10%
38 610 ₽
Вёрстка на HTML & CSS для начинающих
30 минут в день
Вёрстка на HTML & CSS для начинающих

В этом курсе вы научитесь с нуля основам HTML и CSS, которые нужны для создания сайтов и уже сможете выполнять довольно серьезные работы в этой области. Мы будем изучать язык гипе…

Онлайн8 занятий
490 ₽
Node js для Front End
4 месяца
Node js для Front End

Backend разработка на Node.js: Express.js, NestJS фреймворки. Работа с базами данных PostgreSQL, MongoDB. Создание REST API, аутентификация и авторизация. WebSockets для реального…

ОнлайнСредний
100 000 ₽от 5 555 ₽/мес на 18 мес.
Fullstack-разработчик на JavaScript + ИИ
4 сентября
Fullstack-разработчик на JavaScript + ИИ

Онлайн- курс, на котором вы с нуля освоите главный язык Frontend-разработки — JavaScript, в связке с TypeScript и Node.js, с помощью которых станете Fullstack-Разработчиком. Обучи…

Онлайн
Персональный наставникДомашние задания+4
158 760 ₽от 16 537 ₽/мес на 6615 мес.
React Native и Expo Router
React Native и Expo Router

В этом курсе мы изучим React Native и Expo Router написав полноценное мобильное приложение с авторизацией и нативными возможностями. Этот курс подойдёт тем, кто хочет погрузиться…

Онлайн16 занятий
3 999 ₽
Начать без затрат

Бесплатные курсы

Разработка веб-приложений на Node.js
БесплатноКурс рассчитан на 5-6 недель обучения.
Разработка веб-приложений на Node.js

Node.js – современная и востребованная на рынке труда платформа для разработки веб-приложений. Этот курс проведет вас от изучения основ Node.js до создания первого приложения и по…

Онлайн5 занятий
Бесплатно