🔥 Верстка сайта с нуля для начинающих | Pug, SCSS, VS Code, Figma

Промокод ANNBLOK дает скидку 50% на месяц аренды любого тарифа VDS или VDC (кроме тарифа VDS Linux Light).

⚡️ Макет можно получить через донат:

✌️ Материалы:

👇 Плагины для установки VS Code:
- Live Server
- Live Sass Compiler
- pug
- Path Intellisense

Расширение для браузера PerfectPixel для наложения макета.

⚡️ Таймкоды:
00:00:00 Вступление
00:00:46 Реклама CloudLite
00:03:14 Промокод в подарок
00:03:30 №1 Подготовка проекта
00:14:45 №2 Верстка шапки сайта
00:39:21 №3 Верстка баннера
01:14:21 №4 Верстка контента
02:07:02 №5 Верстка подвала сайта
02:13:16 №6 Адаптив сайта

[annblok_webdev]

🔥 Конкурс в рамках видео:

После 18 апреля мы подведем итог.
Я выберу несколько работ и далее мы вместе определимся с победителем, если выбрать будет сложно среди нескольких вариантов. Если работ будет мало за это время, сделанные тяп-ляп, то конкурс аннулируется. Цель конкурса показать альтернативное видение сверстанного сайта.

🤗 Победитель получит:
- Отправленные 5000 рублей на карту
- Добавлю вашу ссылку с работой адаптива сюда, в описание к видео.

[tukituki]

Незаслуженно малое количество просмотров. В своё время видео очень помогло мне со стартом. Кратко, понятно, быстро и объёмно. Спасибо большое за такую работу

[mody-pqkd]

Кто-то скажет зачем здесь pug и scss? Автору советовал бы посмотреть самому видео для начинающих. Без обид, но люди смотрят на ваши решения задач и в дальнейшем несут это в проекты. Вы используете псевдоэлементы и кучу классов, хотя у вас есть псевдоклассы, которые решили бы Ваши задачи в одну строку. Пример с блоком в банере, где рейтинг, длительность и тд. Для разделения элементов внутри флекс-контейнера есть свойство gap. Для последнего элемента есть :last-child. Последний элемент дополнительно оборачиваем в div и иконку вставляем картинкой. Все. Не нужно на каждый элемент классы вешать и использовать before и after там где это не нужно.

Pug и scss - это не другой синтаксис. Это компонентный подход прежде всего. Когда мы выделяем отдельные переиспользуемые блоки, выносим их в миксины и переиспользуем. А не используем только вложеность и переменные.

Рамка с градиентом - есть свойство border-image.

[hackthenetwork]

Хочу сделать некоторую ремарку по поводу rem. Вы их используете потому что это стильно модно молодежно, а не по основной причине. Главная задача rem - менять размер шрифта в зависимости от предустановленного пользователем размера шрифта в браузуре. Однако, вы вручную задаете корневому элементу font-size: 10px, что перечеркивает основное назначение rem. Вывод: не назначайте font-size корневому элементу html, когда используете rem, иначе в результате выходят те же самые px

[pitergarin]

Не знаю как у всех, но у меня шрифт встал нормально. Прописал font-family: 'Marcellus', serif; получился такой же как на макете. Верстаю в css. P.S. Нашел причину шрифта-надо прописывать width: 532px;
и height: 161px; блока .baner_title.

[dmitriy]

Спасибо большое за практику! Очень полезное видео!

[zubrdens]

Всё классно, всё понятно, только из макета на всю информацию можно взять, в частности тени при наведении курсора на постеры (1:26:40)

[Kolxozzznik]

Border градиентом:
border: 2px solid;
border-image: 1 linear-gradient(151deg, rgba(50, 108, 255, 1) 0%, rgba(38, 255, 242, 1) 100%);

[Anodoree]

Проблему со шрифтами получилось решить только скачиванием их во всех форматах и прямым встраиванием. Основной шрифт у меня местами тоже не поддерживался.
UPD: к сожалению. конвертация шрифтов, прошла не идеально - заметил в некоторых размерах отличие букв по высоте примерно на пиксель. Не страшно, но перфекционист во мне не даёт покоя...

[Asver_]

Анна, спасибо за ваше видео!!! Очень полезная информация и всё ясно объясняете.

[hackerman]

На какой микрофон записываете звук? Звучит очень качественно и приятно

[evgpreo]

Видео не для начинающих, а для продвинутых начинающих

[klirmio]

Скажите пожалуйста, как вы подключили одновременно и SASS и Pug?
Буду очень благодарен!

[king_designn]

В Figma можно сразу выбрать элемент зажав cmd и один раз кликнуть

И не кликать по элементу несколько раз

[ВадимХодов-щр]

Здравствуйте Анна! У меня почему-то логотип с расширением .svg не отображается. А вот если меняю его на расширение .png, то всё отлично. Подскажите почему так? Заранее спасибо за ответ!

[oleg_gusei]

Момент по шрифту на 48:30
Я не проверял, но вроде у h1 по умолчанию font-weight: 700
И если переопределить в стилях ручками то наверное все норм будет

[wiktoria_ross]

Анна, скажите, пожалуйста, в какой программе работали с макетом?
Спасибо

[tatmail]

Подскажите новичку пожалуйста, сверстал сайт почти до конца и почему то он слетает, причем вся верстка сайта (где картинки перестают показывать, где то элементы располагаются сами по себе). в css /sass файле и вовсе текст сам автоматически прописывается (каракули). Подскажите что это может быть и как это исправить?

[jahongirganijanov]

Здраствуйте можете мне помочь у меня после этого " cd src pug index.pug" не выходит html и в терминале написано с красным

[panya_indastreet]

Отличное видео, спасибо! Подскажи пожалуйста, как называется расширение, которое в окошке показывает картинку?