Вёрстка сайта с нуля по макету Figma | HTML, CSS | Часть 1

В этом видео мы начнём верстать сайт по макету Figma.

Видео для начинающих, поэтому в нём не будет таск-менеджера(GULP) или сборщика(Webpack), только HTML и CSS!

Мы разберём интересные авторские фишки по работе с svg, шрифтами, фокусом и другие best practices.

--------------------------------------

Ссылки:
--------------------------------------

Тайм-коды 🕒

00:00 Приветствие и обзор исходников
01:42 Рассмотрим макет
06:56 Начинаем
08:29 favicon - фавиконка
16:30 header html - начинаем разметку
18:04 logo sprite svg - логотип
27:06 header html - завершаем разметку header
29:57 css normalize - нормализуем
32:11 css fonts - шрифты
40:38 css default - базовые стили
53:19 svg circle
01:04:07 header css - пишем стили для header
01:13:00 адаптив header
01:04:07 header css
01:43:12 Завершаем 1 часть
--------------------------------------

Автор — Максим Лескин

#methed #html #css

[valerypobelenskiy]

Максим огромное спасибо за ваши труды и время ) крутой фронтендер)

[wxegsfc]

Огромная благодарность за Ваш профессионализм и доброту, через ноутбук так и передаётся Ваша поддержка и заинтересованность дать, как можно больше знаний🖤

[Serega-gslo]

Спасибо за бесплатные видеоуроки, мне как новичку более/менее всё понятно, если знать базовые вещи, например БЭМ, основные теги. Вот бы еще побольше про перенос самописа на Wordpress, про сам Вордпресс, как редактировать код, починить, например, форму, кнопку, создать правильно шаблон страницы, записи, кастомные поля. Я благодарен, продолжайте в том же духе, это адский труд.

[myiqgvx]

спасибо, искал обучающий ролик по красивому макету по бем методологии, идеальный вариант :)

[frond-end_dev]

низкий поклон за титанические старания! ждем продолжения данной рубрики на канале

[httpohd]

очень круто что говоришь: что, зачем, куда, и что думаешь. Этого очень не хватает в подобних видео потому что хочеться не знать как конкретно сделать ту или иную вещь, а формулу как это делать что бы потом можно было самому создавать и так далее мужык тебе респескт.

[desavopa]

Братан спасибо тебе за видео очень помогло, у тебя такой приятный голос и сам ты очень добрый, прям тащусь

[MonteCrush.]

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

[romanzinchenko]

Подскажи, что за плагин стоит в ВС чтоб отображались подключенные картинки? спасибо.

[itegfwe]

Подскажите пожалуйста, установила плагин SVG, иконка не появляется (в виде солнца) и не работает эммет. Что в настройках поправить нужно?

[icegouse]

Почему не качаешь с официального Google Fonts шрифты?

[dalex]

А ничего если иконка бургера для сафари сохранилась файлом, на ярлыке которого указан explorer??? Или это дело в Виндоус 10? К тому же что делать если шрифты так и не загрузились? Может быть это связано с тем, что появился новый код для modern browsers, а я использовал как у вас - legacy support?

[Anton]

Какой приятный голос. Смотрю на 1.75 (как и у всех времени не хватает), но так приятно, без тормозов, слов паразитов и долгих уходов в себя как у некоторых. Прям загляденье в общем. Успехов Вам в ваших проектах, всем добра!

[arturogatti]

Здравствуйте а вы всегда используете метод mobile first?

[vtycyet]

во время верстки столкнулся с проблемой, что шрифт почему-то по способу из видоса не импортирует русскую раскладку. Я не понял, где ошибся, но методика через линк в хеддер из google fonts решило проблему. Но я так и не смог понять, почему русская раскладка не отображалась, хотя с английской всё было окей.

[kntbruh]

01:09:00 не получилось у меня после url прописать bottom/227px no-repeat, почему?
пришлось отдельно всё это писать

[loblppt]

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

[nailyatolstenko]

Подскажите пожалуста как можно экспортировать картинку с бургером целиком, не могу объединить в группу слоёв, чтобы экспортировать. Работаю на Линукс, может поэтому у меня комбинация кнопок другая?

[eeklnry]

Спасибо за урок, но можешь пожалуцста подсказать почему когда я подключаю svg logo через sprite.svg оно просто не отображается а если просто в body вставляю svg( то что скопировал в фигма) все работает, не знаешь как решить ?(

[lsdkkdkkd]

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