Скачать "Верстка лендинга Discover #1 | Github, CSS-переменные, создание favicon"

Обложка аудиозаписи

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

Предыдущее видео: UI-компоненты №7. Таймер обратного отсчета на чистом JS Следующее видео: UI-компоненты №19. Блок характеристик в интернет-магазинах

0:00

Начало

2:15

Подготавливаем проект

8:03

Создаем favicon

12:50

Работаем с Github

18:15

HTML-код шапки

21:30

"Переменные" CSS

25:50

CSS-код меню

34:01

Итоги

UI-компоненты №19. Блок характеристик в интернет-магазинах

UI-компоненты №19. Блок характеристик в интернет-магазинах

Канал: MaxGraph - cайты как страсть

UI-компоненты №7. Таймер обратного отсчета на чистом JS

UI-компоненты №7. Таймер обратного отсчета на чистом JS

Канал: MaxGraph - cайты как страсть

Адаптивная верстка сайта с нуля для новичков. Полезные советы по верстке сайта

Адаптивная верстка сайта с нуля для новичков. Полезные советы по верстке сайта

Канал: MaxGraph - cайты как страсть

UI-компоненты №2. Сетка карточек и фиксированный фильтр

UI-компоненты №2. Сетка карточек и фиксированный фильтр

Канал: MaxGraph - cайты как страсть

ВЕРСТКА САЙТА ($70) ВЫПОЛНЯЕМ РЕАЛЬНЫЙ ЗАКАЗ

ВЕРСТКА САЙТА ($70) ВЫПОЛНЯЕМ РЕАЛЬНЫЙ ЗАКАЗ

Канал: ДЕН - подорожую та програмую

UI-компоненты №4. Отправка корзины на почту

UI-компоненты №4. Отправка корзины на почту

Канал: MaxGraph - cайты как страсть

CSS-transition. Все самое важное о плавных переходах в CSS

CSS-transition. Все самое важное о плавных переходах в CSS

Канал: MaxGraph - cайты как страсть

UI-компоненты №3. Корзина товаров на чистом JS

UI-компоненты №3. Корзина товаров на чистом JS

Канал: MaxGraph - cайты как страсть

Верстка сайта с нуля на HTML и CSS для начинающих - Часть 1

Верстка сайта с нуля на HTML и CSS для начинающих - Часть 1

Канал: ВЕРСТАЧ

CSS Grid с нуля №1. Разбираем базовые свойства grid-контейнера

CSS Grid с нуля №1. Разбираем базовые свойства grid-контейнера

Канал: MaxGraph - cайты как страсть

верстка

верстка лендинга

верстка сайта

верстка с нуля

верстка сайта с нуля

html

css

html уроки

css уроки

favicon для сайта

favicon

github

landing

landing page

html css

меню на сайте html

navigation css

resposive

psd

адаптивная верстка

верстка макета html css

верстка макета с нуля

верстка лендинга с нуля

верстка landing page

верстка сайта по макету

современная верстка сайта

верстка сайтов с чего начать

как создать сайт

frontend

лендинг

уроки верстки сайта

lectorweb

00:00:00

[музыка]

00:00:16

[музыка]

00:00:26

здрасьте уважаемые подписчики сегодня

00:00:29

хочу представить вам новый плейлист с

00:00:32

простым названием world к сайта куда я

00:00:35

буду выкладывать видео где буду просто

00:00:38

верстать сайты полностью от нуля или

00:00:42

долл выпуски и например но тот же диск

00:00:46

от мы будем использовать и подключать и

00:00:50

картинки и слайдеры и но к чему другого

00:00:53

интересного значит что делал я создам

00:00:57

новую папку для проекта

00:01:01

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

00:01:05

простенький лендинг вот или разберем

00:01:09

такие темы как мы подготовим наш проект

00:01:13

свяжем его с гидом для того чтобы

00:01:16

фиксировать все наши изменения по

00:01:20

создаем добавим пустые файлы все это

00:01:22

подключим создадим favicon обязательно

00:01:28

делаем горшку шапки и адаптируют неё

00:01:35

от все наши устройства сайт у нас будет

00:01:41

вот таким образом такой простенький

00:01:44

лендинг котором три значение 5 пунктов

00:01:49

на ножке логотип некая от секция с

00:01:51

кнопочкой ну скорее всего эта ссылочка

00:01:54

есть мы походу будем это все разбирать

00:01:56

вот здесь у нас будут использоваться

00:01:57

некий слайдеров здесь мы скорее всего

00:02:01

сделаем чтобы фотографии прикрытие

00:02:04

увеличивались и соответственно формочка

