Top.Mail.Ru

Курс

HTML и CSS. Верстка Сайтов. Базовый уровень

Выпускников: 31
Повышение квалификации
Документ Удостоверение
Объём 38 ак.ч
Формат Дистанционно
Дата обновления курса 30 января 2025

HTML и CSS – инструменты для разработки фронтенда веб-сайтов и приложений. По данным компании
Head Hunter зарплатный диапазон в этих направлениях составляет от 50 до 150 тысяч рублей.

Краткое описание

  • Курс подходит для начинающих с нуля в веб-дизайне и дизайне мобильных приложений
  • По окончании – удостоверение с включением в Федеральный реестр
  • Вы добавите 7 практических работ в свое портфолио
  • Формат обучения: дистанционный
Необходимо иметь установленную программ Visual Studio Code (бесплатное ПО, находится в открытом доступе)

БАЗОВАЯ ПОДГОТОВКА ДЛЯ ОБУЧЕНИЯ НА ДАННОМ КУРСЕ НЕ ТРЕБУЕТСЯ

По окончании вы будете уметь:

  • создавать фронтенд сайтов и веб-приложений с помощью HTML и CSS
  • работать с макетами в Figma и превращать их в страницы сайта
  • писать код по современным стандартам в редакторе Visual Studio
  • создавать анимации с помощью CSS
  • делать веб-страницы производительными и адаптивными под разные устройства
  • уверенно работать с такими инструментами как позиционирование, псевдоэлементы, псевдоклассы, селекторы и т.д.

Есть вопросы по курсу?

Если есть вопросы по курсу или сложно выбрать подходящий, оставьте сообщение, мы оперативно свяжемся с вами

В ДИСТАНЦИОННОМ ФОРМАТЕ ВЫ:

  • смотрите видеоуроки в любое удобное время 24/7 на нашей платформе в течение всего срока доступа
  • выполняете практические задания, повторяя действия за преподавателем
  • решаете задачи самостоятельно, затем сверяете с видеорешением
  • получаете ответы на вопросы через форму обратной связи
  • пользуетесь учебным материалом даже после окончания срока доступа
  • проходите промежуточный тест по изученной теме
  • сдаете итоговый тест, выполняете дипломный проект и получаете документ об окончании
Объём
38 ак.ч
41 видео, в том числе:
7 практических
Документ
Удостоверение
Срок доступа
70 дн.
Продление доступа
1 день — 577 р.
Для юридических лиц
специальные условия

Дистанционное обучение в РУНО — это:

  • Удобная учебная платформа
  • Видеолекции и практические занятия
  • Разбор примеров и задач
  • Связь с преподавателем
  • Тестирование, итоговые работы
  • Наглядный учебный материал
Подробнее

Очные и онлайн занятия в группе

Очно — по расписанию в аудитории центра.

Онлайн — в форме вебинара с обратной связью по расписанию, согласованному с заказчиком.

Данная программа проверена Департаментом образования и соответствует уровню профессионального стандарта «Бухгалтер».

Курс предназначен для тех, кто желает значительно поднять свой профессиональный уровень.

Программа аккредитована Институтом Профбухгалтера.

Ближайшие даты
Объём
38 ак.ч
Документ
Удостоверение
Для юридических лиц
специальные условия

Как проходит обучение

Очно
  • По расписанию в группе
  • Живое общение со слушателями и преподавателями
  • Оборудованные классы
  • Удобное местоположение — Москва, ЦАО, 1 мин. от метро
Подробнее
Онлайн
  • По расписанию в группе
  • Обучение с любого места, где есть интернет
  • Общение со слушателями и преподавателями в чате
  • Видеозаписи уроков
Подробнее

Наша цель — передать качественные прикладные знания, применимые на практике, позволяющие в кратчайшие сроки повысить уровень профессионализма всей вашей команде!

Формы обучения для сотрудников компаний

Дистанционное обучение

