Скачать "Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS. ЧАСТЬ №2"

"videoThumbnail Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS. ЧАСТЬ №2

Адаптивная верстка сайта с объяснением действий. Добавление товара в корзину, AJAX подгрузка из JSON

Адаптивная верстка сайта с объяснением действий. Добавление товара в корзину, AJAX подгрузка из JSON

Канал: Фрілансер по життю

Адаптивная верстка сайта "Фрилансер по жизни". HTML SCSS JS FIGMA GULP WEBPACK. Часть №2

Адаптивная верстка сайта "Фрилансер по жизни". HTML SCSS JS FIGMA GULP WEBPACK. Часть №2

Канал: Фрілансер по життю

Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи

Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи

Канал: ВебКадеми | Юрий Ключевский

Адаптивна верстка сайту на базі шаблону ЧФ3. Пояснення дій. HTML CSS JS FIGMA. Частина №1

Адаптивна верстка сайту на базі шаблону ЧФ3. Пояснення дій. HTML CSS JS FIGMA. Частина №1

Канал: Фрілансер по життю

Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS

Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS

Канал: Фрілансер по життю

Марафон по верстке. Часть №2. Адаптивная верстка макета с нуля GULP SCSS JS

Марафон по верстке. Часть №2. Адаптивная верстка макета с нуля GULP SCSS JS

Канал: Фрілансер по життю

Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS

Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS

Канал: Фрілансер по життю

Адаптивная верстка сайта "Фрилансер по жизни". HTML SCSS JS FIGMA GULP WEBPACK. Часть №1

Адаптивная верстка сайта "Фрилансер по жизни". HTML SCSS JS FIGMA GULP WEBPACK. Часть №1

Канал: Фрілансер по життю

фрилансер по жизни

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

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

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

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

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

верстка макета figma

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

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

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

верстка макета из фигмы

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

верстка практика

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

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

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

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

обучение верстке

html css

javascript

00:00:00

[музыка]

00:00:15

[музыка]

00:00:20

[музыка]

00:00:39

[музыка]

00:01:00

ну чтож ребята всем привет

00:01:03

это у нас

00:01:06

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

00:01:09

верстке для начинающих мы продолжаем

00:01:12

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

00:01:16

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

00:01:20

ли меня слышно

00:01:21

чтобы я мог продолжать

00:01:24

вот чтобы понимаешь что все окей

00:01:27

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

00:01:30

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

00:01:33

выезде я в номере отеля и в общем пока

00:01:38

мои моя семья гуляет по парку я решил

00:01:42

сбегать к вам и провести этот стрим

00:01:45

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

00:01:49

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

00:01:53

а дела у нас следующее значит вот это

00:01:58

вот это вот объём мы swear стали с вами

00:02:00

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

00:02:03

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

00:02:06

практически

00:02:08

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

00:02:11

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

00:02:15

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

00:02:20

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

00:02:22

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

00:02:25

большой объем и мы собственно можем

00:02:28

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

00:02:31

такой вот блок

00:02:32

вот следующий формочка еще один блоки в

00:02:36

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

00:02:40

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

00:02:42

объем

00:02:43

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

00:02:48

номинальным спонсором данного стрима

00:02:51

является канал слушая это тоже мой канал

00:02:54

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

00:02:56

вот этот канал неэтичные но очень

00:03:00

прикольные здесь разные жизненные

00:03:02

истории людей разных профессий таких как

00:03:05

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

00:03:08

выступал в качестве гостя поэтому

00:03:11

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

00:03:13

описании я надеюсь что мы добьем то тыс

00:03:16

отсеки наконец-то то каналу уже неделя а

00:03:19

тыс очки еще нет ни подоб ства вот так

00:03:23

что вперед

00:03:24

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

00:03:27

переживаем вместе с героями очень

00:03:30

интересно все это развивается вот

00:03:33

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

00:03:36

надеюсь что вам тоже будет интересно

00:03:37

следить за этим канал хорошо

00:03:41

возвращаемся к нашему макете q я напомню

00:03:46

что его можно скачать по ссылке в

00:03:47

описании либо в telegram канале если

00:03:50

кто-то не может скачать по ссылке в

00:03:52

описании и

00:03:53

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

00:03:57

атакуем следующий блок называется он хуи

00:04:01

а кто мы такие да и кто же мы такие

00:04:04

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

00:04:07

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

00:04:10

блок далее у нас ограничивающий

00:04:13

контейнер далее у нас опять

00:04:15

шапочка здесь body состоит из двух

00:04:20

колонок видео и контента вот такая вот

00:04:24

нехитрая схема у

00:04:26

данного блока вот я сейчас работаю с

00:04:31

одним монитором поэтому иногда я буду

00:04:34

заглядывать в чат чтобы видеть что

00:04:36

происходит все ли хорошо с трансляция и

00:04:38

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

00:04:42

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

00:04:45

блоки сектора как мы это здесь сделаем

00:04:49

мы это делали раньше и а собственно

00:04:52

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

00:04:56

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

00:05:00

прошлый раз мы подготовили вот эту вот

00:05:03

шапочку блока потому что она повторяется

00:05:06

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

00:05:09

собственно поменяем контент текст вот и

00:05:14

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

00:05:17

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

00:05:21

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

00:05:24

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

00:05:30

бы голос еще не успел особого

00:05:33

становиться но страшного тут ничего не

00:05:35

вижу

00:05:38

так хорошо

00:05:40

вот то есть я добавил готовый блок и по

00:05:44

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

00:05:47

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

00:05:50

все хорошо далее разберемся с отступами

00:05:54

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

00:05:56

блоке 80 пикселей здесь 100 вниз и

00:06:02

тут тоже что-то около стал 136 новые в

00:06:07

перше в первой части я говорил что

00:06:09

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

00:06:12

латинки поэтому здесь он где-то может

00:06:14

быть лишён технологических

00:06:16

закономерностей но тем не менее это

00:06:18

хороший пример того как может быть все

00:06:21

не гладко и что нам с этим делать и как

00:06:24

отступ а мы вернемся а теперь давайте

00:06:27

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

00:06:30

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

00:06:33

из youtube

00:06:35

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

00:06:38

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

00:06:42

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

00:06:45

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

00:06:48

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

00:06:51

аудио и видео если вам более

00:06:55

подробно нужно изучить эту тему вы

00:06:57

совсем сне не знакомы то вы можете

00:06:59

посмотреть это бюро так а здесь я

00:07:02

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

00:07:04

меня здесь будет body

00:07:06

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

00:07:11

контакт вот таким вот образом

00:07:15

h2 заголовок контента content ный тайтл

00:07:20

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

00:07:23

тут какой-то текст и

00:07:26

а дальше это у меня

00:07:28

кита элементы

00:07:32

я обожаю закрывать все в отдельной

00:07:35

коробочке многие меня за это ругают но

00:07:38

зато я как бы повышая надежность свои

00:07:42

горстки поэтому не обращаю внимание

00:07:46

какие-то подобные замечания по обертка и

00:07:52

вам не советую

00:07:55

надежность у нас прежде всего

00:07:59

я здесь не особо останавливаюсь я фигачу

00:08:03

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

00:08:06

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

00:08:10

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

00:08:13

то в общий блок выделил 1 ой там перешел

00:08:15

в бан блок здесь сделал колонку для

00:08:18

иконки и а как бы контентную часть и

00:08:22

собственно здесь у меня будет два

00:08:23

элемента тайтл и текст как вы понимаете

00:08:28

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

00:08:31

отдельный элемент перешел в блог японка

00:08:35

тело этого элемента и тело этого блока

00:08:40

как бы до отдельного айтемы и два

00:08:43

элемента тайтлы текст

00:08:46

так и запишу

00:08:49

тайтл и

00:08:52

текст

00:08:58

здесь стоит троеточие типа обрезается

00:09:01

текст давайте я сделаю его длине и мы

00:09:04

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

00:09:06

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

00:09:10

особо есть смысл этим заниматься так как

00:09:12

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

00:09:15

с помощью печки это всего лишь одна

00:09:18

запись короткая и там можно указать чуть

00:09:21

ли не количество слов и вот этот вот как

00:09:24

бы то что в конце нужно вывести три

00:09:27

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

00:09:30

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

00:09:32

запариваться но на этих вещах версткой

00:09:35

потому что на бэг-энде это очень легко

00:09:38

все порешать и как бы программисты

00:09:41

совсем не против у

00:09:46

я

00:09:48

здесь у нас будет этого идею майклс

00:09:52

создам папочку еще одну я люблю все кола

00:09:57

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

00:10:00

я уже говорил многие недоумение

00:10:04

наблюдают за этим вот но

00:10:07

я знаю что я делаю

00:10:14

так переношу вот этот контент

00:10:21

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

00:10:24

останется время я поотвечаю на ваши

00:10:28

вопросы потому что как я уже сказал я

00:10:31

работаю еще с одним монитором и я не

00:10:33

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

00:10:35

одновременный и код и как бы видеть чад

00:10:38

попутно на что-то отвечаем поэтому я

00:10:42

надеюсь что я

00:10:48

надеюсь что у вас появятся какие-то

00:10:51

вопросы я надеюсь что у нас будет время

00:10:53

в конце ace 3 мая на вопросы какие-то

00:10:56

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

00:11:00

а переношу контент

00:11:06

принципе он по моему там такой же окей

00:11:09

только иконка другой а

00:11:11

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

00:11:14

чуть попозже в принципе мы уже можем его

00:11:17

вставить

00:11:21

давайте я возьму какое-то видео

00:11:27

тогда

00:11:29

вот допустим на надо вставить в youtube

00:11:32

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

00:11:35

этот вот кода

00:11:38

вот копировать

00:11:41

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

00:11:43

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

00:11:45

принципе

00:11:47

оставляешь ширину и высоту мы сейчас с

00:11:49

этим будем разбираться

00:11:51

пока оставляют и таким образом и

00:11:55

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

00:11:58

почему он такой потому что женя что

00:12:00

правильно забыл про ограничивающий

00:12:03

контейнер бывает

00:12:05

добавляем ограничивающий контейнер а мы

00:12:08

его в первой части уже настроили и я

00:12:11

весь контент оборачиваю в ограничивающий

00:12:14

контейнер с тех классом с техническим

00:12:16

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

00:12:19

будет в рамках нашей сетке так-то лучше

00:12:23

вот в принципе хорошо я готов то дело

00:12:27

все адаптировать

00:12:28

точнее и адаптировать и собственно

00:12:32

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

00:12:35

переходим в css

00:12:39

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

00:12:43

элемент

00:12:46

пейдж

00:12:48

мои

00:12:50

себе сюда разместим

00:12:54

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

00:12:57

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

00:12:59

отступ а это 80 130 естественно мы будем

00:13:04

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

00:13:07

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

00:13:10

от тайтлом от федора так скажем до блока

00:13:15

нас

00:13:20

100 пикселей

00:13:25

вот до

00:13:27

дальше что у нас дальше дальше у нас вот