00:02:08

социальной сети и как дали вот такую

00:02:10

праздники lading ссылочку на скачивание

00:02:12

то файла я оставлю в описании ну давайте

00:02:15

начнем 25 я создал то тачку под проект

00:02:17

назвал эту чем как же discover просто

00:02:20

сразу сюда этот проект

00:02:23

так и начинаем это делать я открываю

00:02:30

папочку вот она discover значит начнем с

00:02:36

того что я по создаю нужные мне по

00:02:39

я создам папочку css также создам

00:02:43

папочку папочку д.с.

00:02:47

почему я делаю всегда отдельной папке

00:02:49

потому что файлов психики у нас может

00:02:55

быть несколько файлов с скриптами у нас

00:02:58

тут же путь много вот поэтому делаем все

00:03:02

по отдельности чтоб не было у нас

00:03:04

бардака в нашем проекте

00:03:07

так так же я еще создам папочку для

00:03:10

ваших картинок и в принципе все значит

00:03:17

создаем

00:03:19

файлик индекс точка html папочке с с

00:03:29

создаю файлик вставил . css и в папочке

00:03:35

джесс создаем полик просто скрипт .

00:03:40

вот пока у нас будет такая вот структура

00:03:44

джея сам мы сегодня пользоваться вы

00:03:47

скорее всего не будем вот и в принципе

00:03:52

вот проектом не готов давайте немножко

00:03:54

его хоть что-то

00:03:56

пропишем значит лорд нага сразу

00:04:01

прописываю стандартные жди моего прежде

00:04:05

здесь меня

00:04:08

название также я подключу наши стили

00:04:15

normal айс я лично используем armalite в

00:04:19

своих проектах я не буду его скачивать я

00:04:23

подключил через c да я вот normal айс

00:04:31

вот он малость css 8 эти копируем

00:04:39

подключаем есть что нам нужно еще для

00:04:46

этого еще нам нужно подключить шрифты

00:04:51

давайте сразу открою наш макет фотошопе

00:05:00

и стол вам скажу он нам скажет что

00:05:03

используется некий срез под названием la

00:05:06

к силе болт он у меня установлен поэтому

00:05:08

он ругается все остальные шрифты

00:05:12

здесь присутствует у меня просто так

00:05:14

получилось что стив лотта угли стоит его

00:05:16

разновидности чертами не стоят этого не

00:05:20

показал и все значит то в принципе все

00:05:23

он больше вам ничего врубается но вообще

00:05:25

я советовал иногда

00:05:29

бегать полна файлом они по всему нашему

00:05:32

проекту и при directors доу здесь вата

00:05:34

используются из 10 ладно кнопочки лотта

00:05:39

7 болт на то есть хороший ток если вас

00:05:42

нету на компе

00:05:44

выпустите их как бы видеть он вам как

00:05:48

раз будут ругаться они так он перестанет

00:05:50

какого спектор давайте сразу его

00:05:52

подключим я захожу на google forms я

00:05:55

точно знаю что там это через есть милый

00:05:57

неоднократно использовал проектах любой

00:06:01

отбиваю поиском лату

00:06:02

вот он у нас так мне нужен регуляр дает

00:06:12

им добавил его также мне нужен а 10 и 7

00:06:19

мм да и нету

00:06:22

будем некоторые вещи именно реки пожать

00:06:25

ему руку то это в принципе нормально все

00:06:29

я подключил обычный шрифт и такой не грн

00:06:33

все дальше что отдел я хочу их

00:06:36

подключить я предпочитаю подключать не в

00:06:39

cs и si nici давенпорт

00:06:40

а именно вам стимул я это скопирую и

00:06:44

давайте куда-нибудь вам доллар малайзии

00:06:46

его подключу

00:06:49

вот на стене ли мы подготовили в

00:06:51

принципе все как давайте сразу скрипт

00:06:53

подключу

00:06:55

чтобы потом не забыть так же все-таки

00:07:00

если мы будем использовать такую вещь

00:07:02

как у ли чего картинок под названием

00:07:04

fancybox у нас будет карусель когда

00:07:07

будем использовать цвет славе потому что

00:07:10

он не больше нравится они работают

00:07:12

вместе с библиотекой jquery

00:07:13

вот поэтому не сразу и и подключаю вы

00:07:17

можете подключать ее откуда угодно я

00:07:19

просто уже на память помню качаю

00:07:22

подключая это все с официального сайта

00:07:25

соло джек лари также эти файлики лежат

00:07:29

на google нагуглили записи на серверах

00:07:33

да на яндексе много где то есть можете

00:07:36

узнать подключить declare удаленно и вам

