HTML/CSS

Сделай первый шаг в новую профессию, изучив базовые технологии создания сайтов HTML и CSS.

28 марта

Basic

3 месяца

Онлайн

Вт/Чт 19:00 Мск

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

  • Кто хочет сменить профессию и хочет войти в IT сферу с нуля
  • Кто работает сисадмином или в технической поддержке и хочет стать частью команды разработчиков
  • Кто знаком с основами HTML и CSS и хочет развиваться в области верстки сайтов
  • Кто начал самостоятельно осваивать HTML и CSS, но хочет систематизировать знания и получить экспертную обратную связь
  • Для веб-дизайнеров, которые хотели бы сами воплощать свои макеты в жизнь
  • Для владельцев бизнеса, которые хотят научиться понимать и разговаривать с разработчиками на одном языке

Необходимые знания

Базовые знания ПК, уверенный пользователь.

Что даст вам этот курс?

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

Инструменты, которые освоите на курсе

Работа с готовым макетом в Figma, Git и GitHub, современный редактор кода VSCode и его настройка, Emmet, сборщик проектов Webpack в режиме разработки и публикации, онлайн редакторы кода, встроенные фишки браузеров для работы с версткой, настройка среды разработки с Node.js, работа с npm.

После обучения вы:

  • научитесь интерпретировать макеты дизайнеров
  • научитесь создавать семантическую разметку веб-сайтов
  • научитесь верстать макеты любой сложности без гор библиотек и плагинов
  • освоите основной стек технологий и приемы в верстке: box model, positioning, flexbox, grid, media queries, новые технологии, автоматизация процессов, webpack, autoprefixer, postcss
  • пройдете основы оптимизации, BEM номенклатуру
  • научитесь работать с фреймворками Bootstrap и Tailwind

Почему стоит освоить?


Язык HTML является основой современного веба, а CSS помогает оформлять страницы бесконечным набором способов. Это базовые технологии, с которых интернет зародился в далеких 1990х и они остаются необходимыми и по сей день.

Процесс обучения

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

На курсе предусмотрено менторское сопровождение в виде групповых менторских разборов домашних заданий.

Занятие по групповому разбору ДЗ с ментором проводится раз в месяц в рамках расписания курса.

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

Трудоустройство

  • Разместите свое резюме в базе OTUS и сможете получать приглашения на собеседования от партнеров
  • Карьерные мероприятия в сообществе Публичное прохождение собеседования и воркшопы
Формат обучения

Плавный старт


Для постепенного погружения в профессию 2 недели - 1 занятие в неделю, далее - 2 занятия в неделю

Практика


Домашние задания + проектная работа, которая усилит ваше портфолио

Групповое менторство


Разберем возникающие в процессе обучения вопросы и пути решения ДЗ

Программа

Введение в Web

В это модуле познакомимся с базой верстки.

Тема 1: Введение в Web

Тема 2: Version Control

Тема 3: Основы HTML, семантичность

Тема 4: Основы CSS

Тема 5: Типографика

Тема 6: Box model в деталях

Тема 7: Консультация по ДЗ

Тема 8: Selector priority

Layouts (макеты)

Вы научитесь создавать макеты под любой дизайн, пройдетесь по разным типажам разметки - от table, float, flex и grid, посмотрите на нюансы работы с дизайном.

Тема 1: Layout: введение, основы

Тема 2: Позиционирование элементов в деталях

Тема 3: Flexbox layout

Тема 4: Grid layout

Тема 5: Workshop по сеткам

Тема 6: Консультация по ДЗ

Тема 7: Поддержка браузеров, новые технологии и fallbacks

Адаптивный веб-дизайн

В этом модуле мы будем говорить и тренировать адаптивность сайта от десктопа в планшет и далее в мобильную версию. Так же поговорим по подходы Mobile first и Desktop first. Познакомимся с нюансами верстки для мобильных устройств.

Тема 1: Введение в media queries

Тема 2: Mobile-first vs desktop-first

Тема 3: Особенности мобильной верстки

Pro верстка

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

Тема 1: Организация кода по БЭМ

Тема 2: Препроцессоры

Тема 3: Всплывающие элементы

Тема 4: Разметка форм

Тема 5: Микро-сетки и декоративные элементы

Тема 6: Стилизация элементов форм

Тема 7: Консультация по ДЗ

Тема 8: Анимации CSS: transition.

Работа с библиотеками

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

Тема 1: Анимации CSS: animation

Тема 2: Компонентный подход в Bootstrap

Тема 3: Атомарные классы в Tailwind

Проектная работа