00:13:32

этот вот остался блок нам нужно его

00:13:34

превратить flex контейнер

00:13:37

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

00:13:40

нужен дисплей flex

00:13:44

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

00:13:49

тут у нас странный макет в плане

00:13:52

организации свободного пространства он

00:13:55

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

00:13:57

имеет вот этот отступ это нам неведомо

00:14:01

вот мы будем делать отступ и и

00:14:05

я сейчас думаю о себе в голове как я это

00:14:08

буду строить значит она ширина 600

00:14:10

пикселей

00:14:14

хорошо давайте попробуем это сделать

00:14:17

следующим образом значит ширина

00:14:19

ограничивающего контейнера у нас

00:14:23

1046

00:14:25

до 1046 пикселей

00:14:29

вот поэтому

00:14:35

600 мы дерево 10-46 получаем 57

00:14:40

процентов до 57 процентов у нас будет

00:14:45

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

00:14:47

будет автоматическая

00:14:51

вот и что у нас получается у нас

00:14:55

получается что мы сейчас будем пробовать

00:14:59

наш видеоролик адаптировать да то есть

00:15:02

он по умолчанию меньше 560 но по макету

00:15:05

он у нас такой вообще несуразный

00:15:08

квадратный почти что 600 на 442

00:15:14

значит чтобы делать

00:15:19

я буду делать здесь следующее давайте

00:15:22

начнем с подвешен релате я буду

00:15:24

обращаться к айфрейм

00:15:27

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

00:15:33

вот и

00:15:35

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

00:15:38

абсолютное позиционирование относительно

00:15:40

когда родители видео до

00:15:43

ширина высота сто процентов top left и

00:15:46

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

00:15:49

color

00:15:51

вот естественно у нас сейчас должно все

00:15:54

исчезнуть но практически у нас с

00:15:57

размером за до размера задающим является

00:16:00

вот этот вот контент справа да но это

00:16:03

нам не подходит у нас по макету ролик

00:16:06

442 пикселя по высоте

00:16:09

так значит padding вниз будем

00:16:12

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

00:16:15

padding и здесь мне нужно 442 определить

00:16:18

на 600 умножить на 100

00:16:21

что-то нето нажал дам 442 поделить на

00:16:25

600 умножить на

00:16:28

173 6 процента это получается

00:16:32

попробуем это решить таким вот образом

00:16:37

ни черта у меня не вышло почему потому

00:16:40

что скорее всего

00:16:43

здесь процентный padding у нас будет

00:16:47

взят не от flexx элемента от flex

00:16:50

контейнер мы можем проверить эту теорию

00:16:53

это будет интересно возьмем теперь

00:16:57

442

00:16:59

поделим на 1046 и это будет 42 процента

00:17:09

так уже похоже на правду уже похоже на

00:17:13

правду

00:17:15

если померять то это

00:17:19

439 пикселей у

00:17:23

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

00:17:26

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

00:17:29

442 поделить на 10 46 до 42 и 25

00:17:37

25 процентов если быть точным и вот

00:17:40

теперь будет вот 441 92 то есть имейте в

00:17:45

виду что

00:17:47

интересный факт да у нас есть flex

00:17:50

контейнер и 2 flex элемента видео и

00:17:54

контент вот я попытался с помощью

00:17:57

процентного по 1 га взять процент от

00:18:00

ширины контейнера то есть 600 на самом

00:18:03

деле в данном случае когда у нас flexo

00:18:07

контейнер flex элемент являются и

00:18:11

контент ным и

00:18:13

структурным объектом вот тогда вот этот

00:18:17

процентный по 1 будет высчитываться от

00:18:19

ширины

00:18:21

flex контейнер понятно что запутанное

00:18:24

совсем не для новичков

00:18:26

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

00:18:30

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

00:18:33

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

00:18:36

случае у нас

00:18:38

объект видео вот этот хуй all video он

00:18:43

является и

00:18:44

конструктивным объектом структурным

00:18:46

объектам то есть фляг с элементом и

00:18:48

является контент ным объектом несмотря

00:18:51

на то что внутри него еще помещен сам

00:18:53

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

00:18:55

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

00:18:58

него по деньгам то есть работаем семена

00:19:01

как с контентом

00:19:03

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

00:19:05

дополнительную обертку для и фрейма то

00:19:08

тогда бы наш процентный padding для этой

00:19:11

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

00:19:13

от ширины

00:19:14

родителя а здесь родителям являются flex

00:19:20

контейнер вот такая немножко запутанная

00:19:22

ситуация но в зависимости от того какую

00:19:25

схему атаки вы выбираете какую схему

00:19:28

структуры вы выбираете

00:19:31

от того будет зависеть вот этот вот

00:19:34

получение размеров еще разница покажу

00:19:39

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

00:19:41

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

00:19:44

не выводить его удалил в данном случае у

00:19:47

нас контент поскольку мы ему неспроста

00:19:50

задали flex 11 авто да я это сделал

00:19:54

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

00:19:56

далеко не просто так да а для того что

00:19:59

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

00:20:01

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

00:20:04

займёт всю ширину то есть и верстка

00:20:07

останется в своих пределах да то есть

00:20:09

вряд ли будет ситуация когда будет

00:20:11

только видеоконтента не будет такая

00:20:14

ситуация тоже может быть верстка

00:20:16

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

00:20:18

не на всю ширину до будет на пятьдесят

00:20:21

то там чем-то процентов что в принципе

00:20:23

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

00:20:26

бы ситуацию которая скорее всего может

00:20:28

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

00:20:30

это тоже важно планировать в вот

00:20:33

контента либо не вывод контента да как

00:20:36

вы видите такой ситуации у нас более чем

00:20:39

все хорошо как будто так и задумано но

00:20:42

это опять же в том числе из за того что

00:20:47

контент является структурным если бы мы

00:20:51

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

00:20:53

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

00:20:57

контента и структурного объекта у нас бы

00:20:59

ничего не поменялось то есть тут бы

00:21:01

просто было пустое место место видео

00:21:03

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

00:21:06

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

00:21:09

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

00:21:11

показываю вот вот такое поведение ok

00:21:14

надеюсь вы уловили суть

00:21:18

мы можем двигаться дальше у нас тут сто

00:21:22

двадцать один пиксель так и запишем

00:21:27

вот и можем заняться тайтлом

00:21:37

40

00:21:49

5740

00:21:56

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

00:22:00

процента

00:22:02

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

00:22:05

что я

00:22:10

уже часть не перестаю объяснять да то

00:22:14

что я делаю там не все подряд объясняю

00:22:17

потому что большинство из этого я

00:22:19

объяснял в первой части и сейчас как бы

00:22:21

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

00:22:27

так окей

00:22:31

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

00:22:35

контент

00:22:37

текстом вот эти все вещи

00:22:42

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

00:22:46

нет

00:22:49

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

00:22:54

два процента

00:22:55

вот

00:22:57

чтобы я еще хотел здесь сделать это

00:23:00

отступы

00:23:03

здесь давайте думать да давайте

00:23:06

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

00:23:08

от верхней части 50 и от заголовка до

00:23:13

текста 10

00:23:18

дам да

00:23:20

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

00:23:24

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

00:23:28

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

00:23:31

случай если нижнего блока не будет и вот

00:23:34

эти 50 пикселей нам помогут то же самое

00:23:37

сделаю стоит вам только

00:23:41

10 пикселей

00:23:43

не брезгуете делать такие штуки

00:23:46

вам все скажут спасибо когда начнут эти

00:23:49

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

00:23:52

если мы лишаемся тегу тут кстати надо

00:23:55

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

00:23:58

сделал

00:23:59

ну что если мы лишаемся текста то у нас

00:24:03

остается только 10 пикселей отступ от

00:24:06

тайтла вниз а это маловато поэтому я

00:24:09

принимаю решение взять вот эти anthems и

00:24:12

сделать у них верхний padding

00:24:18

или же той ситуации что у нас не будет

00:24:22

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

00:24:25

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

00:24:27

решение

00:24:30

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

00:24:33

10 пикселей слетает он не является

00:24:36

последним элементом

00:24:38

но

00:24:40

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

00:24:43

получается вот такая ситуация тоже не

00:24:45

совсем хорошо потому что в данном случае

00:24:48

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

00:24:51

насос что будет 50

00:24:54

пикселей отступ плюс 10 поэтому здесь мы

00:24:59

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

00:25:01

схлопывание и

00:25:03

сделать отступ вверх вот элементов

00:25:06

50 и отступ вниз а тайтла 10 но если кто

00:25:11

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

00:25:14

канале то знает что при двух внешних

00:25:18

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

00:25:21

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

00:25:23

больше данном случае это 50 видите как

00:25:26

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

00:25:30

применять на практике вообще

00:25:32

нестандартными подходами то есть здесь

00:25:34

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

00:25:37

не очевидно я использую себе во благо ну

00:25:40

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

00:25:42

есть и смотрим что она сейчас получается

00:25:44

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

00:25:47

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

00:25:49

остается те же 50 пикселей отступа

00:25:51

тайтла до контента вот из

00:25:54

ответственности самого вот этих ой там

00:25:56

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

00:25:59

отступай просто будет та ситуация где у

00:26:02

нас есть только вот этот вот контент

00:26:05

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

00:26:08

нет я как бы в данном случае не

00:26:09

учитывала потому что это крайне

00:26:11

маловероятно но

00:26:13

если мы хотим

00:26:16

все же этот вариант допустим

00:26:19

использовать если мы хотим

00:26:21

тогда на следует отвернуть

00:26:33

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

00:26:36

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

00:26:40

использовать этот класс

00:26:44

пусть будет топ о

00:26:47

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

00:26:51

случае

00:26:53

в этом случае для этой оберткой

00:26:56

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

00:27:02

вот таким образом то есть или мы

00:27:05

накручиваем что-то строим выдумываем все

00:27:09

с или мы что-то выдумываем в html то

00:27:12

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

00:27:15

как я говорил я не чураясь

00:27:17

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

00:27:21

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

00:27:23

больше давайте посмотрим чего мы

00:27:25

добились сейчас сейчас мы добились

00:27:28

во-первых макета да вот у нас макет все

00:27:32

отступы по макету от заголовка до текста

00:27:35

10 и вот от этой части до этой части

00:27:39

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

00:27:43

вообще висячего отступа нет потому что

00:27:47

этот 50 пикселей задан только если

00:27:49

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

00:27:53

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

00:27:55

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

00:27:58

нет текста значит у нас

00:28:01

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

00:28:05

опять же мы указали здесь что если

00:28:07

объект не последний объект последние

00:28:09

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

00:28:12

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

00:28:14

и если у нас нет тайтла вообще-то

00:28:18

ну точнее если у нас нет то по вообще

00:28:21

остается только ой там нет смысла если

00:28:25

аккаунт будет не будет выводить тайтл то

00:28:28

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

00:28:31

пустую оболочку

00:28:34

