Верстка сайта с нуля для начинающих | HTML, CSS. Часть 1

[@spacekraken67]

прошло 2 дня и я до сих пор верстаю 😧 а видео не знает когда заканчивать, я на 1:17:58 на данный момент, а главное не сдаваться и наконец получить эту радость после завершении проекта!

[@olzhasdossaibek9095]

1. Background image smoothly fades into a background color 2. SVG as file, not as link in HTML 3. Animation on hover is done with cubic-bezier (faster neater)

[@olzhasdossaibek9095]

4. Background image to pseudo element (::before, ::after)

[@Дима-э1ы5ж]

Я уже смотрю на 1:29:58 спасибо за ролик, я многому научился благодаря вам

[@joonlorka1371]

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

[@Moonlit_Melody]

Спасибо за урок! Было интересно и познавательно! Делал вместе с Вами - получилось отлично :)

[@ДенисШевченко-б3ю]

Дружище, твои уроки всегда бомба) Молодцы. И звук огонь

[@thetip7264]

Именно с этого урока. У меня на ноуте расширение 1366 768 хотя на макете 1780px может помочь в этом случае адаптив.

[@I_Galaxy]

спасибо было очень полезно!!!

[@ТаняЗайцева-е9м]

це було цікаве відео

[@georgeazimov453]

для чего stylesheets.css в папке с наборами шрифтов и как они подключились я так и не понял.. Не улавливаю связи. Зачем автор переименовал css файл в папке со шрифтами в all?

[@vladlukyanchuk761]

58:20 почему на странице может не появлятся изображение, все делал по примеру?

[@gtaplayer4145]

Вы ответ нашли? Не появляется элемент after, стрелка

[@progerweb]

Через какой препроцессор? Я через vite, не видно было изображение при ::after. В Koala видно. Возможно, некоторые препроцессоры не настроены

[@jujutv1478]

Такая-же проблема, стрелка не появляется

[@jujutv1478]

Через before так и не получилось, добавил в html img дал ему класс и в css его разположил в нужном месте

[@Yourgodforever]

место свойства background-image, прописала просто background и сработало

[@darksgamechannel5484]

не понимаю почему вёрстка едет, вроде всё как на видосе и перепроверил, не понятно

[@progi99]

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

[@yukii-flora]

а мне норм было

[@ЕремКарибян]

…потому что к вёрстке не готовятся , как учитель он должен быть готов к уроке , то есть к вёрстке … а не вести , тратить время на не эффективность , потом вернуться и поправить и переделать боле эффективной 🤦‍♀️

[@СергейРоменский-ж4ш]

Благодарю за очень классную, продуманную практику! Если можно, добавьте в процесс рассказа разъяснения, почему именно так, а не по другому (напр. почему мы используем link, а не style? p.s. Извините, если прослушал=) )

[@dOnITNurbaev]

style не удобно использовать, а присоединять гораздо лучше, даже то, что в HTML документе будет чище.

[@mak_whisk]

Спасибо

[@anthologygame5612]

добрый время суток

[@СергейКрюков-ь7ф]

Не могу понять почему у меня не открывается картинка, выдаёт ошибку 404. Хотя, я всё делал, как говорил автор?

[@margo3706]

1:09:47 как вы копируете селекторы?

[@WebCademy]

kzbin.info/www/bejne/povMiqaViNWoqpo

[@margo3706]

@@WebCademy спасибо большое)

[@vladimirsem9574]

Скажите, плиз, а почему в относительных путях к файлам всегда указываете в начале "./"?

[@kolyaIva]

мы прописываем путь к файлу, а чтобы достичь его нужно выйти из index.html - "." , а затем зайти в нужную папку - «/»

[@mr_tekila]

Подскажите пожалуйста. При подключении CSS для чего писали ./css/main.css , если можно написать просто css/main.css

[@getbookofficial]

это указан путь где находится ваш css-файл

[@ДенисШевченко-б3ю]

@@getbookofficial это понятно,что путь. Вопрос - зачем наклонную черту перед папкой ,если и без черты можно

[@БунедАбдуразаков]

margin collapsing получилось в футере😀

[@Prankster_Paradise-w3k]

макет не работает....

[@ankub7835]

Может кто подскажет, почему то не подставляются иконки аккаунта и стрелок.. только если в штмл отдельно пишу img и ссылаюсь ..а вот через css неудается😢

[@avocodeuser1343]

Спасибо Вам огромное за ролик, у меня есть вопросик, не могу ответ найти и авторы подобного контента сами не знают ответа на него. Так вот я работаю с PUG и я ищу плагин для vs code, который был бы аналогом eCSStructor для копирования классов. Да я могу перейти в скомпилированный html файл и оттуда их копировать, но проблема в том, что и так окон открыто много когда пишешь проект и я хочу немножечко облегчить процесс чтоли. Если вы сталкивались с такой проблемой или кто-то, напишите пж в какую сторону копать и тыкните мне пальцем) Спасибо заранее!!!

