Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи

↓↓↓ Макет и ссылка на материалы в описании под видео ↓↓↓ Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео уроке я подробную покажу HTML CSS верстку простого макета из FIGMA. Поделюсь полезными приемами как быстро сделать адаптивную верстку, добавить мобильную навигацию и разместить видео на вашем сайте.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Мои авторские курсы:

💻 Профессия HTML верстальщик
Для начинающих. Курс по созданию и верстке сайтов.

💻 Курс "Frontend разработчик. JavaScript + React"
Станьте frontend разработчиком за 3 месяца.

💻 Курс "Разработка сайтов на PHP + MySQL"
Сможете создавать сайты с любым функционалом.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

МАТЕРИАЛЫ К УРОКУ:

ТАЙМ КОДЫ:

00:00 Знакомство с макетом и старт проекта
03:38 Сброс стилей
18:02 Базовые стили, контейнер, шрифты
29:57 Контейнер
33:40 Верстка шапки с навигацией
1:10:30 Верстка верхней секции
1:47:35 Секция How It Works - заголовок
2:04:48 Секция How It Works - колонки
2:32:34 Секция Story
2:56:56 Секция Our Product
3:27:54 Подвал
3:34:16 Правка багов
3:37:37 Читкод для отображения десктопной версии на смартфонах
3:41:58 Адаптивная верстка шапки и навигации
3:50:20 Адаптация первой секции
3:56:10 Адаптивная верстка секции How It Works - заголовок
4:00:30 Адаптивная верстка секции How It Works - колонки
4:07:42 Адаптивная верстка Story
4:12:51 Адаптив для секции Product
4:38:05 Адаптив для подвала
4:43:02 Мобильная навигация, скрипты
5:06:24 Видео в секции Story, Скрипты
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Меня зовут Юрий Ключевский. Я занимаюсь разработкой сайтов уже много лет, специализируюсь на front-end разработке и верстке сайтов, JavaScript и PHP программировании. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, JavaScript, jQuery, PHP, MySQL, React, Gulp.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

[rollim]

Отличный урок и не менее отличный преподаватель! Четкая дикция, без запинок, Вы молодец, спасибо за труд🙏

[helenag]

Юрий, так подробно Вы ещё никогда не объясняли, имхо. Я нашла для себя много объяснений разных приёмов, которые Вы раньше только поверхностно затрагивали. Это счастье наконец-то понять "что к чему". Классное видео ! Спасибо за Ваш труд.

[metak]

Лысый из Вэбкадеми имеет подачу материала, которая мне безукоризненно заходит.
Я парень простой, вижу его видео - ставлю лайк, добавляю в "смотреть позже" и не смотрю ))))

[_Fantom_.]

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

[nestartup]

спасибо за такое подробное видео! сейчас как раз активно изучаю верстку

[yuriy]

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

[zlatanik]

наконец-то мне показывают откуда css и прочее для вёрстки

[GGSoft]

Это просто рай для начинающих. Спасибо огромное!!!! Ребята не будем скупится на коммент и лаиков.

[serjiomardavan]

Как всегда приятно послушать и посмотреть

[tatianadmitrieva]

Юрий, спасибо большое за практику! Всё очень подробно, понятно и логично. Я совсем новичок и для меня очень важно понять закономерность и правильно выстроить верстку с самого начала. 🙏🔥💪

[kiot]

Большое спасибо, отличное видео! Очень подробное объяснение (особенно нравится предложенные альтернативные варианты). Посмотрел пол видео, но уже часть вопросов спала относительно некоторых вещей. С адаптивным фоновым изображением + object fit были недопонимания, но теперь все ок)

[tpostolova]

все, как всегда подробно и понятно объяснено. спасибо огромное учитель за урок

[enterkvas]

Юрий, большое спасибо! Не получилось опять онлайн (только чуть-чуть посмотрел), зато в записи теперь смотрю, делаю заметки, учусь "как надо". Успехов!

[alexey_samokhin]

Добрый вечер! Юра спасибо за урок, как всегда круто!!!
Удачи тебе во всех твоих начинаниях)

[АлександрКильдейчик]

Спасибо, пересмотрел все ваши макета с канала и повторил, очень доступно объясняете.

[sergejchap]

Спасибо за практику в конкретной IDE и указание оптимального плагина-расширения

[igoryavchenko]

Юрий, большое спасибо! Все доступно, и понятно, так держать!

[АнтонЯкубович-ъз]

просто космос )спасибо большое за ваш труд

[papasmoget]

благодарю за урок! отличное объяснение процесса!

[FirstnameLastname-reei]

Спасибо, очень классно. Еще и макет есть. Не часто встретишь))))