Курсы [Stepik] HTML CSS (pro) (2024) 2024-06-04

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

Чему вы научитесь

• В разделе HTML: создавать веб-страницы, добавлять изображения, изменять цвета и строить списки. Также объяснят про теги и ссылки, атрибуты и формы, и многое другое.
• В разделе CSS: стилизовать веб-страницы, изменять цвета и размеры шрифта, добавлять поле содержимого на веб-страницу, селекторы, дисплеи, псевдоклассы и псевдоэлементы.
• В разделе GitHub: узнаете как pushить свои проекты, познакомитесь с синтаксисом Markdown, сделайте уникальное оформление профиля.
• В разделе Figma: сможете почувствовать себя дизайнером и сверстать свой первый проект по макету, освоите базовые конструкции при работе с дизайн-приложением.
• Решите мега огромную базу решенных практических задач
• Получите хороший опыт работы с различными приложениями для работы с web-разработкой
• По окончанию курса пополните портфолио из 6 проектов с личным feedback-ом по каждому проекту и практике от создателей курса
• Верстать сайты и приложения для всех типов устройств
• Оформлять решения, как это делают опытные разработчики
• Создавать свои собственные дизайны сайтов

Для кого этот курс
1) Для начинающих

• С нуля освоите востребованную профессию и научитесь создавать сайты
• Cтруктурируете имеющиеся знания и освоите инструменты для работы на уровне Junior

2) Для профессионалов
Расширите профессиональные компетенции, сможете повысить свою ценность на рынке труда

Программа курса
Общая информация о курсе
Секретная информация
Вливаемся в web-разработку

• Что такое создание сайтов?
• Фронтенд и бэкенд
• URL-адреса
• Хостинг

Редактор кода

• Что такое редактор кода?
• Установка VS Code
• Плагины
• Функции редактора VS Code

HTML Начало

• HTML: Знакомство
• HTML: Синтаксис
• HTML: Документ
• HTML: Онлайн компилятор для тестов

HTML Теги

• HTML: Заголовки и параграфы
• HTML: Комментарии
• HTML: Вложенность тегов
• HTML: Блочные и строчные элементы
• HTML: Списки
• HTML: Тег переноса, тег pre
• HTML: Div
• HTML: Итоговая контрольная работа №1

HTML атрибуты

• HTML: Атрибуты
• HTML: Универсальные атрибуты
• HTML: Ссылки
• HTML: Изображения
• HTML: Атрибут style
• HTML: Цвета и спецсимволы
• HTML: Кнопки
• HTML: Input
• HTML: Формы
• HTML: Таблицы
• HTML: Итоговая контрольная работа №2

CSS Начало

• CSS: Знакомство
• CSS: Подключение CSS к HTML
• CSS: Синтаксис
• CSS: Селекторы
• CSS: Итоговая контрольная работа №3

CSS Основы

• CSS: Псевдоэлементы
• CSS: Единицы измерения
• CSS: Работа c изображениями
• CSS: Работа с текстом
• CSS: Рамки и границы
• CSS: Выбор цвета
• CSS: Подключение внешних шрифтов
• CSS: Отступы
• CSS: Display
• CSS: Свойства списков
• CSS: Итоговая контрольная работа №4

GitHub

• GitHub: Знакомство
• GitHub: Установка
• GitHub: Первые команды
• GitHub: Ветки
• GitHub: Push
• GitHub: Удаление репозитория
• GitHub: Синтаксис Markdown
• GitHub: Clone
• GitHub: Описание профиля
• GitHub: Контрольная работа №5

Figma

• Figma: Знакомство
• Figma: Установка
• Figma: Регистрация
• Figma: Создание проекта
• Figma: Фишки

Практика HTML и CSS

• Практика №1
• Практика №2
• Практика №3

Многостраничность
6 проектов в портфолио

• Пишем проект вместе
• Проект №1: Бургерная
• Проект №2: Музыкальный плеер
• Проект №3: Магазин одежды
• Проект №4: Автосалон
• Проект №5: Сайт ВУЗа
• Проект №6: Личный блог

Полезные материалы
Итоги