00:07:38

кучу этого всего вы 1 долл вроде бы как

00:07:43

на этом все до вы здесь все подготовили

00:07:47

все подключили

00:07:48

что нам нужно сделать еще для лайки вы

00:07:54

что подготовим чтобы сразу я лично

00:07:56

предпочитаю сразу все делать чтобы потом

00:07:58

не забывать какие-то мелочи иногда они

00:08:00

просто башки вылетают абсолютно давайте мы на

00:08:04

льна сразу же сделаем с вами favicon

00:08:07

очку соку за ними возвращаться сюда на

00:08:10

верх не скакать если ты не знаешь о

00:08:12

дикон .

00:08:13

это вот такая вот маленькая иконка

00:08:15

которая показывается у вас здесь

00:08:18

браузере это дает как бы вам некую

00:08:21

привилегию мы как бы бренд до своего

00:08:24

рода узнаваемость и тактами

00:08:28

значит как это всё сделать так чтобы

00:08:31

было отлично на показывалась на всех

00:08:35

девайсах

00:08:36

раньше достаточно было просто закидывать

00:08:39

некую картинку в формате aiko не все

00:08:42

сейчас не так это актуально сейчас нужно

00:08:46

сделать несколько форматов что я сделал

00:08:48

я просто подготовил картиночку просто

00:08:52

такая зелененькая буква даю таким же

00:08:54

цветом как и было

00:08:55

на самом сайте воспользуюсь я вот таким

00:08:59

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

00:09:02

я тоже оставлю в описании полным делает

00:09:04

я просто сюда загружаем

00:09:06

мою картинку произвожу небольшие

00:09:12

настройки да вот допустим умирай ценам

00:09:15

не на белом цвете да давайте сделаем ну

00:09:18

пусть даже track 3 они сильно актер да

00:09:20

чуть чуть величин оценки в вроде никто

00:09:24

смотрится идем дальше здесь принципе

00:09:28

пойдет до

00:09:29

хотя можно наверно сделать лучше и белые

00:09:32

секса у на все таки светлые данного из

00:09:37

мешка пусть будет свет нет пусть уже

00:09:40

будет все в одном стиле до черного

00:09:42

погорячился далее вот у нас буква д все

00:09:46

классно но у нас тут стоит название моя

00:09:49

вода его падения я вставлю сюда галочку

00:09:52

пишу и есть 5 вот так вот он будет

00:09:58

видеть на телефончика так смотрим дальше

00:10:02

но здесь давайте тоже мы сделаем

00:10:05

попробовать удел и не знаю как он будет

00:10:07

валяться здесь в принципе

00:10:16

тоже можно сделать дело нет дела нам не

00:10:19

пойдет давайте зеленый вот этот зеленый

00:10:22

он не а где то мне тут был буфере

00:10:32

это не плата не суть

00:10:35

давайте оставим белый здесь вы можете

00:10:39

абсолютно играться с этим сям хотела

00:10:41

здесь уже не финал не смотрится так

00:10:43

давайте я быстренько возьму этот цвет

00:10:51

вставлю туда все-таки надо намного лучше

00:10:56

смотрится теперь что мне нужно дальше за

00:10:59

сделать а просто нажимаю кнопочку

00:11:00

двигаете и фильтр amc жду некоторое

00:11:04

время пока у них подготовит всем и

00:11:08

файлики

00:11:15

так вот вот он нет все подготовил значит

00:11:21

что мне нужно и я нажимаю скачать

00:11:23

на оптовиком трепет сдаче в архив

00:11:26

котором хранятся все картинки для всех

00:11:28

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

00:11:30

и копирую вот эту часть это же вставляю

00:11:34

куда-нибудь между тегами хлеб ну давайте

00:11:35

куда-нибудь сюда в силе здесь на что

00:11:39

сделаю я поменяю путь я сделал отдельные

00:11:42

папочки favicon просто люблю когда

00:11:46

порядок проектах favicon же favicon

00:11:51

давайте на видите здесь есть картинки 32

00:11:54

на 32 и 16 на 16 и формате svg

00:11:58

все здесь как бы до 180 на 180 для этого

00:12:02

он нам самый как всерьез все это сделал

00:12:06

так далее это нам уже не нужно теперь я

00:12:11

здесь создам папочку favicon

00:12:17

и из моего архива брошу все что там

00:12:21

лежит абсолютно все мы давайте теперь

00:12:28

запущу это все

00:12:33

посмотрим что у нас получилось как

00:12:36

видите вот она favicon очка теперь у нас

00:12:39

есть супер отлично

00:12:43

дальше давайте мы что сделаем

