Вёрстка сайта с нуля по макету Figma | HTML, CSS | Для новичков

Подписаться 1,9 тыс.

Просмотров 20 тыс.

50% 1

Привет ребят, вот и пришла долгожданная верстка. В этом видео мы с вами с нуля начнем верстать макет, будем подключать шрифты, стили, поймем как правильно использовать контейнер, позиционирование, псевдоэлементы и псевдоклассы, конечно же флексы, работа с картинками и иконками.
Не забывайте подписываться, ставить лайки и писать комментарии.
github.com/makhabatabd/CARS-v... Здесь можно найти как стартовый проект, так и финальный(на ветке start и master)
вот сам макет www.figma.com/file/pAzN8OdxxX...
#css #html #learnhtmlandcss #верстка #версткасайта #tutorial #учимhtmlcss #figma #htmltutorial #beginners

Опубликовано:

12 мар 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 84

@Akmixam1 8 месяцев назад

Вас приятно слушать, отличный урок спасибо вам!!!

@user-qu3uk5nk7s Год назад

Благодарю Махабат! Вы - наилучшая.

@MsSkotty Год назад

Класс, обязательно посмотрю 💪

@user-jv2dn6xe5m Год назад

Спасибо! Очень полезное видео! Буду ждать продолжения 👍

@developerkg Год назад

у меня на гите есть полный проект, ссылка в описании)

@user-vq5mg6wv6v 3 месяца назад

Топ, продолжайте в том же духе, приятная подача, хороший понятный код!

@jonathan_wellson346 5 месяцев назад

спасибо большое за ваше старание)

@TenVladislav 10 месяцев назад

лучшая!!!!!! Побольше таких обучающих видео!

@ZELORD01 Год назад

Спасибо огромное! Мне для практики будет супер👍

@developerkg Год назад

Всегда пожалуйста

@themarth3589 Год назад

Наткнулся на ваш видос и мне безумно понравился за то, что он максимально спокойный , а голос на фоне - приятный! Только изучаю верстку, для меня сейчас сложновато понять налету всё, но все равно спасибо за видос! Буду ждать еще новых)

@astro-fu6eb Месяц назад

прошло 10 месяцев есть результаты?

@user-pd5rz2yw5k 6 месяцев назад

Большое спасибо за урок!

@viper7294 5 месяцев назад

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

@mutter_liebhaberr Год назад

молодец, объясняешь, все понятно по порядку норм

@user-sp3bg7hl7x 2 месяца назад

Вы написали что видео предназначен для новичков но когда указываете Бифор или афтер или ховеры то не говорите для чего они применяются

@marlen011 Год назад

Класс! Побольше таких контентов💫

@developerkg Год назад

Спасибо, обязательно)

@TOROGAR Год назад

ты клёвая, спасибо за видео. Поверстай ещё по шаблонам

@user-bv4rg1lx5b Год назад

Спасибо огромное за вёрстку макета. Единственное что так как урок для начинающих, не логично как будто оставлять блок с Placehold на самостоятельную вёрстку ибо там как будто свои правила действуют, пошёл разбираться ) А в целом спасибо за урок.

@valilpq Год назад

Спасибо большое , было бы круто с переходом на другие страницы сделать видео

@nailyatolstenko931 Год назад

Спасибо большое!!!

@oleksandr568 Год назад

Если честно, не хватает БОЛЬШЕ объяснений, почему так то или так то, я например не понял, для чего и что делает !important. А так, всё супер, хороший контент)

@amaksatovich5935 Год назад

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

@user-io7yj9cm5l 19 дней назад

Видео не для обучения, как минимум не для начинающих. Теги и атрибуты которые вы пишите требуют обьяснения для тех кто только начал их изучать)

@hoticegregory 11 месяцев назад

Добрый день! Какими плагинами пользуетесь в vs code?

@_Alhimik_ Год назад

Очень интересно объясняете, так держать👍✌️, приятный голос, дикция, замечательно рассказываете👏👏👏

@developerkg Год назад

спасибо большое

@studymoldir6385 9 месяцев назад

Здравствуйте что делать если при запуске выходит this language is not defined

@bekzhzz Год назад

Рахмеет

@pavelbeloff478 3 месяца назад

Добрый день ! Спасибо за видос, очень познавательный! Подскажите за сколько времени вы научились так верстать?

@twixy4630 6 месяцев назад

мне кажется когда мы писали интро блоки не было необходимости задавать два класса, можно было обращаться как intro__block div::hover, а дальше обращаться к конкретному диву

@zhamshidkaliev Год назад

какие софты юзайте для видео записа???

@artyrdanilov2791 7 месяцев назад

подскажите как настроить фигму что бы показывало паддинги и марджины ?

@wagatachi3656 Год назад

тихо слышно, а так очень классно,спасибо

@developerkg Год назад

спасибо, учту

@nonenone2743 Год назад

да, тиховато. хорошо, что я bt-колонку наладил, а то совсем бы не слышал ничего на ноуте :)

@sifu2514 8 месяцев назад

ужасная верстка честно говоря это я как разработчик говорю как вы это адаптировать собираетесь с этими костылями через позишн абсолют и проценты ? для нчинающего это просто ненужная информация псмотрите другие курсы по той же верстке вам тоже есть чему поучиться честно говоря

@user-xc1ug2ry2r 9 месяцев назад

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

@user-ff7cd2fc8y Год назад

Почему нельзя было сделать кнопку как ссылку , а сделали через баттон? Есть ли какая-то разница

@Yurii_Abrokov 7 месяцев назад

Скажи, пожалуйста, как это сделать, чтобы прямо в браузере можно было (как ты это делала top:16px) изменять и видеть результат?

