Курс HTML/CSS Advanced

С помощью этого курса HTML и CSS вы узнаете основы верстки веб-сайтов и создадите учебный сайт KinoMonster.

5 / 525
Начать обучение Регистрация

  • 162 заданий
  • 17 часов видео
  • Сертификат об окончании

О курсе

Курс HTML/CSS Advanced поможет вам изучить современную верстку веб-сайтов.

В уроках HTML и CSS вы узнаете:

  • Как верстать блоки на сайте с помощью Grid
  • Что такое Flexbox и как Flexbox упрощает позиционирование блоков на сайте
  • Как создавать адаптивную верстку
  • Научитесь использовать псевдоэлементы ::after и ::before
  • Как подключать внешние CSS-стили к сайту, а также Javascript скрипты и библиотеки
  • Научитесь пользоваться популярным редактором кода Visual Studio Code
  • Изучите Grid System
  • Научитесь встраивать видео на ваш сайт
  • Познакомитесь с CSS-анимацией

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

Начать обучение

План курса

Программа обучения состоит из видео уроков по HTML и CSS, а также включает интерактивные тесты и интерактивные тренажеры, позволяющие закрепить полученные вами знания на практике.


1
О курсе HTML/CSS Advanced

3
Базовый HTML

5
Базовый CSS

8
Позиционирование CSS Grid

12
Практическая часть: Знакомство с Figma

13
Практическая часть: Создаем Header (верхняя часть сайта)

14
Практическая часть: Создаем Footer (нижняя часть сайта)

19
Практическая часть: Страница Login и Register



Отзывы(58)

Отзывы о курсе верстки HTML и CSS.

07.08.2022
Denys Merenkov

Отличный курс! спасибо!

06.08.2022
Lolita Shamonova

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

02.08.2022
Тимур Сотников

Базовано 10/10

23.07.2022
Александр Семичев

Доступно и интересно, хотелось бы больше заданий.

20.07.2022
Pavlo Oslam

Отличный курс, удобный и понятный

19.07.2022
Евгений Макидон

Курс очень крутой. Много информации, которую тебе подают, а ты бери и просто запоминай и не ленись)))

15.07.2022
Nataliia Veselova

Спасибо большое за курс! Получила много полезной информации. Разобралась во многих вещах, которые до этого были непонятными. Практическая часть c версткой сайта и написанием java script-кода для меня была сложнее, чем предыдущие уроки курса. Хотелось бы, чтобы задания для закрепления материала были сложнее. В целом курс очень информативный и стоит того, чтобы его прошел каждый, кто начинает изучать веб-разработку.

13.07.2022
Назар Шашков

Thanks!

13.07.2022
Alexey Sereda

Отличный курс, мне понравился, всё доступно и понятно. Особенно приятно было когда были допущены ошибки, поскольку новичкам будет полезно учиться решать подобные проблемы, а вы наглядным примером показали как это делать.

11.07.2022
Yurii Monashnenko

Початковий курс HTML/CSS Advanced подається зрозуміло і засвоюється достатньо легко!

05.07.2022
Andrii Herasymchuk

Чудовий курс для навчання!

05.07.2022
Pavel Didenko

Отличный курс! Приятная подача материала, хорошее объяснение, очень нравится что в одно и то же время Вы что-то объясняете и верстаете сайт, таким образом материал усваивается лучше. Повторял всё за Вами в своей IDE, сверстал такой же сайт, есть осознание того что освоил вёрстку, по крайней мере достаточно для того чтобы сверстать простой лендинг. С практикой в будущем смогу улучшить навыки. Спасибо за курс!

28.06.2022
Богдан Плотников

Мне понравилось, прошел на одном дыхании, когда было не понятно просто пересматривал уроки. Спасибо Сергею за данный проект, я доволен!

19.06.2022
Юра Старченко

Ну такой не плохой курс за эти деньги

19.06.2022
Svitlana Moroz

Отличный курс, последние уроки сложноваты для восприятия. Но в целом отлично! Доступно и удобно.

14.06.2022
Aleksandr Samoilenko

Курс отличный, я раньше проходил просто курс HTML/CSS и для меня он был супер, но Advanced - еще более информативный с большим количеством полезных фишек, которые помогают создать современный сайт. Я в восторге от прохождения данного курса. Спасибо большое FructCode.

13.06.2022
Сергей Жданович

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

