Быстрый вкат в IT — программа от автора и преподавателя курсов на Хекслете
по вёрстке
часов
Познакомитесь с основами HTML и CSS
Попробуете вёрстку на практике
И поймете, готовы ли вы продолжать обучение
Попробуете вёрстку на практике
И поймете, готовы ли вы продолжать обучение
До начала курса осталось
дней
секунд
минут
00
00
00
00
:
:
:
Интенсивный курс
NEW!!!
урока
онлайн-вебинара
72
3
Дата старта
уточняется
уточняется
Помощь наставника
и общение в закрытом чате группы в Slack
и общение в закрытом чате группы в Slack
с практикой
полезных
Основы HTML и CSS за 8 дней
Знание HTML и CSS пригодится вам в любом языке программирования в веб-разработке
Кому подойдет курс?
Новичкам, которые сомневаются, стоит ли заниматься версткой
Всем, кто хочет сменить сферу деятельности
С обучения вёрстке легче всего стартануть в IT
Самоучкам: вы что-то знаете, но «плаваете» в основах
Интенсив структурирует знания и восполнит пробелы самостоятельного образования
Формат обучения
Рекомендуем заниматься 1-2 часа в день, чтобы пройти все уроки за 8 дней. Наставник поможет, если что-то непонятно
Закрытый чат в Slack для обсуждения вопросов по курсу и вёрстки в целом с наставником и Telegram-сообщество для неформального общения с одногруппниками
Обсудим причины для изучения вёрстки и наиболее эффективные подходы, попрактикуемся, поговорим о перспективах в сфере разработки
Живые вебинары
Общение в чате
Много практики прямо в браузере
Теория и практика с автоматической проверкой в онлайн-тренажере на базе платформы Code Basics. Вы учитесь самостоятельно в то время, которое удобно вам
Системные рекомендации: для более продуктивной учебы заниматься лучше с десктопных устройств
72 урока
3 встречи с наставником
Основы разметки HTML
Программа обучения
Медиаэлементы
Расположение элементов с помощью Flex
Ошибки в HTML, RGB и анимации
Введение в CSS
Блоки на странице
Семантические элементы HTML5
Верстка текста
Структура HTML-документа
Формы
Программа обучения
Модуль 1. Основы разметки HTML
Язык разметки HTML разработан для стандартизации вывода текста внутри браузера. В первом модуле вы разберете основные концепции HTML — теги, атрибуты, вложенность тегов — и освоите базовые навыки по разметке текста с помощью параграфов
• HTML разметка
• Теги
• Текст в HTML
• Вложенность тегов
• Атрибуты HTML
Модуль 2. Введение в CSS
Cascading Style Sheets (CSS) — каскадные таблицы стилей, которые позволяют оформлять содержимое страницы в соответствии с описанными правилами. Вы изучите стили текста, расположение блоков на странице и анимацию
• Каскадные таблицы стилей
• Использование CSS в HTML
• Наследование стилей
• Запись стилей в теге style
• Базовые стили тегов
• Классы
• Селекторы
• Каскадность
• Приоритет стилей
Модуль 3. Верстка текста
HTML предоставляет десятки правил для работы с текстом: от создания блока текста, до сложных таблиц и вложенных списков. Вы освоите корректную разметку текста — один из ключевых навыков при работе с сайтом. Научитесь гибко настраивать внешний вид текста с помощью языка CSS, размечать и стилизовать текстовые данные на странице
• Параграфы
• Выравнивание текста
• Цвет текста
• Начертание текста
• Заголовки
• Ссылки
• Размер шрифта
• Единицы измерения
• Списки
• Вложенные списки
• Капитель
• Горизонтальная черта
• Межстрочный интервал
• Семейство шрифта
• Обобщённое правило для шрифтов
• Таблицы
• Объединение ячеек внутри строк и столбцов
• Специальные символы HTML
• Форматированный текст
• Вставка компьютерного кода в HTML
• Базовые правила типографики
Модуль 4. Медиаэлементы
HTML-разметка позволяет добавлять на страницы изображения, а в последнем стандарте HTML5 можно работать с аудио- и видео-контентом. Вы научитесь добавлять медиа-элементы и управлять ими с помощью атрибутов
• Изображения
• Аудио
• Видео
Модуль 5. Блоки на странице
CSS используют для оформления не только текстов, но и блоков. Вы изучите, как добавлять внутренние и внешние отступы, границы, фон. Узнаете, что такое блочная модель и как свойства влияют на конечные размеры элементы
• Блочные и строчные элементы
• Высота и ширина блока
• Рамки
• Внутренние отступы
• Внешние отступы
• Блочная модель
• Фон
Модуль 6. Структура HTML-документа
Любая HTML-страница имеет каркас, который описывает страницу, указывает язык и подключение CSS и так далее. Вы изучите специальные тэги, которые используют для создания этого каркаса
• Базовая структура
• Метатеги
• Link
• Viewport
Модуль 7. Расположение элементов с помощью Flex
Одна из задач верстальщика — позиционирование элементов на странице, то есть расположение элементов в соответствии с макетом. Вы изучите основы модуля Flex и научитесь позиционировать элементы на странице
• Флекс-контейнер
• Перенос элементов
• Выравнивание элементов в контейнере
• Гибкий размер элементов
Модуль 8. Семантические элементы HTML5
В HTML5 применяют теги для семантической разметки. Они помогают браузерам корректно обрабатывать документы и использовать «режим чтения», а также позволяют поисковым системам более четко видеть структуру вашего сайта. В рамках модуля вы научитесь делать разметку типичной веб-страницы
• Семантические элементы
• Шапка
• Меню
• Уникальный контент страницы
• Секция
• Самостоятельная секция
• Боковая панель
Модуль 9. Формы
Вы изучите формы в HTML, которые позволяют пользователю взаимодействовать с сайтом: они отвечают за поиск, обратные звонки и анкеты
• Формы в HTML
• Поле для ввода текста
• Чекбокс
• Радиокнопка
• Textarea
• Список
• Отправка формы
Модуль 10. Ошибки в HTML, RGB и анимации
В этом модуле вы изучите несколько тем, которые не вошли в прошлые модули, но используются разработчиками при создании страниц. Узнаете, как делать базовые анимации, находить ошибки в HTML и правильно указывать цвет, а также поймете, зачем нужны переменные в CSS
• Ошибки в HTML-разметке
• Цветовая модель RGB
• Переменные в CSS
• Анимация
Язык разметки HTML разработан для стандартизации вывода текста внутри браузера. В первом модуле вы разберете основные концепции HTML — теги, атрибуты, вложенность тегов — и освоите базовые навыки по разметке текста с помощью параграфов
• HTML разметка
• Теги
• Текст в HTML
• Вложенность тегов
• Атрибуты HTML
Модуль 2. Введение в CSS
Cascading Style Sheets (CSS) — каскадные таблицы стилей, которые позволяют оформлять содержимое страницы в соответствии с описанными правилами. Вы изучите стили текста, расположение блоков на странице и анимацию
• Каскадные таблицы стилей
• Использование CSS в HTML
• Наследование стилей
• Запись стилей в теге style
• Базовые стили тегов
• Классы
• Селекторы
• Каскадность
• Приоритет стилей
Модуль 3. Верстка текста
HTML предоставляет десятки правил для работы с текстом: от создания блока текста, до сложных таблиц и вложенных списков. Вы освоите корректную разметку текста — один из ключевых навыков при работе с сайтом. Научитесь гибко настраивать внешний вид текста с помощью языка CSS, размечать и стилизовать текстовые данные на странице
• Параграфы
• Выравнивание текста
• Цвет текста
• Начертание текста
• Заголовки
• Ссылки
• Размер шрифта
• Единицы измерения
• Списки
• Вложенные списки
• Капитель
• Горизонтальная черта
• Межстрочный интервал
• Семейство шрифта
• Обобщённое правило для шрифтов
• Таблицы
• Объединение ячеек внутри строк и столбцов
• Специальные символы HTML
• Форматированный текст
• Вставка компьютерного кода в HTML
• Базовые правила типографики
Модуль 4. Медиаэлементы
HTML-разметка позволяет добавлять на страницы изображения, а в последнем стандарте HTML5 можно работать с аудио- и видео-контентом. Вы научитесь добавлять медиа-элементы и управлять ими с помощью атрибутов
• Изображения
• Аудио
• Видео
Модуль 5. Блоки на странице
CSS используют для оформления не только текстов, но и блоков. Вы изучите, как добавлять внутренние и внешние отступы, границы, фон. Узнаете, что такое блочная модель и как свойства влияют на конечные размеры элементы
• Блочные и строчные элементы
• Высота и ширина блока
• Рамки
• Внутренние отступы
• Внешние отступы
• Блочная модель
• Фон
Модуль 6. Структура HTML-документа
Любая HTML-страница имеет каркас, который описывает страницу, указывает язык и подключение CSS и так далее. Вы изучите специальные тэги, которые используют для создания этого каркаса
• Базовая структура
• Метатеги
• Link
• Viewport
Модуль 7. Расположение элементов с помощью Flex
Одна из задач верстальщика — позиционирование элементов на странице, то есть расположение элементов в соответствии с макетом. Вы изучите основы модуля Flex и научитесь позиционировать элементы на странице
• Флекс-контейнер
• Перенос элементов
• Выравнивание элементов в контейнере
• Гибкий размер элементов
Модуль 8. Семантические элементы HTML5
В HTML5 применяют теги для семантической разметки. Они помогают браузерам корректно обрабатывать документы и использовать «режим чтения», а также позволяют поисковым системам более четко видеть структуру вашего сайта. В рамках модуля вы научитесь делать разметку типичной веб-страницы
• Семантические элементы
• Шапка
• Меню
• Уникальный контент страницы
• Секция
• Самостоятельная секция
• Боковая панель
Модуль 9. Формы
Вы изучите формы в HTML, которые позволяют пользователю взаимодействовать с сайтом: они отвечают за поиск, обратные звонки и анкеты
• Формы в HTML
• Поле для ввода текста
• Чекбокс
• Радиокнопка
• Textarea
• Список
• Отправка формы
Модуль 10. Ошибки в HTML, RGB и анимации
В этом модуле вы изучите несколько тем, которые не вошли в прошлые модули, но используются разработчиками при создании страниц. Узнаете, как делать базовые анимации, находить ошибки в HTML и правильно указывать цвет, а также поймете, зачем нужны переменные в CSS
• Ошибки в HTML-разметке
• Цветовая модель RGB
• Переменные в CSS
• Анимация
Наставник курса
Практикующий верстальщик и автор курсов на Хекслете. Ответит на любой вопрос по программе и поможет, если возникнут сложности
Никита Михайлов
Занимается вёрсткой с 2013 года, более 6 лет работал в веб-студии fullstack-разработчиком
Вырос до тимлида и руководителя отдела разработки
Участвовал в создании платформы Хекслет: написал 14 курсов и 3 проекта
Развивается как блогер: записывает уроки и объясняет сложное простыми словами на ютуб-канале Хекслета
Прикладывал руку к разработке Bootstrap
Обучаем программированию новичков и практикующих разработчиков
Даём релевантные рынку навыки
Специализируемся на программировании, не распыляемся на курсы по другим направлениям
Авторы и наставники курсов — профессиональные разработчики
Способствуем формированию инженерного мышления
Организуем стажировки, помогаем найти работу
человек в нашем сообществе в Slack
Более 30 000
Обучаем разработчиков
с 2012 года
студентов учатся
на сайте ежемесячно
на сайте ежемесячно
17 000+
Хекслет — образовательная платформа
Здесь работают наши выпускники
Скидка на продолжение обучения полноценной 10-месячной профессии
Шпаргалка начинающего верстальщика
А еще! Всех участников курса ждет
Дата старта интенсива
уточняется
уточняется