Верстка сайтов HTML CSS. Создание сайтов. Легкий уровень

Верстка сайтов HTML CSS. Создание сайтов. Легкий уровень

ФорматОнлайн

Объём6 занятий

О курсе

Подробнее

Курс в раннем доступе. Материалы добавляются прямо в этот момент Привет Курс по веб разработке для новичков. От теории до применения знаний на практике В курсе более 20и домашних заданий по всем основным темам. Это не просто набор видео -- это практический курс на котором постоянно нужно верстать и разрабатывать. Просто смотреть видео не получится. Мы пройдем от самых основ HTML где создадим простой промо сайт, В легкой, дружелюбной форме мы изучим основы HTML на практике. С каждым уроком наполняя сайт все большим количеством информации. Мы погрузимся в HTML с головой и ты даже не заметишь, как твой собственный первый проект будет открыт в твоем браузере. Во втором блоке мы изучим CSS. ОСТОРОЖНО!, в этом блоке 7 домашних заданий. Пройти этот модуль и не выучить CSS невозможно. Самые важные темы прорабатываются особенно тщательно, по ним есть дз с объяснениями и практическими примерами из реальной жизни Третий блок -- настоящая практика верстки на реальном макете. Мы создадим полностью адаптивную страницу сайта. О да, в этом блоке мы не просто будем верстать макет, а сделаем его адаптивным под все устройства. Ты увидишь, что адаптация это совсем не сложно, если тему правильно пояснить. Как бонус мы познакомимся с языком программирования JavaScript и ты увидишь, что он совсем не страшный Четвертый блок. Продвинутая верстка HTML SASS NPM Gulp. Для разработки нового макета мы будем использовать продвинутые технологии, такие как npm и препроцессор sass/scss. Методология БЭМ и технология Grid Помогут нам в работу. Это высокий уровень профессионализма, а не просто переписывание кода с экрана. На курсе ты пройдешь весь путь от начала до конца, от скачивания редактора на первом уроке и до работы с терминалом и установки пакетных менеджеров и работы с планировщиком задач в работе с последним проектом. Возможно, сейчас ты не знаешь что это за слова такие, но, поверь, на последнем модуле ты уже не сможешь представить работу веб разработчика без этих инструментов и технологий После курса ты смело можешь добавлять 2 крутых проекта в портфель, а в резюме указать вот такой стек инструментов и технологий: HTML CSS SASS SCSS BEM Grid Flex NPM GULP Курс постоянно улучшается. Я постоянно получаю связь от студентов и корректирую материалы Я постоянно на связи со студентами как тут на платформе, так и в нашем чате в телеграмм. До встречи на курсе

Требования

Что нужно для старта

Требований нет

Результат

Что вы получите

Создавать сайты
HTML СSS
Flex Box и Grid
Изучите CSS для стилизации страниц
Методология БЭМ
Научитесь адаптировать макеты под любое разрешение экрана
Верстать с препроцессорами SASS SCSS
Работать с терминалом
Узнаете что такое npm и как с ним работать (это уже профессиональный уровень)

Аудитория

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

Для тех, кто хочет научиться создавать сайты
Для тех кто хочет научиться верстать
Для веб дизайнеров

Содержание

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

6 занятий

№ТемаЧто внутри

01Настройка рабочего пространства

- Редактор Кода
- Emmet
- Видео на Stepik
- Создаем проект
- Горячие клавиши
- .zip

02Начальный Html. Создание первого сайта

- Создание первого проекта
- Семантика HTML
- Основные теги HTML
- Заголовки и абзацы
- Наполняем текстом проект
- Работа со строками
- Работа с изображениями
- Списки
- Цитаты
- Работа со ссылками
- Создаем меню
- Практика | Переходы по пунктам меню
- Ответ на ДЗ
- Сематические теги
- Footer
- Полная версия HTML
- div span
- Тест на закрепление материала по HTML

03Введение в CSS