09.06.2022
Vladyslav Merezhko

Курс сподобався дізнався багатонового та систематизував наявні та набуті знання. Дужк чекаю на доповнення курсі у розробці

05.06.2022
stepan gudzovatiy

Cool

04.06.2022
student_yk6N8IiL

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

03.06.2022
Андрій Слободян

Цікавий курс, по можливості хотів би, щоб з часом добавився курс по методології написання коду, а саме найменування класів тощо. Дякую за курс!

01.06.2022
Vlad Sivenkov

Cool

26.05.2022
Volodymyr Kovalenko

Отличный курс, единственное, что смутило - слишком элементарные интерактивные задания особенно ближе к завершению курса. А так понравилось, планирую продолжить обучения далее. Буду советовать

20.05.2022
Шахрiяр Юсупов

Отличный курс!

11.05.2022
Андрей Веленский

Намного правильней построен процесс обучения, чем в HTML/CSS. А так же более актуальная информация.

24.04.2022
Валера Кузнецов

Сначала думал что курс не особо будет хороший, но пару уроков в бесплатной версии курса показали что я ошибаюсь.Зарегистрировался на платную версию, и начал изучать все с первого урока. Каждый урок объясняется доходчиво, проговаривается каждый шаг в процессе обучения, без заумных слов или еще чего то, что начинающий может не понять. Курс просто шикарен, спасибо большое Сергей Никонов что создали его.

20.04.2022
Yerbol Saranzhipov

Спасибо за курс, теперь нужна практика и Javascript

19.04.2022
Anisia Gutu

Самый лучший курс, спасибо вам!!!!

17.04.2022
Евгений Пархоменко

Апладирую ВАМ стоя!!!!!!!!!!!!!!!!!!!!!!!

16.04.2022
Артур Бобров

Отличный курс чтобы понять основы, благодарю за курс )))

15.04.2022
student_hZLN25nE

Интересно, надо быть очень внимательным здесь нет мелочей.

14.04.2022
Талантбек Жумаев

Очень хороший курс.

12.04.2022
Костя

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

12.04.2022
Максим Маслов

Познавательно, спасибо

11.04.2022
student_lPDbiZs_

Очень хороший курс. Особенно для новичков. Хорошее изложение материала + практические примеры. Буду продолжать изучать следующие курсы. Большое спасибо за Ваши курсы они очень полезны для новичков. Если я в свои 60 лет начинаю что то понимать пройдя только курс HTML/CSS Advanced, что говорить о молодежи. Всем советую!!

09.04.2022
Viacheslav Kulyk

Отличный курс, виден на лицо прогресс в плане подачи и структуризации материала относительно Basic HTML/CSS. Продолжайте в том же духе, всё очень нравится!

05.04.2022
Anatoliy Kornilenko

Очень крутой курс. В целом курс очень интересен. Но его я посоветую тем кто уже немного понимает, что такое программирование + маловато заданий как для курса - сделайте больше заданий. Рекомендую

29.03.2022
Vitaly Illinskiy

Замечательные курсы! Во-первых - доступность. Я, пенсионер, могу себе позволить учиться, вторых таких курсов не знаю. Во-вторых изложение материала. Сергей, Вы педагог от Бога. Многие лета Вам и всяческих успехов в таком нужном деле! Виталий.

29.03.2022
Никита Ковалевский

Отличный курс! Спасибо!

28.03.2022
Alexander Valentey

Отличный курс, его будет вполне достаточно для верстки, я думаю, большинства сайтов. Есть практика в виде интерактивных заданий, но задания слишком простые и хотелось бы чего-нибудь более требовательного. Но комплексно курс очень хороший и качественный. Спасибо.

25.03.2022
Тимофей Морозов

Просто бомба

25.03.2022
Юрий Сулыгин

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

21.03.2022
Nikita Hurski

Супер курс

19.03.2022
Александр Казаков

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

02.03.2022
Алексей Владимирович...

Отличный курс!!! Всё объясняется понятно и доступно.

14.02.2022
Роман Дідич

Курс мне очень понравился.

13.02.2022
student_VPUq_wh0

Понравился курс! Киномонстер получился намного интереснее, чем в прошлом курсе, но и сложнее. Теории по html и css тоже достаточно.

12.02.2022
Vladyslav Kardash

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

06.02.2022
Иван Ермашов