00:12:46

начнём потихонечку делать значит

00:12:51

смотрите что можно еще сделать я

00:12:53

подготовил все файлики до сделал

00:12:56

отключение

00:12:57

подключился к плечу мои css mr малайзии

00:13:00

скрипт принтом джек вере все сделал

00:13:02

вроде все подготовил теперь давайте я

00:13:05

хочу это все зафиксировать в принципе

00:13:09

это фиксация сейчас мы на них не

00:13:10

обязательно но он не допустить так

00:13:12

хочется как это все делается значит я

00:13:16

захожу на наш сервис гид хоп создаем

00:13:23

новый репозиторий давать ему такое

00:13:25

название там this power есть и нажимаем

00:13:30

создать репозитории если нужно более

00:13:35

подробно сказать что и сейчас вообще

00:13:36

делаю напишите в комментариях я записать

00:13:40

gelin ролик для чего это все нужно так

00:13:43

запускаем терминал и начинай

00:13:46

инициализировать мой проект я пишу гид и

00:13:49

нет он не говорит так я тебе все

00:13:53

подготовил и у меня теперь вот здесь

00:13:56

просто не видно лежит на tochka.net

00:13:58

скрытая которая хранятся все что

00:14:02

касается наших вот этих вот извинений

00:14:04

фиксаций и тому подобное далее давайте я

00:14:08

все это проверил решил гид стал такой не

00:14:13

будет о и сколько утянут файла всяких не

00:14:16

понятно да надо я про них ничего не знаю

00:14:19

надо их зафиксировать

00:14:20

единственное что не нужно мне делать и я

00:14:23

не хочу файл поезда и заливать туда на

00:14:27

репозиторий зачем мне нужен

00:14:28

что для этого нужно

00:14:30

я создам здесь некий файлик прям в корне

00:14:33

проекта

00:14:34

но ты так и назвал его .

00:14:37

гип и гимор

00:14:43

что делает этот факт этот файлик

00:14:46

в него я могу записать те файлы которые

00:14:50

будут интегрироваться и не будут

00:14:52

заливаться на мой репозиториев от него

00:14:56

опыта я могу так просто указать все

00:15:02

можно указывать здесь папки некоторые за

00:15:05

но нам принципе все нужно из этого далее

00:15:10

давайте теперь я зафиксирую

00:15:14

изменение у себя на локальном компьютере

00:15:15

убит а д д не добавляю все файлы

00:15:19

подготавливаю скажем так так давайте

00:15:24

опять запустим дик статус и так вот я

00:15:27

нашел кучу всяких новых файлов отлично

00:15:29

теперь я хочу запомнить как бы

00:15:32

зафиксировать git commit

00:15:35

говорят так подготовит конечно лучше

00:15:39

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

00:15:41

проект

00:15:44

и если ты же проверить статус не скажет

00:15:47

молодец а тебя чушь зафиксировала все

00:15:49

круто что теперь мне нужно сделать

00:15:52

когда я создавал и здесь репозитории он

00:15:54

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

00:15:56

сделать и первый коммент и теперь они

00:15:57

дают подключить сюда хорошо я

00:16:00

подключаюсь копируем вот эту часть

00:16:03

видите все вот эти предыдущие действия

00:16:05

как бы сбил вставляю все я подключился и

00:16:11

теперь я хочу залить все свои изменения

00:16:14

сюда при пози торе то есть если у них

00:16:17

что-то на компе накрывается за этом

00:16:20

винда рухнет жесткий полетит туда пока

00:16:22

не то тому подобное все файлы будут

00:16:25

храниться вот здесь я всегда могу и

00:16:27

хмурым его не достать вставляю вот эту

00:16:31

часть жду некоторое время и вот он не

00:16:38

говорит все круто сколько было файлов

00:16:41

сколько они заняли место я здесь просто

00:16:43

обновляем страничкой и вижу все свои

00:16:47

файлики папочки все кроме угол файла pst

00:16:53

и теперь все последующие изменения

00:16:54

которые мне нужны будут я буду писать

00:16:56

одну команду то есть я буду фиксировать

00:16:59

изменение дописать что именно в этот

00:17:01

данный период

00:17:02

сделал и писать оба команду гибку шпионю

00:17:06

тут поправить ок залил то есть мне нужно

00:17:08

вручную заливать все эти папочки файлы

00:17:10

написали два слова и все у нас туда

00:17:15

полетела

00:17:16

ну давайте так чуть-чуть с кровью в

00:17:20

принципе что мы теперь сделаем давайте

00:17:23

теперь лети туда же отметочки 10

00:17:26

