Верстка сайта лендинга на HTML, SCSS. Практический урок

↓↓↓ Макет и ссылка на материалы в описании под видео ↓↓↓

HTML верстка сайта лендинга. Урок для начинающих. Напишем HTML разметку, применим CSS стили с препроцессором SCSS, используем BEM naming. В этой части мы стартовали? написали сброс стилей, экспортировали всю графику, подключили шрифты. заверстали навигацию, шапку и 2 секции лендинга. Продолжим в следующей части.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 05 Августа 2024 года.

Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 12 Августа 2024 года.

💻 Курс "Разработка сайтов на PHP + MySQL":
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

[ypnnysg]

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

[vpbufgo]

Все очень круто))) нравится что все разложено по полочкам. Лайк

[jqflpgr]

Юрий, Вы молодец. От остальных ит-блогеров, Вас отличает особенная скромность.
Ещё Ваш плюс - это подача без "воды". Так держать!

[d.s.korochkin]

Как всегда, на самом высоком уровне подача материала)

[ulbolsynzh]

вааааау, вот это урок афигеныый, классна, спасибо большое

[spirit-tlcp]

1:50:40
Чтобы текст был в точности как на макете и переносился так же - нужно смотреть на межбуквенное расстояние, которое дизайнеры часто меняют для достижения нужного визуального эффекта.

в нашем случе нужно прописать " letter-spacing: 1.15px " ( указан в макете в разделе inspect) и все станет как нужно.

кстати, многие этот нюанс просто игнорят)

Спасибо автору за хороший урок!!

[Dabudida]

Здравствуйте, макета нет в телеграмме и на многие другие уроки

[ykszqnl]

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

[uk-lych_sveta]

Спасибо за полезный контент, всё супер понятно и интересно, но есть одно непонимание лично для меня, почему при более 14 500 просмотрах, лайки поставили всего лишь 562, неужели людям трудно поставить лайк!!! Юрий ведь старается и тратит свое драгоценное время!!!

[lolerkapich]

класный видос сделай обучение сайта с помощью boostrap

[rascannabio]

Я, конечно, понимаю, что ТГ канал сам себя не прорекламирует, но давать "ссылку" на макет в ТГ, причём ска даже не на конкретный пост, а просто на "джойнчат" - это, конечно, мощно.. Хорошо, что в Фигме есть поиск..

[usermanafrtyh]

Здравствуйте, у меня при импорте происходит ошибка в компиляций sass(файл не находится). Не знаете из-за чего это? Путь указал верно.

[umzxlyf]

Макет почему-то не скачивается, ошибку выдает!

[Mrnsky]

подскажите для чего перед названием html файла ставится нижнее подчеркивание и где об это прочитать?

[gtaplayer]

Как отключить всплывающее красное окно "Invalid css after..."? Когда код редактирую и еще не закончил, автоматически появляется оно.

[wzjdudf]

15:30 а не правильно ли делать все, что возможно - в ручную? Вон этот можно с помощью css сделать, так же как и круг...

[jqflpgr]

Почему при подключении стилей scss с помощью @import, Юрий не использует нижние подчёркивания и у него всё срабатывает?
А у меня ни один стиль не работал, и я 30 минут думал, в чём причина, а оказывается дело в нижнем подчёркивании..

[Vismut_zh]

как сделать нав и лого на одной линии?

[ifrxbzp]

Я вот не понимаю а что за семантика там в начале без хеадер сразу нав?

[killdzr]

Объясните, почему Commercial налезает на картинку? Это косяк шаблона? Почему тогда реализовали его, а не исправил при верстке. Или это так задумано и я чего то не понимаю?
Ведь глаз режет.