вот эту топ то он естественно не выведет

00:28:37

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

00:28:40

у нас нет вообще никаких лишних отступов

00:28:42

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

00:28:45

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

00:28:48

да сколько разнятся подходы и и сколько

00:28:51

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

00:28:53

примере видите но

00:28:55

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

00:28:58

полет мои мысли потому что я щас я не

00:29:01

готовился ни в коем случае не к этому

00:29:03

стриму и сейчас все что вы слышите и

00:29:06

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

00:29:08

вот я размышляю на боевых проектах вот

00:29:11

так что я надеюсь что это вам должно

00:29:14

быть полезно

00:29:21

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

00:29:26

чате что будет ли java-script это макет

00:29:30

для начинающих я стараюсь здесь вообще

00:29:32

не использовать java script пока нам

00:29:34

удавалось

00:29:35

пока нам удавалось вообще его не

00:29:37

используем то есть есть отдельные

00:29:40

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

00:29:43

совсем чем хочешь но этот мастер-класс я

00:29:46

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

00:29:49

естественно

00:29:51

учиться нужно постепенно

00:29:53

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

00:29:57

вот часть значит у нас иконки

00:30:00

иконки у нас 32 пикселя так и запишем

00:30:05

и

00:30:06

воде

00:30:11

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

00:30:15

отступ слева в 20 пикселей

00:30:19

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

00:30:24

так 16-24

00:30:39

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

00:30:43

5 пикселей

00:30:51

опять же not love child

00:30:55

тексте отсюда скопируем 2 стили текста

00:31:00

да

00:31:02

опять же

00:31:05

отступ у нас между объектами 30 пикселей

00:31:09

ой там и видите благодаря тому что я

00:31:13

довольно подробно подробную сделал

00:31:17

структуру то мне сейчас очень легко

00:31:19

работать все с да вот из-за этих как

00:31:23

по-вашему лишних оберток до которые по

00:31:27

вашему мнению я делаю они мне потом я

00:31:31

просто так пра пра пра пра пра даже не

00:31:34

задумалась умело все есть свой элемент

00:31:36

свой блог я знаю что все очень надежно

00:31:38

вот и нилов мочу бабушку опять

00:31:41

используем атлас child для элемента да

00:31:45

для того чтобы сделать вот эти отступы и

00:31:48

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

00:31:52

ходу у нас все получается давайте еще

00:31:55

добавим вот этот отступ 20 пикселей

00:31:57

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

00:31:59

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

00:32:03

вот и

00:32:05

здесь мы видим вот такую вот штуку да и

00:32:09

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

00:32:11

что она получится внутри flex элемента

00:32:13

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

00:32:15

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

00:32:18

white space но раб

00:32:21

для текста сейчас будет вот что то вот

00:32:24

такое

00:32:26

так подождите ой там

00:32:33

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

00:32:37

ему сделать такую штуку как

00:32:40

текст workflow эллипсис и надеяться что

00:32:45

что-то получится ни черта не получится

00:32:48

потому что

00:32:49

внутри flexx элемента у нас не выйдет

00:32:52

этого сделать нам нужно так или иначе

00:32:55

фиксировать размер

00:32:58

фиксировать размер то есть если мы

00:33:00

укажем что здесь

00:33:03

225 а ширина жестко тогда она у нас

00:33:06

должно сработать и

00:33:09

даже так не работает

00:33:13

текста

00:33:15

hidden текста workflow эллипсис

00:33:19

наконец-то вот тогда может и без ширины

00:33:22

у нас может быть получится нет все таки

00:33:25

нет ну в общем я не люблю текстовый flow

00:33:30

потому что вот он требует каких-то еще

00:33:32

фиксированных значений не люблю

00:33:34

фиксированное значение тем не менее

00:33:36

просто вам задумал показать что с

00:33:39

помощью css можно

00:33:41

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

00:33:44

типа и троеточие это не значит что будет

00:33:47

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

00:33:49

будет сокращаться и я это нигде не

00:33:51

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

00:33:53

повторюсь это бестолковая вещь потому

00:33:56

что последствии покажут это выведет

00:33:59

одной строчкой более надежно любой текст

00:34:02

и

00:34:03

медицина разница в том что в данном

00:34:08

случае весь текст попадет в html то есть

00:34:12

вот он да мы его видим и фактически это

00:34:14

может быть плюсом для seo хотя опять же

00:34:17

скрытые тексты это для seo немножко и

00:34:20

минус

00:34:21

то если баком то это будет делать сам

00:34:25

the html попадет вот именно эта строка

00:34:28

не больше в этом основная разница кроме

00:34:31

конец конечно

00:34:33

танцев с бубнами вот но это писец и

00:34:36

поэтому я вам показал как это можно

00:34:38

сделать а вы уже как бы исходя из того

00:34:42

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

00:34:44

можете применять это можете overflow

00:34:48

эллипсе solar покидав и

00:34:50

фиксация лучше конечно еще использовать

00:34:52

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

00:34:55

в ширину

00:34:57

отлично

00:35:07

так

00:35:09

едем дальше и

00:35:13

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

00:35:16

адаптивном этого нашего замечательного

00:35:18

дело

00:35:19

вот видео у нас отзывчив будет

00:35:23

отзываться но я здесь добавлю такую

00:35:28

штуку для body line nightfox старт чтобы

00:35:33

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

00:35:36

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

00:35:38

сразу же вот где то тут я буду этот

00:35:40

ужаснейший широченный отступ убирать у

00:35:43

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

00:35:46

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

00:35:49

где а вот он этот гигантский отступ

00:35:54

[музыка]

00:35:56

напомните

00:35:58

давайте на

00:36:00

1080 пикселей

00:36:04

вот я и верхней этот уберу ужасный и вот

00:36:09

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

00:36:11

сдерживает я могу это привести к кому-то

00:36:14

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

00:36:17

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

00:36:21

992 у потянем до 950

00:36:26

вот и здесь

00:36:28

как вы считаете видео должно быть

00:36:31

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

00:36:34

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

00:36:37

ставить в одну в одну колонку и хочу

00:36:40

узнать ваше мнение как вы считаете мне

00:36:43

стоит текст поставить сверху а потом

00:36:45

ролик или же наоборот ролик а потом

00:36:47

текст а я пока водички попью

00:36:58

так что то я не из не вижу ваших ответов

00:37:01

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

00:37:04

200 человек сначала текст

00:37:11

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

00:37:14

потом текст но

00:37:16

большинство за текст ну давайте так и

00:37:19

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

00:37:22

и как нам быстро это дело сделать

00:37:26

смотрите и как говорится учитесь

00:37:30

значит берем

00:37:32

берем breakpoint

00:37:35

950 до мы выяснили и чтобы тут будем

00:37:39

делать мы тут будем делать следующие

00:37:42

значит берем наш flex контейнер не

00:37:44

убираем flex а делаем его goflex

00:37:46

direction колон и не просто коллом

00:37:51

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

00:37:55

одним выстрелом вы

00:37:57

сразу убиваем всех зайцев и вот что у

00:38:00

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

00:38:04

вот это видео пропадает мы его сейчас

00:38:07

вернем но

00:38:09

на самом деле а фокус в том что как бы

00:38:13

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

00:38:16

сейчас естественно с вами добавим вот но

00:38:20

у нас все получилось далее я хочу по

00:38:24

убирать эти ужасные он ступы

00:38:32

5050 по и ей

00:38:35

закрыл редактор у вас бывает такое же вы

00:38:38

берете и закрывайте редактор вообще все

00:38:42

закрыл

00:38:50

вот я уже тут

00:38:52

я что только слабой всё пропало

00:38:56

кошмар так

00:38:58

все в порядке

00:39:00

так вот

00:39:03

поступи я вот эти хотел убрать

00:39:06

страшнее

00:39:09

так 50 пикселей и

00:39:14

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

00:39:25

вот

00:39:28

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

00:39:51

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

00:39:56

убираем вот этот вот отступ который у

00:39:59

нас тут был

00:40:09

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

00:40:12

вывести

00:40:14

ну я как бы привык что у меня golf

00:40:18

впоследствии сборщик до

00:40:21

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

00:40:24

то другая история поэтому хотя бы в

00:40:26

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

00:40:28

стоит когда у нас один медиазапрос на

00:40:31

950 то стоит все что мы там меняем как

00:40:35

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

00:40:39

вот вот таким образом это если вы

00:40:41

работаете без

00:40:43

соответствующего плагин не собираете

00:40:46

гампом и и вот вам нам приходится еще об

00:40:49

этом двор выношу вниз вот так бы это

00:40:52

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

00:40:55

случае

00:40:57

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

00:40:59

его пока что один мы его сюда вот вы нас

00:41:02

в вот как бы то да значит так и вот так

00:41:07

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

00:41:09

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

00:41:12

видео как то не очень у

00:41:16

нас все это дело что же у нас произошло

00:41:20

я подозреваю

00:41:23

подозреваю я

00:41:25

так у нас исчезла

00:41:28

исчезла у нас

00:41:31

ширина и я думаю что вот это у нас

00:41:35

произошло из-за

00:41:38

так где у нас медиазапросы

00:41:41

вот

00:41:43

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

00:41:46

line at emc лайма этом встреч

00:41:53

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

00:41:56

кстати не старт этом наверняка старт

00:41:59

написал папа неправильно flex то бы я

00:42:01

мог написать просто старт будет не

00:42:05

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

00:42:08

то есть из-за того чтобы flex старт у

00:42:11

нас она прижималась к левому краю мы его

00:42:13

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

00:42:16

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

00:42:20

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

00:42:27

или же мы можем опять же уже раз мы так

00:42:31

начали not

00:42:36

last

00:42:44

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

00:42:48

сюда мне нужно это дело написать

00:42:53

контенту

00:42:54

так

00:42:58

hо я

00:43:01

понял но контента у нас лаз child

00:43:04

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

00:43:07

это писать

00:43:14

час я соображу

00:43:16

так видео видео вверх

00:43:22

получается

00:43:27

вот такая история поесть flex flex

00:43:32

direction роу реверс у нас поставил

00:43:35

одновременно объекты и в одну колонку и

00:43:38

в нужном нам порядке да чтобы мы не

00:43:41

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

00:43:44

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

00:43:46

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

00:43:49

текст снизу как бы

00:43:53

контент до единственное что мне не

00:43:56

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

00:43:58

процентный padding там остался

00:44:01

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

00:44:05

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

00:44:11

315 на 560 315 на 560

00:44:17

это 5625 56 процентов . 25 давайте так и

00:44:23

запишем

00:44:27

5625 процента напомню это все мы делаем

00:44:31

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

00:44:34

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

00:44:36

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

00:44:39

хотят но дальше когда мы делаем уже что

00:44:42

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

00:44:45

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

00:44:48

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

00:44:51

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

00:44:55

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

00:44:58

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

00:45:00

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

00:45:04

частности как минимум вот здесь я это

00:45:06

сделаю

00:45:08