специальное расширение здесь станет

00:17:28

visual studio что когда этом дел так

00:17:32

ну чего мы начнем давайте начнем давайте

00:17:37

я пока закрою не пока не нужен начнем

00:17:40

потому что я про мониторе

00:17:44

наш макет и придут в воду что у меня

00:17:49

есть как бы большая область да то есть

00:17:51

весь проект и есть так называемая

00:17:53

область контента то есть та часть

00:17:55

которая всегда находится в серединке

00:17:57

начинить вот оно здесь есть да вот здесь

00:18:01

я допустим нету вот то есть я прекрасно

00:18:05

понимаю что мне нужно создать кричала

00:18:07

больше большую такой вот вот я вижу ну

00:18:10

что весь ширина всего был проекта 1920

00:18:14

значит что я сделаю ваш timeless создан

00:18:17

некий блок под названием я обычно

00:18:20

предпочитаю да и многие разработчики

00:18:22

предпочитают название кураторов так

00:18:24

жестко далее вот эта вот часть это будет

00:18:31

моя шапка мой как а уже внутри него я

00:18:36

сделаю некий div с классом до который

00:18:40

будет как раз держать вот эту мою

00:18:42

область контента давайте сделаю кадр и

00:18:47

давайте я назову этот класс контейнер

00:18:50

это он со времен bootstrap не все пошло

00:18:53

такая дурацкая привычка что нам теперь

00:18:57

нужно нам нужен логотип и меню

00:19:00

состоящий из пяти пунктов мы конечно

00:19:04

можем что сделать мы можем этот логотип

00:19:06

тоже сделать кодов можем сделать

00:19:10

картинка но сделать его кодом я думаю будет

00:19:12

намного интересней значит я делаю ссылку

00:19:17

с классом блога так в нее что делаю в

00:19:23

нем вставляем слова discover

00:19:28

лефкада и также у нас есть слово

00:19:32

требовал но давайте мы его попробуем

00:19:35

сделать через элемент

00:19:37

отдыха и автор далее у нас идет тактов

00:19:43

так как минимум ни одно на сайте да я

00:19:45

его не буду задавать никаких классов ему

00:19:50

хотя в принципе вполне можно я честно

00:19:53

скажем не любитель with a2dp

00:19:56

поэтому я делаю именно таким опытом

00:19:59

далее создаем список

00:20:01

создаем ссылки в которых начинают писать

00:20:05

вот эти ваши

00:20:07

название home for

00:20:16

это сочетание клавиш привык сабами холм

00:20:21

так раз два три 4 5

00:20:30

открыл хватал

00:20:34

culinary ну ладно непонятно по игре

00:20:41

минари

00:20:42

и контакт вот на этом пока

00:20:49

остановлен займемся теперь нашим css а

00:20:55

значит что я делаю первым делом ситуация

00:20:58

с этими для всех элементов и для всех

00:21:03

псевдо-элементов

00:21:07

всегда задаю такой свойство как бокс

00:21:14

сайзинг

00:21:15

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

00:21:18

потом с по деньгами не было никаких

00:21:20

проблем если хотите более подробно

00:21:24

этого свойства напишите в комментарии к

00:21:26

вам отвечу далее давайте представим что

00:21:31

заказчик у нас неадекват так вам по

00:21:35

секрету скажу какое на процентов 90 см

00:21:38

учат сейчас мы сделали все зеленых

00:21:40

оттенков да потом гриб блин давайте

00:21:42

сделаем чуть чуть темнее чуть-чуть

00:21:44

заклеили там красный мы сделаем что мы

00:21:47

сделаем мы заведем

00:21:50

нити как я их называли переменные css и

00:21:55

вот вообще по правильному не называется

00:21:57

к основные свойства

00:21:59

назначается они всегда самому главному

00:22:01

элементу

00:22:02

да то есть мы можем из клипа html либо :

00:22:05

руб значит что мы сделаем ночи давайте я

00:22:10

сделаю

00:22:11

ты что-нибудь таким образом сделаю

00:22:13

примем green да в котором не будет

00:22:16

храниться вот этот основной

00:22:18

зеленый цвет возьмем его пипеточкой

00:22:23

ставить далее у меня будет храниться вот

00:22:28

этот ужас какой делать super white

00:22:35

далее вот этот черный цвет или какой-то

00:22:40

это серый 47 ты так всем на давать игры

00:22:43

вообще конечно лучше давать более

00:22:47

понятные названия в принципе мне и так

00:22:51

понятно я не утверждает что в и

00:22:55

методология и так мои приколы

00:22:59

очень правильные вот у вас могут быть

00:23:02