Отличный курс. Все супер!!!

05.02.2022
Роман Незнаєнко

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

28.01.2022
Anna Vasileva

Полезный курс. Доступно и интересно всё объясняет

28.01.2022
Евгений

Спасибо огромное, мне очень помог в обучении этот курс!!

27.01.2022
student_5X1YqLbg

Супер курс! Узнал много о верстке сайтов и понял как верстать с помощью css grid и flexbox.

27.01.2022
student_L8efDYX_

Много узнал деталей, которые облегчают написание кода (emmet, многострочный ввод). Но остались вопросы, можно ли, например, на практике использовать сетку для всего сайта? На практике она использовалась только для футера. Что делать с блоком hero если он отображается по разному при разном разрешении браузера? И так далее... нехватает подводных камней, как обстоят дела в реальных полевых условиях(работе). Но за свои деньги курс однозначно стоит.

Начать обучение

Часто задаваемые вопросы

Почему такая низкая цена?

Одна из миссий проекта FructCode сделать дорогое ИТ-образование доступным для всех!

Когда начнется обучение? Нужно ли ждать когда наберется группа?

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

Получу ли я после прохождения курса сертификат?

Да! За успешное прохождение каждого курса, вы получите сертификат на нескольких языках: Русский, Английский, Немецкий, Французский, Итальянский. Все сертификаты, полученные за курсы, вы можете найти в вашем профиле

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

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

Актуальны ли курсы?

Да! Курсы на платформе FructCode достаточно часто обновляются, в том числе исходные коды.

Какое оборудование нужно для прохождения курса?

Курсы FructCode вы можете проходить в любой операционной системе - Windows, Mac OS или Linux, а также в мобильных устройствах. Тем не менее, для комфортного прохождения курсов FructCode, мы рекомендуем иметь монитор с разрешением экрана 1920x1080.

При прохождении курса я не знаю как выполнить задание, что делать?

Если в процессе прохождения курса у вас возникла проблема с выполнением задания и вопрос по пройденной теме курса, вы можете задать его в комьюнити FructCode - https://fructcode.com/ru/qa/, где другие студенты, которые успешно решили задание, вам обязательно помогут.

Что такое XP? Что оно дает?

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

Как участвовать в рейтинге? Я набрал достаточно XP, но не показываюсь в рейтингах курса, почему?

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

Что если мне не подойдет или не понравится курс?

Если в процессе прохождения курса вы поймете, что вам не подходит данный курс - в течении 30 дней с даты покупки, вы можете вернуть деньги в полном объеме. Для возврата средств напишите в службу поддержки на почту [email protected]

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

Наиболее частая причина, если что-то не работает - это установленные некоторые расширения для браузера, например Adblock. Если у вас возникает техническая проблема, напишите пожалуйста в нашу службу поддержки на почту [email protected] и мы в кратчайшее время постараемся помочь

У меня остались вопросы о курсе, кому я могу их задать?

Если у вас остались дополнительные вопросы о курсах FructCode, пожалуйста напишите в нашу службу поддержки на почту [email protected] и мы постараемся ответить в ближайшее время.

Я находил ваши курсы на других сайтах. Есть ли разница где учиться?

Да! Только на сайте FructCode.com вы можете найти актуальные версии моих курсов. На других сайтах вы можете найти пиратские старые версии моих курсов или неактуальные версии моих курсов, в процессе прохождения которых, вы столкнетесь с ошибками, так как программы уже давно изменились. Покупая мои курсы на сайте FructCode.com вы инвестируете не только в свои знания, но и инвестируете в создание новых курсов.

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

Sergei Nikonov. Автор курса программирования HTML/CSS Advanced | FructCode
Sergei Nikonov
  • Основатель проекта FructCode
  • Опыт в веб-разработке более 10 лет
  • Работал над высоконагруженными веб-проектами в крупных компаниях США и ЕВРОПЫ
  • Провел несколько десятков оффлайн и онлайн семинаров на тему веб-разработки
  • Gasya
    33177 xp
    1
  • student_GfwEmk4Y
    21392 xp
    2
  • Anton Dorosh
    20997 xp
    3
  • student_vY1UBoWg
    16972 xp
    4
  • student_xCid-PuI
    16417 xp
    5
  • У вас 0 XP за курс HTML/CSS Advanced

    Бросить вызов?