да

00:45:09

давайте на

00:45:11

767 я

00:45:14

общее отступы вот сверху я уберу со всем

00:45:19

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

00:45:22

до или же

00:45:25

что-то да добавил

00:45:28

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

00:45:31

проходит ну и вот эти вот отступы можно

00:45:34

в принципе

00:45:35

по желанию

00:45:40

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

00:45:47

вот

00:45:49

вот как нибудь так я это вижу

00:45:52

да у нас отзывчивое видео у нас все окей

00:45:57

у нас

00:45:58

надежность до помним как мы хорошо

00:46:01

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

00:46:04

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

00:46:07

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

00:46:11

дальше что скажете

00:46:18

два тайтла подряд не круто ну ребята вы

00:46:21

выбрали текст сначала на самом деле

00:46:24

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

00:46:26

восприятие информации то есть то что мы

00:46:29

человеку хотим дать и если в данном

00:46:32

случае вот этот текст он важнее этого

00:46:34

видео то стоит его ставить сверху о

00:46:37

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

00:46:39

тут еще речь идет некута не круто

00:46:44

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

00:46:48

в принципе да от этого вот всего дела

00:46:50

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

00:46:54

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

00:46:58

роль каллум реверс сделайте колу и будет

00:47:02

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

00:47:05

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

00:47:08

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

00:47:11

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

00:47:14

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

00:47:17

должно быть поэтому

00:47:19

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

00:47:22

хоть как это использовать так дальше тут

00:47:25

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

00:47:28

наоборот у

00:47:31

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

00:47:35

цвета белый

00:47:36

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

00:47:41

вот чем дело

00:47:43

до

00:47:46

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

00:47:49

вот он у нас белый и этом

00:47:53

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

00:47:56

отступы в конце вот здесь они я я

00:47:59

остался усики я помню что я убирал ну а

00:48:02

потом вернул какой-то отступ соки то

00:48:04

есть тут просто два цвета фона кто не

00:48:07

помнит я не очень похожие я вот не

00:48:11

заметил да этот блок белый далее у нас

00:48:13

все все как обычный идем

00:48:17

окей

00:48:22

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

00:48:24

мы потом еще проведенную ansi розочку

00:48:27

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

00:48:31

авары не поставил ничего я ей нужно ну

00:48:34

нужно будет вернуться доделать

00:48:41

украину

00:48:43

так вот 58 58 значит вот это у нас

00:48:47

отдельный блок с клиентами

00:48:50

до

00:48:55

по выгружаемых dm g

00:49:14

пока выгружаю

00:49:18

обращаю ваше внимание на то что кажется

00:49:22

что эти два блока они это один блок на

00:49:25

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

00:49:28

они разнятся потому что это у нас

00:49:32

клиенты да

00:49:34

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

00:49:39

как-бы задумка их объединить была бы

00:49:44

хорошая но я обычно разделяю блоки

00:49:49

потому что опять же

00:49:51

таким образом можно не вывести какой-то

00:49:55

блок до а когда он уже закрыт в общую

00:49:58

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

00:50:02

ну два этих 2 части закрыты в одну

00:50:05

коробку что будем работать по

00:50:07

отдельности значит это у нас будет

00:50:11

clans до

00:50:18

клиенты

00:50:22

ограничивающий

00:50:40

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

00:50:43

клиентов не идёт ссылка

00:50:46

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

00:50:49

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

00:50:53

вот такой вот небольшой bleached

00:50:58

забабахаем его

00:51:02

да ребят

00:51:04

любим мы это дело до power стать

00:51:07

немножко

00:51:15

начался курс по верстке

00:51:17

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

00:51:21

если вам интересно то информация по нему

00:51:24

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

00:51:26

начался но если вы хотите принять

00:51:28

участие то напишите мне возможно мы

00:51:31

что-то придумаем

00:51:33

так

00:51:46

58 58 и

00:51:50

здесь что придумаем дам

00:52:05

конечно интересный момент

00:52:16

хотя все таки сделаю

00:52:25

[музыка]

00:52:28

вот так вот так вот

00:52:34

ну и

00:52:38

line этом центр

00:52:52

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

00:52:55

где вам они секций напишите пожалуйста

00:53:11

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

00:53:14

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

00:53:16

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

00:53:19

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

00:53:22

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

00:53:26

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

00:53:28

немножко по 1 га впо добавить

00:53:38

так и

00:53:40

здесь я сделал 58 можно сделать 58 здесь

00:53:46

отступы безопасности вот так намного

00:53:50

приятнее

00:53:58

можно сделать вот таким еще образом

00:54:02

приступай контент-центр и

00:54:09

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

00:54:12

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

00:54:15

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

00:54:18

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

00:54:21

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

00:54:25

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

00:54:27

вам такую в таком случае обращаться к

00:54:30

m&g

00:54:31

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

00:54:38

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

00:54:41

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

00:54:43

теперь у нее теперь вот такой эффект

00:54:46

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

00:54:50

ну да добавим минует допустим 150

00:54:55

пикселей

00:55:00

меньше 100

00:55:03

200

00:55:05

280 282 140 бог

00:55:13

вот теперь

00:55:15

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

00:55:18

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

00:55:20

изображение мы туда добавим все будет

00:55:22

точно так же вот

00:55:26

break point для отступов

00:55:33

есть

00:55:37

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

00:55:43

нужно добавлять эйч заголовок эйч а

00:55:46

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

00:55:48

скажите мне здесь есть заголовки не

00:55:52

слышу не слышу

00:55:56

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

00:56:00

я ещё раз и ещё раз повторяю ребят не

00:56:06

стоит считать себя супер мега

00:56:08

верстальщика my если вы топите за

00:56:11

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

00:56:15

нужно сначала разобраться что к чему

00:56:26

едем дальше

00:56:30

вообще семантика использование

00:56:34

семантических тегов это довольно сложная

00:56:37

тема я ее до сих пор даже в бесплатном

00:56:39

курсе не дал потому что еще не время

00:56:43

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

00:56:47

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

00:56:50

интегрировали туда уже принципа

00:56:52

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

00:56:54

пихать эти section и везде то у вас

00:56:57

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

00:57:00

верстка они

00:57:01

что-то еще лучше вожди вами все сделаете

00:57:05

но правильно чем

00:57:07

ну вы меня короче поняли потому что это

00:57:11

ну

00:57:13

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

00:57:16

div зато есть у него верстка где то

00:57:18

сломается вот тогда вам будет не все ram

00:57:22

ok

00:57:32

20 пикселей вниз у нас от этого блока

00:57:36

сейчас рассуждая на тем как мы сделаем

00:57:39

эту линию

00:57:49

использовать flex & greet вы можете как

00:57:52

угодно в любой комбинацию ну в принципе

00:57:55

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

00:57:58

не используя специально потому что он

00:58:00

сложнее flexo зачем нам тут усложнять мы

00:58:02

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

00:58:06

наоборот я хочу показать что используя

00:58:09

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

00:58:13

адаптивную верстку классную надежную

00:58:16

приятную

00:58:18

так хорошо вот наш блок будет субскрайб

00:58:22

его назовем

00:58:24

здесь хотя бы есть текст можно

00:58:26

предположить что это может быть какой-то

00:58:28

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

00:58:31

секс

00:58:48

так субскрайб

00:58:52

субскрайб будет

00:58:55

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

00:59:00

нет зачем

00:59:02

мысли вслух субскрайб body пусть будет у

00:59:05

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

00:59:08

еще четыре sap скрам тайтл и

00:59:12

субскрайб форм

00:59:18

форм

00:59:24

вот

00:59:28

субскрайб input

00:59:32

так это нам не нужно это из моего

00:59:35

стартового шаблона прилетела на им форм

00:59:37

пусть будет и

00:59:40

субскрайб

00:59:43

батон

00:59:48

где написано субскрайб как это не стран

00:59:53

вот

00:59:59

опять же смотрим как сделать валидацию

01:00:03

без java-script значит что мы тут пишем

01:00:06

и тут пишем вместо тексте mail и пишем

01:00:09

рэп айри

01:00:11

red red line

01:00:14

вот теперь по идее

01:00:17

средствами html вот если там что-то

01:00:20

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

01:00:23

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

01:00:25

выводит браузер но без же ascript мы

01:00:28

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

01:00:30

email с помощью html дав тайпе указать

01:00:33

email и добавить атрибут притворяться

01:00:36

что означает обязаловка и

01:00:39

форма значит никуда не полетит данные не

01:00:42

куда они полетят пока мы не введём

01:00:44

адекватный и mail такие дела ребята да

01:00:48

жизнь боль

01:00:51

отличника

01:00:56

как вы вообще как настроение у вас

01:00:59

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

01:01:03

куда-то с друзьями значит пойти или

01:01:06

будете верстать дома

01:01:08

повторяя то что я вам тут no voy a la ну

01:01:11

признавайтесь

01:01:12

кто куда

01:01:27

так

01:01:28

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

01:01:31

подобно эту верстку посмотреть

01:01:40

три рабочих дня но сожалею блин

01:01:44

окей главное чтобы мы не делали главное

01:01:47

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

01:01:49

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

01:01:52

очень важно вот

01:01:56

отлично молодцы

01:01:59

ну что поехали значится от вот этого вот

01:02:03

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

01:02:06

нужен отступ вниз 10 пикселей но мы это

01:02:09

будем делать не для блока напоминаю а

01:02:12

для элемента хотя и элементы блок

01:02:15

содержатся в одном объекте да

01:02:17

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

01:02:20

нот на всякий случай ну на случай если

01:02:24

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

01:02:26

но

01:02:27

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

01:02:30

несложно мы сделаем

01:02:33

10 пикселей

01:02:35

получили да

01:02:36

дальше у нас вот эта история и мы видим

01:02:40

здесь вот отступы

01:02:44

2930

01:02:46

38 скрип сатрап контейнер субскрайб body

01:02:51

можно поставить морджим 30

01:02:54

чтобы не лохматик бабушку до

01:02:59

дисплей flex

01:03:02

по денги 50 3030

01:03:08

5030 line anthems центр и

01:03:11

backgroundcolor вот он у нас

01:03:14

такой вот тёмненький

01:03:20

давай border-radius есть вещи как

01:03:23

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

01:03:25

фильма рассказывает

01:03:28

ну как-нибудь тогда как-нибудь так все

01:03:32

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

01:03:34

надолго значится объекты тайтон по 50

01:03:39

процентов у нас и форма форма сразу

01:03:43

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

01:03:46

вот чего нам стесняться тайтл у нас

01:03:50

будет белым

01:03:54

белым

01:03:55

2432 и

01:03:58

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

01:04:01

на фонд

01:04:04

732 на 24 133 line хайд процента

01:04:12

отлично и

01:04:16

конечно же белый цвет

01:04:20

что-то не так что там маловат какой-то

01:04:24

фон says 24

01:04:27

или из-за того что он просто в два ряда

01:04:34

266 макс лиц