— видеокурсы на нашей платформе с обратной связью и контролем знаний ваших работников. Возможность обучения в любое удобное для сотрудников время 24/7 без отрыва от производства.

Выездное обучение

— обучение сотрудников на территории заказчика. Занятия проводятся по расписанию, согласованному с заказчиком.

Онлайн

— обучение в форме вебинара с обратной связью в режиме онлайн. Занятия проводятся по расписанию, согласованному с заказчиком. Контроль знаний по завершении каждой темы.

Электронные курсы в формате SCORM

— мы предоставим любой курс из нашего каталога в формате SCORM для обучения сотрудников на платформе Заказчика по предварительной заявке.

Узнать о корпоративном обучении подробнее
Оставьте заявку и мы рассчитаем стоимость обучения ваших сотрудников

Заявка на корпоративное обучение

Учебная программа

Видео:   41
Практических заданий:   7

ПРОГРАММА КУРСА

Тема №1. Основы HTML
Лекция №1: Введение в веб-разработку и HTML + Редактор. Основные понятия веб-разработки. Роль HTML в структуре веб-страницы
Лекция №2: Структура HTML-документа. Теги, элементы, атрибуты. Основные блочные и строчные элементы
Лекция №3: Работа с текстовым контентом. Заголовки (h1 - h6). Параграфы (p). Горизонтальная линия (hr)
Лекция №4: Работа с списками. Неупорядоченные списки (ul, li). Упорядоченные списки (ol, li). Описание списков (dl, dt, dd)
Сам. задание + Решение задания: №1: Формирование веб-страницы статьи для сайта компании
Тестирование №1
Тема №2. Гиперссылки и мультимедиа
Лекция №5: Гиперссылки и навигация. Создание текстовых ссылок (a). Атрибуты href и target. Внутренние и внешние ссылки
Лекция №6: Работа с изображениями. Вставка изображений (img). Атрибуты src, alt, width, height
Лекция №7: Видео и аудио. Вставка видео и аудио (video, audio). Атрибуты контроля воспроизведения
Лекция №8: Формы и пользовательский ввод. Создание форм (form). Текстовые поля, кнопки, чекбоксы (input). Текстовые области (textarea)
Сам. задание + Решение задания: №2: Создать веб-страницу с формой обратной связи и добавить Видео и аудио элементы на сайт
Тестирование №2
Тема №3. Продвинутые техники HTML
Лекция №9: Таблицы и их структура. Создание таблиц (table). Заголовки и ячейки (th, td). Объединение ячеек
Лекция №10: Семантические элементы HTML 5. Значение семантических тегов (header, footer, article, section)
Лекция №11: Фреймы в HTML
Лекция №12: Расширенные возможности HTML. Спецсимволы и кодировка символов. Встраивание HTML в другие языки (например, PHP)
Сам. задание + Решение задания: №3: Создание веб-страницы с семантической разметкой
Тестирование №3
Тема №4. Основы CSS
Лекция №13: Введение в CSS. Основные понятия и синтаксис CSS. Внутренние и внешние стили
Лекция №14: Селекторы и их типы. Типовые селекторы: элементы, классы, идентификаторы. Комбинаторы и псевдоклассы
Лекция №15: Оформление текста и шрифты. Свойства для изменения размера, цвета и стиля текста. Подключение и стилизация шрифтов
Лекция №16: Цвета и фоны. Использование цветов в CSS (названия, hex, rgb). Настройка фоновых изображений
Сам. задание + Решение задания: №4: Создание веб-страницы для продажи туров
Тестирование №4
Тема №5. Позиционирование и блочная модель
Лекция №17: Box Model. Margin, padding, border. Влияние на размер элемента и его расположение
Лекция №18: Позиционирование элементов. Основные типы позиционирования: static, relative, absolute, fixed. Выравнивание и распределение элементов
Лекция №19: Отображение и видимость. Свойства display и visibility. Скрытие элементов
Лекция №20: Сброс стилей браузера и префиксы
Сам. задание + Решение задания: №5: Создание шахматной доски
Тестирование №5
Тема №6. Расширенные техники стилизации
Лекция №21: Псевдоэлементы и псевдоклассы. Использование :hover, :active, :before, :after. Стилизация различных состояний элементов
Лекция №22: Анимации и переходы. Основные принципы CSS-анимации. Создание плавных переходов между состояниями
Лекция №23: Основы гибкого макета Flexbox. Выравнивание элементов вдоль осей
Лекция №24: Grid. Создание сеток с использованием Grid Layout. Размещение элементов в ячейках сетки
Сам. задание + Решение задания: №6: Создание сайта видеохостинга с анимацией
Тестирование №6
Тема №7. Верстка. Работа с макетом
Лекция №25: Работа с figma для верстальщика и разбор макета
Лекция №26: Подготовка графики и базовой конструкции макета к верстке
Лекция №27: Нестандартные решение и дополнительные возможности
Тестирование №7
Тема №8. Дипломный проект
Сам. задание + Решение задания: №7: Создание (верстка) Landing page согласно макету Figma (Верстка landing page из figma)
ИТОГОВОЕ ТЕСТИРОВАНИЕ

