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

↓↓↓ Макет и ссылка на материалы в описании под видео ↓↓↓
Макет в Telegram канале: t.me/joinchat/friZxyBulgNmYjE6
HTML верстка сайта лендинга. Урок для начинающих. Напишем HTML разметку, применим CSS стили с препроцессором SCSS, используем BEM naming. В этой части мы стартовали? написали сброс стилей, экспортировали всю графику, подключили шрифты. заверстали навигацию, шапку и 2 секции лендинга. Продолжим в следующей части.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 05 Августа 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 12 Августа 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
На канале ВебКадеми bit.ly/3erF41X вы найдете много полезных обучающих материалов, а так же сможете поработать со мной лично пройдя мои курсы.

Пікірлер: 60

  • @user-vp6bu3fg1o
    @user-vp6bu3fg1o Жыл бұрын

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

  • @user-yp7nn8ys3g
    @user-yp7nn8ys3g Жыл бұрын

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

  • @43445fgfgd
    @43445fgfgd3 жыл бұрын

    Дякую за Вашу роботу!)

  • @user-jq4fl3pg8r
    @user-jq4fl3pg8r Жыл бұрын

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

  • @demianamnel01
    @demianamnel012 жыл бұрын

    Спасибо, очень полезно

  • @ulbolsynzh
    @ulbolsynzh2 ай бұрын

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

  • @score_87
    @score_872 жыл бұрын

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

  • @d.s.korochkin9238
    @d.s.korochkin92383 жыл бұрын

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

  • @6odio9
    @6odio92 жыл бұрын

    спасибо!!!

  • @spirit-tl7cp
    @spirit-tl7cp Жыл бұрын

    1:50:40 Чтобы текст был в точности как на макете и переносился так же - нужно смотреть на межбуквенное расстояние, которое дизайнеры часто меняют для достижения нужного визуального эффекта. в нашем случе нужно прописать " letter-spacing: 1.15px " ( указан в макете в разделе inspect) и все станет как нужно. кстати, многие этот нюанс просто игнорят) Спасибо автору за хороший урок!!

  • @uk-lych_sveta
    @uk-lych_sveta2 жыл бұрын

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

  • @WebCademy

    @WebCademy

    2 жыл бұрын

    Спасибо за поддержку!)

  • @user-vi8rx4kf2n

    @user-vi8rx4kf2n

    Жыл бұрын

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

  • @user-yk4sz6qn5l
    @user-yk4sz6qn5l2 жыл бұрын

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

  • @lolerkapich
    @lolerkapich Жыл бұрын

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

  • @Dabudida
    @Dabudida Жыл бұрын

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

  • @rascannabio5495
    @rascannabio5495 Жыл бұрын

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

  • @user-bf2ub2ri4i

    @user-bf2ub2ri4i

    Жыл бұрын

    Спасибо, тебе добрый человек за инфу о поиске, а то так бы и листал до 21 года весь канал)))))) автору вебинара все равно респект)))

  • @user-um3zx7ly3f
    @user-um3zx7ly3f2 жыл бұрын

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

  • @Mrnsky
    @Mrnsky3 жыл бұрын

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

  • @WebCademy

    @WebCademy

    3 жыл бұрын

    sass-scss.ru/guide/#topic-5 - секция "Импорт"

  • @usermanafrtyh
    @usermanafrtyh2 жыл бұрын

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

  • @TommyJackson91101

    @TommyJackson91101

    Жыл бұрын

    Такая же проблема….

  • @AntonioBenderas
    @AntonioBenderas2 жыл бұрын

    Как найти вторую часть?

  • @gtaplayer4145
    @gtaplayer4145 Жыл бұрын

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

  • @WebCademy

    @WebCademy

    Жыл бұрын

    В принципе отключить все уведомления от Koala. Когда на опыте - ошибок нет. А если есть - то заметите по тому что сайт будет отображаться без CSS и полезете смотреть что не так.

  • @user-wz8jd9ud9f
    @user-wz8jd9ud9f2 жыл бұрын

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

  • @WebCademy

    @WebCademy

    2 жыл бұрын

    Ничего плохого в svg фоне нет. Если есть сподручный вариант реализовать на CSS - тоже вариант.

  • @Vismut_zh
    @Vismut_zh2 жыл бұрын

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

  • @WebCademy

    @WebCademy

    2 жыл бұрын

    Контейнеру в котором они лежат задайте display: flex;

  • @user-if4rx3bz2p
    @user-if4rx3bz2p5 ай бұрын

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

  • @WebCademy

    @WebCademy

    5 ай бұрын

    Вы SEO специалист и имеете хорошие результаты в семантической оптимизации, можете подробно и на примерах доказать почему тег nav не может быть первым на странице? Или доказать что он обязательно должен быть в header? Или что первым должен быть header, а потом nav?

  • @user-zq3rw6qm3d

    @user-zq3rw6qm3d

    2 ай бұрын

    ​@@WebCademyвас смотрят в том числе новички и у меня, как у новичка, тоже возник такой вопрос. Ранее, как правило воспринимал, что сначала идёт блок хедер, потом мэйн и в концовке футер

  • @WebCademy

    @WebCademy

    2 ай бұрын

    @@user-zq3rw6qm3d Это не ошибка. Семантика используется для того чтобы указать части страницы. Разместить тег nav можно и вне header блока.

  • @user-sj1dn9zl9k
    @user-sj1dn9zl9k3 жыл бұрын

    Продолжение будет?

  • @WebCademy

    @WebCademy

    3 жыл бұрын

    Будет.

  • @user-jq4fl3pg8r
    @user-jq4fl3pg8r Жыл бұрын

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

  • @WebCademy

    @WebCademy

    Жыл бұрын

    Вообще, нижнее подчеркивание (в начале имени файла), как и расширение .scss можно не указывать. Если у вас не срабатывает - то вопрос к компилятору, которым вы преобразуете scss в css.

  • @user-jq4fl3pg8r

    @user-jq4fl3pg8r

    Жыл бұрын

    @@WebCademy спасибо за ответ)

  • @Anopeng
    @Anopeng2 жыл бұрын

    12:08 какайкан 😂

  • @WebCademy

    @WebCademy

    2 жыл бұрын

    как icon

  • @Anopeng

    @Anopeng

    2 жыл бұрын

    @@WebCademy да я понял)) Просто так слышится первый раз

  • @user-vi8rx4kf2n
    @user-vi8rx4kf2n Жыл бұрын

    2:41:50 можно же просто бордер-радиус указать 0 22px 0 0

  • @user-vi8rx4kf2n

    @user-vi8rx4kf2n

    Жыл бұрын

    А, всё, пардон, Юрий и сам потом догнал))

  • @tovjukov
    @tovjukov2 жыл бұрын

    Что за тема VSCode??

  • @WebCademy

    @WebCademy

    2 жыл бұрын

    Ayu mirage bordered

  • @killd0z3r
    @killd0z3r Жыл бұрын

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

  • @WebCademy

    @WebCademy

    Жыл бұрын

    Это дизайнерский ход. Довольно много макетов используют наложение текста на изображение.

  • @user-wz8jd9ud9f
    @user-wz8jd9ud9f2 жыл бұрын

    Я один не понимаю, зачем резать style.css на отдельные файлы с кодом?

  • @WebCademy

    @WebCademy

    2 жыл бұрын

    Удобство. Вообще лучше сразу на SCSS.

  • @user-wz8jd9ud9f

    @user-wz8jd9ud9f

    2 жыл бұрын

    @@WebCademy все, поверстал и понял))))

  • @user-kh4hf4kz5y
    @user-kh4hf4kz5y2 жыл бұрын

    Мне кажется "с нуля" и "SCSS" не очень совместимы(( . или я что то не понимаю

  • @mst9301

    @mst9301

    2 жыл бұрын

    Полно видео на ютубе где с нуля верстают на чистом css , как будешь спокойно воспринимать информацию которую автор говорит , за что каждое свойство отвечает и как оно работает , будешь смотреть данный урок без особых сложностей , я вот первый день учу scss , и мне все абсолютно понятно , немного непривычно, но понятен сам синтаксис

  • @AlexLee-do4min
    @AlexLee-do4min2 жыл бұрын

    А вот за набой на gulp-sass-glob отдельная благодарочка! ;))

  • @incorcadit1075
    @incorcadit1075 Жыл бұрын

    6:18 почему мы не можем взять сразу круг с иконкой? зачем его самим рисовать такой же вопрос к остальным элементам

  • @incorcadit1075

    @incorcadit1075

    Жыл бұрын

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

Келесі