#1 Верстка реального заказа landing Page | Марафон вёрстки | Артём Исламов

Вы много просили записать очередной марафон вёрстки — я записываю. Будем верстать реальный заказ — landing page.
================================
================================
Работать с макетом я буду в программе Avocode

ВАШЕ ДОМАШНЕЕ ЗАДАНИЕ

================================

А также буду использовать хостинг HANDYHOST
================================

Подпишитесь на канал, если вам нравятся эти видео:

Больше контента в нашей группе Вконтакте
Присоединяйтесь к нашему сообществу Discord

Мой канал в telegram "Лысый из браузера"

-----------
Я использую хостинг Link Host с 2014 года

Каналы с крутыми фичами на CSS и JavaScript:

Канал с терминами для айтишников:

Канал, где публикуют ссылки на полезные сервисы и сайты:

[Glo_Academy]

ВАШЕ ДОМАШНЕЕ ЗАДАНИЕ
Развернуть проект на Github, подключить библиотеку normalize.css, подключить шрифты и сверстать шапку сайта и главный экран. Адаптировать сверстанные блоки для смартфонов и планшетов.

[heiotrm]

Лайк сразу же за |с в эммете не знал что так можно делать, век живи век учись как говорится

[FlatOnFloor]

Не интересуюсь версткой, но автор так интересно все рассказывает, что захотелось досмотреть до конца. Молодец.

[snaxdd]

Спасибо Вам огромное за урок!
Я уже миллиард лет сижу на ютубе и трезвым еще ни 1 коммента не оставлял.
Вы супер! Даже так - Вы супер-пупер!
Обнял приподнял :)

[azazaza]

Спасибо тебе, мужик, много чего узнал и многому научился из этого видео!!!!

[arturpushkov]

Видео супер! Продолжай марафоны, они нереально полезные и интересны! Также было бы круто если сделаешь видео про все установленные плагины, программы и тд и тп, которые используешь при верстке! И конечно же, ставиим лайк!

[kzpprmm]

Артем, спасибо. Именно таких видео побольше бы)

[cqbtbpe]

Артёму жирнейший лайк!!! Оч полезно (даже если сам уже не новичек) смотреть как работают профи... Нет нет, да и полезную фишечку какую-нибудь для себя ловишь... Спасибо за науку... и Артем, ты наверное и сам видишь по количеству просмотров... что народу интересно... а что так себе... Сейчас видео выпустил... канал ожил...

[ertargn]

блин чувак спасибо за эти видосы(морофоны)....много полезного узнал. продолжай дальше в таком темпе

[WEBSTART-LIVE]

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

[milana]

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

[depstor]

Заценим, надеюсь 🤞 тут и подключение формы обратной связи будет, очень хочется про это узнать, да и про php, расскажи, спасибо !

[vitaliybabenko]

Достаточно много нового узнал. Спасиб за видос. Однако в 1:11:00 "более гибкий вариант" в том случае зря ты убрал первое условие. Оно будет отображаться так же, но работать будет по другому. Так как нет условия(первой части), то на маленьких экранах он будет применять все медиа запросы и соответственно отображаться будет самый последний.

[qbjghxl]

Я первый раз смотрю вёрстку в исполнении Артёма, и я не советую начинающим смотреть это. При составлении стандартных @media запросов нет необходимости писать интервал от и до (min-width: a and max-width: b), вполне хватит записи с максимальным пределом (max-width: a). Css файлы желательно конкатенировать в один файл и подключать только его на страницу, если подгоняем под pagespeed, можно подключать два файла (стили отвечающие за отображение элементов первого экрана, и остальные). В шапке было три практически одинаковых блока (текст логотипа + 2 блока с телефонами), почему бы не стилизовать их одинаковыми классами + добавить модификаторы для телефонов.

[eugenemorozov]

Какие настройки в live sass (setting.json)? У меня там пусто

[octrk]

mobile menu > nav { display: grid, grid-auto-rows: auto } menu > nav > link {min-block-size: 1rem}

[lanterchannel]

Мне как новичку мало что понятно в подготовительном этапе, но надеюсь вскоре буду понимать, спасибо за виде)

[konstantin-vasilev]

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

В настройках плагина указано:




"format": "expanded",
"extensionName": ".css",
"savePath": "/css/"





Кнопку «Watch Sass» нажал.

[szkwizi]

Подскажите, не проще добавить шрифты просто в css? Так быстрее и проще или я чего-то не понял?

[Logan-mzdq]

Через какую программу открывать/измерять psd макет?