Фрагменты уроков из курса

Попробуйте бесплатно

Вы сможете:

  • обучиться на отдельных уроках
  • убедиться в удобстве платформы
  • познакомиться с преподавателем
Получить доступ
Время доступа:   5 дней  

Как мы обучаем

Смотрите урок и одновременно выполняете все действия за преподавателем
Выполняете практические задания, сверяете решение с решением преподавателя
Закрепляете материал тестами и делаете работы в портфолио

ПО ОКОНЧАНИИ ВЫ ПОЛУЧИТЕ:

Удостоверение о повышении квалификации

— выдается на основании Государственной Лицензии от 29.03.2012 г. за регистрационным номером Л035-01298-77/00185562
— вносится в Федеральный реестр документов (ФИС ФРДО)

Необходимо предоставить:

— документ о высшем или среднем специальном образовании
— перевод, если документ на иностранном языке

Подробнее о документах
Все преподаватели

Привилегии нашим студентам

Помощь в трудоустройстве и профессиональном росте

Бесплатно от нашего карьерного консультанта вы сможете получить:
  • помощь в поиске новой профессии
  • стратегию поиска работы
  • профессиональное составление резюме
  • участие в тренировочном собеседовании

Отзывы слушателей

Узнайте, нужен ли вам этот курс

Пример тестирования

1. Какой тег используется для создания заголовка первого уровня?

p
h1
div
Универсальный

2. Как добавить ссылку на другую страницу?

Использовать тег a
Использовать тег img

Стоимость обучения *

*стоимость для юридических лиц уточняйте у менеджера

Дистанционно

40 400 р.
26 260 р.
Купить курс
4 040 р./мес  в рассрочку под 0% на 10 мес
Формат обучения
Дистанционно
Объём
38 ак.ч
Документ
Удостоверение
Срок доступа
70 дн.
Продление доступа
1 день — 577 р.
Для юридических лиц
специальные условия

Попробуйте бесплатно

Вы сможете:

  • обучиться на отдельных уроках
  • убедиться в удобстве платформы
  • познакомиться с преподавателем
Получить доступ
Время доступа:   5 дней  
Форма обучения
  • Дистанционное обучение — обучение на нашей платформе
  • Электронные курсы в формате SCORM на вашей СДО
  • Онлайн — обучение (в форме вебинаров)
  • Выездное обучение на территории заказчика
  • Очное обучение на территории центра
Место обучения
Мы предоставляем выбор места обучения: на территории центра РУНО (Учебный центр находится в центре Москвы в шаговой доступности от метро Пролетарская), либо с выездом на место работы ваших сотрудников.
Напоминаем, что для юридических лиц стоимость увеличивается на 10%

