Stepik Верстаем 10 сайтов по макету из Figma в портфолио
О курсе
Подробнее
Этот курс направлен на обучение созданию верстки сайтов на HTML и CSS по макету из Figma или Photoshop. Весь материал подносится простым языком. Вы получите много полезных материалов и мы вместе будем применять изученное на практике создавая интересные проекты шаг за шагом.
Что в этом курсе?
Мы с вами пройдем путь от установки своего первого редактора кода до верстки сайта. Будем изучать теоретическую часть и сразу же применять её на практике. Все ссылки на ресурсы, дополнительные материалы, шпаргалки и готовые фрагменты кода будут предоставлены внутри курса.
На все вопросы внутри курса отвечаю лично в разделе "Комментарии" (этот раздел есть под каждым шагом). Так же есть телеграм канал для вопросов и обсуждений не только по данному курсу. Там можно общаться с другими участниками моего сообщества и лично со мной на любые темы касательно разработки и программирования.
Каждый урок состоит из отдельных шагов (до 16 шагов) - это может быть, теория в виде текста, видео, тестовое задание.
Почему стоит начать обучение сейчас? Создание сайтов (верстка) - очень востребованный навык, который хорошо оплачивается. Мало того, что изучив всю данную вам информацию вы уже сможете создавать свои продукты и работать как на фрилансе, так и в web-студии, но и вы заложите базу для дальнейшего обучения. Владея этими навыками вы сможете освоить любую CMS, сможете понять и изучить как работает backend часть, и сможете создавать визуальную часть приложений, написанных на JavaScript фреймворках и библиотеках.
Внимание!
Этот курс содержит в себе уроки и задания из трех следующих моих курсов:
Вёрстка на HTML & CSS для начинающих
Git и GitHub для разработчика
Frontend разработчик на HTML, CSS и JavaScript (3 модуля из этого курса, которые были добавлены 25 ноября 2022)
+ 2 новых модуля по верстке сайтов из Figma и Pixso
Это значит, что вам не нужно покупать их по отдельности и вы можете сэкономить приобретая данный курс. Или же приобрести отдельный курс только по интересующей вас теме.
Требования
Что нужно для старта
- Желание освоить создание сайтов и начать зарабатывать на этом
- Любой компьютер или ноутбук с доступом в интернет и базовые навыки работы с ним
- Немного целеустремленности, трудолюбия, терпения и щепотка веры в свои силы
- Никакой другой предварительной подготовки
Результат
Что вы получите
- Устанавливать редактор для написания кода VS Code, настраивать его, устанавливать расширения и темы, работать с плагином Emmet, работать в терминале (командной строке)
- Работать с HTML5 и CSS3 - это два языка, которые необходимы для создания любого сайта. Работать с Flexbox, Grid и BEM, создавать свою адаптивную сетку на CSS и мы сверстаем много отдельных фрагментов современных сайтов
- Создавать современные веб-сайты и правильно пользоваться документацией
- Работать с Figma, Pixso и Photoshop в контексте верстки, извлекать картинки и текст из макетов
- Работать с SVG иконками
- Работать с плагином Inspect Styles в Figma
- Работать с плагином Perfect Pixel
- Делать адаптивную версию сайта для разных устройств (Телевизор, ПК, Ноутбук, Планшет, Смартфон)
- Работать с системой контроля версий Git и добавлять свой код в удаленные репозитории на GitHub, делать Fork, Pull-request и слияние веток
- Сверстаем более 10-ти сайтов по макету из Figma и вы сможете добавить их себе в портфолио
- Расскажу как составить резюме, портфолио и взять первый заказ на фрилансе
Аудитория
Для кого этот курс
- Для тех, кто не знаком с темой создания сайтов;
- Для тех, кто уже делал свои первые попытки создания сайтов;
- Для тех, кто хочет освоить HTML, CSS, Figma, Photoshop, VS Code, Emmet, BEM, Git, GitHub и начать применять эти навыки в работе;
- Для тех, кто хочет стать крутым веб-разработчиком и зарабатывать деньги.
Содержание
9 занятийПрограмма курса
№ТемаЧто внутри
01Язык HTML
- Введение
- Установка браузера и редактора кода
- Обзор функций редактора
- Первые HTML теги
- Как задавать путь к файлу
- Создание списка
- Создание таблиц
- Работа с текстом
- Создание формы
- Универсальные атрибуты
- Цвет RGB и спецсимволы
- Тест по HTML, Часть 1
- Подведение итогов изучения HTML
02Язык CSS
- CSS селекторы
- Работа с изображениями
- Границы
- Размеры элементов
- Работа с шрифтом
- Блочная модель документа
- Псевдоклассы и псевдоэлементы
- Основы CSS Flexbox
- Тест по CSS, Часть 1
- Адаптивная версия сайта, Создание своей сетки
03Практика по HTML и CSS
- Практическое занятие 1
- Практическое занятие 2
- Практическое занятие 3
- Урок по Photoshop
- Практическое занятие 4
- Заключение
- Тест по HTML, Часть 2
- Тест по CSS, Часть 2
- Справочники и ссылки
04Работа с Git и GitHub
- Что такое Git
- Установка Git
- Регистрация на GitHub
- Первые команды Git
- Работа с Git в VS Code
- Удаление репозитория
- Клонирование
- Расширение Git Graph
- Алиасы для Git
- Отмена изменений
- Работа с ветками
- Слияние веток Git
- Синтаксис Markdown
- Фрагменты кода Gist
- Хостинг GitHub Pages
- Портфолио на GitHub
- Fork и Pull Request
- Файл .gitignore
- Итоги модуля
05Верстка сайта из Figma
- Работа с Figma и создание проекта
- Про Pixel Perfect и верстка Grid + Flexbox
- Верстаем несколько разделов сайта
- Пара слов о работе верстальщика
- Интерактивные элементы на сайте
- Домашнее задание по верстке сайта
- Фриланс: как взять заказ
06Полезные материалы
- Редакторы кода, иконки и Emmet
- CSS Grid и другие возможности
- Позиционирование, размеры и блочная модель
- БЭМ и как называть классы в HTML
- margin или padding что лучше использовать
- Выравнивание по центру и анимация
- Переменные root и функция calc
077 сайтов в портфолио
- Сайт 1 - Konstruct
- Сайт 2 - Alivio
- Сайт 3 - WD
- Сайт 4 - Britlex
- Сайт 5 - Archi Web
- Сайт 6 - Cloud Budget
- Сайт 7 - Dae
08Верстка сайта из Figma
- Структура проекта
- Обзор макета
- Работа с Perfect Pixel
- Адаптивная версия
- Экспорт SVG
- Верстаем раздел
- Тень блока вручную
- Публикуем код
- Плагин Inspect Styles
09Верстка сайта из Pixso
- Знакомство с Pixso
- Работа с SVG
- Шрифты Google Fonts
- Perfect Pixel в браузере
- Раздел сайта Features
- Раздел сайта Stats
- Раздел сайта Blog
- Домашнее задание
01Язык HTML
- Введение
- Установка браузера и редактора кода
- Обзор функций редактора
- Первые HTML теги
- Как задавать путь к файлу
- Создание списка
- Создание таблиц
- Работа с текстом
- Создание формы
- Универсальные атрибуты
- Цвет RGB и спецсимволы
- Тест по HTML, Часть 1
- Подведение итогов изучения HTML
02Язык CSS
- CSS селекторы
- Работа с изображениями
- Границы
- Размеры элементов
- Работа с шрифтом
- Блочная модель документа
- Псевдоклассы и псевдоэлементы
- Основы CSS Flexbox
- Тест по CSS, Часть 1
- Адаптивная версия сайта, Создание своей сетки
03Практика по HTML и CSS
- Практическое занятие 1
- Практическое занятие 2
- Практическое занятие 3
- Урок по Photoshop
- Практическое занятие 4
- Заключение
- Тест по HTML, Часть 2
- Тест по CSS, Часть 2
- Справочники и ссылки
04Работа с Git и GitHub
- Что такое Git
- Установка Git
- Регистрация на GitHub
- Первые команды Git
- Работа с Git в VS Code
- Удаление репозитория
- Клонирование
- Расширение Git Graph
- Алиасы для Git
- Отмена изменений
- Работа с ветками
- Слияние веток Git
- Синтаксис Markdown
- Фрагменты кода Gist
- Хостинг GitHub Pages
- Портфолио на GitHub
- Fork и Pull Request
- Файл .gitignore
- Итоги модуля
05Верстка сайта из Figma
- Работа с Figma и создание проекта
- Про Pixel Perfect и верстка Grid + Flexbox
- Верстаем несколько разделов сайта
- Пара слов о работе верстальщика
- Интерактивные элементы на сайте
- Домашнее задание по верстке сайта
- Фриланс: как взять заказ
06Полезные материалы
- Редакторы кода, иконки и Emmet
- CSS Grid и другие возможности
- Позиционирование, размеры и блочная модель
- БЭМ и как называть классы в HTML
- margin или padding что лучше использовать
- Выравнивание по центру и анимация
- Переменные root и функция calc
077 сайтов в портфолио
- Сайт 1 - Konstruct
- Сайт 2 - Alivio
- Сайт 3 - WD
- Сайт 4 - Britlex
- Сайт 5 - Archi Web
- Сайт 6 - Cloud Budget
- Сайт 7 - Dae
08Верстка сайта из Figma
- Структура проекта
- Обзор макета
- Работа с Perfect Pixel
- Адаптивная версия
- Экспорт SVG
- Верстаем раздел
- Тень блока вручную
- Публикуем код
- Плагин Inspect Styles
09Верстка сайта из Pixso
- Знакомство с Pixso
- Работа с SVG
- Шрифты Google Fonts
- Perfect Pixel в браузере
- Раздел сайта Features
- Раздел сайта Stats
- Раздел сайта Blog
- Домашнее задание
Документ после выпуска
Stepik
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Верстаем 10 сайтов по макету из Figma в портфолио» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