- Семантика CSS
- Inline Style
- Подключаем файл со стилями
- Специфичность
- Подключение изображений | Практика
- Цвет и Фон
- Инспектор
- Удаленное подключение шрифтов
- Локальное подключение шрифтов
- Лекция о шрифтах как таковых
- Единицы измерения
- Позиционирование
- Практика позиционирования
- Марджин
- box-sizing
- Псевдоэлементы Часть 1
- Псевдоэлементы Часть 2
- Решение задачи
- Псевдокласс
- Решение задачи
- Тест на закрепление материала по CSS
- Последний урок модуля

04Практика верстки проекта. Лендинг

- О Figma
- Чтение макета
- Создаем рабочую среду
- Добавляем шрифты
- Добавляем изображения
- Верстаем Header Часть 1. Практика
- Normalize
- Верстаем Header Часть 2. Практика
- Верстаем навигацию
- Верстаем Header Часть 3. Практика
- Верстаем Header Часть 4. Практика
- Адаптив Header Часть 1
- Адаптив Header Часть 2
- Создаем бургер меню
- Анимация бургера
- Первое знакомство с JS
- Последний штрих Header
- Верстка блока Hero
- Адаптив Hero
- Секция Products
- Секция Products Часть 2
- Зачем мы это делаем?
- Адаптив Products ДЗ
- Объяснение ДЗ
- Блок Category
- Сниппеты
- Формы на сайте
- Блок History
- Блок History Адаптация
- Блок History Адаптация Часть 2
- Footer HTML
- Footer CSS
- Footer адаптация. Знакомство с Grid
- Последний урок в блоке

05Продвинутая верстка. Новый проект

- Препроцессоры SASS SCSS
- Плагин Live Sass Compiler
- Настройка плагина Sass
- NPM SASS
- Переменные
- Задача на работу с Sass
- Решение задачи
- Создаем проект
- Подключение шрифтов через sass
- Улучшаем структуру проекта
- Добавляем переменные в проект
- Верстаем Header. Часть 1
- _reset.sass
- Верстаем Header. Часть 2
- БЭМ
- Блок Hero HTML структура блока
- Блок Hero Стилизируем блок
- Блок Services HTML структура блока
- Блок Services . Работаем с карточками
- Блок Services Часть 2
- Анимация кнопки в карточке
- Практика | Добавление декора
- Практика | Отзывы
- Блок Story. Создаем HTML структуру
- Блок Story Добавляем стили
- Что такое Grid и как с ним работать
- Углубление в сетки Grid
- Добавляем Grid к блоку Story
- Практика | Блок "Показатели"
- Блок feauters. HTML часть
- Блок Feauters Sass часть. Grid + Flex
- Снова о Title
- Добиваем альты
- Блок CTA
- Блок "Наши работы" HTML часть
- Добавляем кнопку к блоку
- Футер Часть 1
- Футер СТА
- Футер Стили
- Футер Стили 2
- Снова про H2
- Sprite | Практика
- Sprite 2
- Наводим порядок в тегах
- Проверка валидности верстки
- Причесывание макета
- Введение в Gulp
- Описание работы Gulp
- Решаем задачку по шрифтам
- Последний урок модуля

06Хостинг. Как живут сайты в интернете

- Что такое хостинг и домен
- Регистрируем домен
- Загружаем сайт на хостинг
- Создаем суб домены
- Практика | Первый сайт Портфолио
- Добавляем работы в Портфель

01Настройка рабочего пространства

- Редактор Кода
- Emmet
- Видео на Stepik
- Создаем проект
- Горячие клавиши
- .zip

02Начальный Html. Создание первого сайта

03Введение в CSS

04Практика верстки проекта. Лендинг

05Продвинутая верстка. Новый проект

06Хостинг. Как живут сайты в интернете

Организатор

Автор курса

Stepik

4.6Нет отзывов

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

Подробнее об авторе

Мнения учеников