[@DevNickKg]

Прежде чем посмотреть жмакнул на лукасик и на подписон и естественно на бубенцы чтобы бубели )

[@shortstime6664]

объясните пожалуйста вы на 49 минуте прибавили падинги по 15 слева и справа а затем сложили увеличили контейнер не понимаю для чего это делается

[@BogdanRedkin]

Чтобы контент не прилягал по краям контейнера вплотную.

[@thetip7264]

Привет! А, что делать если ширина моника меньше меньше ширины макеты😕😕😕

[@WebCademy]

Смотря какая ширина. Для тестов - включать мобильный предпросмотр, ставить нужную ширину с % масштабирования.

[@thetip7264]

Именно с этого урока. У меня на ноуте расширение 1366 768 хотя на макете 1780px может помочь в этом случае адаптив.

[@meirambekzhussipov7412]

можете дать исходники у нас не получаетсЯ?

[@postvirus1930]

почему не прекрепил файл с img там уже нету раздела BG

[@женяженя-н2з]

Макет скачивается, но в Фигма не открывается

[@ЗаринаБегиева]

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

[@WebCademy]

Возможно align-items: center; не прописали.

[@Rodshex]

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

[@pioner6915]

.container-wide{ max-width: 1790px; padding: 0 15px; }

[@Rodshex]

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

[@bulbdog-9]

1:28:22

[@vishnevskypavel8019]

подскажите, почему картинку БГ мы добавляем через css а не html. В чём разница? как правильнее?

[@kolyaIva]

стили правильно добавлять через css, а не через html, так будет правильнее и так принято

[@kolyaIva]

а разницы никакой нет

[@alexeysamoilik6481]

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

[@АмантайМамбетбаев]

Можете дать исходник, пожалуйста? Макет скачался, но не открывается...

[@SkepyTokars]

это было сказано в видео на 2й минуте

[@opalel7121]

@@SkepyTokars перечитай, что он написал, а потом пойми, что ты тупой

[@vetrov8699]

1:09:43 как так скопировать все селекторы?

[@WebCademy]

Плагин eCSStractor kzbin.info/www/bejne/povMiqaViNWoqpo

[@moratoPg]

А откуда беруться макеты, кто их создает , для создания он обизателен ,?

[@WebCademy]

Макеты рисует дизайнер в Figma. Можно искать готовые в сети, рисовать самому или обратиться к дизайнеру.

[@dreammakmuss]

Правильно я понимаю, что эта верстка не по БЭМ?

[@WebCademy]

Это проект без БЭМ нейминга.

[@ТвойСоветчик]

36:12

[@retransformed]

я не понимаю как он подключил шрифти может кто то обьяснить

[@WebCademy]

Скачал веб-шрифт и подключил CSS файл с этим шрифтом.

[@ЕкатеринаШимченко-ц3в]

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

[@WebCademy]

Тоже вариант. Качать стоит если их нет на G fonts или если есть задача оптимизировать скорость загрузки либо надежность.

[@MRX-xc3pz]

Ссылка на макет не работает

[@WebCademy]

Проверил, работает webcademy.ru/webinars/MNTN-Landing-Page.fig

[@ВахтангКвачахия-ч4ж]

@@WebCademy привет, не работает (

[@WebCademy]

@@ВахтангКвачахия-ч4ж Новая ссылка www.figma.com/design/H8VKhiJAevNGV3L4pEGa4M/

[@codingcat9375]

I can not find the link to figma

[@WebCademy]

webcademy.ru/webinars/MNTN-Landing-Page.fig

[@ЕвгенийУгланов-ш2л]

Юрий а разве этот макет не верстали?

[@WebCademy]

Нет, был анонс, но верстки не было.

[@user-pf9wz2ik2r]

Когда будет с галпом или не планируется

[@WebCademy]

@@user-pf9wz2ik2r В ближайшее время будет.

[@user-pf9wz2ik2r]

@@WebCademy о супер , спасибо за информацию

[@Reaper-zh7si]

Фрилансер по жизни, урок по параллаксу

[@ap6y3uk60]

1:58:05 Когда переделываю div в h2, то вся разметка сбивается и получается каша на странице. В чем дело?

[@dogvscatfunny9956]

Зачем так усложнять с макетом что его не чем открыть нельзя)

[@michaelmichael2897]

30:00 делаю все как на видео но account вылазит за bg-img,как исправить?

[@abris_6977]

.container-wide{ width:100%; margin: 0 auto; padding: 0 15px; } Данный код подгонит сайт под размеры твоего моника

[@shortstime6664]

@@abris_6977 а зачем добавлять по 15 слева и справа не совсем понимаю?

[@Wrwiswr]

Что за Фотошоп у вас

[@enoti4kad26]

будьте другом, купите поп фильтр