01:04:37

сделать нам это сделать как бы нам это

01:04:40

сделать ну да ладно час твой контент

01:04:43

space between

01:04:45

ставим здесь убираем делай макс убить

01:04:51

266 попробуем что у нас получится

01:04:56

уже лучше да добились макета отлично

01:04:59

что-то опять с верхними и нижними

01:05:01

отступами не так

01:05:05

30-ого я тут всё напутала вы молчите

01:05:09

3050

01:05:11

но наконец-то

01:05:14

отлично

01:05:16

in wood

01:05:20

автоматический и кнопочка начать сейчас

01:05:23

мы это все дело за верстаем

01:05:33

кнопочку мы уже wear стали

01:05:36

почему-то border-radius они ну ладно она

01:05:39

правильно только

01:05:41

верхний правый нижний правый углы

01:05:44

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

01:05:49

58

01:05:51

ну окей обмен хайд 58 джози пай

01:05:56

контент-центр lollipops центр текст

01:06:00

оnline сыр полностью центруем текст

01:06:03

внутри сколько бы его не было я уже

01:06:05

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

01:06:08

первой части

01:06:10

вот так это у нас выглядит ну и в

01:06:12

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

01:06:13

порешать padding 22

01:06:25

in food

01:06:28

58 один пока что 20 что тут еще что то

01:06:34

то нам еще предложишь border-radius

01:06:37

а

01:06:39

еще у него какой-то backgroundcolor

01:06:41

странный border-radius

01:06:44

050 бой 05

01:06:47

05

01:06:55

background color

01:06:58

не белый атакой чуть чуть не белой чуть

01:07:02

не белый 20 я угадал с отступами

01:07:05

прикиньте

01:07:08

цвет

01:07:10

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

01:07:14

фокусе

01:07:15

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

01:07:20

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

01:07:22

черненькие

01:07:25

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

01:07:28

можем табом перебираться по форме

01:07:31

элементов элемент формы tab кнопка

01:07:35

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

01:07:38

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

01:07:41

это хорошо

01:07:43

все это мой маленький маленький штришок

01:07:46

можно сделать border-radius right

01:07:52

now border

01:07:55

border райт короче

01:07:58

бор до

01:08:01

50

01:08:04

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

01:08:07

видите опять же легко и быстро bad bad

01:08:11

bad bad самыми примитивными штуками

01:08:14

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

01:08:18

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

01:08:20

но давайте добавим вот эту вот

01:08:22

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

01:08:24

напишите мне пожалуйста чем можно

01:08:28

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

01:08:32

пока вы пишете

01:08:35

пока вы пишете я напомню что

01:08:39

если вы хотите чтобы эти стримы остались

01:08:42

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

01:08:44

канал слушай ссылка в описании это мой

01:08:47

проект новое детище и желательно добить

01:08:51

воевода тысячи что там вот что-то вы

01:08:55

ленитесь подписываться это канал с

01:08:57

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

01:09:00

смешными и грустными и даже я там свою

01:09:02

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

01:09:04

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

01:09:08

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

01:09:13

так вот чем же мы будем be for дифузы

01:09:18

ground автор псевдо элементами сделал бы

01:09:21

полоску правильно псевдо-элементы наши

01:09:25

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

01:09:28

да весь цельный блок до

01:09:31

сразу на вешаем на него

01:09:35

мази шанри-ла te

01:09:39

vas дуб лицам о ком так позиция нра

01:09:43

латиф далее мы строим be for

01:09:48

или автора ты не без разницы данном

01:09:51

случае be for бэкграунд ему навешиваем

01:09:54

нужный и естественно контент

01:09:57

пустой

01:09:59

позиция абсолют ботов быть сто процентов

01:10:03

прошу прощения что слышно клавиатуру

01:10:05

сейчас микрофон у меня стоит на столе а

01:10:07

не как обычно подвешен поэтому она будет

01:10:09

слышно немножко больше за что я

01:10:12

извиняюсь но это

01:10:14

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

01:10:18

нахожусь в номере отеля

01:10:20

вот

01:10:25

хайд 77 love 0

01:10:29

смотрим

01:10:31

замечательно замечательно осталось нам

01:10:34

только что правильно взять наш субстрат

01:10:36

будет позиция нра латте и z-index 2

01:10:40

бац и

01:10:43

вот здесь вот у нас отступ 20 пикселей

01:10:46

прямо на субскрайб 1 батон 20 пикселей

01:10:50

тыдыщ готова вот что такое

01:10:54

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

01:10:56

очень круто очень классно очень

01:10:58

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

01:11:01

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

01:11:04

вот отлично

01:11:08

адаптив адаптив адаптив вот эти отступы

01:11:12

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

01:11:14

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

01:11:23

1070

01:11:27

давайте мы сделаем так давайте мы опять

01:11:30

используем оба nforce и найти отступ и

01:11:33

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

01:11:36

сколько там сорок шесть плюс

01:11:40

1570 пусть будет

01:11:45

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

01:11:52

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

01:11:55

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

01:11:57

тут отцу потом его отменять этим подход

01:12:00

на бал forst очень прикольный ну

01:12:03

собственно он для этого для оптимизации

01:12:05

сделан

01:12:07

так то есть поясню помогал forst

01:12:13

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

01:12:16

образом экономии количество строк ведет

01:12:20

к тому что на мобильных устройствах у

01:12:22

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

01:12:24

гораздо

01:12:27

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

01:12:29

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

01:12:32

юзать всегда где это можно нужно и где

01:12:35

он реально

01:12:36

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

01:12:39

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

01:12:42

чтобы у нас это было еще изобильна мое

01:12:44

это дело поломаем дам что это у нас 800

01:12:49

пикселей так и запишем

01:12:55

810 пикселей мы ага но мы опять можем

01:12:59

использовать move all sources и запихать

01:13:02

туда

01:13:05

и

01:13:07

[музыка]

01:13:08

запихать туда дисплей flex принципе

01:13:11

отсюда у выпекать вот и вот это вот все

01:13:14

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

01:13:18

бал торс

01:13:19

соответственно на мобильных экранах у

01:13:22

нас строк кода стало меньше до замечаете

01:13:26

видите бац-бац вот и

01:13:31

тут нам нужен отступ тут нам нужен

01:13:35

отступ

01:13:37

мы его можем сделать сразу мы его можем

01:13:40

сделать

01:13:42

слишком сложно будет для вас давайте мы

01:13:45

его сделаем просто по босяцкий макс вы

01:13:48

ts 810

01:13:55

20-ого

01:13:59

да и

01:14:01

тут же можно взять воде раз уж мы

01:14:08

немножечко

01:14:10

под уменьшить отступ и да зачем нам

01:14:13

такие большие

01:14:15

вот и смотрите еще один лайфхак

01:14:20

который я люблю делать и делюсь с вами

01:14:22

видите у нас тут отступы есть и еще

01:14:26

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

01:14:29

есть доступ и и здесь и

01:14:32

еще вот здесь и

01:14:34

лично мне очень не нравится вот эти

01:14:37

двойные отступ и зачем они нужны и место

01:14:40

доп типа занимают и и нафига и смотрите

01:14:44

что я делаю я беру и вот этот наш бодик

01:14:48

на определенном разрешение я его

01:14:50

раздвигаю то есть я фактически убираю

01:14:54

вот эти два отступа у меня остаются

01:14:56

только внутренние

01:14:59

вот таким образом вот

01:15:03

так и вот так таким образом мы экономим

01:15:06

не остается по у нас все равно остаются

01:15:08

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

01:15:12

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

01:15:15

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

01:15:18

нравится юзайте на здоровье

01:15:22

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

01:15:28

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

01:15:32

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

01:15:34

также бубал forst в действие до чтобы у

01:15:39

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

01:15:42

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

01:15:44

что тоже очень хорошо

01:15:46

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

01:15:50

почти помещаются форма

01:15:52

как бы можно так оставлять но можно и не

01:15:57

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

01:16:01

где у нас input потом мы зададим сто

01:16:05

процентов ширины тогда он должен да да

01:16:09

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

01:16:11

принципе этого вполне достаточно но если

01:16:14

вам кажется что этого недостаточно вы

01:16:16

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

01:16:19

кнопку этот сделает выше ваш сайт

01:16:23

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

01:16:26

что вы можете тут сделать

01:16:29

дополнительно это взять да под умерших

01:16:32

отступ у кнопки например

01:16:38

макс

01:16:41

чтобы как-то увеличить поле да то же

01:16:45

самое вы можете взять input и под

01:16:48

уменьшит там

01:16:51

болт например если вы хотите оставить в

01:16:55

ряд но увеличить мест ну в принципе тут

01:16:57

можно ввести довольно большой email я

01:17:01

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

01:17:03

вот мы порешали нашу формочку

01:17:07

движемся дальше

01:17:10

дальше у нас вот такой вот замечательный

01:17:13

блог опять же да я знаю что вы будете

01:17:16

сейчас писать что это скорее всего блок

01:17:19

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

01:17:22

и скорее всего правы но в рамках данного

01:17:26

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

01:17:28

буду его верстать как выделенный вот

01:17:31

потому что много времени уйдёт на

01:17:33

изменения лайза и 8g меня не я там

01:17:36

острог фил вот это вот все вам щас не

01:17:39

нужно я бы хотел чтобы хоть что-то с

01:17:43

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

01:17:46

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

01:17:49

эту мелочь которая которая вам не не

01:17:53

особо полезна как по мне ну

01:18:03

работаем значит get in touch

01:18:29

get in touch контейнер и собственно у

01:18:32

нас тут есть шапочка опять же ее

01:18:35

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

01:18:37

естественно поменяем здесь элемент ну

01:18:40

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

01:18:43

люблю работать с готовыми блоками

01:18:46

я в прошлой части говорил что

01:18:49

особенно это проявляется в крупных

01:18:52

проектах да фактически мы потом просто

01:18:55

собираем сайт как конструктор когда у

01:18:58

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

01:19:01

блоков кто просто

01:19:03

складывая

01:19:05

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

01:19:09

какие-то айтемы этом

01:19:15

можем вывести в отдельный блок для

01:19:17

удобства

01:19:20

так ну чё у нас там чё у нас там tight

01:19:24

ay can

01:19:32

emails

01:19:39

пусть это будет лейбл и

01:19:45

кнопочка виде ссылки бабкам

01:19:50

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

01:20:04

почту напомним что почту всегда пишем

01:20:07

mail.ru и вставляем почту в атрибуте

01:20:10

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

01:20:16

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

01:20:19

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

01:20:21

в почтовый клиент

01:20:34

перенес тех сейчас по выгружаю гонки

01:20:48

бед и дач у

01:20:55

меня часто спрашивали после первой части

01:20:59

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

01:21:03

сколько времени я бы и сделал если бы я

01:21:07

не болтал и имел два три монитора и в

01:21:10

общем не отвлекался бы по времени сложно

01:21:13

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

01:21:16

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

01:21:18

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

