Верстаем 8 сайтов по макету из Figma в портфолио

71 урок

Сложность

Начинающий

Тип обучения

Курс

Формат обучения

Записанные лекции

Трудоустройство

Нет

Сертификат

Есть

Стоимость курса

3 490 ₽

Нет рассрочки

Этот курс направлен на обучение созданию верстки сайтов на HTML и CSS по макету из Figma или Photoshop. Весь материал подносится простым языком. Вы получите много полезных материалов и мы вместе будем применять изученное на практике создавая интересные проекты шаг за шагом.

Что в этом курсе?

Мы с вами пройдем путь от установки своего первого редактора кода до верстки сайта. Будем изучать теоретическую часть и сразу же применять её на практике. Все ссылки на ресурсы, дополнительные материалы, шпаргалки и готовые фрагменты кода будут предоставлены внутри курса.

На все вопросы внутри курса отвечаю лично в разделе "Комментарии" (этот раздел есть под каждым шагом). Так же есть телеграм канал для вопросов и обсуждений не только по данному курсу.

Там можно общаться с другими участниками моего сообщества и лично со мной на любые темы касательно разработки и программирования. Каждый урок состоит из отдельных шагов (до 16 шагов) - это может быть, теория в виде текста, видео, тестовое задание.

Почему стоит начать обучение сейчас? Создание сайтов (верстка) - очень востребованный навык, который хорошо оплачивается. Мало того, что изучив всю данную вам информацию вы уже сможете создавать свои продукты и работать как на фрилансе, так и в web-студии, но и вы заложите базу для дальнейшего обучения. Владея этими навыками вы сможете освоить любую CMS, сможете понять и изучить как работает backend часть, и сможете создавать визуальную часть приложений, написанных на JavaScript фреймворках и библиотеках.

Внимание! Курс "Верстаем 8 сайтов по макету из Figma в портфолио" содержит в себе уроки и задания из трех следующих моих курсов:

Вёрстка на HTML & CSS для начинающих
Git и GitHub для разработчика
Frontend разработчик на HTML, CSS и JavaScript (3 последних модуля из этого курса, которые были добавлены 25 ноября 2022)

Это значит, что вам не нужно покупать их по отдельности и вы можете сэкономить приобретая данный курс. Или же приобрести отдельный курс только по интересующей вас теме.

Что вы получите после обучения

Навыки

Язык HTML

Язык CSS

Система управления версиями Git и GitHub

Верстка сайта из Figma

Школа

Stepik

4.6

60 отзывов

Stepik — образовательная платформа и конструктор онлайн-курсов.

Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем в проведении олимпиад и программ переподготовки.

Наша цель — сделать образование открытым и удобным.

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

Платформа Stepik включает в себя конструктор бесплатных занятий и уроков. Создать интерактивный обучающий курс может любой зарегистрированный пользователь. При этом авторы обучающих материалов сохраняют авторские права. Сервис не имеет ограничений по числу обучающихся на курсе.

Stepik имеет обширные возможности по созданию онлайн-курсов, обучающих занятий и уроков с использованием текстов, видео, картинок, тестовых задач, в процессе выполнения которых можно вести обсуждения с остальными обучающимися, а также с преподавателем. Всего в Stepik присутствует 20 типов заданий, проверка которых может осуществляться как в автоматическом, так и в ручном режиме.

Большим преимуществом данной платформы является возможность встраивать созданные материалы на сторонние сайты, например, Moodle и Canvas.

Кроме того, Stepik может использоваться в качестве площадки для проведения разнообразных мероприятий, таких как олимпиады и конкурсы.

Интерфейс платформы полностью русскоязычный, достаточно дружественный и интуитивно понятный. Платформа полностью бесплатна.

За каждый пройденный курс в Stepik обучающийся получает сертификат о прохождении. Получение сертификата также бесплатно.

Преподаватели

Исмаил Усеинов

курса

Автор образовательного канала ITDoctor.

Занимаюсь веб-разработкой с 2013 года.

В 2017 году основал обучающий YouTube канал ITDoctor. Делюсь своими знаниями в области программирования и создания сайтов. Сформировал свою собственную методику обучения, которая позволяет ученикам максимально эффективно осваивать изучаемый материал.

Обучаю языкам HTML, CSS, JavaScript, PHP, работе с препроцессорами, сборщиками и системой контроля версий Git, а также многому другому из мира веб-технологий. Уже более десяти тысяч моих учеников научились создавать сайты самостоятельно и зарабатывать на этом деньги.

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

Язык HTML
1. Введение (/lesson/845125?unit=848852)
2. Установка браузера и редактора кода
3. Обзор функций редактора
4. Первые HTML теги
5. Как задавать путь к файлу
6. Создание списка
7. Создание таблиц
8. Работа с текстом
9. Создание формы
10. Универсальные атрибуты
11. Цвет RGB и спецсимволы
12. Тест по HTML, Часть 1
13. Подведение итогов изучения HTML
Язык CSS
1. CSS селекторы (/lesson/845138?unit=848865)
2. Работа с изображениями
3. Границы
4. Размеры элементов
5. Работа с шрифтом
6. Блочная модель документа
7. Псевдоклассы и псевдоэлементы
8. Основы CSS Flexbox
9. Тест по CSS, Часть 1
10. Адаптивная версия сайта, Создание своей сетки
Практика по HTML и CSS
1. Практическое занятие 1 (/lesson/845148?unit=848875)
2. Практическое занятие 2
3. Практическое занятие 3
4. Урок по Photoshop

5. Практическое занятие 4
6. Заключение
7. Тест по HTML, Часть 2
8. Тест по CSS, Часть 2
9. Справочники и ссылки
Система управления версиями Git и GitHub
1. Что такое Git (/lesson/845157?unit=848884)
2. Установка Git
3. Регистрация на GitHub
4. Первые команды Git
5. Работа с Git в VS Code
6. Алиасы для Git
7. Отмена изменений и возврат к коммиту
8. Работа с ветками
9. Панель команд Git в VS Code
10. Откат к любому коммиту и Git Graph
11. Удаление репозитория
12. Синтаксис Markdown для README.md
13. Фрагменты кода Gist
14. Хостинг GitHub Pages
15. Описание профиля на GitHub
16. Резервная копия всех своих репозиториев
17. Fork и Pull Request что это такое
18. Слияние веток Git, разрешение конфликта слияния
Верстка сайта из Figma
1. Работа с Figma и создание проекта (/lesson/845175?unit=848902)
2. Про Pixel Perfect и верстка Grid + Flexbox
3. Верстаем несколько разделов сайта
4. Пара слов о работе верстальщика
5. Интерактивные элементы на сайте

6. Домашнее задание по верстке сайта
7. Фриланс: как взять заказ
Полезные материалы
1. Редакторы кода, иконки и Emmet (/lesson/845176?unit=848906)
2. CSS Grid и другие возможности
3. Позиционирование, размеры и блочная модель
4. БЭМ и как называть классы в HTML
5. margin или padding что лучше использовать
6. Выравнивание по центру и анимация
7. Переменные root и функция calc
7 сайтов в портфолио
1. Сайт 1 - Konstruct (/lesson/845189?unit=848916)
2. Сайт 2 - Alivio
3. Сайт 3 - WD
4. Сайт 4 - Britlex
5. Сайт 5 - Archi Web
6. Сайт 6 - Cloud Budget
7. Сайт 7 - Dae

Рейтинг курса

Может быть интересно

Образовал