@developerkg 7 месяцев назад

Правый клик мыши, inspect нажимаете, там появляются elemets и styles, там можно прописывать или менять

@Yurii_Abrokov 7 месяцев назад

@@developerkg Спасибо за информацию. Можно еще вопрос ? Не знаю в вашей ли это компетенции. У меня на компьютере появилась черная полоса снизу. (Windows 10). Я перепробовал все настройки экрана. Не проходит. Я думаю, есть очень небольшая вероятность, что вы мне подскажете, как убрать эту полосу. (Быть может случится ЧУДО). I believe in miracles 😊

@vorpalcorvus Год назад

неплохо, но вот с картинкой в начале слишком запарилась :33. Было бы классно видосики про адаптацию через медиа :3

@developerkg Год назад

Хорошо, скоро будет

@vorpalcorvus Год назад

@@developerkg ❤

@ichannel9977 Год назад

Здравствуйте, спасибо Вам, за ваши видео!Как предотвратить перемещение элементов css при изменении размера окна?

@developerkg Год назад

Нужно тогда фиксировать px, width, иначе многие элементы будут отзываться на уменьшение экрана

@ichannel9977 Год назад

@@developerkg Спасибо за ответ!))

@amaksatovich5935 Год назад

го видео про sass вёрстку

@shehiriron69 Год назад

Добрый день, у меня произошел некий конфуз при верстке. Бэкграунд для "header", точнее изображение не покрывает полностью, а лишь часть. Также содержание (где main, services, about and contact). Как можно решить?

@developerkg Год назад

Здравствуйте, вам нужны лиюо padding либо height чтобы была вся картина, потому что там не достаточно контента и она не может растянуться) Посмотрите код мой, который в описании. Удачи)

@minatoyt3609 2 месяца назад

что за плагин для просмотра разных элементов в фигме вы использовали?

@docc7183 Месяц назад

inspect styles

@LuckyHome-cn3zj 7 месяцев назад

лично я сделал второй блок с контактами обычным блоком без позиционирования и использовал отрицательный margin. Не вижу смысла в позиционировании, здесь оно не нужно как по мне. Также про позиционирование иконок в контактах. можно было сделать обычным дивом, ибо позиционирование здесь лишнее. Его лучше использовать, когда какой-то элемент сложно отобразить в одном потоке со всеми элементами, допустим, как надпись на картинке блоком ниже

@umidbahromov5855 7 месяцев назад

В каком смысле отрицательным маржином можете объяснить)

@LuckyHome-cn3zj 7 месяцев назад

@@umidbahromov5855ну. Есть положительный: margin-top: 24px, он сдвигает блок вниз, а отрицательный margin-top: -24px, соответственно, вверх😁

@dimondimonov6417 Год назад

Молодец мне понравился видосик. А адоптив будет?

@developerkg Год назад

постараюсь скоро сделать)

@SimAx16 7 месяцев назад

это не сайт,это лендинг )

@dimondimonov6417 Год назад

А зачем после максвидс ещё задавать видс?

@developerkg Год назад

свойство width: 100% устанавливает ширину контейнера в 100% от ширины его родительского элемента. Это гарантирует, что контейнер будет заполнять всю доступную ширину, даже если родительский элемент шире, чем 1200 пикселей.

@user-fp2ev2hc7v 3 месяца назад

наверное нужно было еще микро отодвинуть или еще тише говорить

@dimondimonov6417 Год назад

А почему в html нельзя большими буквами писать?

@developerkg Год назад

считается плохим тоном)

@bahone2231 Год назад

Очень интересно но местами не понятно, и очень быстро )

@developerkg Год назад

Учту)

@edv1n928 Год назад

А зачем контейнеру писать width:100%, если он и так 100%?

@developerkg Год назад

@StarkRealityy 11 месяцев назад

У меня одного звука 0?

@iris-9070 Год назад

Сколько лет вы учились, чтобы достигнуть такого уровня?

@developerkg Год назад

Я все еще учусь и развиваюсь, а так начала изучать примерно 2 года назад)

@user-ff7cd2fc8y Год назад

@@developerkg не обижайтесь, но для двух лет у вас очень слабое понимание, если я за 7 месяц обучения вижу у вас целую кучу ошибок построения сайта. Не хотел вас никак обидеть, но реально очень заметны ошибки новичков так как я сам им являюсь

@developerkg Год назад

@@user-ff7cd2fc8y не обижаюсь, вы можете вести свой канал и делиться с другими знаниями, а не тратить свое время на написания таких комментариев )

@incognitoram8050 Год назад

Можно было бы сразу блок сделать с фото, чтобы не мучаться с абсолютом И логичнее было бы делать секции, чтобы не путаться И много времени тратишь вручную писанину, ведь знаменитое правило программиста(знаю, верстка это не программирование) - Ctrl C Ctrl v

@developerkg Год назад

Да, я подобрала этот темп потому что видео для начинающих, но спасибо за ваш фидбек, остальные поинты огонь)

@stino4ek Год назад

Этот макет уже сверстал другой программист и очень давно

@developerkg Год назад

Ну так весь JS, HTML, CSS есть в интернете, но это никому мешает)

@geraNikson Год назад

Хороший плагиат другого видео !

@developerkg Год назад

Потому что теги такие же хахах? или макет ,который в инете в общем доступе? Ну ,если аналогию привести, то вы тоже плагиатите, потому что написала комментарий, а комментарии пишут много людей, а вы мне скажете, но это мой комментарий, я написа его с первого до последнего слова сам, и отобразил свой взгляд на эту тему, и я скажу, так я тоже))) Спасибо за комментарий, нам нужны такие люди как вы!