01:21:20

чуть быстрее чтобы не повторяться до да

01:21:23

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

01:21:26

почти полтора часа это уже четыре с

01:21:28

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

01:21:30

это дело закончим а может даже быстрее

01:21:32

то и считаете что 3 ну плюс 3 пусть 6

01:21:37

часов до даже путь 5 часов пять часов но

01:21:40

это очень много болтовни очень медленно

01:21:43

вот это вот все в лампа в глаза светит

01:21:45

постоянно нужно говорить стресс потому

01:21:48

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

01:21:51

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

01:21:54

половиной часа

01:21:55

с 2 с половиной часа примерно я бы это

01:21:58

сделал может даже быстрее если прям вот

01:22:00

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

01:22:04

клиента может быть от 25 долларов за

01:22:06

такой сайт до 100 долларов и вот

01:22:09

смотрите при скорости 2 часа даже 20

01:22:13

долларов это 10 баксов в час десять

01:22:15

баксов в час это до хрена да вот поэтому

01:22:19

качайте скорость и когда вы будете

01:22:21

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

01:22:23

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

01:22:26

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

01:22:30

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

01:22:32

то

01:22:36

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

01:22:40

стрима вы можете как бы доказательная

01:22:42

база у вас есть это реально что скажет

01:22:48

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

01:22:51

про мое рабочее место и там я

01:22:54

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

01:22:57

вот все это гораздо быстрее верстка

01:22:59

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

01:23:01

мониторной системе гораздо в разы

01:23:08

так я выгрузил можно

01:23:12

заняться все состав этом touch

01:23:42

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

01:23:50

так сколько у нас человек

01:23:52

225 на первой части было 600

01:23:55

одновременно людей это мегакруто

01:23:57

смотрите во второй части уже многие не

01:24:00

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

01:24:11

80

01:24:16

136

01:24:22

так

01:24:23

отлично

01:24:29

80 дисплей flexline рядом с центром

01:24:36

так вот у нас айтем

01:24:38

что тут у нас extra long центр

01:24:43

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

01:24:47

flex direction полу и все по центру

01:24:52

вот так будет лучше и майлз тоже директ

01:24:56

то же самое

01:25:00

вот

01:25:06

да

01:25:11

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

01:25:15

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

01:25:18

дальше backgroundcolor белый у этих по

01:25:23

умолчанию и

01:25:25

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

01:25:29

20 или даже по 15

01:25:33

вот

01:25:35

да

01:25:37

или нет

01:25:41

сверху снизу под 50

01:25:56

ok

01:26:02

так и nail color in харит

01:26:09

наследуем

01:26:11

свет сразу а вот

01:26:16

хотя бы тех decoration underline

01:26:22

да что тут еще по стилям

01:26:30

600 и

01:26:43

не угадал блин так фалсо 16

01:26:51

отлично дальше от иконочки отступ не из

01:26:54

15

01:27:08

да

01:27:10

право на и тут 15 тут 15 отлично мы

01:27:14

можем тогда делать ход конем так это я

01:27:18

показывал уже прошлой части так

01:27:21

но 2 ст

01:27:27

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

01:27:30

первого уровня делаем отступ 15 тогда

01:27:34

почти гэп от гряда

01:27:37

простыми методами

01:27:40

кнопочка дорогая моя

01:27:43

44 высота

01:27:45

поехали

01:27:48

минхо 44

01:27:51

displex создан центр что там еще у нас

01:28:01

14-24 у них особо тут уж точно

01:28:09

akp 120

01:28:14

и безопасности 5

01:28:19

шикарно как по мне

01:28:22

600 фонтейн чуть-чуть набирают вес

01:28:29

эти кнопочки кнопочки так прошлый раз я

01:28:33

там позабывал hover сделать сейчас

01:28:35

сделаю

01:28:38

hover backgroundcolor

01:28:40

оранжевый

01:28:42

свет белый но естественно накинем

01:28:45

немножко магии анимации transition

01:28:50

легко и просто делаем классный хауэр get

01:28:55

сапорт

01:28:58

16-24

01:29:01

фасад ну ладно пусть 16

01:29:05

фан-сайт 16 line хоть сто пятьдесят

01:29:08

процентов

01:29:11

на самом деле не 600 и 700

01:29:17

парам парам пам пу

01:29:21

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

01:29:25

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

01:29:28

71 72

01:29:31

72 одинаково практически ничего делать

01:29:34

не нужно

01:29:43

что я на калькуляторе считаю на

01:29:45

калькуляторе считаю line хайд в

01:29:47

процентной то есть фильмом не дает

01:29:49

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

01:29:51

четыре пикселя land хайд и размер 16

01:29:55

шрифтом значит 24 116 получай 150 из

01:29:59

умножить на столб 150 150 процентов

01:30:02

light хотя всегда перевожу в проценты

01:30:04

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

01:30:07

будем менять размер шрифта line хоть тут

01:30:10

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

01:30:12

нужно будет его менять

01:30:14

оптимизация

01:30:16

скорость

01:30:18

так

01:30:22

до продолжать

01:30:31

2 там бла-бла-бла другие эти и вот здесь

01:30:35

что у нас тут у нас модификатор типа

01:30:38

актив

01:30:41

типа актив

01:30:52

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

01:30:56

начнем лохматик бабушку

01:31:00

долго-долго

01:31:02

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

01:31:06

color белый

01:31:11

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

01:31:29

так попробуем

01:31:32

ногам выгружают 2 layer попробуем

01:31:35

закрыть это вот

01:31:39

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

01:31:42

то можно ее выделить их да вот две части

01:31:46

и нажать

01:31:49

нажать shift control джей то есть

01:31:52

сгруппировать потому что оригинальная

01:31:55

группировка на какой-то чуть шире а вот

01:31:57

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

01:32:00

как бы в одну как бы папочку словно и

01:32:02

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

01:32:04

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

01:32:06

видите повезло все окей

01:32:11

обращаемся к кнопке внутри вот этого

01:32:15

модифицированного организма пишем тут

01:32:18

меняю border на белый меняем цвет на

01:32:23

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

01:32:25

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

01:32:28

что забуду как верстать в ссср

01:32:31

по будут тупить потом а тут мы наоборот

01:32:35

а но здесь у нас согласно здесь у нас х

01:32:37

вор остается

01:32:48

ладно хорошо а

01:32:59

что такое сейчас

01:33:02

аллану дашь дурачок

01:33:06

давайте вот так вот сделаем

01:33:17

там идет

01:33:21

приоритет

01:33:24

всякий

01:33:26

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

01:33:31

мне до

01:33:36

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

01:33:38

кажется

01:33:40

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

01:33:43

600 ну значит кажется едем дальше и

01:33:49

третий объект 3 у

01:33:55

нас принципе готов

01:33:58

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

01:34:01

у него здесь отступы побольше 80 так и

01:34:05

запишем и

01:34:12

должно быть норм вот поскольку милой то

01:34:16

илай на этом центр и flex контейнера то

01:34:18

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

01:34:21

и

01:34:24

зафигачили мы

01:34:27

этот блок

01:34:37

до определенного момента он тянется но

01:34:40

потом всем что-то надо будет делать а

01:34:42

что делать естественно

01:34:45

992 так вот и наш flex опять используем

01:34:49

мин быть потому что нам нужно вот это

01:34:53

все именно там

01:34:56

минут а когда достигаем то у нас

01:34:59

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

01:35:02

хорошо для нас все складывается для нас

01:35:06

хорошо также мы можем сразу убрать вот

01:35:10

эти двойные отступы

01:35:19

здесь

01:35:20

маржан

01:35:26

-15 вот так

01:35:29

бог да опять чтобы тут было у нас

01:35:32

прикольно так

01:35:34

вот так

01:35:40

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

01:35:45

здесь уже нужно

01:35:48

макс будет

01:35:51

федор 30 или 50

01:35:58

семьсот шестьдесят семь тридцать

01:36:01

здесь

01:36:05

50 50

01:36:08

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

01:36:10

5050

01:36:21

смотрим так так так так ну блин неплохо

01:36:28

как по мне как по мне очень даже неплохо

01:36:31

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

01:36:34

конечно не анкеровку всегда отступы тут

01:36:37

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

01:36:40

можем его привести как бы общему

01:36:42

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

01:36:46

мы можем его сделать тоже 50 например

01:36:50

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

01:36:55

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

01:37:05

ну ну типа

01:37:13

довольно широко здесь выглядит но

01:37:15

по-другому

01:37:16

оставлять 2 одну переносить не хорошо

01:37:19

поэтому из всех зол это меньше

01:37:23

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

01:37:26

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

01:37:30

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

01:37:33

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

01:37:35

то есть

01:37:37

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

01:37:40

можно уже потом

01:37:42

вот сейчас сколь бы

01:37:45

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

01:37:50

rachel идём дальше вот у нас тут такой

01:37:54

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

01:37:57

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

01:37:59

нас контакт осно

01:38:11

вот как вам щас вам сложно понимать то

01:38:15

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

01:38:17

понятно пишите

01:38:23

интересно

01:38:49

так

01:39:07

мне сложно только учусь не все понятно

01:39:11

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

01:39:13

пересмотреть лично то есть вы можете

01:39:16

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

01:39:17

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

01:39:19

кому то уже более больше понятно чем

01:39:23

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

01:39:25

проследили что но

01:39:26

немножко времени немножко усилий и вы

01:39:29

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

01:39:45

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

01:39:48

курсы в принципе после его прохождения

01:39:50

вам должно быть тут все понятно потому

01:39:53

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

01:39:56

намного больше там есть чем я тут

01:39:58

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

01:40:01

посмотрите курс

01:40:07

так в принципе я тут закончил с этой

01:40:10

секции

01:40:12

смотрю на нее как баран на новые ворота

01:40:15

чё смотреть верстать надо ее чуть не еще

01:40:18

делать до

01:40:40

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

01:40:44

и контент space between до раскидаем

01:40:47

наши объекты

01:40:48

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

01:40:52

это скину на

01:40:53

погрешность дизайнера не знаю зачем там

01:40:57

это тот стукну

01:40:58

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

01:41:02

о стал ее от этого дизайнера который тут

01:41:05

непонятно чем занят был так 24 32 вот у

01:41:10

меня есть фон сайт 24 align хай 32 и

01:41:13

открываю калькулятор 32 отделена 24

01:41:16

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

01:41:18

процента так и запишем moan хайд 133

01:41:22

процент я показывал первой части к это

01:41:24

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

01:41:26

cold но это сложнее чем открыть

01:41:28

калькулятор

01:41:30

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

01:41:33

то пользуюсь калькулятором

01:41:50

вот что у нас получается

01:41:53

дальше здесь у нас 10 пикселей отступом

01:41:57

тайтлом

01:42:08

есть дальше лай на этом с центр и

01:42:13

кнопочка

01:42:22

58 высотой

01:42:38

а ну-ка

01:42:41

отцентровать а вот так