свои потом так вот здесь ещё у нас

00:23:05

какой-то дар какой то можно было делать

00:23:11

для чего это нужно для того чтобы я

00:23:15

потом здесь зашел в одном месте поменял

00:23:18

там зеленый на сине-белый на черные и

00:23:21

вся эта на какой-нибудь там тёмно-синий

00:23:25

другими сайт полностью меняет всю

00:23:28

цветовую гамму

00:23:29

это очень удобно особенно когда вы не

00:23:34

знаете будет ли что-то меняться вообще

00:23:37

конечно так не делается из кадиса не

00:23:40

нарисовал уже макет то заказчик out

00:23:43

рождает и все какие-либо переделки

00:23:46

доделки это уже как бы ну

00:23:48

оплачивается все ну давайте пока на этом

00:23:52

остановимся если чтобы потом еще добавим

00:23:54

дальше ширина всего сайта у нас в 1920

00:24:00

что можно сделать давайте мы мирно также

00:24:03

сделать если виду какую-нибудь

00:24:06

переменной под названием допустим wrap

00:24:08

мисс да точно отвертки напишу 1920

00:24:13

и у знаю сколько у меня вот это вот те

00:24:17

часть даже затем она не по этой стали

00:24:20

рента

00:24:22

повод этой ну там плюс минус 1170

00:24:29

то есть даже в принципе он туда 1174 не

00:24:33

люблю не круглый цифра либо я просто

00:24:34

здесь немножко промазал что тоже имеет

00:24:37

место быть

00:24:41

нет 1170 да все все таки четко отлично и

00:24:45

мы сделаем учебные примеры допустим

00:24:48

нотик он весь наш ногами всяком

00:24:52

контейнеру из мы сделаем 1170 пикселей

00:24:58

но в чем прикол в том что когда вы будем

00:25:02

сжимать наш сайт на то есть адаптировать

00:25:05

его будем нам не нужно чтобы вот эти

00:25:08

картинки далее вот так вот к самому краю вот не

00:25:12

допустим вот этот логотип и должен быть

00:25:14

какой-то воздух по краям это вы увидите

00:25:17

на любом нормальном адекватном сайте вот

00:25:20

поэтому я добавлю еще по 15 пикселей с

00:25:25

каждой стороны

00:25:26

потом этому блоку нам итоге тогда боку в

00:25:28

пусане 1170 1148 ладится эти пятна спицы

00:25:34

поэтому и сразу дело его

00:25:36

1200 в итоге на по 15 пикселей с каждой

00:25:41

стороны и в итоге как раз блоку не

00:25:43

получится пищи 170 и потом я не буду

00:25:46

переживать за то что у меня здесь

00:25:47

воздуха нету там будет отлично далее для

00:25:52

бабе давайте сразу дам программ туда вот

00:25:55

у нас в беленькие и вот как раз на

00:25:57

помощь нам сейчас приходит сразу такое

00:26:00

как раз сразу первая переменная как их

00:26:05

использовать пишем снова ничего явор и

00:26:09

здесь пишу

00:26:11

white отлично дори давайте разберемся со

00:26:16

шрифтом значит я уже закрыл губу поэтому

00:26:18

по памяти and shoot

00:26:19

font family lotu

00:26:26

цель

00:26:28

кстати ради эксперимента можно сделать

00:26:31

вот что

00:26:37

мы вынесем некую перемены чтобы если что

00:26:44

мы даже через могли поменять пол всему

00:26:46

сайту хотя с одной стрелы могли здесь

00:26:48

поменять тоже в одном месте но такими

00:26:55

вещами очень удобно работать так это мы

00:26:58

сделали теперь занимаемся тем что нам

00:27:02

нужно значит wrapper гадил imax

00:27:05

виз и опять вставляем ее переменные

00:27:10

нуждалась она у меня украл сразу делаю

00:27:16

warging больно авто то есть если кровать

00:27:20

будет больше чем 1920 боксе равно

00:27:22

останется по центров ну я тому что вот

00:27:28

эта вот картинка да не расползется по

00:27:31

всему экрану ты должна быть какое-то

00:27:33

ограничение magical же зависть

00:27:35

техзадания барзиков заказчика и тому

00:27:38

подобное continue their

00:27:43

значит опять и делаемый макс виз

00:27:46

вставляя нашу переменную counter виз

00:27:53

сразу же делаю martin volt авто

00:27:59

давайте сразу же мы пишем дисплей flex

00:28:03

да потому что у нас

00:28:04

каждом карты лига легенд и будут

00:28:06

располагаться гибко скажем так по flexo

00:28:13

да и в принципе давайте пока все потому