Заявка на корпоративное обучение

Вам нужна помощь?

Оставьте заявку — и мы перезвоним!

Эксперты Образовательного центра “РУНО” разработали специальный курс , который поможет освоить основы веб-разработки и создания современных и функциональных веб-страниц.

После обучения каждый желающий сможет уверенно создавать веб-страницы сайта с разнообразным контентом, добавлять гиперссылки, мультимедийные элементы, формы обратной связи, и работать с продвинутыми техниками , таблицами, семантическими элементами и фреймами. Чтобы знания усваивались максимально качественно, каждая тема завершается самостоятельным заданием, где на практике разъясняются все сложные моменты обучения.

На уроках вы изучите гиперссылки, мультимедиа элементы, создание форм обратной связи, а также добавление видео и аудио на веб-страницу сайта.

Эксперт центра “РУНО” на примерах познакомит вас с продвинутыми техниками и основами , включая таблицы, семантические элементы, фреймы, оформление текста, шрифты, цвета и фоны. Каждая тема завершается самостоятельным заданием и решением к нему, тестом и методичкой с конспектом лекций.

Позиционирование и блочная модель, расширенные техники стилизации, верстка сайтов и работа с макетом — все это представлено в темах от РУНО. Вы узнаете все нюансы о Box Model, позиционировании элементов, анимации, гибком макете Flexbox и Grid Layout.

Вы научитесь работать с актуальным и востребованным сегодня макетом в figma, применять нестандартные решения и дополнительные возможности сервиса. Тесты и самостоятельные задания помогут закрепить изученный материал и применять его в дальнейшем на практике.

Завершающая итоговая работа в виде верстки landing page из figma, станет вашим профессиональным достижением и позволит применить новую информацию и полученные навыки в создании веб-страниц в конкретной задаче.

Обучившись , вы будете готовы к началу новой успешной карьеры в сфере веб-разработки. Присоединяйтесь к обучению от РУНО и станьте профессионалом в области веб-разработки!

Эксперты Образовательного центра “РУНО” разработали специальный курс , который поможет освоить основы веб-разработки и создания современных и функциональных веб-страниц.

После обучения каждый желающий сможет уверенно создавать веб-страницы сайта с разнообразным контентом, добавлять гиперссылки, мультимедийные элементы, формы обратной связи, и работать с продвинутыми техниками , таблицами, семантическими элементами и фреймами. Чтобы знания усваивались максимально качественно, каждая тема завершается самостоятельным заданием, где на практике разъясняются все сложные моменты обучения.

На уроках вы изучите гиперссылки, мультимедиа элементы, создание форм обратной связи, а также добавление видео и аудио на веб-страницу сайта.

Эксперт центра “РУНО” на примерах познакомит вас с продвинутыми техниками и основами , включая таблицы, семантические элементы, фреймы, оформление текста, шрифты, цвета и фоны. Каждая тема завершается самостоятельным заданием и решением к нему, тестом и методичкой с конспектом лекций.

Позиционирование и блочная модель, расширенные техники стилизации, верстка сайтов и работа с макетом — все это представлено в темах от РУНО. Вы узнаете все нюансы о Box Model, позиционировании элементов, анимации, гибком макете Flexbox и Grid Layout.

Вы научитесь работать с актуальным и востребованным сегодня макетом в figma, применять нестандартные решения и дополнительные возможности сервиса. Тесты и самостоятельные задания помогут закрепить изученный материал и применять его в дальнейшем на практике.

Завершающая итоговая работа в виде верстки landing page из figma, станет вашим профессиональным достижением и позволит применить новую информацию и полученные навыки в создании веб-страниц в конкретной задаче.

Обучившись , вы будете готовы к началу новой успешной карьеры в сфере веб-разработки. Присоединяйтесь к обучению от РУНО и станьте профессионалом в области веб-разработки!