#1 | Вёрстка сайта с нуля | Для начинающих | Figma | HTML, CSS

[@FrontEndtricks]

Всем привет, с праздником! (: напишите в комментариях было ли всё понятно, что я пытался объяснить?) а так же если у Вас остались вопросы вы можете задать их в телеграм чате, ссылка в описании )

[@xarty-game]

А откуда у вас в самом начале взялся левый отступ от логотипа?

[@klirmio21]

Хороший курс) спасибо

[@BrainsCloud]

Спасибо, начал верстать свой первый сайт!

[@FrontEndtricks]

ха-ха ))

[@FoxMindShow]

ахаххаахха, толсто толсто )))

[@ДенисСофієнко]

😅

[@АнатолийЛавренев]

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

[@олегникандров-с4щ]

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

[@baboon_hero]

Спасибо огромное за твой обучающий видеоролик - продолжай свое дело 😊

[@КонстантинЮрьевич-р3е]

Здорово, ты говоришь довольно длительно для тебя, но для тех кто только начал практиковаться - самое то! Понравилось, внятная речь, даёшь пояснения - что ОЧЕНЬ важно! Поэтому сразу подписался и лайк!

[@ShephardJack]

Классно спасибо,правда были ошибки при верстке у меня,долго разбирался что не так,у вас ушел час,у меня часов 5-7,начало положено буду дальше учиться,спасибо,да благословит Господь)

[@АртурКельбиев]

Хороший практический урок, с теорией, таких не хватает на онлайн курсах ! С открытым макетом на Figma ! Спасибо !

[@besquait2882]

Спасибо за видео, после изучения JS начал по немного забывать вёрстку, решил освежить знания. Есть замечания по видео: 1) Я считаю, что лучше, если сначала происходила бы ПОЛНАЯ разметка СЕКЦИИ, а после уже написание стилей!? 2) В nav ты написал display: flex, можно же туда и влепить gap: 35px, и будет отступ у ссылок, не парясь за последний элемент, это сократит код, как по мне. ( это так же касается и других аналогичных моментов связанных с dp: flex и отступами ). Так то рассуждать по поводу вёрстки можно долго, но я написал то, что меня больше всего волновало. Однозначно подписка и лайк, сейчас не хватает таких видео на ютубе, где-то люди даже семантику не используют.

[@FrontEndtricks]

скажу так, я делаю так как мне удобнее, и как я считаю правильным или нужным. у всех написание кода, личное. эту страницу можно сверстать кучей разных способов и разными написаниями, тут нет предела нет определенного стандарта написания кода. в целом вывод такой... а на счёт двух замечаний. 1. это ваше мнение, мне проще написать кусок сетки и потом кусок цсс, я занимаюсь вёрсткой больше 6 лет, я знаю всё наперед. как и где у меня будет только увидев дизайн. 2. можно почему нет, но я так не привык. но например если требуется поддержка 11 explorer, как бы это глупо не звучало но его до сих пор используют, а gap там не поддерживается). P.S. у меня иногда бывают такие клиенты.

[@FrontEndtricks]

ну это мое имхо. я не учитель у меня нет диплома, я лишь делюсь знаниями, каждый может что то подчеркнуть что то для себя. :) тем не менее я Вас услышал ))

[@uole6593]

Кайф видос. наконец-то нашел с подробным объяснением и не быстрой речью как у остальных

[@svetlana_murkus]

Спасибо! Спасибо и еще раз спасибо! Ну очень крутой, понятный и четкий разбор! Реально классное объяснение из всего того, что я видела на ютуб!) Продолжайте!! А теперь еще по теме пару вопросиков (я новичок, строго не судите) 1. Почему кнопку мы указали через ссылку, а не через Боттом? 2. В классе .nav__link::after. свойство position без родительского свойства не работает? Всегда так? 3. у position: absolute; родитель position: relative; всегда? 4. Почему мы используем transition: вместо анимации?

[@FrontEndtricks]

1. кнопку - какую? 2. если всегда если необходимо относительно элемента. 3. второй пункт 4. анимация пишется на кейфреймах, зачем ее писать, если мы хотим например только на hover эффект, небольшое сглаживание?)

[@dalex5789]

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

[@zeinmusic3649]

И как успехи?)

[@dalex5789]

@@zeinmusic3649 я сейчас это дело бросил, решил все таки первый курс нормально проучиться, летом попробую дальше учится, если получится совместить все планы, а дальше как раз по направлению учиться будем, а там и практика не далеко

[@timzag6045]

Здравствуйте.Увидел Ваш урок,понравилось.Подписался.Начал копировать,но "intro-bg" не расположился по центру,а ушёл в право,пришлось картинку обрезать по левому краю,чтобы было по центру.Дальше идёт нормально.Спасибо , всё понятно!