00:28:16

что где-то мы не давайте напишем

00:28:18

заступай контент space between

00:28:23

тоже не всегда получается заранее все

00:28:26

продумывать сюда может где-то здесь

00:28:27

поезда сильно здесь может быть центром

00:28:29

там здесь еще что то но мы всегда можем

00:28:32

перезаписать есть мы просто работаем

00:28:35

сейчас на скорость

00:28:37

подготовка занимает больше времени до

00:28:39

чем это время что вы сейчас вот это все

00:28:41

делали можно было уже вот эта часть

00:28:45

полностью сделать еще и адаптировать вот

00:28:50

так так так начинаем работать значит с

00:28:57

нашей шапкой но в принципе тут вроде как

00:29:01

никаких этих нету ни отступов ничего

00:29:06

давайте мы вообще давайте его пока

00:29:09

наверно сверло да и вот здесь тоже

00:29:14

сделает деле на кошечка чтоб мы наглядно

00:29:17

продолжали

00:29:19

бог чтобы наглядно видели как вообще у

00:29:22

нас что что происходит что меняются

00:29:30

так давайте начнем наверно с минут потом

00:29:33

женимся логотипом значит для самого

00:29:36

пеганов в принципе ничего задавать его

00:29:39

поэтому я сделал для т г г л

00:29:44

встретил руб конечно первым делом we'll

00:29:46

be run вот маркер и лаги ставил

00:29:52

так же сразу я ему делаю дисплей flex

00:29:56

для того чтобы выровнять наши пункты

00:29:58

меню

00:29:59

далее смотрим для ли

00:30:03

ну вроде как никаких таких нет россияне

00:30:09

то есть как видите у ссылок здесь вот

00:30:12

ступы да никогда 0 но слова тур у нас

00:30:14

можно здесь есть небольшого заплывать и

00:30:16

сделаем тепло не было так будет

00:30:17

интереснее вот поэтому для меня в

00:30:20

принципе ничего не задаю давайте

00:30:23

займемся должны ссылками на понятный

00:30:27

первым делом я решил тех дикарей шэннон

00:30:29

убираю все подчеркивали

00:30:31

также делаю титры мтс форм интерфейс

00:30:34

поэтому я специально них ложки мире не

00:30:36

писал большими заглавными

00:30:39

далее смотрю какой цвет

00:30:44

подзабыл 47 форекс интерактив это у нас

00:30:48

был что это был просто грей отлично

00:30:52

пишет camber

00:30:56

ковер игры есть сразу давайте сделаем их

00:31:05

дисплей блок да и изольде мы падем где

00:31:11

то есть мы сделаем падике слева и справа

00:31:16

по 23 пикселя

00:31:18

а сверху и снизу пол 55 что там как-то

00:31:23

дофига наука за padding 256 пикселей 23

00:31:28

себя так что я еще не указал фан-сайт

00:31:36

adsalsa франциском toyz у нас был 18

00:31:43

пикселей

00:31:47

вместо

00:31:49

отлично так давайте сразу сделаем

00:31:55

наведение верно так и на телегу раскрою

00:31:58

все таки поинтереснее будет так сразу

00:32:02

для нас а а вот я сразу делаю белый цвет

00:32:13

background сразу делаю зеленый давайте

00:32:18

посмотрим отлично конечно наверно скорее

00:32:22

всего круче будет сделать плавность

00:32:29

давайте добавим свойства здесь обыватель

00:32:35

нам три секунды я думаю теперь нормально

00:32:38

нужно быть да отлично так что нам нужно

00:32:44

сделать нам 3 логотип надо выровнять по

00:32:46

центру вместе с нашим меню чита у нас

00:32:48

какой-то скачок не понятно здесь

00:32:51

посмотрим контейнер для вроде как все

00:32:53

правильно я знаю откуда у нас тут вот

00:32:58

этот сверху непонятный забыл у наших вот

00:33:01

этих списков увела у всех по молчанию

00:33:04

есть отступ сверху и снизу и есть

00:33:08

padding слева вот поэтому для этого ела

00:33:14

я это все обнулил и как видите теперь у

00:33:17

меня всё чётко так теперь на что хочу я

00:33:20

хочу выразить а первых логотип на один

00:33:22

уровень с нашими пунктами меню

00:33:26

что мне нужно на 3 рубля контейнеров

00:33:28

везде будет использоваться до поэтому

00:33:31

давайте носит очень более явно лучше

00:33:33

указу хедер контент то есть контент который

00:33:37

находится в нашей шапки у него будет

00:33:40

километров по центру то есть

00:33:44

