На курсе 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: Личный блог
Полезные материалы
Итоги