[@voorooniin]

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

[@ЕвгенийКулижников-ж2ф]

Спасибо, чудесный урок! Подача огонь, продолжайте))

[@Th-xo9qr]

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

[@ИванШмалько-ш2х]

Дружище, ты молодец)) Очень приятно смотреть, обьясняешь сразу, как только появляется мысть "Что это" =) Супер!!

[@ValerySun]

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

[@nand0m0]

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

[@takhminak6649]

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

[@seoonlyRU]

благодарю вас, держите лайк с ходу от сеошника, вебмастера и лапочки - СЕООНЛИ

[@dimmyantus]

Здравствуйте... Очень ясно, и разжевано расказано. Продолжайте в. Том же духе

[@dianaivanova6822]

Заранее извиняюсь за возможно глупый вопрос, но. На 46-ой минуте Вы ставите у себя 750px высоты для картинки, говоря, что это будет половина для Вашего экрана, при этом Вы говорите, что все экраны разные. Разве мы не должны ориентироваться на все возможные экраны, а не на конкретно один?

[@_lambfer_831]

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

[@zhaksylyknuradil7683]

оличный курс!!! лайк и подписка

[@АндрейКоротченко-й1й]

Все отлично.Редактор можно по крупней показывать.

[@airguy5964]

Очень круто

[@api-nsk]

Повторил все действия, указанные в уроке. Понравился подход, так как в процессе последовательного внесения тегов в верстку и стилей в css появляется понимание зачем это всё. Только среду таки выбрал vs code. Там live server на лету всё отражает. Еще раз спасибо. Будет приятно в дальнейшем увидеть переработку этого шаблона, но в гридах. Говорят более свежее веяние + пользователь увидит возможности сделать сайт адаптивным, а не просто резиновым.

[@МаксТкачук-ю7ф]

Супер))Смотрелось на одном дыхании. Успехов Вам и продолжайте снимать ролики! Вы делаете великое дело)))

[@Данил-г5о3п]

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

[@Alexus1504]

О , супер!!!

[@relvirelaxingmusic4883]

Спасибо! С Новым Годом! Здоровья и процветания!

[@КайратДуйшекеев]

Супер, продолжай такие видео ролики + js или react буду ждать, держи лайк и подписку!!!

[@don.Ruslan]

Спасибо за урок! Я начинаю верстать такие видео очень продуктивны. Очень грамотно преподносишь материал. Лайк и подписка! :)))

[@ДмитрийШухов-п1э]

спасибо за урок!

[@ЮрийБарабаш-г4д]

Зачем нужен overlay? В плане пользы для общего развития в навыках верстки, это хорошо. Но какая практическая польза в плане дизайна? Кстати, я использовал z-index 1 и 2 соответственно и всё также работает. Допускаю, что я недальновиден. Просто хочу во всем разобраться и ставлю попутно эксперименты. Позиционирование и геометрия для меня очень запутанная история. Не могу уяснить механизм сдвига header на intro. Мне не хватает практических примеров по этому моменту. Нужно посмотреть что-нибудь простое и наглядное с разноцветными квадратиками или кружочками)) Посоветуйте пожалуйста. Заранее благодарен. И ещё. Мне не очень нравится этот макет. Хотелось бы чтобы дизайнер прописал поконкретнее отступы между элементами. Макет необходимо доработать. Добавить нужное и убрать лишнее. Хотя, если этот макет был задуман как тренировочный для верстальщиков, то преодолевание трудностей ведет к ещё большей мудрости. PS: Мои выводы и суждения могут быть ошибочными. Я не верстальщик и не дизайнер, а только начинаю учиться.

[@Юрец1993]

Рад что нашел тебя потратил сутки что бы найти что то что загружалось бы и работало. Я так понимаю надо все кода удалить и делать заново слушая тебя?

[@ivanivanov6118]

Спасибо. Отлично.

[@tim1730]

топчик )

[@вупидискуп]

Все супер!!!)

[@kickdoe6793]

Для чего header__block ты добавляешь width: 20% и почему именно 20, как это просчитать?

[@LegoMasterteam]

на глаз)

[@АлексейПономарев-я9ч]

Отлично!

[@СтаниславГорячев-г1ъ]

Спасибо 👍

[@sergei4126]

Я конечно только начал свой путь во фронт-енд, но разве фильтр с затемнением нельзя было сделать на саму картинку? Чтобы фильтр не перекрывал кнопку и другой контент

[@kulichkov1361]

это реально очень круто

[@ОлегПетров-п4у]

Спасибо за видео! Очень полезный контент. Лайк, подписка.

[@АмирМамбетов-б5ю]