вертикального равно будет центров и вот

00:33:47

отлично то что нужно

00:33:51

далее далее далее

00:33:53

занимаемся самим plan k тип вот уже

00:33:57

будет вы интереснее итак давайте на

00:34:02

сегодня подведем итоги значит что мы

00:34:03

сегодня сделали мы подготовили наш

00:34:05

проект подключили черты и подключили normal айс

00:34:08

подключили скрипте и джек вере и так

00:34:10

далее также мы научились делать favicon

00:34:13

для всех платформ при помощи вот этого

00:34:15

замечательного сервиса

00:34:16

ссылочку опять же повторюсь она оставлю

00:34:18

этот сервис в описании также мы

00:34:21

научились фиксировать те наши изменения

00:34:22

и заливать наш хип-хоп репозиторий мысли

00:34:26

стали вот такое вот

00:34:28

меню сделали что при наведении на у нас

00:34:32

так прыгал а также чуть-чуть операционно

00:34:35

сказал что такое

00:34:36

костанае свойства css или каких-либо

00:34:38

назвать css переменная следующем выпуске

00:34:41

мы с вами совершим логотип адаптивным

00:34:43

нашу вину и напишем небольшой скриптик

00:34:45

чтобы сделать бургер меню чтобы крепить

00:34:48

нашу менюшку выпадала из раскрывалась и

00:34:50

закрывалась поэтому обязательно ставьте

00:34:52

колокольчики чтобы не пропустить новое

00:34:55

видео также подписывайтесь на канал если

00:34:58

вы этого еще не сделали

00:34:59

обязательно ставьте лайки и до встречи в

00:35:03

следующем выпуске всем пока

00:35:10

[музыка]

Описание:

В этом видео мы начнем верстать лендинг. Мы подключим все файлы и шрифты, сделаем favicon, сверстаем меню и зальем все это на Github. ➡️Скачать макет Discover: https://drive.google.com/file/d/17YZXEUVoZu00XB_Q8ZibEMRG6dCJJilH/view?usp=drive_open ➡️Сделать Favicon: https://realfavicongenerator.net/ ➡️Сервис Github: https://github.com/ Тайм-коды: 🕐00:00 - Начало 🕐02:15 - Подготавливаем проект 🕐08:03 - Создаем favicon 🕐12:50 - Работаем с Github 🕐18:15 - HTML-код шапки 🕐21:30 - "Переменные" CSS 🕐25:50 - CSS-код меню 🕐34:01 - Итоги ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 👉Задать вопрос: https://goo.su/8Gap 👉Разбор ваших работ: https://goo.su/8GaP ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 🤟Вступайте в чат и общайтесь с единомышленниками: https://t.me/lector_web ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 👍Получить доступ к различным плюшкам (доступы к макетам, скриптам, готовой верстке) + поддержка канала: ➡️ https://www.patreon.com/lectorweb ➡️ https://boosty.to/lectorweb ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 👍Если вы хотите просто поощрить мои старания любой суммой, я буду вам предельно благодарен. Мои реквизиты: 💲ЮMoney(Яндекс Деньги): 41001858794127 💲Приват24: 5363 5420 1714 8058 💲Monobank: 4441 1144 2283 2244 ===================================================================== Всем привет! Меня зовут Алексей Перепелка. Я занимаюсь разработкой сайтов c 2008 года. На этом канале я буду делиться всеми своими знаниями от верстки до создания сайта под ключ. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Не забудь подписаться ниже: 👇👇👇👇👇👇👇👇👇👇👇👇👇 🔷Мой сайт: https://lector-web.com 🔷Я в VK: https://vk.com/lector13 🔷Instagram канала: https://www.facebook.com/unsupportedbrowser 🔷Мой Instagram: https://www.facebook.com/unsupportedbrowser 🔷Чат с коллегами: https://t.me/lector_web 🔷Telegram-канал: https://t.me/LectorWeb 🔷Личный Telegram: https://t.me/Lector1982 🔷Профиль в Linkedin: https://www.linkedin.com/in/lector1982 🔷Я в Facebook: https://www.facebook.com/unsupportedbrowser

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "Верстка лендинга Discover #1 | Github, CSS-переменные, создание favicon"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "Верстка лендинга Discover #1 | Github, CSS-переменные, создание favicon" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "Верстка лендинга Discover #1 | Github, CSS-переменные, создание favicon"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "Верстка лендинга Discover #1 | Github, CSS-переменные, создание favicon" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "Верстка лендинга Discover #1 | Github, CSS-переменные, создание favicon"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "Верстка лендинга Discover #1 | Github, CSS-переменные, создание favicon"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.