
В этом уроке мы поговорим о том, что мы будем изучать в первом модуле, какие результаты вы получите и как лучше его проходить
В этом уроке мы обсудим перспективы web-разработки в целом
В этом уроке мы обсудим конструкторы сайтов, ИИ, как это все уживается в интернете и что нам со всем этим делать
В этом уроке мы разберем полную классификацию web-продуктов, как они разрабатываются и из каких частей состоят
В этом уроке мы разберем как работает интернет в целом, какая у него архитектура, какие протоколы он использует и как общаются устройства в нем
В этом уроке мы обсудим из чего же состоит клиентская часть любого web-продукта
В этом уроке мы обсудим что такое дизайн-макет, какие виды графики бывают в нем и какие форматы использовать
В этом уроке мы обсудим сервисы для работы с графикой: как ими пользоваться, основные принципы, варианты программ и тп.
В этом уроке мы разберем такое понятие как "сетки" в макетах и что делать с иконками в плохом качестве
В этом уроке мы установим и настроем самые важные инструменты для работы с кодом
В этом уроке мы создадим свой первый проект и настроим файловую структуру
В этом уроке мы изучим базовые тэги в HTML, которые необходимо знать
В этом уроке мы разберем семантические тэги в HTML5
В этом уроке мы изучим все самое необходимое для начала работы с CSS
В этом уроке мы разберемся что такое блочная модель и из чего она состоит
В этом уроке мы разберем один из самых нужных и полезных инструментов
В этом уроке мы продолжим разбор блочной модели и узнаем все до мельчайших деталей
В этом уроке мы разберем позиционирование элементов и его виды
В этом уроке мы изучим как выравнивать элементы по вертикали и немного истории
В этом уроке мы обсудим единицы измерения, которые чаще всего используются в css
В этом уроке мы изучим крайне важную тему - специфичность css селекторов
В этом уроке мы настроим автоматическое форматирование кода
В этой большой практике мы начнем создавать свой первый реальный проект
В этом уроке мы изучим все необходимые основы технологии flexbox
В этом уроке мы применим всю изученную информацию по flexbox
В этом уроке мы продолжим работать с проектом и получим шанс хорошо поработать самостоятельно
В этом уроке мы поговорим про свойство object-fit и как работать с изображениями в разных условиях
В этом уроке мы обсудим нормализацию стилей и приведение их к общему формату для всех браузеров
В этом уроке мы обсудим локальное и удаленное подключение любых файлов, узнаем что такое cdn-сервисы
В этом уроке мы разберем все, что касается шрифтов: как подключать, форматы, конвертация и тд.
В этом уроке мы обсудим тенденции использования CSS
В этом уроке мы изучим что такое вложенность в CSS и как её правильно использовать
Новый проект :)
В этом уроке мы изучим CSS переменные, что сейчас очень важно по многим причинам
В этом уроке мы начнем разбирать новый подход к построению интерфейсов: CSS Grid
В этом уроке мы разберем интересную единицу измерения сетки - fr, которая позволит нам разделять контент на определенные части
В этом уроке мы полноценно обсудим, в каких ситуациях стоит использовать флексы, а в каких гриды. И разберем это на живых примерах
В этом уроке нас ждет практика :)
В этом уроке мы изучим такие понятия, как явные и неявные гриды. Научимся контролировать их в проектах
В этом уроке мы изучим новую функцию minmax()
В этом уроке мы изучим тему масштабирования треков и два новых свойства
В этом уроке мы изучим одну из самых интересных тем в гридах: позиционирование треков
В этом уроке мы рассмотрим выравнивание треков в самых разных аспектах
В этом дополнительном уроке мы разберем альтернативный синтаксис размещения треков внутри сетки и что термин "подсеток"
В этом уроке мы разберем такую технологию как псевдоклассы и как их использовать
В этом уроке мы закончим базовую верстку нашего проекта и рассмотрим одну интересную функцию
В этом уроке мы разберем различные варианты того, как можно подключать иконки к своему проекту. Плюсы и минусы каждого из них
В этом уроке мы разберем виды верстки и как они могут помочь в адаптации проекта. Изучим правило media
В этом уроке мы не только поговорим про подход PixelPerfect, но и разберем, почему не стоит отходить от норм макета
В этом уроке нас ждет большая практика по адаптации проекта
В этом уроке мы продолжим адаптацию проекта и доведем её до логического конца
В этом уроке мы познакомимся с новыми терминами, которые будут относится к работе с логическими размерами. Это уже более современный подход, направленный на повышение доступности веб-продуктов
В этом уроке мы настроим локальны ссылки, научимся реализовывать плавную прокрутку и установим favicon для сайта
В этом уроке мы изучим одну из основополагающих технологий всего IT-мира - систему контроля версий
В этом уроке мы изучим средства хранения и распространения git-репозиториев
В этом уроке мы обсудим важные понятия из мира web-разработки и запустим наш первый проект в интернет
В этом уроке мы изучим как работать с одним репозиторием с разных аккаунтов, использовать графические клиенты и как не совершать ошибок
В этом уроке мы разберем термин препроцессоров, какие они бывают, в чем их смысл и что такое SASS/Scss
В этом уроке мы разберем различные варианты названия css-классов, чтобы было удобно, понятно и приятно :)
В этом уроке мы настроим сборщик проектов Vite и обсудим все необходимые нюансы
В этом уроке мы разберем такой подход как Mobile first, его плюсы, минусы и когда стоит использовать
В этом уроке мы начнем нашу практику и разберемся во всех нюансах
В этом уроке мы создадим уже прочную кодовую базу и выполним первую секцию проекта
В этом уроке мы познакомимся с тремя новыми функциями в css и где их можно использовать
В этом уроке мы полностью заадаптируем первую секцию во всех нюансах
В этом уроке мы разберем уже готовые инструменты для ускорения нашей работы
В этом уроке мы проведем вторую практику, реализуем следующую секцию и применим один из инструментов
В этом уроке мы изучим из каких повторяющихся кусочков состоит любой веб-продукт, как они называются и поработаем самостоятельно
В этом уроке мы разберем все, что нужно знать про формы + реализуем ее в нашем проекте
В этой практике мы реализуем один из самых распространенных компонентов в интерфейсах
В этой практике мы реализуем один из самых распространенных компонентов в интерфейсах
В этом уроке мы разберем альтернативы слайдера и инструментам в целом
В этом уроке мы разберем теорию простых анимаций и создадим гамбургер-меню
В этом уроке мы создадим еще одну страницу и еще один веб-компонент
В этом уроке мы разберем термин валидации и попрактикуемся с одной из форм
В этом уроке мы разберем новый псевдокласс и некоторые аспекты д/з
В этом уроке мы займемся отправкой форм и всем, что с этим связано
В этом уроке мы изучим основы анимаций и при помощи чего они создаются
В этом уроке мы продолжим тему анимаций, поговорим про готовые решения и искусственный интеллект
В этом уроке мы разберем что такое валидация веб-продукта, как проверять его на различные метрики и оптимизировать
В этом уроке мы рассмотрим дополнительные мета-тэги, og-тэги и как сделать фавиконку более умной
В этом уроке мы загрузим на проект на хостинг
В этом уроке мы будем говорить про настройку проекта
В этом уроке мы сверстаем первый экран проекта
В этом уроке мы сверстаем первый экран проекта
В этом уроке мы сверстаем второй экран проекта, используя CSS Grid
В этом уроке мы сверстаем третий экран проекта
В этом уроке мы реализуем скрипт пересчета процентов
В этом уроке мы создадим блок с портфолио
В этом уроке мы реализуем блок с контактами
В этом уроке мы доработаем проект в соответствии с правовыми нормами
В этом уроке мы поговорим про адаптацию изображений под разные устройства
В этом уроке мы заадаптируем два первых экрана проекта
В этом уроке мы будем заканчивать наш сайт-портфолио
Курс полностью перезаписан и новая версия выложена 06.2025
Этот курс направлен на подробное обучение созданию веб-продуктов, но главное, что здесь мы немедленно применяем все знания на практике.
Это значит, что вы получите весь материал для работы и мы вместе будем создавать реальные проекты шаг за шагом.
Для кого подойдет этот курс?
Если вы ничего не знаете про создание сайтов или веб-приложений, но хотите начать
Если вы новичок в html/css, хотите быстро их освоить и начать применять в работе
Если у вас был опыт в этой сфере несколько лет назад, ведь web-технологии очень быстро меняются и совершенствуются
Что внутри курса?
Мы с вами пройдем путь от установки своего первого редактора кода до создания полноценных, полностью функционирующих и расположенных в интернете сайтов. Мы будем изучать теоретическую часть и сразу же применять её на реальных проектах. Все ссылки на ресурсы, дополнительные материалы и бонусные макеты для практики будут предоставлены внутри курса.
На все вопросы внутри курса отвечаю лично как можно быстрее. Так же есть телеграм канал для вопросов и обсуждений. Все обновления курса бесплатны и в автоматическом режиме.
мы изучим основы web-разработки: что такое web-продукт, зачем он нужен, циклы создания, как работает интернет изнутри, и многое другое
мы научимся работать с графическими редакторами в контексте верстки: Figma, Zeplin и тп
мы научимся работать с графикой для web'a, в том числе с SVG
мы узнаем и поймем как использовать HTML5 и CSS3 в реальных проектах
мы узнаем основы JS, научимся применять его в своих проектах
мы научимся работать с Git и GitHub
мы научимся работать с технологиями FlexBox и CSS Grid, будем их использовать сразу в практике
мы научимся работать с новейшими фишками CSS, такими как CSS Nesting
мы научимся использовать препроцессоры Sass/Scss в своих проектах
мы научимся создавать мобильную адаптацию сайтов и приложений
мы научимся использовать методологии (БЭМ и тп)
мы поймем, как создавать многостраничные сайты и принципы посадки под CMS(системы управления сайтами)
мы научимся автоматизировать процессы при помощи планировщиков задач (Vite, Gulp)
мы научимся оптимизировать скорость работы сайтов и проводить валидацию верстки по стандартам w3c
мы научимся следовать последним стандартам доступности a11y
мы научимся работать с множеством готовых плагинов, устанавливать гео-карты на сайте, работать со шрифтами и многое другое...
мы создадим ваш личный сайт-портфолио
В виде бонуса будут предоставлены несколько реальных макетов для самостоятельного закрепления полученных знаний.
Почему стоит начать свое обучение уже сейчас?
Создание web-интерфейсов (верстка) - востребованный на рынке труда навык, без которого не обходится ни один веб-продукт. Мало того, что изучив всю данную вам информацию вы уже сможете создавать свои продукты и работать как на фрилансе, так и в web-студии, но и вы заложите базу для дальнейшего обучения. Владея этими навыками вы сможете освоить любую CMS (WordPress, ModX...) изнутри, сможете понять и изучить как работает backend часть, и сможете создавать визуальную часть приложений, написанных на JavaScript фреймворках и библиотеках (ведь там везде используется верстка как и на обычных сайтах, в том числе и на мобильных приложениях).