HTML CSS Pro – Stepik (2024)

HTML CSS Pro
Stepik – Web Hacker

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

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

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

Для кого этот курс

Для начинающих:

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

Для профессионалов:

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

Спойлер: Программа курса
Общая информация о курсе

1. Общая информация о курсе

Секретная информация

1. Секретная информация

Вливаемся в WEB-разработку

1. Что такое создание сайтов?
2. Фронтенд и бэкенд
3. URL-адреса
4. Хостинг

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

1. Что такое редактор кода?
2. Установка VS Code
3. Плагины
4. Функции редактора VS Code

HTML Начало

1. HTML: Знакомство
2. HTML: Синтаксис
3. HTML: Документ
4. HTML: Онлайн компилятор для тестов

HTML Теги

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

HTML атрибуты

1. HTML: Атрибуты
2. HTML: Универсальные атрибуты
3. HTML: Ссылки
4. HTML: Изображения
5. HTML: Атрибут style
6. HTML: Цвета и спецсимволы
7. HTML: Кнопки
8. HTML: Input
9. HTML: Формы
10. HTML: Таблицы
11. HTML: Итоговая контрольная работа №2

CSS Начало

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

CSS Основы

1. CSS: Псевдоэлементы
2. CSS: Единицы измерения
3. CSS: Работа c изображениями
4. CSS: Работа с текстом
5. CSS: Рамки и границы
6. CSS: Выбор цвета
7. CSS: Подключение внешних шрифтов
8. CSS: Отступы
9. CSS: Display
10. CSS: Свойства списков
11. CSS: Итоговая контрольная работа №4

GitHub

1. GitHub: Знакомство
2. GitHub: Установка
3. GitHub: Первые команды
4. GitHub: Ветки
5. GitHub: Push
6. GitHub: Удаление репозитория
7. GitHub: Синтаксис Markdown
8. GitHub: Clone
9. GitHub: Описание профиля
10. GitHub: Контрольная работа №5

Figma

1. Figma: Знакомство
2. Figma: Установка
3. Figma: Регистрация
4. Figma: Создание проекта
5. Figma: Фишки

Практика HTML и CSS

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

Многостраничность

1. Многостраничность

6 проектов в портфолио

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

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

1. Полезные материалы

Финал

1. Итоги

https://stepik.org/course/170115/promo

​