Заключительная часть курса посвящена подготовке проектной работы к защите. Сама проектная работа - это макет, который верстается при выполнении домашних заданий и состоит из двух частей: базовой и pro.

Тема 1: Консультация по ДЗ и проектной работе

Тема 2: Выбор темы и организация проектной работы. Деплой

Тема 3: Защита проектных работ

Также вы можете получить полную программу, чтобы убедиться, что обучение вам подходит

Выпускной проект


В качестве выпускного проекта вы сделаете небольшую, но очень интересную страничку о компании. Научитесь делать ее адаптивной, чтобы на любом устройстве (десктоп, планшет, мобильные) она отображалась понятно и удобно пользователю, как и любые современные веб-сайты. Эту работу вы будете делать последовательно выполняя задания курса.

Готовый проект может служить в качестве портфолио при устройстве на работу.

Преподаватели

Мария Коршунова

Фронтенд-разработчик и скрам-мастер

Solveva

Дарья Самылова

Артур Горохов

Алина Гайнанова

Евгений Марциновский

Frontend Developer

Emphasoft

Кирилл Кучеров

Фронтенд-инженер

Avito

Эксперты-практики делятся опытом, разбирают кейсы студентов и дают развернутый фидбэк на домашние задания

Прошедшие
мероприятия

Маргарита Образцова
Открытый вебинар
CSS Reset - ненужный артефакт или спасательный круг
Маргарита Образцова
День открытых дверей
Demo day онлайн-курса «HTML/CSS»
Оставьте заявку, чтобы получить доступ ко всем записям прошедших мероприятий. Записи всех мероприятий появятся в этом блоке

Корпоративное обучение для ваших сотрудников

Отус помогает развивать высокотехнологичные Команды. Почему нам удаётся это делать успешно:
  • Курсы OTUS верифицированы крупными игроками ИТ-рынка и предлагают инструменты и практики, актуальные на данный момент
  • Студенты работают в группах, могут получить консультации не только преподавателей, но и профессионального сообщества
  • OTUS проверяет знания студентов перед стартом обучения и после его завершения
  • Простой и удобный личный кабинет компании, в котором можно видеть статистику по обучению сотрудников
  • Сертификат нашего выпускника за 5 лет стал гарантом качества знаний в обществе
  • OTUS создал в IT более 120 курсов по 7 направлениям, линейка которых расширяется по 40-50 курсов в год

Отзывы

Каркен Тураров

11.07.2023
Благодаря курсу HTML/CSS имел возможность ознакомиться с необходимыми технологиями для верстки сайта. Хорошая подача материала преподавателями и обилие дополнительных ссылок в самих лекциях не дало скучать и ощущать информационный голод. Для меня как человека, ранее не занимавшегося версткой, было довольно непросто разобраться в некоторых нюансах. Так что для новичков совет — выделить побольше времени и усидчиво поработать над заданиями. Большая благодарность преподавателям за обратную связь при проверке д/з и возможность вживую получить консультацию. В целом курс очень понравился, спасибо большое организаторам курса!

Алексей Мантуленко

09.11.2022
Ребятам которые сомневаются пойти на курс или нет (будут ли даны знания в полном объеме и будут ли эти знания актуальными) - сто процентов идти. Спасибо всем преподавателям курса, за их желание передать свои навыки. Курс очень интенсивный, информации много, поэтому готовьтесь))). Особое спасибо Коршуновой М. и лучшему наставнику Кобелев Д. Все просто супер)

Дмитрий Матюша

20.10.2022
Замечательный курс для начинающих с нуля! Местами может быть будет сложно, но это мотивирует больше изучать информацию самостоятельно. Огромное спасибо куратору курса Марии К. за увлекательные уроки и ментору Дмитрию К. за консультации, разборы дз и интересную дополнительную информацию.

Сертификат о прохождении курса

OTUS осуществляет лицензированную образовательную деятельность.
В конце прохождения курса вы получите сертификат OTUS и официальный диплом о получении новой специальности

После обучения вы:

  • Получите материалы по всем пройденным занятиям (презентации, видеозаписи вебинаров)
  • Получите сертификат об окончании курса

Частые вопросы

Что понадобится для обучения?
Программа предусмотрена для новичков и дает все необходимые базовые знания. Поэтому для занятий вам понадобится только компьютер.
Что, если в середине курса я не смогу продолжать обучение?
У вас есть право одного бесплатного трансфера в другую группу.
Обязательно ли защищать выпускной проект?
Для получение сертификата OTUS необходимо сдать проект. Кроме того, проект необязательно защищать перед аудиторией, а можно сдать в чате с преподавателем.
Я могу вернуть деньги?
Да, вы можете сделать возврат средств пропорционально оставшимся месяцам обучения.