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х и они остаются необходимыми и по сей день.

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

Обучение проходит онлайн: вебинары, общение с преподавателями и вашей группой в Telegram, сдача домашних работ и получение обратной связи от преподавателя.

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

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

После выполнения всех домашних заданий вы получите готовый выпускной проект.

Оптимальная нагрузка

Возможность совмещать учебу с работой

Эксперты

Преподаватели из разных сфер, каждый со своим уникальным опытом

Перспективы

Сможете претендовать на позицию Data Scientist Junior 

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

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

Интерактивные вебинары

2 занятия по 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: Защита проектных работ

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

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


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

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

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

Руководитель курса

Анна Русяева

Web-developer

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

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

Solveva

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

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

Team Lead Frontend Developer

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

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?
Образовательная экспертиза Otus доказана более 6 лет успешной специализации на обучении в IT. Наша фишка — продвинутые программы для специалистов с опытом и быстрый запуск курсов по новым набирающим популярность технологиям. Мы уже обучили более 20 000 студентов, и будем рады помочь освоить вам новые навыки.
Что является наиболее ценным по мнению выпускников курса?
Домашние задания сопровождаются письменной обратной связью, и вы всегда можете задать вопрос в закрытый чат группы или голосом на вебинаре. А для защиты итогового проекта у вас будет несколько этапов, где Вы сможете получить консультацию по проекту от Марии Тихоновой и преодолеть трудности его выполнения.
Обязательно ли выполнять и защищать выпускной проект?
Для получения сертификата OTUS и УПК (удостоверение повышения квалификации государственного образца) необходимо сдать проект. Кроме того, проект необязательно защищать перед аудиторией, а можно сдать в чате с преподавателем. Для получения УПК также понадобится предъявить документ об образовании.
Обязательно ли выполнять все домашние задания?
Нет, не обязательно. Но выполнение домашних заданий поможет вам разобраться в материале курса, поэтому хотя бы часть домашних заданий стоит выполнить. При выполнении или сдаче домашнего задания, вы можете задать вопрос преподавателям, если где-то возникли сложности.
Помогаете ли вы с трудоустройством после курса?
В Otus Club проводятся вебинары на тему трудоустройства, разбор резюме, прохождения собеседований, особенности реферальных программ при найме. Также обратим Ваше внимание, что преподаватели курса занимают ведущие позиции в разных компаниях. Будьте активны, выполняйте домашние задания, стройте network с сокурсниками и преподавателями, и вам будет проще найти работу, расширив свои контакты.
Смогу ли я совмещать учебу с работой?
Да, программа курса рассчитана на то, что студент имеет ограниченный временной ресурс.
Что, если в середине курса я не смогу продолжать обучение?
У вас есть право одного бесплатного трансфера в другую группу. И лекции курса в любом случае у вас останутся в личном кабинете навсегда. Также есть отдельные опции по сдаче домашних заданий даже после окончания программы курса.
Я могу вернуть деньги?
Да, вы можете сделать возврат средств пропорционально оставшимся месяцам обучения.
Может ли мой работодатель оплатить курс?
Конечно, мы работаем с юр. лицами. При общении с менеджером уточните, что оплачивать будет ваш работодатель.
Остались вопросы?
Оставляйте заявку и задавайте вопросы менеджеру, команда курса с ним на связи и постарается дать вам дать исчерпывающую информацию.