01:42:50

свет белый

01:42:53

другое дело

01:42:56

хауэр

01:42:58

батон доллар давайте будем делать более

01:43:02

темный

01:43:05

так более темный

01:43:09

транзишен можно бы грамм

01:43:18

так чтобы по фэн-шуй куда

01:43:22

уаля

01:43:24

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

01:43:29

так ага вот здесь вот в этом месте стоит

01:43:32

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

01:43:36

write 20 да зачем нам тут допускать

01:43:40

прилипания

01:43:42

поставили вот стопе спин спокойно

01:43:44

запишите

01:43:49

так хорошо и

01:43:52

где-нибудь на 768 мы уже уйдем в астрал

01:44:00

минует вот это вот все мы красивенько

01:44:04

отправил на бал first

01:44:06

вот и

01:44:09

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

01:44:13

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

01:44:20

давайте мы сделаем вот так

01:44:34

замечательно

01:44:43

красиво же тупо красиво

01:44:50

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

01:44:53

едем дальше падванчик подвальчик такой

01:44:57

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

01:44:59

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

01:45:03

работать

01:45:05

утром вот туда все выгрузим

01:45:18

так ребят вам нужен результат верстки

01:45:21

вот этой всей

01:45:23

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

01:45:27

chicco

01:45:40

пока я выгружаю пожалуйста

01:45:43

черканите

01:45:50

да

01:45:53

нужен

01:45:55

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

01:45:59

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

01:46:02

стриму и чтобы я понимал что это полезно

01:46:05

и вообще напишите полезно ли это делать

01:46:08

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

01:46:12

вот ну естественно будут и сложные но

01:46:16

такие могут такие могу делать чаще вот

01:46:19

напишите что ставьте лайк

01:46:22

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

01:46:25

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

01:46:28

смотрите вот и будем как бы

01:46:32

будем продолжать спасибо вам большое за

01:46:36

поддержку

01:46:47

так ну что я сразу выгружено верно

01:46:50

социальные сеточки раз уж пошла такая

01:46:53

пьянка

01:46:59

просто куда-то

01:47:20

удобно зажать control и тыкнуть на слой

01:47:23

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

01:47:26

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

01:47:28

понял вот окей так по выгружал и

01:47:32

займемся

01:47:34

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

01:47:37

сам footer есть

01:47:39

ограничивающие рано потому что у нас

01:47:42

footer есть фута to footer потом

01:47:48

да а уже внутри ограничивающие у каждого

01:47:56

кстати может быть и одинаков

01:48:04

ну точнее тут можно сделать footer main

01:48:08

вот так вот тут footer супер контейнера

01:48:14

стань разные класса чтобы я мог

01:48:16

по-разному с ними работать

01:48:19

дальше что там у нас

01:48:22

раз два три 4 5 5 колонок у

01:48:30

торговым фута лейбл

01:48:36

на можно использовать

01:48:44

меню

01:48:46

дальше bull food or less

01:48:58

можно вообще

01:49:04

вывести в меню food or

01:49:13

link вот так бы я вам совет это все тело

01:49:21

если бы мы тут были делали что-то

01:49:24

посложнее то здесь можно было бы

01:49:26

использовать хитрые спойлеры которые при

01:49:29

список превращался быть спойлеры и все

01:49:32

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

01:49:35

всем не хочу

01:49:39

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

01:49:43

выпендрёжа конечно это классно но все по

01:49:46

порядку

01:49:49

вот сейчас у нас как бы такая история

01:49:54

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

01:50:00

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

01:50:03

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

01:50:07

мой а потому что как вы понимаете это не

01:50:09

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

01:50:12

вас

01:50:13

вот время мы просто будем тратить

01:50:17

поэтому я хотя бы вот так заголовки по

01:50:20

переношу чтобы вам было более понятно

01:50:23

что тут и где

01:50:27

get in touch ну и последнее вот этот он

01:50:30

другой

01:50:33

фото

01:50:35

за

01:50:51

поэтом

01:50:53

контакт с footer ой там

01:50:56

[музыка]

01:50:59

как бы нам от бы это сделать мы можем

01:51:02

сделать это грандом с модификаторами

01:51:05

маун да и вообще во сделал все это дело

01:51:09

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

01:51:13

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

01:51:17

вот как тут то обязательно пишем тел :

01:51:21

и номер телефона но без скобок пробела

01:51:24

теряет дефисов и так далее только цифры

01:51:27

опять же чтобы пользователь мог кликнуть

01:51:29

и

01:51:30

сразу набрать ну ма ну здесь давайте

01:51:35

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

01:51:38

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

01:51:42

кентукки

01:51:45

e-mail

01:51:48

правила

01:51:50

email и mail

01:51:58

тоже

01:51:59

майлсу

01:52:03

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

01:52:10

mail.ru как вы там чего

01:52:17

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

01:52:20

научитесь

01:52:28

отлично рад рад что вам нравится это

01:52:31

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

01:52:33

понимаете

01:52:35

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

01:52:39

заданный и

01:52:41

что вы самое главное что кстати вот

01:52:44

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

01:52:47

да то есть я

01:52:51

запостил в stories

01:52:54

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

01:52:58

честно говоря отметил меня в stories 1 1

01:53:02

отзыв 1 заказ и 1 отзыв видите вот не я

01:53:08

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

01:53:11

что кто чего добился и так далее вот

01:53:13

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

01:53:16

получают первые заказы поздравляю автора

01:53:20

данного поста

01:53:24

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

01:53:26

ссылка в описании я тут всяческим таким

01:53:29

делюсь меньше идти больше фана жизни и

01:53:34

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

01:53:37

дружить еще тут лично и на слушай тоже

01:53:41

подписывайтесь

01:53:44

осталось вот 100 человек сто вот в 98

01:53:50

человек 98 человек осталось

01:53:53

ну я надеюсь вы же еще и смотреть будете

01:53:56

они просто подпишитесь иначе какая

01:53:59

польза то надо что я надеюсь вам будет

01:54:01

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

01:54:03

отпишитесь пожалуйста

01:54:06

я не не буду обижаться но если

01:54:09

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

01:54:11

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

01:54:13

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

01:54:17

и

01:54:18

что собственно я и чтим ага ну давайте

01:54:21

уже добьем подвальчик до самый

01:54:24

подвальчик подвальчик тут у нас типа

01:54:26

копирайтер

01:54:32

future копия их назовем и

01:54:39

footer

01:54:42

social

01:55:08

быстро все легко и быстро бам барам

01:55:11

барам

01:55:15

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

01:55:18

здесь пишу alt и но лучше конечно их

01:55:22

прописывать и об этом говорил

01:55:25

адекватно то

01:55:27

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

01:55:29

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

01:55:32

порядок

01:55:34

берем наш футаж в наши зубки так идем

01:55:39

вновь замечательно замечать и вашу

01:55:42

каскадную табличку стиле значится

01:55:45

их пятница настроение отличное

01:55:51

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

01:55:54

тут у нас всего поехали значит что food

01:55:57

or to

01:55:59

footer top

01:56:02

background начнем с этого сразу

01:56:04

запоминаю отступы 50 так и запишем в

01:56:07

игровом 50

01:56:09

любишь

01:56:11

да дальше

01:56:13

footer main дисплей flex колумб сколько

01:56:17

у нас там была колонок 5

01:56:19

так и запишем

01:56:23

раз два три 4 5 шикарно цвет белый можно

01:56:28

цвет белый лейбл перенести меню footer

01:56:31

link белый цвет

01:56:36

есть дальше company info

01:56:41

жирный

01:56:44

да клей был apple apple apple в меню

01:56:46

меню лезть меня это меню link а

01:56:50

вот лейбл

01:56:52

700

01:56:54

fans a 16 line with 150 процентов и

01:57:04

20 пикселей от

01:57:07

можно смело ставить

01:57:10

так есть дальше bout a с отдельной

01:57:13

ссылочки 142 бла бла бла бла бла бла

01:57:20

линк и

01:57:22

[музыка]

01:57:24

python

01:57:26

not not close

01:57:32

сколько было отступ

01:57:36

1010

01:57:38

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

01:57:42

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

01:57:44

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

01:57:50

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

01:57:54

у меня footer main является

01:57:58

ограничивающим контейнера поэтому я не

01:58:04

могу давайте все таки сделают более

01:58:07

понятно это будет arrow

01:58:11

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

01:58:20

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

01:58:25

нужную нам с легкостью сейчас мы

01:58:29

поработаем с отступами безопасности

01:58:33

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

01:58:38

визуально

01:58:42

визуально у нас ничего не должно

01:58:44

поменяться

01:58:46

но теперь

01:58:48

[музыка]

01:58:54

так хорошо

01:58:57

принципе раб нам поможет рановато делать

01:59:01

раз у нас есть отступы пусть она

01:59:04

потянется какое-то время

01:59:06

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

01:59:09

решать давайте закончим с контактами

01:59:12

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

01:59:16

экс direction каллум для я сразу

01:59:20

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

01:59:23

строчную фактически дам потому что они

01:59:25

стали fleck с элементами дали not last

01:59:29

chance для всех отступ естественно наш

01:59:33

не знаю возьму 15 тут наверняка меньше

01:59:37

по иконкам 12 почти угадал так поехали с

01:59:44

иконками

01:59:46

background для иконки footer vaikams

01:59:51

один

01:59:52

лев но у rapid для всех сайтов по 1

01:59:58

класс сколько 20 не 24 1034 я показываю

02:00:04

вариант с бэкграунда можно было бы

02:00:06

иконки выводить в html но здесь я не

02:00:09

вижу в этом смысла и высота у них 24 не

02:00:13

30 так и запишем live aid 30 пикселей

02:00:16

или же

02:00:19

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

02:00:23

и мин хо и 30 пикселей

02:00:26

так еще можно поступить чтобы у нас

02:00:29

иконочка было видно но

02:00:33

дома 02 но со у нас будет хорошо 3

02:00:39

тысяч

02:00:41

быстро знания хорошие хорошее знание

02:00:43

теории

02:00:45

помогает мне не тупить

02:00:53

двадцать четыре пикселя

02:00:56

line хоть это у нас сто сорок два

02:00:58

процента

02:01:05

ну вот здесь вот вот здесь вот они

02:01:07

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

02:01:10

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

02:01:12

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

02:01:15

типа

02:01:18

это на любителя ну вот я сделаю вот так

02:01:21

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

02:01:24

прибью кверху

02:01:27

по-моему круто

02:01:34

а в

02:01:35

такси crash in underline

02:01:38

хотя бы так так ты тоже самое для

02:01:45

меню фото link

02:01:52

тыц тыц тыц хотя бы мне кажется или тут

02:01:56

и больше о 110 и

02:01:59

line хоть

02:02:02

2414

02:02:04

170

02:02:11

это конечно у меня тут нету ничего

02:02:22

дизайн блок

02:02:25

подход не сработает без дисплея

02:02:28

так стоять

02:02:32

