Stepik Верстка сайта из PSD, Figma и Pixso
О курсе
Подробнее
В курсе мы будем верстать сайт по макету из PSD, Figma и Pixso на языках HTML и CSS. Также создадим интерактивные элементы такие как портфолио и слайдер и сделаем адаптивный дизайн для планшетов и смартфонов.
Курс предоставляется вам на всегда, без каких-либо лимитов и ограничений по времени.
В других моих курсах обучение построено так же как и тут. Теория, видео, практика, примеры, готовые материалы, иногда присутствует немного юмора. Подробнее о интересующем вас курсе можно узнать на его странице с трейлером и описанием.
Все мои курсы на платформе Stepik доступны по ссылке.
На Stepik есть как бесплатные курсы, так и платные.
"Всегда есть выбор учиться бесплатно или нет!" (Исмаил Усеинов)
Требования
Что нужно для старта
- Желательно понимать основы HTML и CSS. Если вы только начинаете свой путь разработчика, то лучше для начала пройти обучение по курсу "Вёрстка на HTML & CSS для начинающих".
Результат
Что вы получите
- Верстать сайт по макету из Photoshop (PSD)
- Верстать сайт по макету из Figma
- Верстать сайт по макету из Pixso
- Понимать как создается каркас сайта на языке HTML
- Оформлять внешний вид сайта на языке CSS
Аудитория
Для кого этот курс
- Этот курс подойдет вам если вы уже знаете основы HTML и CSS, но хотите двигаться дальше.
Содержание
3 занятияПрограмма курса
№ТемаЧто внутри
01Верстка сайта из PSD
- Подготовка к началу работы
- Верcтка меню сайта
- Верстка шапки сайта
- Создаем блок "Наши услуги"
- Делаем портфолио на jQuery
- Оптимизируем и улучшаем портфолио
- Верстаем блок "Тарифные планы"
- Работаем с Slick Slider
- Верстаем раздел "Блог" по макету
- Верстаем форму обратной связи
- Адаптивная версия для планшетов
- Адаптивная версия для смартфонов
02Верстка сайта из Figma
- Структура проекта
- Обзор макета
- Работа с Perfect Pixel
- Адаптивная версия
- Экспорт SVG
- Верстаем раздел
- Тень блока вручную
- Публикуем код
- Плагин Inspect Styles
03Верстка сайта из Pixso
- Знакомство с Pixso
- Работа с SVG
- Шрифты Google Fonts
- Perfect Pixel в браузере
- Раздел сайта Features
- Раздел сайта Stats
- Раздел сайта Blog
- Домашнее задание
01Верстка сайта из PSD
- Подготовка к началу работы
- Верcтка меню сайта
- Верстка шапки сайта
- Создаем блок "Наши услуги"
- Делаем портфолио на jQuery
- Оптимизируем и улучшаем портфолио
- Верстаем блок "Тарифные планы"
- Работаем с Slick Slider
- Верстаем раздел "Блог" по макету
- Верстаем форму обратной связи
- Адаптивная версия для планшетов
- Адаптивная версия для смартфонов
02Верстка сайта из Figma
- Структура проекта
- Обзор макета
- Работа с Perfect Pixel
- Адаптивная версия
- Экспорт SVG
- Верстаем раздел
- Тень блока вручную
- Публикуем код
- Плагин Inspect Styles
03Верстка сайта из Pixso
- Знакомство с Pixso
- Работа с SVG
- Шрифты Google Fonts
- Perfect Pixel в браузере
- Раздел сайта Features
- Раздел сайта Stats
- Раздел сайта Blog
- Домашнее задание
Документ после выпуска
Stepik
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Верстка сайта из PSD, Figma и Pixso» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