у меня такой вопрос, а не легче допустим создать общий блок и добавить туда бакграунд картинку и туда уже навигацию и т.д. накидывать(сверху картинки)? p.s. я только начинаю изучать верстку =)

[@GOEchAWI]

ты топ бро

[@СтаниславГорячев-г1ъ]

Ждём новую верстку

[@Edgar-pu1lc]

Привет,спасибо за видео,у меня есть вопрос,а нельзя было создать общую див для хэдера и для интро,и задать ему бэкграунд с картинкой ?

[@shevchukvitalii1995]

Спасибо за урок. Есть вопрос: Почему в .header__block мы ставили width: 20% ? Как понять какая цифра должна там быть? Почему не 15, не 25? Спасибо

[@FrontEndtricks]

Исходя из содержимого внутри, я ставлю с небольшим запасом

[@Алексей127-г6э]

@@FrontEndtricks появляется скролл в панели разработчика как его убрать?

[@morfinleonardow7050]

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

[@yunggoatflexin8919]

видео отличное) я учусь и как раз на обучении hover after и тд, но вопрос от новичка, почему в теге nav пишется не ul список а просто ссылки подряд?

[@leanchiik]

Здравствуйте как поставить изображения посередине, а не сбоку? примерно 19:00

[@no-distrx]

Спасибо )

[@gipsokartonMontKiev]

.intro__block { } остался пустой?

[@Rodshex]

закрепите исходник плиз! не могу найти ошибку свою, h1 и кнопка прижаты к экрану, нет отступа) спасибо

[@quatrefoil4]

привет) на 23 минуте возникла заминка у меня))uppercase почему-то зачеркнутый и не применяется. Что делать. Поискала ошибку, не нашла((

[@FrontEndtricks]

вступите в телеграм канал в описании к видео он был, и там со скриншотами уже можете показать)

[@СлесарняОнлайнБизнеса]

188 минут ушло на повторение за тобой

[@aavahzx5932]

почему у меня вот логотип начинается с начала сайта хотя все теги указаны как на видео

[@xarty-game]

А откуда у вас в самом начале взялся левый отступ от логотипа?

[@tv-eye]

он его задал шириной контейнера

[@SashaFloks]

нету шрифта с названием SF Pro Display что делать ?

[@kiryuha5964]

Приветствую!)) Объясните, пожалуйста, откуда взялась цифра 20% в ".header__block" ?

[@FrontEndtricks]

25:33

[@AntonioBenderas]

Начинаю верстать, пересмотрел кучу роликов, все верстают как хотят, нет определённого стандарта, от этого каша в голове, какие способы и методы применять. Например, какие единицы для текста, для блоков и отступов, rem, em, %, vw, vh, ...

[@mfz6220]

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

[@FrontEndtricks]

Так и я вроде, когда писал постоянно показывал, что изменилось, и разжевывал некоторые моменты

[@mfz6220]

@@FrontEndtricks в том то и дело , что люди должны уже знать всё это , чтобы остальные в том числе я , не ждал пока ты обьясним им что такое заголовок или параграф и т.п

[@mfz6220]

@@FrontEndtricks а так все отлично , спасибо , в 2 х быстро сделал

[@kulichkov1361]

в целом не плохо, но стоило с самого начало готовится к адаптивной верстке, а то по итогу слишком много менять придется

[@FrontEndtricks]

а вы смотрели 5тый урок, что так утверждать?

[@kulichkov1361]

@@FrontEndtricks ну я не говорю за последующие уроки, просто на данный момент слишком много было грубых значений ), ну мб тебе так удобнее я то че

[@ЕгорНестеров-ф1й]

Данный урок мне понравился, только на моментах оформления ссыллок, возникли вопросы.Лучше было использовать псевдо-класс hover, а не делать доп. классы.

[@FrontEndtricks]

Вы уверенны, что хорошо слушали урок? если вы смотрите данный, урок каким образом вы решаете что лучше а что хуже? если мы на главной странице, и в навигации должен быть выделен один пункт меню всегда как активный, причем тут тогда hover? P.S. мне просто интересно откуда все люди постоянно делают такие выводы, у меня такое впечатление, что даже все начинают писать комментарии, не досмотрев до конца. и вырывают всё из контекста...

[@FrontEndtricks]

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

[@ЕгорНестеров-ф1й]

Спасибо за ответ. Я всё понял

[@FrontEndtricks]

@@ЕгорНестеров-ф1й дело в том что не Вы первый, не Вы последний такие замечания пишет, а я всё понять не могу, в чем проблема, это ведь просто практика, у меня нет образования чтобы учить людей, делайте как хотите, я просто делюсь опытом ))

[@ЕгорНестеров-ф1й]

@@FrontEndtricks Извините за мой глупый вопрос. Я очень сильно сглупил.

