Верстка сайта от А до Я | HTML, CSS, Figma

В этом видео верстаем сайт с нуля. Верстка сайта это процесс создания сайта из макета, который нарисовал дизайнер. Видео для начинающих, в нем не будет препроцессоров, сборщиков и каких-либо инструментов, только HTML и CSS! С помощью этого видео так же можно прокачать блочную молель css, позиционирование, flex, псевдоэлменты и псевдоклассы!

Я с Вами верстаем этот макет впервые с нуля полностью поэтому , где-то недочеты, которые потом сразу исправляются!

Я вложила все свои старания и очень надеюсь на ваши лайки и комментарии!

Главы видео:
00:00 - 04:05 - Подготовка к работе, шрифты, папки и файлы
04:06 -Header
16:38 - Main Первый блок
23:35 - Main Второй блок
32:30 - Main Третий блок
44:36 - Main Четвертый блок
54:35 - Main Пятый блок
01:03:15 - Main Шестой блок
01:17:15 - Footer
01:33:50 - Конец + новости

Всем спасибо, увидимся на следующем уроке!

#html #htmlandcsstutorialforbeginners #htmlandcss #htmltutorial #csstutorial #версткасайта #верстка #figma

[prostoi]

все по факту без воды ... супер супер супер

[evgen_boev]

Большое спасибо. Реально очень нужный контент ты верстаешь сайт по фигме и потом показываешь его как сделть адаптив... Супер

[Jake-onlt]

<div class="Крутой__урок">
<p> Спасибо за крутой урок! </p>
</div>

[_Alhimik_]

Привет Махабат, пока не смотрел урок, но лайк поставлю сразу!

[TenVladislav]

Спасибо большое! Ты мотивируешь очень сильно! Лучшая!😊

[yuriyzadorozhnyi]

Дякую Вам Makhabat за можливість навчатися на вашому каналі . Дякую за контент, бажаю розвитку вашому каналу і отримувати задоволення від вашої праці !

[bekasatarkulov]

Очень крутое видео, спасибо за ваш труд 🫶

[dimondimonov]

Плагин есть для шрифтов в фигме. Очень классный

[nonenone]

Надо было всё-таки у выпадающего списка доделать стилизацию, а то по дефолту на браузере на windows в firefox жуткая 'стрелочка' =))

[bastern]

Только вот с Бэм косяк в самом начале. Есть элемент header__inner, но нет блока с классом header. Да м навигации список не помешает, в не просто перечислить ссылки. Эх, а потом новички тянут ошибки(

[piligrim_]

Привет, если верстать более грамотно, нужно было сделать тег header, на нее повесить картинку большую эту и от нее делать отступы падингами. Так было бы более качественно.

[artyrdanilov]

а можно как то span с анг языком заменить на выпадающий список ?

[StarkRealityy]

Насколько я знаю, если узнали ширину контейнера, а потом скушали её паддингами, надо перерасчитать!
То есть бордер-бокс учитывает падинги в общем размере и получается что ширина контента 1100px + padding.

[skrumy]

Давно во фронтенде? Где трудитесь на фрилансе или как наемный работник?