udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Продолжительность
26 ч 56 мин
Категория
HTMLКоличество уроков
76 Видео
Дата добавления
4 мая 2022 г., 09:05
Язык
Русский
Дата выхода
10 мар. 2022 г., 00:00
Дата обновления
29 апр. 2026 г., 14:43
Компетенция «Верстальщик» — это практико‑ориентированное обучение HTML, CSS и JavaScript, которое помогает уверенно войти в сферу веб‑разработки. Курс создан для тех, кто давно хотел научиться верстать профессионально: от аккуратных статичных макетов до динамичных и адаптивных интерфейсов.
Для кого подходит курс
Обучение будет полезно новичкам, студентам технических специальностей, а также тем, кто уже пробовал HTML и CSS, но не смог выйти на уровень самостоятельной разработки. Программа выстроена так, чтобы постепенно дать все необходимые навыки и привести к реальным проектам в портфолио.
Что вы получите на выходе
По окончании курса вы уверенно создаёте страницы по макетам Figma и Photoshop, владеете адаптивной версткой, понимаете основы JavaScript, умеете работать с популярными инструментами и используете современные методологии разработки.
Ключевые навыки, которые вы освоите
HTML: от основ к современным практикам
- Базовые элементы HTML — структура, теги, атрибуты, правильная разметка.
- HTML5 — семантические теги, мультимедиа, современные стандарты.
CSS: стиль, архитектура и адаптивность
- CSS для начинающих — работа со стилями, селекторами, наследованием.
- CSS3 — flexbox, grid, фильтры, анимации и трансформации.
- Методология БЭМ — чистая, масштабируемая и предсказуемая структура стилей.
- Работа с формами — создание и стилизация сложных UI‑элементов.
- Адаптивная и отзывчивая верстка — медиазапросы, брейкпоинты, mobile-first подход.
Работа с макетами и инструментами
- Figma и Photoshop — перенос дизайна в код с учетом пиксель‑перфекта.
- Zeplin — профессиональная разработка без «работы на глаз».
JavaScript для верстальщика
- Базовый JavaScript — переменные, события, работа с DOM, основы логики.
- Готовые JS‑решения — подключение библиотек и работа с плагинами.
Современные инструменты и фреймворки
- SASS/SCSS — переменные, миксины, вложенность, ускорение верстки.
- Bootstrap — создание интерфейсов на популярном UI‑фреймворке.
Практическая часть курса
В завершение обучения вы полностью сверстаете большой проект: адаптивный сайт с UI‑китом, интерактивными элементами и чистой, структурированной кодовой базой. Этот проект станет основой вашего портфолио и поможет уверенно сделать первый шаг в профессии.
Почему стоит начать именно сейчас
Верстка — оптимальная точка входа в IT, позволяющая быстро освоить востребованные навыки и получить первые заказы. Этот курс станет прочным фундаментом для дальнейшего развития: фронтенда, веб‑анимации, разработки интерфейсов или полноценного программирования.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:05:15Введение
- Урок 2. 00:04:50Как задавать вопросы по курсу
- Урок 3. 00:39:59Основы HTML
- Урок 4. 00:46:34Основы CSS
- Урок 5. 00:58:11Работа с текстом
- Урок 6. 00:26:16Работа с блочными элементами
- Урок 7. 00:29:07Стилизация блочных элементов
- Урок 8. 00:36:58Работа со ссылками и кнопками
- Урок 9. 00:29:57Работа с изображениями и иконками
- Урок 10. 00:07:21Автоматическое форматирование в VS Code
- Урок 11. 00:25:32Псевдоклассы и псевдоэлементы CSS
- Урок 12. 00:07:01Структура сайта и типы макетов
- Урок 13. 00:23:19Таблицы и табличная верстка
- Урок 14. 00:23:15Блочная модель верстки old-style
- Урок 15. 00:31:16Позиционирование, выпадающее меню
- Урок 16. 00:16:24Введение во FlexBox
- Урок 17. 00:19:13Блочная модель верстки на флексах
- Урок 18. 00:26:47Нарезка макета в Photoshop
- Урок 19. 00:29:39Zeplin и импорт из Photoshop или Figma
- Урок 20. 01:21:54Мастер-класс по верстке макета
- Урок 21. 00:32:09Основы БЭМ
- Урок 22. 00:52:13Элементы форм
- Урок 23. 00:15:23Добавление аудио и видео
- Урок 24. 00:06:42Фильтры CSS
- Урок 25. 00:29:31Семантические теги HTML5
- Урок 26. 00:29:01Кроссбраузерность
- Урок 27. 00:26:45Трансформации CSS3
- Урок 28. 00:19:18Анимации CSS3
- Урок 29. 00:39:06Работа с адаптивом
- Урок 30. 00:33:49Базовое использование препроцессора SASS|SCSS
- Урок 31. 00:23:32Продвинутое использование SASS|SCSS
- Урок 32. 00:24:34Общие возможности Bootstrap
- Урок 33. 00:35:39Работа с сеткой Bootstrap
- Урок 34. 00:28:24Использование компонентов Bootstrap
- Урок 35. 00:28:05Введение в JavaScript
- Урок 36. 00:23:24Ветвления и циклы
- Урок 37. 00:16:57Объекты и массивы JS
- Урок 38. 00:16:33Функции JS
- Урок 39. 00:26:02Понятие DOM и узлов
- Урок 40. 00:19:32Обработка события по клику
- Урок 41. 00:24:37Создание слайдера на JS
- Урок 42. 00:14:54Создание модального окна
- Урок 43. 00:17:19Создание табов
- Урок 44. 00:18:14Создание фильтра карточек
- Урок 45. 00:15:59Основы jQuery
- Урок 46. 00:15:30Галерея FancyBox
- Урок 47. 00:17:35Анимации ParollerJS, ParallaxJS
- Урок 48. 00:18:32Анимации ScrollMagic
- Урок 49. 00:24:12Адаптивный слайдер SwiperJS
- Урок 50. 00:15:17CSS Grid. Базовая терминология
- Урок 51. 00:18:39Базовые возможности CSS Grid
- Урок 52. 00:15:43Шаблоны и фракции
- Урок 53. 00:14:49Grid области и работа с ними
- Урок 54. 00:11:51Выравнивание
- Урок 55. 00:18:33Методы адаптива
- Урок 56. 00:11:00Нюансы использования
- Урок 57. 00:08:51CSS-переменные
- Урок 58. 00:05:47Обзор шаблона для вёрстки
- Урок 59. 00:06:35UI Kit - что и зачем
- Урок 60. 00:10:27Настройка окружения
- Урок 61. 00:32:46Переменные и типографика
- Урок 62. 00:07:01Компонент "Особенность"
- Урок 63. 00:12:11Компонент "Скриншот"
- Урок 64. 00:22:04Компонент "Отзыв"
- Урок 65. 00:24:46Компонент "Цена"
- Урок 66. 00:13:50Компоненты формы и соц иконок
- Урок 67. 00:20:38Вводный блок сайта
- Урок 68. 00:11:05Блок "О продукте"
- Урок 69. 00:10:06Блок "Особенности"
- Урок 70. 00:07:16Блок "Скриншоты"
- Урок 71. 00:05:55Блок "Отзывы"
- Урок 72. 00:08:53Блок "Цены"
- Урок 73. 00:29:30Блок "Подвал сайта"
- Урок 74. 00:03:49Валидация верстки
- Урок 75. 00:05:12Production-сборка
- Урок 76. 00:01:16Подведение итогов
Автор - udemy
Комментарии
windwail128Для новичков курс. Тем кто более менее знаком - будет уныло скучно.
Anonymousочень классный курс, автор хорошо объясняет и разъясняет материал который дает
MishaЛишнего просто вагон, начало вообще не понятно, начали за HTML и весь урок смотреть выделение текста, ощущение что у автора никакого опыта
sovaiv145Очень много воды здесь, конечно...