[@RK800_CL]

хелп у меня не показывается картинка для интро! хотя ошибки нет на сайте и рамер норм! пожалуйста помогите как это исправить!

[@FrontEndtricks]

напишите, в телеграм чат, или в вк

[@seniorsweshnickow]

Ссылки к сожалению не открывают. не смог добраться до макета(

[@FrontEndtricks]

добавлена ссылка Google drive с .fig файлом

[@RamonIPerez]

Спасибо за видео из 2022!) Понравилось то, что на практике объясняется вёрстка. Если есть видео выполнения вёрстки без комментариев - был бы рад посмотреть. Чтобы понять, сколько на вёрстку такого шаблона уходит времени. А то на фрилансе есть задачки, а как по времени оценить - нет понимания)

[@FrontEndtricks]

Ну вот посмотрите общую длительность всех видео) и сократите на половину)))

[@dobrMAV]

Шаблон для прохождения урока от куда можно взять ?

[@FrontEndtricks]

ссылка на дизайн в описании

[@dobrMAV]

@@FrontEndtricks Спасибо

[@Gazovchik]

Добрый день Вы на комментарии отвечаете?

[@FrontEndtricks]

Смотря на какие) добрый день

[@Gazovchik]

@@FrontEndtricks , У меня вопрос Я дублирую страничку с фигмы начинаю играться с блоками и у меня пропадают элементы - шапка например, и другие. Как делать Правильно - подскажите

[@FrontEndtricks]

@@Gazovchik ну это либо в слоях что то не то делаете, тут может помочь «шаг назад»

[@Gazovchik]

@@FrontEndtricks , Я первый раз в Фигме - может подскажете где эта кнопка?, А может видеокурс хороший знаете? (чтобы с сайтом этим разобраться)(а может сами когда-нибудь захотите такой видеоурок сделать)

[@bestrelaxmusic4613]

У меня фон в header не на всю ширину с права пустой блок

[@egorlapin9991]

Откуда у текст css код в Figma, как так же сделать, хелп!

[@FrontEndtricks]

посмотрите начало урока, я так примерно объяснил как пользоваться Figma 4:22

[@begiiimirzayev1359]

а ЖС не добавите ?

[@FrontEndtricks]

на этом курсе js не будет

[@isobol4533]

не понял как ширина 20% центрировала нав меню

[@grekhu]

круто, но видно все плоховато

[@brasso6891]

17:07

[@igorwagner7176]

можно ссылку на макет?

[@FrontEndtricks]

Описание 5того урока

[@igorwagner7176]

@@FrontEndtricks спасибо

[@brasso6891]

41:58

[@dennsnouvden]

bratan ni nam a tebe spossibo

[@odinaxaydarova1159]

Hello

[@РоманСавич-ю1к]

не открывается ни одна из ссылок

[@FrontEndtricks]

Добрый день, какая у вас страна, у меня все ссылки работают. можете вступить в телеграм группу. я туда тогда Вам всё скину

[@tim1730]

я блин не панимаю в чем смысл делать активные ссылки и айтемы через active, если сам дизайн говорит что это актив ховер при наведение, в чем смысол делать через актив то хахаха

[@FrontEndtricks]

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

[@tim1730]

@@FrontEndtricks а понял, сори я просто спросил, не хотел грубить

[@Davudyk92]

Я в шоке типуля столько инфы дропает на ваши бошки а вам лукас тяжело влепить.

[@ДарьяВолкова-к4ш]

не меняется цвет навигации в шапке (((( *, *:before, *:after { box-sizing: border-box; } .container { width: 1200px; margin: 0 auto; } body { margin: 0; } .header { background-color: black; } .wrapper { height: 100px; display: flex; justify-content: space-between; align-items: center; } .nav { text-transform: uppercase; color: white; /* не меняется на белый цвет */ text-decoration: none; }

[@FrontEndtricks]

внутри ссылки, а ссылки по умолчанию не принимают цвета от родителя, нужно прописать самим ссылкам

[@ДарьяВолкова-к4ш]

@@FrontEndtricks а ещё изначально container не меняет свое положение. То есть нет отступов по краям

[@FrontEndtricks]

@@ДарьяВолкова-к4ш рекомендую пересмотреть первый урок по шапке заново, там все это было

[@qurbanmuradov7053]

а можно нижнее подчеркивание под словом "Main" дать таким образом? .nav__link.active{ text-decoration: underline 2px; text-decoration-color: red;

[@qurbanmuradov7053]

понял свою ошибку)) спасибо

[@FrontEndtricks]

Можно, но если хотите какие то интересные анимации, то лучше будет через before,after

[@metas8879]

Что за прога в которой код пишется?

[@FrontEndtricks]

Jetbrains phpstorm