24 поделить на 14

02:02:35

171 они 140 я туплю бляха как чёрт о

02:02:43

похоже на правду

02:02:49

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

02:02:53

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

02:02:56

пикселей

02:02:58

так и запишем

02:03:01

контейнер дисплей flex just like and in

02:03:05

space between life and ems центр и все

02:03:09

это

02:03:10

до 760 7

02:03:15

так

02:03:17

footer со вот слушал дисплей флексия на

02:03:21

этом с центр

02:03:23

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

02:03:27

это в центр почему не сработал или что

02:03:30

это у нас тут

02:03:33

изображение изображение изображение

02:03:37

g калорий джим топ лайн vertical line

02:03:41

top и снова попробовал

02:03:50

что-то я очень сильно тупанул здесь вы с

02:03:54

чем л а вы мне ничего не говорите точнее

02:03:56

вы мне наверно говорите но я вас не вижу

02:04:05

бывает забыл в ссылке все позакрывать но

02:04:12

вот другое дело

02:04:18

20 пикселей

02:04:36

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

02:04:42

у нас secondary двадцать четыре пикселя

02:04:49

вечно забодать 4 на 14 171

02:05:05

так что в этом

02:05:12

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

02:05:16

попробуем это дело адаптировать до

02:05:33

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

02:05:36

здесь вот где у меня вот это меню я

02:05:39

сделал мину будет

02:05:44

наверное 280 пикселей

02:05:49

поставлю здесь rub

02:06:02

180

02:06:05

180

02:06:06

то есть стать

02:06:12

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

02:06:16

215

02:06:21

200 легонько

02:06:25

не легонько и

02:06:28

не канает

02:06:31

точнее

02:06:47

дурачок

02:06:53

раз два три 4

02:06:57

5 шесть тут 6 колонок просто последние

02:07:01

занимает 2

02:07:03

100 поделить на 616

02:07:07

667

02:07:08

16 667 а последние

02:07:13

зараза

02:07:15

last chaos будет занимать

02:07:19

16 67 умножить на 2

02:07:27

процента

02:07:33

вот такая тут история

02:07:36

вот

02:07:39

другое дело я

02:07:42

смотрю что-то блин не так

02:07:49

так и теперь я пытаюсь как бы облегчить

02:07:53

себе адаптив поэтому я пытаюсь тут

02:07:55

поставить какой-то бин вы из 200 чтобы

02:07:59

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

02:08:02

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

02:08:07

сейчас подберем 180

02:08:13

давайте

02:08:19

172

02:08:39

как-нибудь так только

02:08:41

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

02:08:44

лайфхак смотрите у родителя 50-50 мы

02:08:47

делаем

02:08:49

30-30 у нас остается 20 20 и именно

02:08:53

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

02:08:57

здесь у нас остается 50 и 50 но между

02:09:01

колонками у нас получается отступ и

02:09:07

вот так это все выглядит

02:09:21

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

02:09:23

выглядит сейчас я буду это делать

02:09:24

перестраивать вручную лучше

02:09:27

так

02:09:36

на

02:09:37

992 у

02:09:43

меня колонки будут 1 2 3 4

02:10:01

по 25

02:10:04

all of salt

02:10:07

100

02:10:09

вот так вот

02:10:13

так дальше

02:10:17

примерно на 700

02:10:20

по 50

02:10:30

так и

02:10:34

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

02:10:39

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

02:10:43

в нет ни погорячился

02:10:50

ну что-то между

02:10:53

нет ничего лучше ручной верстки смотрим

02:10:57

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

02:11:01

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

02:11:04

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

02:11:08

эту историю снизу она у нас прекращается

02:11:11

нам

02:11:13

767 я вижу что

02:11:17

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

02:11:35

вот

02:11:37

удар кофе по 1 таб padding bottom

02:11:49

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

02:11:56

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

02:11:59

агент бартон

02:12:01

текстовой и

02:12:03

объема там текст оnline вот

02:12:11

по-моему неплохо вернемся быстренько

02:12:14

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

02:12:17

ходор ходор меню

02:12:21

header menu link вот и здесь добавим

02:12:25

хавра а

02:12:26

то я вас ругаю что хорроров нет у вас а

02:12:31

сам ковры пропустил так и на кнопочках

02:12:43

так хабар orange у нас будет белый

02:12:49

цвет

02:12:51

оранжевый этот вот так

02:12:56

так а вот эта кнопочка

02:13:05

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

02:13:08

этим цветом и

02:13:12

белом свете вот так

02:13:16

проверим

02:13:18

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

02:13:29

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

02:13:32

я ей васенька ищем то есть конце когда

02:13:36

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

02:13:38

обязательно

02:13:41

проверяйте пробегаете еще раз тестируйте

02:13:44

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

02:13:47

ну естественно мы что-то про путь

02:13:49

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

02:13:53

ну тут на стриме и вообще молчи вообще

02:13:55

удивляюсь как я

02:13:57

верста juno типа

02:14:00

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

02:14:03

сделаем темнее и

02:14:10

курсор pointer мы ее добавим так как по

02:14:14

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

02:14:17

так этих мы делали и тут мы сделаем ну

02:14:23

чтож ребята зацените

02:14:26

зацените что у нас получилось

02:14:29

да макет несложный макет простой но тем

02:14:35

не менее здесь очень много фишек которая

02:14:37

в принципе применимый для сложных

02:14:39

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

02:14:42

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

02:14:46

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

02:14:49

все это используется

02:14:52

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

02:14:56

далее так что я надеюсь что это было все

02:14:58

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

02:15:01

вопросов у вас есть я готов на них

02:15:03

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

02:15:06

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

02:15:10

пугаетесь вот и сейчас я как бы с вам

02:15:15

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

02:15:18

канал слушай ссылка есть в описании

02:15:22

классные истории

02:15:24

простых ребят и я там тоже уже выступал

02:15:28

в качестве гостя рассказывал про свой

02:15:30

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

02:15:32

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

02:15:35

если не будет интересно не

02:15:37

подписывайтесь вот отдела а ваш но я

02:15:40

надеюсь на вашу поддержку и надеюсь

02:15:43

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

02:15:45

немножко будет такой отдых до от всего и

02:15:48

будет интересно посмотреть чужие истории

02:15:52

какие-то и жизни ok если у вас есть

02:15:55

какие то вопросы пишите

02:15:57

сколько стоила ворс к этого макета я уже

02:16:00

говорил то есть она может стоить где-то

02:16:02

25 до 100 баксов в зависимости от

02:16:07

заказчика и так далее

02:16:10

вот

02:16:15

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

02:16:18

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

02:16:21

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

02:16:25

вы сможете

02:16:27

ответить на все свои вопросы поводу

02:16:30

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

02:16:31

есть очень классные уроки и четкий план

02:16:35

развития фронтенд разработчика и как

02:16:38

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

02:16:41

все эти видео есть и яик стараюсь

02:16:43

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

02:16:45

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

02:16:48

есть карта канала очень такая простая

02:16:52

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

02:16:54

понять какие плейлисты и сны канале

02:16:56

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

02:16:59

все сделано для вас ребята для вашего

02:17:01

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

02:17:03

задействован java script от слова совсем

02:17:06

файлик подключена его подключил на

02:17:08

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

02:17:11

не написал это еще раз вам

02:17:14

доказательства что можно сделать хорошую

02:17:17

качественную верстку адаптивные без java

02:17:19

скрипта мы бывают такие задачи

02:17:32

макеты для портфолио ищите только в

02:17:34

свободном доступе все остальное

02:17:37

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

02:17:40

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

02:17:43

принадлежат дизайнеру вот я сделаю

02:17:46

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

02:17:49

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

02:17:52

вообще где где брать макеты для

02:17:54

портфолио я такое видео сделаю уже в

02:17:57

работе

02:18:02

значит если вы вели себя хорошо и

02:18:06

поставили много лайков аж 500 лайков

02:18:09

что-то маловато ну да ладно вот я выложу

02:18:13

вам архив результаты этой работы выложу

02:18:16

в telegram канале вот ссылка в описании

02:18:19

на телеграм-канал есть

02:18:22

там я выложу архив

02:18:26

вот по по итогу этих двух частей этого

02:18:29

стрима так что вы его получите

02:18:33

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

02:18:35

ребята большое спасибо вам за доверие

02:18:38

большое спасибо вам за поддержку опять

02:18:40

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

02:18:42

вы можете поддерживать подъезде оформи

02:18:46

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

02:18:48

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

02:18:51

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

02:18:54

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

02:18:58

хотите поддержать бесплатный обучающий

02:18:59

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

02:19:01

патреоне большое вам за это спасибо вот

02:19:05

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

02:19:08

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

02:19:11

даже если вы еще про это не знаете но

02:19:14

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

02:19:16

вас наблюдать за таки поэтому обучайся

02:19:19

развивается и помни живи работая

02:19:22

свободное время удач

02:19:25

[музыка]

Описание:

Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео я покажу подробную HTML CSS верстку простого макета FIGMA с кучей полезных решений и лайвхаков! Часть №1: https://www.youtube.com/watch?v=f-irDQwt1l4 Часть №2: https://www.youtube.com/watch?v=0UUK4VDblXM ❓❓ Хотите чтобы стрим остался в записи? 👉Подписываемся на канал "СЛУШАЙ!" Истории из жизни простых людей: https://www.youtube.com/c/listenstories И ЖМЁМ ЛАЙК! :) Полезные ссылки: 👉 Макет: https://www.patreon.com/posts/maket-dlia-figma-55661134/ 💪 Набор на курс по верстке: https://edu.fls.guru/ 👉Бесплатный курс по верстке: https://www.youtube.com/playlist?list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr 👉 VS Code: https://www.youtube.com/watch?v=nxCLXMBl4e4 👉 Как правильно учиться: https://www.youtube.com/watch?v=eKZNKA-jAYY 👉 План развития фронтенд разработчика (+КАРТА): https://www.youtube.com/watch?v=yJcCKuxfb2o 🔴 Карта канала: https://miro.com/app/board/o9J_lZB3YKI=/ 🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle 🔴 Instagram: https://www.facebook.com/unsupportedbrowser 🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat) 🔴 Facebook: https://www.facebook.com/unsupportedbrowser 👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - https://www.youtube.com/channel/UCJNVBfLijFSa_tBcrNZKZag 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle 🤟 Живи, а работай в свободное время! ©

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

Популярные

HD видео

Только звук

Все форматы

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

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

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

Как можно скачать видео "Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS. ЧАСТЬ №2"?

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

Какой формат видео "Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS. ЧАСТЬ №2" выбрать?

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

Почему компьютер зависает при загрузке видео "Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS. ЧАСТЬ №2"?

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

Как скачать видео "Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS. ЧАСТЬ №2" на телефон?

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

Как скачать аудиодорожку (музыку) в MP3 "Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS. ЧАСТЬ №2"?

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

Как сохранить кадр из видео "Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS. ЧАСТЬ №2"?

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

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

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