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

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

Рет қаралды 20,940

Жыл бұрын

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

Пікірлер: 85

@Akmixam1 9 ай бұрын

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

@user-sp3bg7hl7x 2 ай бұрын

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

@themarth3589 Жыл бұрын

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

@astro-fu6eb 2 ай бұрын

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

@user-qu3uk5nk7s Жыл бұрын

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

@user-vq5mg6wv6v 3 ай бұрын

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

@sifu2514 8 ай бұрын

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

@user-jv2dn6xe5m Жыл бұрын

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

@developerkg Жыл бұрын

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

@MsSkotty Жыл бұрын

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

@ZELORD01 Жыл бұрын

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

@developerkg Жыл бұрын

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

@TenVladislav 10 ай бұрын

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

@zaaaqqqqaazaq 5 ай бұрын

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

@viper7294 6 ай бұрын

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

@user-bv4rg1lx5b Жыл бұрын

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

@user-io7yj9cm5l Ай бұрын

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

@TOROGAR Жыл бұрын

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

@user-pd5rz2yw5k 7 ай бұрын

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

@marlen011 Жыл бұрын

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

@developerkg Жыл бұрын

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

@pavelbeloff478 4 ай бұрын

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

@oleksandr568 Жыл бұрын

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

@amaksatovich5935 Жыл бұрын

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

@valilpq Жыл бұрын

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

@mutter_liebhaberr Жыл бұрын

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

@hoticegregory Жыл бұрын

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

@nailyatolstenko931 Жыл бұрын

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

@user-ss3qy3zu9k 15 күн бұрын

Спасибо!

@twixy4630 7 ай бұрын

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

@_Alhimik_ Жыл бұрын

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

@developerkg Жыл бұрын

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

@artyrdanilov2791 7 ай бұрын

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

@vorpalcorvus Жыл бұрын

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

@developerkg Жыл бұрын

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

@vorpalcorvus Жыл бұрын

@@developerkg ❤

@bekzhzz Жыл бұрын

Рахмеет

@zhamshidkaliev Жыл бұрын

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

@studymoldir6385 10 ай бұрын

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

@user-xc1ug2ry2r 10 ай бұрын

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

@user-ff7cd2fc8y Жыл бұрын

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

@ichannel9977 Жыл бұрын

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

@developerkg Жыл бұрын

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

@ichannel9977 Жыл бұрын

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

@shehiriron69 Жыл бұрын

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

@developerkg Жыл бұрын

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

@LuckyHome-cn3zj 7 ай бұрын

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

@umidbahromov5855 7 ай бұрын

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

@LuckyHome-cn3zj 7 ай бұрын

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

@minatoyt3609 3 ай бұрын

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

@docc7183 2 ай бұрын

inspect styles

@amaksatovich5935 Жыл бұрын

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

@Yurii_Abrokov 8 ай бұрын

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

@developerkg 8 ай бұрын

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

@Yurii_Abrokov 8 ай бұрын

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

@dimondimonov6417 Жыл бұрын

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

@developerkg Жыл бұрын

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

@wagatachi3656 Жыл бұрын

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

@developerkg Жыл бұрын

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

@nonenone2743 Жыл бұрын

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

@user-fp2ev2hc7v 3 ай бұрын

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

@dimondimonov6417 Жыл бұрын

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

@developerkg Жыл бұрын

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

@dimondimonov6417 Жыл бұрын

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

@developerkg Жыл бұрын

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

@incognitoram8050 Жыл бұрын

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

@developerkg Жыл бұрын

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

@edv1n928 Жыл бұрын

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

@developerkg Жыл бұрын

@SimAx16 8 ай бұрын

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

@bahone2231 Жыл бұрын

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

@developerkg Жыл бұрын

Учту)

@StarkRealityy Жыл бұрын

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

@iris-9070 Жыл бұрын

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

@developerkg Жыл бұрын

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

@user-ff7cd2fc8y Жыл бұрын

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

@developerkg Жыл бұрын

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

@stino4ek Жыл бұрын

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

@developerkg Жыл бұрын

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

@geraNikson Жыл бұрын

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

@developerkg Жыл бұрын

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