HTML/CSS — курс по веб-верстке от Otus

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

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

Введение в Web

На первом занятии познакомитесь с преподавателями и с программой курса, а также вам проведут небольшой экскурс в историю Web. Узнаете, как установить, зарегистрироваться и работать с системой контроля версий Git. Изучите нюансы работы с HTML и создадите свою первую простую HTML-страницу. Поймете, как появился формальный язык внешнего вида документа CSS, и разберетесь в его использовании в своей работе. Научитесь работать с элементами на странице разработки, определять их размер и место в документе. Познакомитесь с CSS reset и layout и изучите основные ошибки при верстке документов. Сверстаете части макета, используя знания, которые вы получили на предыдущих уроках.

На первом занятии познакомитесь с преподавателями и с программой курса, а также вам проведут небольшой экскурс в историю Web.

Узнаете, как установить, зарегистрироваться и работать с системой контроля версий Git.

Изучите нюансы работы с HTML и создадите свою первую простую HTML-страницу.

Поймете, как появился формальный язык внешнего вида документа CSS, и разберетесь в его использовании в своей работе.

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

Познакомитесь с CSS reset и layout и изучите основные ошибки при верстке документов.

Сверстаете части макета, используя знания, которые вы получили на предыдущих уроках.

Layouts (макеты)

Узнаете, каких типов макеты существуют в дизайне и какими методами можно их создать. Изучите подробней техники создания макетов, а также поймете, как менялись макеты в течение истории веб-верстки. Разберетесь в устройстве модели Flexbox layout. Поймете, как устроен макет CSS Grid layout. Узнаете, что такое CSS fallbacks и почему необходимо его использовать при разработке проекта.

Узнаете, каких типов макеты существуют в дизайне и какими методами можно их создать.

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

Разберетесь в устройстве модели Flexbox layout.

Поймете, как устроен макет CSS Grid layout.

Узнаете, что такое CSS fallbacks и почему необходимо его использовать при разработке проекта.

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

Научитесь работать с профессиональными дизайнерами для создания макета. Поймете, как организовывать media queries на десктоп- и мобильной странице. Изучите подробней верстку страницы для экрана мобильного. Научитесь работать с Render tree in browsers для разработки анимации на странице.

Научитесь работать с профессиональными дизайнерами для создания макета.

Поймете, как организовывать media queries на десктоп- и мобильной странице.

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

Научитесь работать с Render tree in browsers для разработки анимации на странице.

Coding Style

Изучите организацию номенклатуры с помощью формального языка CSS. Узнаете, что такое Bootstrap и как с ним работать. Поймете, каковы функции Tailwind и как программисту с ним взаимодействовать.

Изучите организацию номенклатуры с помощью формального языка CSS.

Узнаете, что такое Bootstrap и как с ним работать.

Поймете, каковы функции Tailwind и как программисту с ним взаимодействовать.

JavaScript Basic

Изучите базовые понятия для работы на языке программирования JavaScript. Узнаете, какие основные принципы работы с терминалом, и научитесь оптимизировать код. Освоите основные конфигурации и настройки для файлов формата js и проектов в CSS и HTML. Разработаете и настроите минимальную конфигурацию для Webpack 5. Научитесь хешировать и минифицировать файлы, а также оптимизировать фото и видео внутри них. Узнаете, как верно проводить деплой сайта в production. Поймете, как использовать Lighthouse для анализа эффективности работы веб-страницы.

Изучите базовые понятия для работы на языке программирования JavaScript.

Узнаете, какие основные принципы работы с терминалом, и научитесь оптимизировать код.

Освоите основные конфигурации и настройки для файлов формата js и проектов в CSS и HTML.

Разработаете и настроите минимальную конфигурацию для Webpack 5.

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

Узнаете, как верно проводить деплой сайта в production.

Поймете, как использовать Lighthouse для анализа эффективности работы веб-страницы.

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

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

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

Защитите свой дипломный проект перед экспертами курса и получите фидбек и полезные советы от опытных наставников.