Скачать "ОТКРЫТЫЙ УРОК: создаём TO DO только с помощью вёрстки [Хекслет]"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FjGNvwfnn13E%252Fmaxresdefault.jpg&w=1139&q=75)
Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.
Оглавление
Похожие ролики из нашего каталога
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F53UnXy-V-WQ%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FCWknrPtDwMk%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FDiK_UvMYF2w%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FJkYOYtIAwR0%252Fsddefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FNkXe-ctdOHI%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FO9SHE-FhhPg%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FdwYItA-Mbzc%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252Fg0QKJCI55DM%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FmQOpL8ij4nw%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Fwmla1hxxvQI%252Fmaxresdefault.webp&w=1139&q=75)
Теги видео
Субтитры
Английский
00:00:00
[музыка]00:00:29
ну что по верстаем сегодня представляю00:00:33
вам открытый урок на котором мы сегодня00:00:36
с вами будем учиться на примере00:00:39
стандартной учебные задачи будем делать00:00:42
лучник но об этом более подробно00:00:44
расскажет наш преподаватель никита00:00:46
михайлов а я надо ли мужчина пока рада00:00:48
вас приветствовать на нашем канале00:00:50
канале hex от онлайн-школу00:00:52
программирования который будет полезен00:00:54
тем кто только только начинает свой путь00:00:57
в программировании и разработчикам00:00:59
которые хотят быть всегда в курсе00:01:01
последних новостей и повышать свои00:01:04
скиллы всех приветствую очень здорово00:01:07
что уже пошли комментарии00:01:09
более подробно про задачи мы тоже всем00:01:11
расскажем как вы видите у нас работает00:01:14
чат в ю-тубе у нас открыты комментарии в00:01:16
youtube если у вас возникают вопросы по00:01:18
ходу нашего открытого урока вы всегда их00:01:21
можете задавать и мы с радостью на них00:01:23
ответим и сегодня будем говорить много00:01:26
разного интересного про верстку про00:01:28
групповое обучение в профессии00:01:30
верстальщик на hex нити и многом-многом00:01:33
разным а вот теперь слово передаю никите00:01:37
для того чтобы он рассказал про себя и00:01:39
поведал нам что же мы сегодня на этом00:01:41
открытом уроке будем делать так но всем00:01:45
привет ещё раз меня зовут никита я00:01:48
преподавателю first in a head хотя00:01:50
давайте чуть-чуть поподробнее расскажу о00:01:54
себе мы это тоже сделаем вот так красиво00:02:02
так кто вообще я такой ну как я сказал00:02:08
меня зовут никита я в свое время окончил00:02:09
московский колит номер два ции по00:02:12
специальности автоматизированные системы00:02:14
обработки информации и управления00:02:16
потому в институте мои закончил00:02:20
информационной безопасности и вот 201300:02:23
года уже в разработке то есть00:02:25
полноценной работаю в компаниях до00:02:28
прихода на hex это были там в студии00:02:31
какой-то фриланс дорабатывал00:02:33
поддерживала зарабатывал клиентские00:02:35
сайты причем абсолютно разных00:02:38
направлениях это от каких-то лэндингов00:02:41
совсем небольших00:02:42
том числе и даже дизайне на долго00:02:45
достаточно крупных интернет магазинов00:02:46
крупных компаний они будут сейчас00:02:49
называть на всякий случай но поверьте00:02:52
нашла за этот период поработал с00:02:56
версткой соответственно .00:02:59
java скриптов и сейчас преподаю верстку00:03:02
на хек свете и стараюсь как бы постоянно00:03:04
совершенствоваться как сказал один из00:03:08
знакомых что мол я занимаюсь научной00:03:11
деятельности верстки но возможно это и00:03:15
так то есть практике может предстала00:03:17
чуть чуть поменьше но стало больше00:03:20
времени на чтение там различной00:03:22
документации спецификации00:03:24
достаточно уход в глубину ну являясь00:03:28
евангелистом и контрибьютором под strap00:03:30
а то есть считаю что аббат страхи00:03:33
достаточно такое неправильное мнение00:03:35
сложилось особенно там в русскоязычной00:03:39
среде не знаю откуда это пошло что сам00:03:42
bootstrap является для отмены к00:03:45
прототипов и ничего больше при этом00:03:47
bootstrap кто использует ну естественно00:03:51
hex лет то есть мы прям так полностью00:03:53
почти сидим на чистом bootstrap00:03:55
использует с пути файги т'хаб duolingo00:04:00
кто еще проект манга00:04:04
нет сайт построена под strappy но00:04:07
я думаю понятно что даже крупные00:04:10
достаточно компании берут00:04:11
для разработки ну и много говорит о том00:04:15
что его создал twitter00:04:17
наверное нет сделали не просто убирайте00:04:19
приколы давайте посмотрим что у нас00:04:22
вообще сегодня путь на в финале мы его00:04:24
там разобъём условно на пять частей в00:04:27
начале чуть чуть поговорим о том что00:04:30
такое верстка где она применяется какие00:04:33
у нее перспективы какие перспективы для00:04:35
вас если вы хотите изучать верстку потом00:04:39
мы чуть-чуть по верстаем шапку нашего00:04:42
тут я покажу макет кстати внизу вы00:04:46
можете увидеть там в ссылке есть уже нас00:04:48
вёрст данный макет00:04:49
есть ссылки на ферму с шаблоном поэтому00:04:54
вы можете спокойно повторить это все в00:04:56
домашних условиях что я рекомендую то00:04:59
есть если вы не сделаете как-то00:05:01
по-другому может быть там чуть получше00:05:03
или в принципе что-то изменить и кидайте00:05:06
потом в комментарии всегда будет00:05:08
интересно посмотреть после этого мы00:05:12
чуть-чуть поговорим об обучении в00:05:13
группах то есть что такое у нас вообще00:05:16
групповое обучение причем здесь верстка00:05:18
и как это будет работать00:05:20
дверь ставим после этого уже наш тут00:05:23
будут пункты наверное это самое такая00:05:26
объемная часть потому что в ней мы еще00:05:30
затронем тему доступности поэтому будет00:05:33
я надеюсь интересно и после этого уже00:05:36
непосредственно перейдем к вопросам и00:05:39
ответам ну на которых вы собственно00:05:44
сможете задавать вопросы я что-то отвечу00:05:46
надеюсь смогу ответить на все и вот00:05:50
давайте посмотрим сейчас чуть-чуть про00:05:53
то что мы вообще бункер стать то есть00:05:58
вот это вот называется туду то есть тату00:06:02
это что нам нужно сделать соответственно00:06:05
мы возьмем какую-то шапку приветствие мы00:06:08
сделаем пункты мы сделаем так чтобы их00:06:11
можно было попирать они как-то на это00:06:13
реагирует и то есть вот если посмотреть00:06:15
на последний пункт00:06:16
он выбран то есть соответственно он стал00:06:19
чуть светлее у него яркость уменьшилась00:06:22
мы там чертой показали что этот пункт00:06:26
выполнен и как бы отлично что у нас из00:06:31
инструментария не буду использовать00:06:33
visual studio код так как нет просто00:06:36
привычнее но вы можете повторить даже в00:06:38
блокноте в этом нет ничего страшного то00:06:43
есть берите любой редактор который вам00:06:45
доступен знаком поэтому выполнить этот00:06:49
проект смогут там даже полностью новички00:06:52
который вот только тока вкатывается00:06:54
верстку изначально я хотел это сделать с00:06:58
использованием pad и scsi снова подумал00:07:01
что все же это будет достаточно00:07:02
сложновато потому что для повторения00:07:04
проекта придется00:07:07
разворачивать непосредственно все это00:07:10
окружение нужно поставить поставить с00:07:12
css ну точнее сад стинг css это нужно00:07:17
настроить компилировать и так далее и00:07:20
если вы только-только начинаете верстать00:07:23
и там знаете00:07:24
буквально базовые вещи под может00:07:26
показаться сложным и скорее отпугнет00:07:27
поэтому сегодня возьмём чисто html00:07:30
чистый css спокойно повторяете все будет00:07:33
отлично ну и проверяйте эту воду в00:07:36
google chrome00:07:37
но он здесь нет принципиальной разницы00:07:39
любой и современные браузеры подойдет00:07:41
понятно не надо x использовать интернет00:07:44
к спорт 600:07:45
надеюсь у вас там windows 98 или 200000:07:51
поэтому вот наверное пока что здесь мы00:07:57
определились и давайте покажу с00:08:02
презентацией закончены и сейчас скорую00:08:05
перейдем на непосредственно верстку в00:08:08
отеле в комментариях уже радуется что00:08:10
все нативная до00:08:11
в этом и дал смысл milenium не стоит00:08:16
упоминать у меня душевные травмы с ним00:08:21
так вот он я00:08:24
давайте наверно zachariah полностью свой00:08:29
экран00:08:32
поделиться00:08:33
надеюсь массаж умеешь выведет у00:08:36
здравствуйте не обращайте внимание так00:08:42
так так так так так вот у нас будет00:08:46
visual studio .00:08:49
сделаем так называемом цен море чтоб нас00:08:51
ничего не отвлекало и можно было шрифт00:08:54
сделать покрупнее вот проект фирме00:08:58
опять-таки же это доступно в описании00:09:01
можете посмотреть давайте увеличим00:09:06
чуть-чуть вот надеюсь видно из чего у00:09:09
нас будет вообще этот туду состоять00:09:11
сейчас мы об этом тоже поговорим после00:09:14
того как посмотрим какая базовая00:09:16
настройка есть то проекта что я уже00:09:18
добавил00:09:19
нам предстоит добавить то я сделал00:09:21
небольшую совсем крохотную подготовку00:09:24
чтобы некоторые вещь нам просто не00:09:28
бегать не копировать и не тратить на это00:09:29
время так но вот здесь у нас будет00:09:32
полностью наш проект включим еще00:09:34
инспектор чтобы если что какие-то момент00:09:38
можно было быстро подглядеть скажите00:09:43
нормально видно слышно ничего такого00:09:46
количества вкладок не тормозит наташа00:09:49
сможет передать мне информацию будет00:09:51
отлично потому что я ничего не вижу пока00:09:55
все окей обещают какие-то неполадки и00:09:58
ребята будет не очень все видно то00:10:00
пишите это в комментариях будем очень00:10:02
оперативно и быстро на это реагировать00:10:04
да я постараюсь достаточно сделать00:10:07
крупный шрифт ну чтобы он хотя бы00:10:09
вползал в рамки мы сделаем там00:10:11
сплит-скрин ну так что а кстати я забыл00:10:16
сказать что у нас еще из инструментария00:10:18
я запустил сервер если вы знакомы с м т00:10:23
м м того собственно тоже можете там00:10:26
оставить использовать вещь позволяет вам00:10:29
и стоит директории в который вы00:10:31
находитесь запустить такой небольшой00:10:33
сервак по стандартному порту и00:10:36
автоматически отслеживать изменения в00:10:38
тех файлах которые если у вас нативный00:10:41
озерск там какой то не знаю менее00:10:45
шаблончик условный лендинг этого решение00:10:48
достаточно у нас будут ли нтр и что00:10:51
важно вот здесь мы их если чтобы купить00:10:53
сейчас вот в яндекс html пиши нам нужен00:10:56
так type 1 потому что у нас index.htm и00:10:59
сейчас пустой стращать непосредственно00:11:05
терминалом я не буду давайте посмотрим00:11:08
на файлы нашего проекта что мы вообще00:11:12
здесь используем у нас будет директория00:11:16
а секс внутри директория фонд который 400:11:20
будут шрифта моих соответственно00:11:23
подключим и будем использовать то есть00:11:25
один шрифт он с засечками00:11:28
можно посмотреть что он будет00:11:30
использоваться вот в этом00:11:33
блоки которые выходят вот тут уже живете00:11:37
прибежали к нам в макет который выводит00:11:42
собственно дату00:11:43
это у нас спуске в ты и засечками все00:11:46
остальное это шрифты без засечек00:11:49
в нескольких вариациях и для этого мы00:11:52
будем использовать00:11:53
шрифт railway то есть мы сразу возьмем00:11:55
обычный начертание средние начертание00:11:58
который нас здесь будет использоваться00:12:01
жирное начертание00:12:03
причем кстати наверное забавно что00:12:05
обычные начертание я нигде не оставил но00:12:08
мы его сером подключен на всякий случай00:12:10
у нас есть территория style00:12:14
в которые будет всего лишь один css-файл00:12:17
и файл индекса чтимой поздно я думаю00:12:20
повод структуре понятно давайте их оба00:12:23
выведем и мэр нам возвращаться именно к00:12:26
дереву мы не будем так как здесь не00:12:30
будет ничего нового и ведь вот особенно00:12:33
если вдруг вы что-то забудьте или будут00:12:36
какие то вопросы почему подключаем вот00:12:38
так или вот так вы испрашиваете думаю00:12:41
наташ быстро мне передаст я еще раз00:12:43
объясню либо уже когда будем отвечать на00:12:46
вопросы я конкретнее про это расскажу00:12:48
есть какие-то моменты вам будут не00:12:50
понятно так вот наш файл и наши файлы00:12:56
xhtml и css00:12:59
закрываем боковую панель сразу скажите00:13:03
вот такой размер шрифта нор или сделать00:13:05
чуть побольше00:13:08
наташ надеюсь услышать от тебя ответ00:13:12
больше всегда хорошо тем меньше ладно я00:13:16
понял вот так вот отлично но я надеюсь00:13:22
что там условно 3 айфона нас не смотрят00:13:27
поэтому на таком размере шрифтом и00:13:30
остановится также пишешь такси окей ну00:13:35
вот супер я рад давайте тогда начнем с00:13:39
html и нам нужна какая-то базовая00:13:42
структура если вы используете visual studio или00:13:46
и там другие редакторы уже какие-то00:13:48
относительно мощные там типа атомы и без00:13:51
облой мы скорее всего вы знакомы с таким00:13:54
плагином как эммет и мин позволяет нам00:13:57
достаточно быстро и разворачивать html00:14:00
ну например я могу написать внутри него00:14:05
или ой страшно научился религии00:14:11
собственно мы развернем его вот в такую00:14:13
вот красоту00:14:15
время то есть очень полезная функция как00:14:18
создать базовый шаблон 5 шт м или мы00:14:21
просто ставим !00:14:23
вот он нам сразу подсказывает что это00:14:26
какая-то аббревиатура эммета не00:14:28
разворачиваем тем мы получили прям такой00:14:31
базовый каркас который уже будет00:14:34
полностью работать и на знает давайте00:14:36
ради приличия здесь поставим что у нас00:14:38
все-таки русский язык назовем у нас00:14:43
сегодня 2900:14:45
значит это будет список дел на 29 января00:14:51
2021 года00:14:53
супер здесь мы пока что закончили00:14:57
давайте придем уже к файлу css и00:15:00
посмотрим что у нас здесь происходит00:15:02
для начала у нас объявляются переменной00:15:06
вообще если вы никогда не сталкивались00:15:09
прошу прощения с переменными внутри00:15:12
cs100 это так скажем относительно новые00:15:15
фичи которая позволяет нам собственно00:15:18
внедрить переменные внутри нашего css то00:15:21
есть раньше для этого использовались00:15:23
какие-то препроцессоры тот же счастлива00:15:26
ставил00:15:28
что там лес и это было прям такая одна00:15:31
из киллер fitch назовем ее так что00:15:34
просто держать настройки проекта где-то00:15:36
в одном месте сейчас мы это можем делать00:15:38
непосредственно из css то есть мы00:15:43
говорим что для корневого элемента то00:15:45
есть для всей нашей странице00:15:47
корневым элементом обычно является html00:15:50
мы задаем какие-то перемены они00:15:52
обязательно начинаются с 2 дефисов и00:15:57
какого-то названия то есть мы здесь00:16:00
определим взлетаю что вот белый у нас00:16:02
это типичный ff у нас есть crate light00:16:06
grey00:16:07
просто light dark green эти все цвета00:16:09
есть в шаблоне экспорт сразу перенес00:16:11
чтобы мы на них не застревает потом есть00:16:14
бог shadow outline лейбл с ними мы и там00:16:19
в процессе верстки вы поймете зачем они00:16:22
нужны и как то есть не стал их00:16:23
переводить фильм могу так как это00:16:26
добавил скорее проблем того как это все00:16:29
вычленить я думаю понятно если00:16:32
попеременном также вопросы вы00:16:34
спрашиваете на все это ответим потом мы00:16:38
делаем вот такую запись dh tim anybody00:16:41
выставляем высоту в сто процентов и00:16:43
убираем отступы то есть мы хотим чтоб в00:16:45
принципе наше приложение00:16:48
растягивалась на всю доступную00:16:51
высоту экрана то есть так скажем был00:16:53
просто один полный экран00:16:55
я думаю здесь тоже понятно это мы щас00:16:57
еще увидим и работе я сразу сгенерировал00:17:03
градиент если вы не знаете как это00:17:08
работает то пока не обращайте внимание00:17:10
вы сможете из исходников проект00:17:12
взять этот градиент попробовать там00:17:14
поменять цвета если надо я скину ссылки00:17:17
на разные генераторы хорошие которые вам00:17:21
в этом помогут00:17:23
собственные сохранили проект у нас есть00:17:26
уже какой-то градиент давайте посмотрим00:17:29
что у нас получилось00:17:35
расспроси и конечно же мы не подключить00:17:37
или файл css а давайте мы это сделаем00:17:43
нас есть линк и файл css у нас лежит из00:17:48
мышц вернемся вот наши аудио жить в00:17:51
директории style то есть нам00:17:53
соответственно нужно указать что он00:17:55
директории ставил и00:17:57
внутри с названием css-файл об . css00:18:01
давайте это и сделаем оставил я вот00:18:07
всегда начинаю все же с точки чтобы00:18:10
четко указать что мы идем от этой00:18:12
директории00:18:13
то есть в теории в песне кстати вот так00:18:16
ничего не изменится но как мне ближе00:18:20
указать чуть более конкретно под не00:18:22
имеет большого значения мы сохранили00:18:26
смотрим так что нас применились00:18:29
изменения и о супер нас появился фонд то00:18:36
есть вот его можно увидеть давайте-ка я00:18:39
вот тоже приближу00:18:41
по бортам будет нормально вот у нас00:18:45
появился фон наш появились все эти00:18:47
правила и вот здесь можно посмотреть что00:18:49
появились а наших переменной то есть мы00:18:51
можем непосредственно в принципе кт или00:18:55
смотреть какие значения у нас доступны00:18:58
ну наверное с базовым шаблоном мы тут00:19:01
разобрались давайте посмотрим что он нам00:19:05
вообще нужно сделать по фиг не наш00:19:10
проект тут я прям сильно не указан в можно и00:19:13
расширить он центруется по всем странам00:19:17
то есть слева справа сверху снизу и это00:19:21
будет какой то вот белый плов начали с00:19:24
размерами с шириной 500 пикселей также я00:19:29
вот здесь еще поставил линии они00:19:31
обозначают какие внутренние отступы у00:19:35
нас будут фирме не всегда какое-то00:19:38
прочитать но поверьте на слово что вот00:19:42
здесь 50 пикселей сверху по 30 пикси00:19:44
ведь так мы и сделаем поэтому вначале00:19:48
отцентрую00:19:50
непосредственно наш элемент а потом еще00:19:54
и воссоздадим то есть центровать я буду00:19:56
с помощью flex надеюсь вы с ним знакомы00:20:01
если нет то просто повторяйте я буду00:20:03
объяснять какие то правила00:20:05
то есть дисплей flex мы говорим что бог00:20:08
является flex контейнером теперь через00:20:12
снова идти там центр мы говорим что а00:20:16
вообще-то называется поперечная ось но00:20:18
так скажем сейчас по вертикали мы00:20:21
центрируем элемент не через 6 free00:20:24
content not же центра мы говорим чтоб00:20:26
о анталии нам тоже нужно центрировать00:20:31
кстати обратите внимание что вот в таком00:20:34
раскладе00:20:35
здесь появляется ошибка то есть можно00:20:38
посмотреть что ожидается пустая линия00:20:42
перед свойствам background-image то есть00:20:45
как я и говорил у нас настроенные литеры00:20:48
в данном случае style int если будет00:20:51
интересно ссылку на репозиторий с00:20:56
настроенным стоял винтами тот же skin00:20:59
поэтому он просит сделать отступ00:21:02
попеть а ну соответственно нам еще надо00:21:07
отменить00:21:08
внутренние отступы и давайте по проекту00:21:16
сразу поставим у нас здесь будет очень00:21:20
приключения темный цвет как всего00:21:25
проекта и шрифт нас были значит 18 1600:21:32
пикселей по умолчанию или 18 я пытаюсь00:21:37
честно вспомните00:21:38
но пускай будет 16 что мы поправим и00:21:43
полуторный межстрочный интервал и нам00:21:49
ещё необходимо будет подключить шрифты00:21:50
которые указывается здесь сейчас я00:21:52
указал что это просто шрифт без засечек00:21:53
но к этому мы ещё вернёмся00:21:56
давайте мы создадим уже наконец хоть00:21:59
какой-то блок вот тубу обычно и выведем00:22:05
как мы помним у нас ширина 500 пикселей00:22:10
с тобой будут значит сколько там сказал00:22:17
50 пикселей и цвет белый00:22:31
речь давайте посмотрим что у нас00:22:33
получилось супер00:22:35
то есть мы акцентировали уже какой так00:22:39
это контейнер по центру где будет00:22:42
располагаться наш что дужка00:22:44
единственное что сейчас можно заметить00:22:46
что ширина контейнер на самом деле не00:22:48
500-60000:22:50
это связано с тем что в css по умолчанию00:22:54
все по деньги они расширяют элементы что00:22:58
для многих не очевидна и получается что00:23:02
раз у нас по денги по бокам по 5000:23:04
пикселей суммарно 100 вот эти 10000:23:06
пикселей и добавили вместо 500 у нас он00:23:09
теперь 600 здесь можно пойти двумя00:23:11
вариантами первые мы ширину установим в00:23:14
400 пикселей00:23:15
тогда все будет корректно либо мы скажем00:23:19
браузеру обрабатывать чуть-чуть00:23:20
по-другому и все ботинки00:23:22
вовнутрь схлопываться то есть чтобы они00:23:25
не растягивали элемент давайте00:23:28
собственно валим по второму пути это00:23:31
просто интереснее этого существует такое00:23:36
свойство как бог сойти со значением00:23:38
ордер болт цвет был в данном случае нам00:23:40
дальше помог бы party box00:23:42
и теперь если мы перейдем можно заметить00:23:47
что наш что дочка стала ровно 50000:23:50
пикселей по высоте и ширине00:23:54
отлично давайте теперь уже как-то за00:24:00
верстаем основу00:24:01
а конкретнее шапку из чего у нас состоит00:24:06
шарма00:24:07
у нас есть приветствие то есть это все у00:24:11
нас будет заголовком первого уровня у00:24:14
нас есть дата тоже отдельный блок то00:24:17
есть такой компонент у нас получается 100:24:19
условно компонент назовем его welcome 200:24:23
компонента это будет дейт и вот здесь00:24:27
можно заметить что у нас есть 200:24:30
пиксельный border снизу который будет00:24:32
определять наши шапку от основной части00:24:36
давайте мы собственно так и сделаем и00:24:39
сделаем какой-то00:24:40
у федора внутри которых значит у нас00:24:44
выжить заголовок h1 привет никита00:24:50
эрика погода нам нужно будет чтобы они00:24:55
переносились на разные строчки то есть00:24:57
тут можно пойти несколькими вариантами00:24:59
либо добавить00:25:00
был который сделает нам прям жесткие00:25:03
перенос либо раз уж нам нужно00:25:05
стилизовать слова привета слов никита00:25:08
чуть-чуть по-разному мы обернём00:25:11
непосредственно00:25:12
span span с классом пускает вначале00:25:25
определимся как мы очень назовём h100:25:27
я такие вещи обычно свою welcome to00:25:31
получается что этот спавна нос будет00:25:35
велкам name00:25:37
давайте перенесем ради удобства сделаем00:25:41
вот сейчас самому макете как видно00:25:46
ничего не изменилось давайте добавим00:25:51
собственно для нашего welcome какие-то00:25:54
стили и после этого подключил шрифты то00:25:58
есть вначале мы просто с размерами00:25:59
разберемся какие у нас размеры привет00:26:06
вот мы можем посмотреть вот здесь00:26:07
лексику не знаю можно ли фигня фигня не00:26:10
дает или 4 части у нас размер 36 и 800:26:14
пикселя я не очень люблю такие значения00:26:18
я все же привык отталкиваться от00:26:20
какого-то размера шрифта у нас базовый00:26:24
размер то есть которое мы установили для00:26:25
плоти 16 пикселей цвет на чтобы00:26:28
поставить в относительных единицах00:26:30
измерения нам нужно 3 6 и 8 разделить на00:26:34
получается 1600:26:36
не получить таким образом значение всем00:26:39
я сейчас разок00:26:40
такое покажем давайте там условно с00:26:44
больше но до нас там 368 мы делим на 1600:26:49
получаем значение 2 и 300:26:52
0,3 собственно именно такое значение я00:26:56
буду использовать во всех остальных там00:26:59
я примерно помню какие есть значение но00:27:02
надеюсь принцип вам понятен больше его в00:27:05
особо объяснять не буду бесконечно00:27:07
вопрос не возникнут просто буду00:27:10
поставлять значение фреем так нам уже не00:27:14
нужно давайте значит у нас фонд и мир00:27:23
строчный интервал там был один а два но00:27:25
при 120 процентов и вот тут можно00:27:28
увидеть для этого и для этого00:27:31
соответственно цвет у нас серый то есть00:27:37
мы туда же укажем в принципе здесь все00:27:49
теперь нам нужно только разобраться с00:27:51
волком name какие у неё значение 50 5200:28:00
это у нас полтора м причем надо заметить00:28:05
что единицы измерения м берет от00:28:08
ближайшего то есть вот своего родителя у00:28:10
нас велкам name этот дочерний элемент00:28:14
велкам след на полтора дюйма будут00:28:17
браться00:28:18
именно от вот этого значения то есть00:28:19
нашем случае там сколько было 3 6 800:28:22
пикселей именно таким образом мы получим00:28:26
50 5200:28:28
я могу потом мобильная блеснить про вот00:28:32
эти вот вещи функций у нас будет был00:28:37
тараки00:28:38
мир строчный интервал сохраняется00:28:41
здесь мы ничего не трогаем цветных у нас00:28:47
есть хоть у нас и было в более указано00:28:51
основной цвет dark но волкам и его00:28:55
изменили нагреть и соответственно для00:28:58
внутреннего элемента придется00:29:00
обратно указать что у нас все же темный00:29:02
цвет00:29:04
и чтобы он перенесся на новую строчку00:29:06
давайте мы этот span сделаем блочным00:29:08
элементом есть отличие00:29:10
блочных элементов ок строчных но такой00:29:13
как глобальное прошла блочные элементы00:29:15
по ширине занимает все пространство и00:29:18
соответственно они всегда друг под друга00:29:20
становится inline в элемент они имеют00:29:25
ширину только ту которые им нужно то00:29:29
есть если там никита условно занимает 5000:29:32
пикселей по ширине то все он дает 5000:29:35
пикселей как бы окей а здесь мы скажем00:29:38
что упускается будет прочный он00:29:40
перенесется давайте посмотрим что у нас00:29:43
получилось то есть уже что-то похоже00:29:48
единственный00:29:50
шрифт не под сейчас можно посмотреть что00:29:53
на самом деле на что дух и dota 2 по00:29:57
перу имеет точек это стандартный шрифт00:30:05
ирил00:30:06
ну это нам не особо подходит давайте уже00:30:10
наконец подключен новый шрифт00:30:16
мышка хороший вопрос подключать его00:30:21
тарута или после давайте но все же00:30:26
какие-то подключения у нас будет00:30:27
происходить для того чтобы подключить00:30:30
слив нам понадобится правило00:30:32
фонд фэйс в котором мы будем00:30:35
использовать три значение для каждого00:30:37
шрифта белый фон клейст который00:30:40
установит нам жирность00:30:42
насыщенность там я привык как называется00:30:46
жирностью этаж мы говорим там жирный00:30:49
текст пускай будет так для начала нам00:30:54
нужно установить для бака и даже укажем00:30:58
как норму то есть мы первым будем00:31:01
подключать наш real buy font family00:31:05
то есть название шрифта это как там было00:31:11
так по моему если не шпиц но сейчас мы00:31:14
посмотрим00:31:15
и откуда мы его берем то есть мы хотим00:31:19
его взять у следующему адресу давайте00:31:24
посмотрим наверное еще раз мы находимся00:31:27
в директории style это важно то есть00:31:30
какие шаги нам нужно сделать чтобы00:31:32
добраться до вот gmail00:31:35
regular нам нужно выйти из папки просить00:31:40
за слово папки из директории style зайти00:31:43
в директорию asset внутренние зайти в00:31:45
директорию phones00:31:46
и уже там подключить нужный шрифт дать00:31:49
как это делается чтобы выйти из00:31:51
директории мы указываем он такой специальную00:31:53
конструкцию то есть00:31:56
двоеточие и слышь и теперь ведь темнее00:32:00
редактор сам подсказывает куда я могу00:32:02
попасть мне нужно директория секс00:32:05
директория фонд и вот нашим regular00:32:11
давайте чтобы поближе все мы подключили00:32:17
один из шрифтов теперь нам нужно00:32:21
повторить эту незамысловатую операцию00:32:26
два раза по как у нас перев то но в00:32:31
начертании00:32:32
правильно будет сказать railway и так и00:32:35
надо сделать для medium мы поставим круг00:32:39
соды то есть мы определяем на шрифт00:32:43
medium как фон твоих 500 и фондовой00:32:48
можем указать 700 можем указать пол то00:32:51
есть это одно и то же давайте поставим00:32:53
болт здесь укажем что нам нужно00:32:56
подключить все с этим шрифтом мы00:33:00
разобрали вставить очень посмотрим как00:33:02
работает без мы хотели его подключить00:33:07
вот здесь давайте укажем вот наши00:33:11
railway вот здесь важно поставить00:33:13
запятую синтаксис надо понимать что00:33:16
здесь мы указываем размер нашего шрифта00:33:20
вот это мир строчный интервал а вот это00:33:24
все это является font-family то есть00:33:27
экипаж rift of которые00:33:29
указывает в данном случае мы подключили00:33:31
шериф railway00:33:32
и указали семейство шрифтов на случай00:33:35
если вдруг рыбы не подгрузится то есть00:33:38
такое тоже может быть и чтобы у нас уж00:33:41
совсем картина не сломалась мы как-то и00:33:43
сделаем вот так давайте сохраним и00:33:48
посмотрим что у нас получилось возможно00:33:51
надо меньше шрифта чуть по и менялся вот00:33:53
anam vay00:33:55
здесь все отлично давайте теперь00:34:00
перейдём уже непосредственно кнопку со00:34:03
временем сделаем его в начале верстку00:34:07
потом уже продолжим всего вы стилями00:34:12
давайте здесь белый вот только чтоб было00:34:14
видно даже его на того чтобы не купили00:34:18
цвет у нас будет здесь будет velcom и00:34:29
будем делать значит да и давайте00:34:33
попробуем как модные ребята сделают все00:34:36
сами там внутри тейт что нам надо нам00:34:39
нужен классный блог00:34:42
да и пускай так будет рядом с ним должен00:34:47
быть вот здесь мы оба этих названия00:34:55
просто запихнем как бы в один тип это у00:34:57
нас получается mode и00:35:01
ирбис так и сделаем и еще один блок нам00:35:07
нужен будет дает что у нас там да и00:35:11
выкупом такой правильно развернули00:35:16
надеюсь до этого и пьяни особую00:35:19
похлопочу00:35:21
когда мне кажется что да и будет про00:35:24
окна я так и делал в пример так сегодня00:35:28
у нас 29 здесь мало прочим января00:35:33
здесь уже попробуем сделать перенос 202100:35:38
год00:35:39
и сегодня у нас пятница in цепи эта вся00:35:48
верстка наш ребята посмотрим что у нас00:35:52
тут получилось отлично все элементы есть00:35:57
давайте посмотрим перво-наперво нам00:36:00
нужно их наверное расположить вот так00:36:04
как они указаны здесь до что мы здесь00:36:06
видим что 29 января 2021 стоят по левой00:36:11
части пятница стоит справа как мы можем00:36:16
вступить00:36:17
мы можем указать что это flex элемент00:36:19
раскинуть их по всем сторонам то и00:36:22
соответственно нас 29 будет слева00:36:24
пятница справа бао января по центру и с00:36:27
помощью моршин right of the мы под пик00:36:32
нём января 21 к числу 29 можно словах00:36:39
сложно но сейчас я думаю весь смысл в00:36:42
память dark отправление здесь тоже00:36:45
напишем 14 здесь давайте перестать00:36:57
значит на стоит flex контейнер наверное00:37:09
мы отцентрую по вертикали раскидаем00:37:16
через space between по всем странам без00:37:21
отступов ну и наверное пока все по00:37:29
отлично то что надо тут мы получили00:37:33
давайте наверное разберемся теперь со00:37:36
значениями00:37:37
то есть 29 нас имеет размер 48 до 34800:37:44
поделить на 16 5 давайте это сделаем из00:37:56
прием и чтобы не было никаких перекосов00:38:00
с другими мы как бы сделаем ему00:38:04
одинарные мир строчный интервал это00:38:08
такая скажем небольшая хитрость00:38:11
который можно просто запомнить потому00:38:14
что у нас будет один элемент очень00:38:16
большой рядом с ним маленькие если мы00:38:18
для них оставим одинаковые значения00:38:20
между строчного интервалы00:38:22
они никак не станут совпадать друг с00:38:24
другом что будет достаточно00:38:26
нехорошо и сразу здесь посмотрим что у00:38:34
нас отступ от числа два вот этих значений00:38:39
пикселей00:38:43
собственно мы его укажем что машина00:38:47
просто и что у нас со значениями00:38:56
января 16 но здесь 15000:39:00
межстрочный интервал ну попробуем начать00:39:05
на обычном если что переделаем просто00:39:09
наверно в такие супер мило через не00:39:12
всегда полезно скажем так то есть мощно00:39:16
но для практики нам сейчас так сойдет00:39:21
получается нам нужно и рф с помощью00:39:31
маржа нравится отправить налево . кто00:39:35
будет выглядеть вот ведь с мы сейчас00:39:39
зайдем посмотрим00:39:42
то значение вот для этого блока00:39:46
растянула как бы сделала margin на все00:39:49
доступное пространство справа то есть00:39:51
именно так можно поступать во flex00:39:54
контейнерах то сейчас бы я указал не00:39:56
моршин райта маршалов мы его передвинули00:40:00
наоборот в другую историю нам здесь00:40:03
нужно не lives от города и пятницу у нас00:40:07
сейчас находится по центру относительно00:40:09
всего блока а нам нужно его00:40:13
пригнать так скажем вниз относительно00:40:15
всего этого блока то есть для этого00:40:18
элемента получается нам нужно00:40:21
использовать другой эффект свойства00:40:23
линзы00:40:25
т.е. здесь будет a live help00:40:31
мы указываем что чисто для этого00:40:34
элемента мы ставим его в конец00:40:39
ну то есть получается вниз посмотрим но00:40:45
все отлично он снизу принципе нам00:40:47
осталось подключить только еще один00:40:49
шрифт00:40:50
хоть посмотрю by у нас это было00:40:53
приключение шрифтов00:40:57
скопируем строчку00:41:01
здесь мы покажем норму шрифт у нас00:41:06
называет злого и здесь вот флоры и для00:41:13
всего прям так как свойство font family00:41:17
наследует с мы можем указать только для00:41:20
вот do it00:41:21
это значение font family00:41:26
получается у лола и уже мы указываем00:41:31
значение что шрифт засечками то есть00:41:34
если лолани загрузилась то он пускаюсь00:41:38
подберется тот системный шрифт который00:41:41
будет именно с засечками да как это наши00:41:44
так скажем дизайнерской концепции00:41:47
вот подключили давайте посмотрим как это00:41:49
выглядит на шок похоже похоже00:41:54
за одним исключением мы и попали в цвет00:41:57
потому что он нам нужен серый00:42:01
ну и давайте это укажем00:42:03
и греть супер последний шаг это нам надо00:42:13
вот00:42:14
добавить вот так линию тут нам нужен00:42:17
какой-то небольшой отступ00:42:19
внутренней чтобы от этого блок но00:42:23
вначале сделаем самую линию неё мы будем00:42:26
делать непосредственно00:42:28
всего тут у федора а я вот это не сделал00:42:32
в примере который выложен вам как00:42:35
домашние задания собственно чуть-чуть00:42:36
переделать чтобы он выглядел вот так же00:42:42
давайте вернемся где-то дух хедер не где00:42:49
тони обозначил отдельно о котором нам00:43:00
нужен в партер00:43:04
в 2 пикселя просим прощения соли00:43:09
такое значение light а также белым00:43:17
прекрасно попал посмотрим что вышло но00:43:24
почти во первых нам нужен борт работам00:43:29
во вторых во вторых во вторых у меня00:43:36
стоит находится не внутри то дух и друг00:43:40
случается случайно сдавать его вот и00:43:45
перенесть всем пока00:43:52
теперь по красоте00:43:55
в супер то что мы и хотели и остался нам00:43:59
отступ00:44:00
вот от этого это мы сделаем через00:44:03
padding но то есть через внутренний00:44:05
отступ в ком будет в один ген но то есть00:44:10
данном случае 16 и я все время забываю00:44:19
сделать потом он конечно супер00:44:25
вот мы и справились с нашей шапкой мы00:44:29
молодцы веди нас не давайте сразу00:44:31
добавлю чтобы потом не забыть нам нужен00:44:34
будет водка снизу его я чуть не указывал00:44:39
новый я думаю ничего страшного это было00:44:44
значение00:44:45
а какой я ставил а если бы я помню по00:44:51
моему ничего страшного дух это все prime00:45:09
теперь у нас внешний отступ двоим00:45:13
внутренний отступ который получается00:45:15
сдвинет чуть наверх это один кием у нас00:45:18
есть правильный позже ну и тут наверное00:45:23
вот с этой частью мы закончим и как00:45:25
хотели собственно в плане сейчас чуть00:45:28
чуть поговорим про непосредственно00:45:32
обучение как у нас это еще проходит я00:45:36
пока выключу свой шарик придите ко мне я00:45:48
здесь супер ответим на вопрос который я00:45:57
смотрю на довольно много и причем в том00:46:02
числе некоторые про то что ты сегодня00:46:07
делаешь и требуется некоторые00:46:09
разъяснения и рейки00:46:16
так-так-так-так-так00:46:20
уточняет у тебя по поводу варианта для00:46:23
мобильного отображения работать verso00:46:27
эмблемы с учетом адаптивно сегодня нет00:46:30
то есть если будет как бы желание но там00:46:34
подписочки лайки колокольчики все дела00:46:37
ну ладно шучу00:46:38
мы сможем как-то продолжить делать эту00:46:41
систему мы сможем взять там если00:46:43
захотите парк мы сможем взять с css мы00:46:45
все это как-то адаптируем сделаем00:46:47
миксины но там словно с легче раз00:46:49
сегодня мы его то становимся чисто на00:46:51
верстки вот этой истории потому что нас00:46:56
еще будет интересовать такая вещь как00:46:57
доступность я чуть-чуть они еще поговорю00:47:00
к там будем делать пункта меню то00:47:02
сегодня мы остановимся на этом у если00:47:04
будут вопросы желаний так далее мы его00:47:06
продолжим потом делать возвращаясь к00:47:11
самому началу life сервер у тебя есть00:47:13
консолей запущенный они через расширение00:47:16
не искать да то есть это именно у меня00:47:20
стоит пакет ночь с глобально поэтому я00:47:24
могу life сервер запускать из чего00:47:26
угодно то есть могу просто из терминала00:47:28
могло is free скотт поэтому просто из00:47:32
терминала запущен я перехожу в нужную00:47:34
мнение директорию и запускаю внутренней00:47:36
эликсир00:47:38
то мы тебя есть свойство который задавал00:47:41
врут вопрос такой почему это задается00:47:44
врут анимешными селекторе00:47:47
потому но на самом деле просто рудном00:47:54
как бы говорит о области видимости то00:47:57
есть мы говорим что это прям глобально00:47:59
для всего проекта то есть это отдельная00:48:04
на самом деле те монтаж наверно для00:48:06
какого урока потому что там вступают00:48:10
такие вещи как наследование каскад ность00:48:13
и так далее поэтому нам нужно указывать00:48:16
именно глобальную область который00:48:18
называется рост но это не мешает нам на00:48:22
самом деле определить переменные внутри00:48:24
html00:48:25
селекторы либо также00:48:27
внутри абсолютно любого селектора там00:48:29
вот про свои области видимости спасибо а00:48:34
почему там где используется глаз элемент00:48:39
вроде как уникальный может быть лучше00:48:42
использовать эти это вот не про00:48:43
сегодняшние стрима вообще очень часто00:48:45
замечает наш пользователь что али00:48:49
ситуация происходит тут такая ситуация00:48:52
что нужно помнить о каскад насти то есть00:48:56
в приоритете стилей у нас айдишники00:48:59
всегда перебьют классы той с одной00:49:01
стороны кажется что в этом нет ничего00:49:03
страшного нового если поразмыслить что00:49:06
наше приложение там интерактивные и нам00:49:08
нужно например если пользователь кликнул00:49:11
на элемент сделать его зеленым00:49:12
то есть проще всего добавить какой-то00:49:15
класс который сделает вазелин но если00:49:18
тает у нас элемент был сайте шни кому00:49:21
который указан что цвет какой там00:49:24
говорил то ну там не красный и зеленый00:49:27
то у нас он не станет красным с помощью00:49:30
класса так как селектор поедите фиг00:49:32
отару он важнее поэтому00:49:35
вообще принят не использовать00:49:37
идентификаторы именно в плане css то00:49:41
есть вы можете это делать но от этого00:49:44
могут быть проблемы какая-то00:49:46
использование флага импорт по импорту00:49:48
у меня классе в текущем примере не00:49:54
победа то есть если вы в начале00:49:59
посмотрели я достаточно bootstrap00:50:01
евангелист я больше00:50:05
подхожу по объектно-ориентированному css00:50:09
такому подходу где-то атомарном ucss у и00:50:12
заодно я примерно так показываю как мы00:50:18
обучаем потому что не важно что вы00:50:22
использовать земли под рукой методологии00:50:25
то например как я вот00:50:26
объектно-ориентированный css равно это00:50:28
все разделение на компоненты речь только00:50:29
в именовании00:50:31
принцип тот же самый вы можете увидеть00:50:33
что у нас есть там один блок у нас есть00:50:36
компонент внутри этого блока00:50:38
есть еще один компонент и самое главное00:50:40
мы уходим от специфичность об супер00:50:43
сложных селекторов то есть у нас нет там00:50:46
. туда . вэлкам . вал камней мы как бы00:50:50
это все вы разделяем на какие-то денег00:50:52
компонент в том примере который ты00:50:58
приводишь есть свой сtr a space between00:51:01
зачем ты его используешь если все равно00:51:03
отталкиваем мальчик ну опять-таки00:51:07
подходы разные то есть можно так можно00:51:10
действительно вообще не использовать00:51:14
детский контент и наоборот просто00:51:16
пятницу перекинуть с помощью морщин лифт00:51:19
тут и так и так правильно и ничего00:51:22
страшного не в одном никто ко мне будет00:51:24
но просто для этого примера это как00:51:27
первое что приходит в голову так и00:51:29
делаешь в этом наверное одна из00:51:31
прелестей таких верстки что одну и ту же00:51:34
задачу можно правильно сделать что вот00:51:36
очень важно00:51:37
несколькими способами и тут зависит от00:51:40
того что тебе приходит первое в голову00:51:42
логично и к чему ты больше привык ну вот00:51:47
так на грязь от начинающего если я00:51:52
работаю над от как нет еще подключить но00:51:56
вновь под какой то есть из мы говорим00:51:58
про блокнот в windows условно то есть мы00:52:03
сейчас не про ног под плюс плюс то00:52:05
разница не будет вы поэтому я и сделал00:52:08
на чистом html и css и вам нужно просто00:52:11
создать два файла один назвать индекс00:52:13
точка html глава него расширение было00:52:16
правильно другой там ставил . css и00:52:20
подключить их так как я это сделал в00:52:22
примере то есть вот через линк и так00:52:25
далее то есть тот не важно каким вы00:52:27
пользуетесь редактором именно вот это00:52:29
вот строчка link скажет браузеру что00:52:33
ноги css вот по этому пути если вы00:52:36
работаете вновь под + +00:52:38
ну тоже самое плюс только единственно вы00:52:40
можете туда даже плагинов на вернуть его00:52:42
и метание есть длина по до basics очень00:52:45
раньше были не значит поддерживается или00:52:47
нет но вот над под plus plus да00:52:51
есть здесь разница не будет просто у вас00:52:53
другой вид я ничего о щас00:52:56
экстраординарного не использую поэтому00:52:58
можно вот именно таким путем пойти очень00:53:04
много мы разговаривали сейчас про шрифты00:53:08
про свойство шрифтом то есть как это все00:53:11
подключаете почему это работает именно00:53:13
так как все объявлять немножко правила00:53:16
дизайна за трон пары поговорили а и00:53:20
вопрос такой он звучал изначально почему00:53:23
использовался00:53:24
пикселя неги и какая есть разница у i am00:53:29
em x в изображении на разных дисплеях00:53:32
или всё в итоге сводится к пикселям00:53:35
своем счете from все сведется к пикселям00:53:38
потому что так работает наши экраны00:53:40
то есть у нас в любом случае кран это00:53:43
какое-то количество пикселей и на них00:53:45
выводятся то есть пикселями м и00:53:51
меренгами мы всего лишь говорим браузеру00:53:52
как обработать это не более чем для нас00:53:56
нужная вещь то как мы хотим это сделать00:53:59
внутри css в конечном итоге естественно00:54:02
это все будет приведено в какой-то00:54:03
абсолютное значение которые вы стрельцы00:54:08
они нужны и подключать shift и других00:54:12
форматов под другие операционные системы00:54:14
потому что ушли в также довольно будешь00:54:16
про количество разных разрешений то есть00:54:18
у нас там есть вот у нас есть два00:54:22
проще но очень много всякого разного и00:54:24
разные операционные в том числе00:54:26
поддерживают свои собственные00:54:29
браузера дает если мы ничего не задаем00:54:32
по умолчанию именно тот шрифт который00:54:34
стоит у браузера по умолчанию нужно не00:54:36
разобрать отдельно какие-то другие00:54:38
форматы00:54:39
ну конечно мы можем в принципе указать00:54:42
несколько вот этих сердце но source00:54:44
которые мы указывали внутри профан фрс и00:54:48
и там собственно подключить начали вот00:54:51
как я сделал труд iphone stf потом чуть00:54:54
ниже00:54:55
вов подключить потом поп два подключить00:54:57
потом по моему для супер старых00:54:59
браузеров и обратил супер ног я уже00:55:02
честно и запамятовал вот lt по моему как то он00:55:05
так называется и все это будет прямо под00:55:08
нам провели точнее ну да в одной00:55:12
директиве фонд фэйс суть в том что когда00:55:14
браузер зайдет он такой так вот это я не00:55:18
поддерживаю ничего не знаю все00:55:20
а вот это я поддерживаю именно его я и00:55:23
загружу но если браузеров ну прям вообще00:55:25
вот ничего не поддерживает для этого мы00:55:27
уже как раз таки указываем font-family00:55:29
какой-то00:55:30
по дефолту шрифт словно там sander00:55:35
но писарев как правильно поэтому здесь00:55:39
иногда стоит подходить с точки зрения00:55:41
вот как это сделал тот страх у них есть00:55:43
набор так называемых безопасных шрифтов00:55:45
то есть это прям шрифты которые есть во00:55:48
всех операционных системах00:55:49
под разными компаний там прям специально00:55:51
есть отдельно указанный шрифты который00:55:55
есть системный этого у магов00:55:59
винды linux of и там он уже будет00:56:03
автоматически выбирать но так да можно00:56:05
конечно задавать несколько и браузер уже00:56:08
непосредственно сам подберет нужный00:56:11
шрифт00:56:13
практический вопрос как можно через лекс00:56:17
разместить логотип по центр и начинаем00:56:19
добавлять другие элементы с правого края00:56:21
слева от логотипа ничего нет ну тут00:56:27
можно просто сделать два блока то есть у00:56:29
нас будет ну предположим что это лего00:56:33
для меня это левая слева будет один блок00:56:37
на 50 процентов и справа один блок на 5000:56:40
процентов00:56:41
суть в том что они будут стоять рядом00:56:45
друг с другом какие дрова бочек и мы00:56:49
логотип как раз какие получается00:56:54
придвинем к правому краю именно в одном00:56:58
из блоков но там можно сделать его чуть пошире00:57:00
чтобы он прямо совсем по центру встал да00:57:02
и смотри что там на половину ширины00:57:03
нашего логотипа чуть увеличить и все да00:57:08
наверно вот так то можно пойти здесь в00:57:10
флик сами можно пойти критами если вы00:57:15
знаете новые если00:57:16
чисто flex я бы рекомендовал тогда00:57:18
значит мы берем два блока 1 шириной до00:57:21
50 процентов плюс половина ширины нашего00:57:23
логотипа логотип в этом блоке мы00:57:26
перекидываем на право но а другой блок00:57:29
просто заполняем это вот первое что00:57:32
пришло в голову00:57:36
спасибо 1 часть вопросов о нас пока00:57:40
завершена дорогие слушатели если у вас00:57:43
есть еще какие то вопросы пишите их00:57:45
комментарии вот тогда здесь и готовы на00:57:47
них отвечать но прежде чем мы продолжим00:57:50
расскажу немножко про групповое обучение00:57:52
дело в том что ехать занимается как раз00:57:54
тем что обучает различным профессиям00:57:57
предоставляет курсы для начинающих и не00:58:01
только для начинающих том числе и для00:58:03
тех кто планирует свои скиллы повышайте00:58:06
как известно не только начинающим это00:58:09
подходит в плане верстки изучения00:58:12
верстки для того чтобы войти в какой-то00:58:14
уже поток начинать зарабатывать первые00:58:17
деньги и кстати верстальщиков в этом00:58:19
плане гораздо проще нарабатывать00:58:22
коммерческие опыт нежели на других00:58:24
ссылках00:58:25
вот конечно можно со мной на эту тему00:58:26
поспорить и буду рада прочитать ваши00:58:28
комментарии на мой взгляд это именно так00:58:30
и но и предоставлять базу для00:58:34
разработчиков которые уже давно00:58:36
занимаются разработкой продуктов00:58:39
это фран тендера это бы киндеры как вы00:58:41
помните сейчас в разных вакансиях есть00:58:44
информация о том что требуется знание00:58:46
верстки и для вас это будет тоже00:58:48
дополнительный такой вот вариант того00:58:52
как можно свои навыки повысить на если00:58:55
информация про верстку практически00:58:58
упражнение теория объединены в профессию00:59:00
и верстальщик вот никита как раз00:59:02
преподаватель разрабатываются курсы и00:59:05
можно как раз оценить то сделал довольно00:59:10
клёво и поэтому предлагаю вам записаться00:59:13
убедиться самим тариф в да и много у нас00:59:15
потому как вы можете обучиться на00:59:17
сегодня я расскажу вам про групповое00:59:19
обучение это один из форматов на hex00:59:22
лети который как раз сейчас00:59:25
запускается можно будет уже00:59:27
присоединятся готовым группам всего 500:59:29
месяцев обучение с расчетом на то что вы 1000:59:31
часов времени уделяете в неделю и после00:59:37
их завершения вы можете положить себе00:59:39
три практически проектов портфолио очень00:59:42
важно что у нас автоматизированная среда00:59:44
обучение то есть все00:59:46
автоматизированы все квизы все00:59:49
упражнения и так далее но при все при00:59:52
этом все происходит под присмотром00:59:54
индивидуального достатка который00:59:56
работает с группой которые полностью00:59:58
помогает отвечает на вопросы помогает01:00:01
сориентироваться проводит дополнительные01:00:04
вебинары дополнительные слои канале мы01:00:06
город и рублевых активности которые01:00:08
помогают нам изучать это все и в ходе01:00:14
этого обучения вы как раз можете01:00:16
научиться различным технологиям изучить01:00:19
последний стандарт html css изучить01:00:22
flexo гряды узи научиться01:00:23
позиционировать элементы много-много01:00:26
всего она тут наверно красочнее может01:00:28
более подробно никита отвесить ваших01:00:30
вопросах потому что как раз он этим01:00:33
очень сильно горел когда разрабатывал01:00:34
горит до сих пор и очень любят профессию01:00:38
которую он в итоге представил на хет01:00:40
ведь поэтому все вопросы могут быть к01:00:42
нему но и самое главное что если у вас01:00:44
один из ваших форматов обучения01:00:46
который позволяет вам получать новые01:00:48
знания настроен таким образом что очень01:00:50
скучно дело все одному на самостоятельно01:00:53
учиться либо как-то самостоятельно быть01:00:55
с наставником тэт-а-тэт и хочется снится01:00:59
прогрессом и общаться с01:01:00
единомышленниками то вот как раз01:01:02
групповое обучение в данном случае это01:01:05
для вас возможность пообщаться с такими01:01:07
же либо начинающими либо опытными01:01:08
разработчиками обменяться мнениями01:01:10
задавать им тоже вопросы узнавать как у01:01:13
них дела и многое многое другое в конце01:01:16
мы представляем карьерную консультацию01:01:18
которая помогает вам причесать ваши01:01:19
резюме и пойти на рынок труда уже01:01:23
хорошеньким джуниором которого могут01:01:26
дальнейшем пригласить нас обещал это01:01:29
если кратко поэтому если у вас есть еще01:01:30
какие-то вопросы по профессии задавайте01:01:33
их комментариях а ссылка на ссылка на то01:01:38
как записаться на обучение группа01:01:40
ой как какие у нас есть модули какие01:01:43
курсы есть в описании переходите01:01:45
знакомьтесь с материалами ну и конечно01:01:48
же записывайтесь ко мне кит тебе есть01:01:52
что добавить да все отлично мне не хочу01:01:57
давать новый если у ребят тут вопрос01:01:59
единственный хотел бы добавить что01:02:02
количество курсов постоянно добавляются01:02:05
потому что я их просто продолжаю01:02:08
постоянно писать то есть даже если вы01:02:11
зайдете01:02:12
это что вы увидите знаете это не все01:02:15
будет еще будет еще на самом деле очень01:02:18
много то есть как бы ни говорили что там01:02:21
верстка тяп-ляп накинул свойства и лакеи01:02:25
но в плане курсов есть что расписывать я01:02:28
думайте что расписывать достаточно долго01:02:32
где ты нас появился первый вопрос как01:02:36
раз по обучению можно ли переносить01:02:37
занятие особенно если и есть основная01:02:40
работа и там часто завал могу здесь01:02:43
убедитесь что все построена таким01:02:45
образом что вы в первую очередь01:02:46
заниматься было удобно именно вам и01:02:49
искать время для обучения в первую01:02:52
очередь таким образом чтобы вы могли вот01:02:55
это как раз минимум пройти до нас есть01:02:59
ребята которые проходят профессии01:03:00
быстрее в том числе те которые учатся на01:03:02
групповом обучении просто но в данном01:03:04
случае построили нагрузку так и так01:03:06
чтобы для вас было это удобно делать01:03:08
здесь часов где-то то есть это примерно01:03:10
по 2 часа в день без трения ошибаюсь вот01:03:14
поэтому в целом занятия построены таким01:03:17
образом что ваш01:03:19
и ваш график будет довольно гибок и на01:03:22
работе не будут сказываться но это уже01:03:27
зависит от человека но можно учиться на01:03:30
работе и адрес наши так некоторые делать01:03:32
но не надо не надо я ничего не говорю01:03:37
тебя спрашивают когда ждать обещанных01:03:40
курсов по верстке почтовых сообщений01:03:47
но будет будет взят съесть01:03:51
чуть более так скажем насущной курсы я01:03:54
хочу это в программу 4 модуля когда он01:03:57
будет на перед этим не надо закончить01:03:59
программы первых трех модулей01:04:01
то есть окончательно и после этого уже01:04:09
собственно перейдём к четвёртому модулю01:04:12
где вот это у меня будет то есть все01:04:14
записано я помню про это еще раз прошло01:04:16
в been a hard dick разбирает ли на01:04:21
курсах по версии какие-то статьи01:04:23
блогеров разбирать нет то есть на что-то01:04:27
сослаться всегда можно новый01:04:29
я обычно привык как делать в курсах я на01:04:33
курс nuff уроки что-то объясняю если01:04:36
нужно более полной информацией смысл01:04:38
действий еще куда то но если так скажем01:04:42
в этом прям нет необходимости потому что01:04:44
я расскажу то что мне кажется важным01:04:46
я даю ссылки на какие-то более такие01:04:49
академические весите по спецификации01:04:51
потому что ну во-первых спецификации это01:04:54
хорошо не надо их бояться во вторых01:04:57
лишний раз мне заглянуть тоже полезно ну01:05:00
и как бы знать вообще они тоже хорошо то01:05:03
есть получается потом вы можете там01:05:04
ходить от урока к уроку если вам нужна01:05:06
какая-то спецификации вы не помните где01:05:08
набежит там пример по шрифтам до зашли01:05:11
их урок шрифтов хоб там есть01:05:12
спецификация01:05:13
но опять-таки же если пришлю прямо мне01:05:17
действительно классную статью я просто01:05:19
последнее время не особо успеваю все01:05:21
читать то я конечно же поделюсь тут все01:05:26
зависит от вашего фидбека я как-то01:05:28
всегда открыто это что касается в рамках01:05:32
курсов если мы говорим групповое обучение тасс01:05:35
наставника вы можете разбирать большое01:05:37
количество самых разных материалов01:05:39
закидывать ему варианты в том числе и01:05:42
статей и это уйдет на обсуждение группы01:05:44
у меня и вы можете поделиться своим01:05:46
мнением и слушать мнения других и в том01:05:49
числе узнать что по этому поводу думает01:05:52
наставник и увидеть его экспертную точку01:05:54
зрения ну давай вечно вопросами01:05:59
его отвечу просто я так лет всего01:06:04
проработал именно был так скажем01:06:09
разработчикам сел компании во всяком01:06:12
случае насколько мы смотрели выдачи01:06:15
анализировали нет это никак не влияет то01:06:18
есть он все равно как по возьмет h101:06:20
выкинет все-таки внутри и уже именно01:06:23
этот текст обработает то есть примерно01:06:26
это должно быть вот так вот может быть01:06:28
сейчас алгоритмы как ты изменились но01:06:30
раньше это не влияло на сталь на очень01:06:35
долгое время оказался крайне важным01:06:37
элементом для поисковых сетей01:06:39
а но так это алгоритмы постоянно01:06:41
меняются и если выполнить самые старые01:06:44
сайты которые были оптимизированы01:06:46
патентам и сел есть несколько этапов их01:06:50
развития то сначала там это было просто01:06:53
мнение о чем-то заполнение мета-тегов01:06:56
прочее потом как вы помните пошли01:06:58
ключевые слова у нас появились сайты где01:07:00
было по мешку большое количество текста01:07:03
где-нибудь внизу где были перекрыты да01:07:08
да да либо прозрачной шрифт и большое01:07:11
количество самых разных слов ключевых01:07:13
которые только могли быть и конечно это01:07:16
выглядело крайне красим а потом потом мы01:07:19
пошли видео к работе зайцы и когда уже01:07:22
поисковые роботы начали все считывать по01:07:24
всему по всему контенту который у нас01:07:26
есть на самом сайте но и сейчас01:07:29
поисковой системы очень хорошо обучаются01:07:32
и они умеют считывать информацию не01:07:34
только с того что мы задаем заголовках01:07:37
но и вообще по всему сайту и самое01:07:40
главное чтобы это было написано не для01:07:42
роботов а для людей по крайней мере01:07:44
сейчас поисковые роботы нацеленные на не01:07:46
на этой и именно на это и учатся они01:07:49
поисковики так но насколько я вижу пока01:07:55
что по вопросам все чем может быть01:07:58
передохнули и продолжим давай другие01:08:03
элементы в эти мы сейчас включим на из01:08:06
какие вопросы останутся вы их01:08:08
закидываете наташи всего будет все потом01:08:12
мне закинет подругой меня снизу чего ты01:08:21
видишь а лопат передвиньтесь хорошо01:08:25
переключился все я в эфире до продолжаем01:08:31
отлично тут в комментариях подсказали да01:08:34
что уж их называется вора я называл его01:08:38
лолой на это все еще последствия01:08:41
прочтения в лобби ты поэтому не01:08:43
обращайте внимание ну давайте продолжим01:08:47
то есть мы остановились на том что мы с01:08:51
виртуале шапку теперь у нас есть вот01:08:54
такой вот блок нато каком фильме не01:08:57
обращайте внимание обратите внимание на01:08:59
то как он сделан отрисовывать все01:09:02
состояния час не особо успел не изменяю01:09:05
figma достаточно как говорил с фигурой01:09:09
так давайте мы вначале определимся весь01:09:13
чего у нас вообще будет состоять то есть01:09:15
логично что у нас должны быть какая-то01:09:17
обертка назовем его там туда упади01:09:22
внутрь и будут три блочных элементов то01:09:25
есть это каждый будет на что дуайтом где01:09:29
будет там обновить упражнение сходить в01:09:31
магазин проконсультироваться с алексеем01:09:32
по поводу верстки и вот тут очень важное01:09:35
вы можете заметить01:09:36
троеточие или я с правильно многоточие01:09:40
те слышны в р-не по графские термины01:09:43
суть в том что ваш тем или на самом деле01:09:46
эта строка длине и то есть мы ее01:09:48
искусственно обрезаем если у нас длинное01:09:51
предложение то есть то как мы это01:09:53
сделаем вы собственно увидеть и можете01:09:57
запомнить такой подход давайте вначале01:10:02
добавим какой-то базовую верстку так тут01:10:06
хедер нам уже не нужен я его пока скрою01:10:09
естественно будет более01:10:12
здесь у нас пятеро сделаем01:10:19
зубы у бога внутри которого просто будет01:10:22
то есть мы ничего нового здесь01:10:26
придумывать не будем и стиле у нас по01:10:28
сути здесь тоже не будет мы просто01:10:30
обозначаем начала компонента нам нужен01:10:34
туду вальтом и давайте посмотрим сел на01:10:39
принципе может состоять так скажем выбор01:10:43
невелик на это какой-то текст01:10:45
но раз мы сделали вот этот заголовком01:10:48
первого уровня в теории в теории это01:10:52
можно сделать заголовком 2 так как это01:10:54
является подпунктом вот этой части может01:10:58
быть чуть чуть не явно но сейчас сойдет01:11:03
то есть мы сделаем так что можно будет в01:11:05
любой момент заменить теги01:11:08
давайте мы это сделаем так на h201:11:12
назовем обновить упражнение бог глина01:11:19
посмотрим супер пока что разберемся01:11:24
только с одним элементом а потом добавим01:11:27
все остальные давайте смотреть во первых01:11:30
нам нужно разобраться со шрифтом здесь у01:11:34
нас 14x рыбы и значении medium01:11:38
нормально так и сделаем давайте здесь01:11:43
тоже укажем что это у нас уже дубай там01:11:52
[музыка]01:11:56
так тут уайтом дуэтом что нам тут нужно01:12:02
получать с нас фонд сайт 14 пикселей01:12:08
свет светлый цвет dark01:12:11
менять мы не будем у нас и так тарных01:12:13
всё логично получается фонд blades у нас01:12:19
сколько мы там указали 500 добра и если01:12:22
я не ошибаюсь . посмотри да да медиум у01:12:27
нас 50001:12:29
супер01:12:31
посмотришь получилось отлично пока01:12:35
ничего не получилось ну конечно01:12:39
стиле h2 перебили когда нам нужно пойти01:12:45
чуть чуть другим путем дать здесь класс01:12:50
зовем это мне и собственно здесь мы так01:12:59
заметили что мы добавляем какой-то новый01:13:02
класс вместо того чтобы сделать например01:13:07
вот теорий нам никто не запретит01:13:12
сделать вот такой селектор но есть одна01:13:15
проблема если наш h2 исчезнет и это01:13:19
например станет не h2 по я все вот эти01:13:22
стили не заработают ведь всегда01:13:24
старайтесь максимально уходить от так01:13:29
скажем от специфичности тут главное не01:13:32
заигрываться то есть мы еще будем01:13:34
использовать прям селектор по тегу01:13:36
но для каких-то вот таких элементов где01:13:39
мы точно знаем что может произойти такая01:13:43
вещь что сменится так лучше задать01:13:47
какой-то отдельный класс01:13:48
это касается как pm так и01:13:51
объектно-ориентированного тут мало что01:13:54
поменяется01:13:55
давайте теперь посмотрим о но красота да01:14:01
здесь мы можем заметить что у нас есть01:14:04
10 пикселей01:14:06
отступ получается слева да вот для01:14:10
каждого этапа относительно блока давайте01:14:17
зададим то есть у нас получается padding01:14:23
как я тут01:14:29
немножечко игрался со значениями то есть01:14:34
мы его сделаем как по 20 пикселей по01:14:37
вертикали и 10 пикселей по горизонтали01:14:40
основной смысл этого к нам еще придет их01:14:44
нам нужны будут вот здесь доступа так01:14:48
супер один элемент есть он прям молодец01:14:54
точно такой же вроде бы на может быть и01:14:59
нет до нее вроде пойдем не прочь все та01:15:07
же сам так что я еще хотел здесь сделать01:15:13
нам для вот этого01:15:14
h2 в данном случает ту дуайтом name01:15:18
нужно будет хотя знаете давайте даже не01:15:22
у него01:15:23
а вот у этого элемента простуду этом нам01:15:28
нужны какие-то отступы в данном случае я01:15:32
их сделаю по нам нужно 15 пикселей снизу01:15:37
то есть весь я это не указал да но01:15:43
поверьте на слово почему меня так01:15:47
смущает шрифт вроде нормально ну и01:15:54
наверное чтобы не мешалось мы от ступы01:15:57
у дуайтом name просто отрежем они нам не01:16:05
нужны как теперь смотрим все здесь вот01:16:10
стопов нету только внутренние здесь у01:16:13
нас есть внешний отступ между элементами01:16:15
и как бы всё красиво есть только одна01:16:22
проблема хочется спросить и чё01:16:25
вот то есть мы не можем01:16:28
взаимодействовать с этим элементом то01:16:30
есть это просто текст а как же куда-то01:16:34
кликнуть что-то получить классные как-то01:16:38
вот здесь вступает интересный момент на01:16:41
самом деле нам нужно не просто текст01:16:43
текст нам естественно тоже нужен но нам01:16:46
нужен элемент checkbox01:16:47
checkbox это элемент который позволяет01:16:51
выбрать01:16:52
ну то есть это элемент который может01:16:55
находиться в двух состояниях то есть он01:16:57
либо выбран01:16:58
ибо не выбран часто он используется01:17:00
формах но зачастую его использовать вот01:17:05
в таких вещах то есть как это может01:17:07
работать давайте мы чуть-чуть01:17:09
на что-то white он перед сменим нам01:17:13
нужен input d-box01:17:17
при синтаксис свой покой с каким-то01:17:21
именем имя у нас пускай будет01:17:25
буду альтам и идентификатором сейчас01:17:30
поймем зачем он нам нужно ну и вообще в01:17:32
процессе это прям отлично01:17:34
выяснится пускай это будет туда один01:17:38
поедет туда и там один даже не страшно01:17:43
теперь для подписи01:17:45
как бы крем куда то есть мы сейчас идем01:17:48
вот у нас появился ведь мы можем менять01:17:54
его состояние но по своей сути он никак01:17:57
не привязан от к этому сообщению01:18:00
и это нам надо изменить для того чтобы01:18:04
привязать какой-то текст01:18:05
им пока использует лейбл и вот видите01:18:09
зачем нам нужен айтишник01:18:10
он нам спрашивает лейбл для чего мы01:18:15
говорим эту лейбл для тут white matte01:18:17
а вот внутри уже этого лейбла мы положим01:18:22
наш заголовок01:18:27
в принципе здесь все то есть мы пошли по01:18:32
такому пути мы еще подобно здесь кое-что01:18:35
изменяем но пока что нас полностью01:18:39
устраивает внешне ничего не изменилось01:18:42
но на самом деле теперь01:18:44
обновить упражнение grid связано с этим01:18:48
щипок сам как-то проверить01:18:51
эти я нажимаю на обновить упражнение01:18:54
погреть а меняется вот этот чекбокс01:18:58
то есть потому что это теперь является01:19:00
лейблом ну или описанием вот этого фонд01:19:03
бокса наверно нам стоит только добавить01:19:07
какой-то курсор получше01:19:12
[музыка]01:19:14
давайте ка мы это также повесим на буду01:19:20
ай да мы сделаем курсор эмбер который01:19:26
нам волод такой беленький курсор состав01:19:30
ну как бы сразу показывает что ребят01:19:34
сюда можно нажать и мы собственно01:19:37
нажимаем если вглядеться01:19:41
он даже особо не вместо этого есть наш01:19:43
макет можно увидеть что чип огс то у нас01:19:45
невидимый и настала пора это сделать и01:19:49
рассказать о самом главном01:19:50
как нам сделать невидимый чуть box01:19:54
первое что приходит в голову это просто01:19:57
его ну скрыть с помощью свойства дисплей01:20:01
давайте попробуем да тогда давайте им01:20:06
будто мы сделаем пока что вот такой квас01:20:12
вы поймете почему он так называется я01:20:15
еще расскажу это у нас относится никто01:20:19
дуайтом у нас вообще отдельно давайте01:20:23
назовем как утилиты01:20:25
надеюсь написал правильно и скажем01:20:32
скрыться дисплей на01:20:40
что пошла не так наша королевская а по01:20:44
конечно я поставил какими а это должен01:20:49
быть класть вот марк теперь у нас нет01:20:55
этого фокуса мы нажимаем как бы мы не01:21:00
видим как что-то переключается это01:21:02
здорово01:21:03
и многие бы на этом остановились но есть01:21:07
одна большая проблема давайте мы уберем01:21:09
этот глаз и попробуем перейти на наш01:21:14
элемент с помощью табор но то есть там01:21:18
на клавиатуре переходит к следующему01:21:21
интерактивному элементу01:21:22
то есть наш случай этот чек бокс других01:21:25
интерактивных элементов у нас просто нет01:21:27
мы нажимаем01:21:28
там ведь мы можем с клавиатуры менять01:21:31
вот это вот значение но если мы скроем01:21:36
наш элемент через дисплей на01:21:39
здесь такая неприятная штука что но01:21:42
сейчас вы не увидите на можете поверить01:21:44
на слово мы это еще посмотрим ничего не01:21:48
произойдет то есть теперь этого элемента01:21:51
не существует внутри нашей верстки и01:21:54
слитных он теперь не является01:21:56
интерактивным мы не можем перейти по01:21:58
нему потому что самые страшные01:22:01
для людей слепых которые пользуются01:22:03
скрины лидерами этого элемента тоже не01:22:06
существует то есть скрин риторы01:22:09
устройство ноги там программы для чтения01:22:11
с экрана она не поймет что мы хотим01:22:14
сказать она скачена обновить упражнение01:22:16
по glide а какие у него есть состояние а01:22:19
чё происходит тут ничего не будет01:22:22
понятно и это важный момент который01:22:25
многие забывают то есть доступность наши01:22:27
все это очень важная вещь как бы вы не01:22:31
считали что там слепые люди с нарушением01:22:35
опорно-двигательного аппарата01:22:37
люди с некорректным цветовосприятием не01:22:42
заходит к вам на сайт то вы ошибаетесь01:22:44
они заходят их много они прекрасно01:22:48
пользуются браузерами01:22:49
интернетом и всем тем чем привыкли01:22:52
пользоваться вы вплоть до обычных01:22:53
смартфон поэтому они их нужно думать и01:22:58
для этого давайте мы пока оставим точнее01:23:02
я удалю вот сейчас этот класс сейчас это01:23:05
продемонстрирую более понятно давайте01:23:08
повесим какое-то событие на вот этот вот01:23:12
фокус либо на ведение то есть это01:23:14
состояние дан своих фокусом01:23:17
ну так чтобы было понятно что у нас01:23:21
происходит когда мы нажимаем на tab то01:23:25
есть для этого нам понадобится внутри01:23:27
туда и там вот сейчас тот момент когда01:23:30
нам понадобится селекторе по классу01:23:34
когда у нас задействован им куб можно01:23:39
указать что checkbox можно не указывать01:23:41
нашем случае не важно конечно хорошо бы01:23:43
указать давайте мы даже сделаем спайк01:23:48
checkbox когда мы на него наводим курсор01:23:53
за это отвечает hover мы берем соседний01:23:58
с ним мэйбл01:23:59
то есть мы что-то делаем вот с этим01:24:03
элементом и говорим взять соседней01:24:05
элемент с ним то есть это делается через01:24:07
тильду тот же самый трюк нам надо01:24:12
провернуть с фокусом на вернетесь01:24:18
понятно на самом деле это вот просто в01:24:20
строке и через запятую можно указать их01:24:23
подряд но это будет некрасиво здесь01:24:26
меняем на фокус и вот под нам01:24:30
понадобится переменные которых я говорил01:24:32
сам начале вот бокс шадо волейбол и01:24:35
outline то есть они установят внешнюю01:24:41
рамку и какой-то тень01:24:44
давайте это собственно сделал нас значит01:24:48
будет outline gold line лейбл и бог саду01:24:57
тоже со значением бог shadow лейбл01:25:04
супер давайте перейдем обратно опять01:25:09
ничего не получается где-то ошибся тут01:25:13
white input01:25:22
так-так-так to the impact ряду apple01:25:27
так здесь я сохранил здесь а сохранили а01:25:30
ну понятно нам нужно не просто на лейбл01:25:37
на весит она туда уайтом name потому что01:25:40
он является нашим основным блок ага01:25:45
давайте мы собственно укажем конечно01:25:49
таким селектором это уже не сделаем01:25:53
ту-ту-ту-ту-ту тон давайте ценить как мы01:25:56
наверное то дуайтом name и темным как01:26:05
нам сделать давайте пойдем лишь кругом01:26:09
пути в тот уайтом виа наш лейбл01:26:15
установим очные отображение так по01:26:19
умолчанию он онлайновый01:26:22
но и все ведомо этого будет достаточно в01:26:26
супер теперь при наведении у нас вот01:26:29
появляется собственно здесь01:26:33
outline появляется и бог shadow теперь01:26:38
смотрите при фокусе появляется то же01:26:41
самое вот обратить внимание на вот эту01:26:44
рамку вокруг обновить упражнение погреть01:26:48
давайте вернем дисплей нам о чем мы01:26:52
говорили и попробуем их основное01:26:56
упражнение а нет обновить упражнение01:27:01
есть поваром я могу01:27:04
зацепить потому что я навожу как четко01:27:07
говорю что я навожу на этот сегмент01:27:09
условно это с работой браузер поймет что01:27:12
мы имеем ввиду так как лейбл привязан к01:27:15
input of но вот стаба01:27:18
это перестанет работать и соответственно01:27:20
для скрины лидеров01:27:22
это тоже перестанет работать то есть он01:27:25
просто исчезнет и01:27:26
этот элемент не будет считаться01:27:29
интерактивным01:27:32
что здесь можно сделать есть несколько01:27:36
распространенных приемов01:27:38
давайте я покажу один из них чем суть мы01:27:42
как бы искусственно прячем этот input01:27:48
причем прячем его только визуально есть01:27:51
он не имеет дисплей нан01:27:54
он существует просто для нас он будет01:27:57
невидимым важно что он не должен иметь01:28:02
ширину и высоту в 0 пикселей то есть это01:28:06
будет равняться примерно тому же самое01:28:08
что мы укажем дисплей на01:28:10
поэтому что мы сделаем установим01:28:12
абсолютное позиционирование чтобы просто01:28:16
элемент не барахтаться где-то рядом мы01:28:22
установим шириной высоту в один пиксель01:28:29
мы сбросим по 1 и марджан и то есть это01:28:35
прямо здесь не менее скажем большого01:28:38
значения но если трудные элементы01:28:41
вам понадобится также скрыть то01:28:43
желательно уже имеется ранее уже какие01:28:46
подготовленные свойства и самый01:28:49
интересный момент мы добавляем свойства01:28:52
клип свойства клип создает область01:28:57
которая отображает в которой01:28:59
отображается абсолютно с позиционирован01:29:02
и елемент то есть это важно для этого мы01:29:04
еще устанавливали позишн абсолют сейчас01:29:08
она так себе имеет только возможность01:29:13
установить какой-то прямоугольник ну и01:29:15
давайте установим у прямоугольник четыре01:29:17
стороны01:29:18
ну и соответственно четыре координату01:29:21
углов над прямоугольник 0 на 0 на 0 на 001:29:31
но при этом он на самом деле существует01:29:34
простого он в this not в прямоугольник01:29:36
который не видел и вот теперь то же01:29:40
самое действие сработает ведь я перехожу01:29:44
потому01:29:45
и все о какой работает правильно и также01:29:51
скрины reader и теперь смогут это01:29:53
адекватно обработать портрет с этим я01:29:58
думаю мы разобрались давайте перейдем01:30:01
дальше что он нам еще может быть нужно01:30:04
давайте посмотрим на этот мы сделали уже01:30:07
как по обычный чехол из мы можем по нему01:30:09
переходить он выделяется но пока что он01:30:14
никак не реагирует то есть мы на него01:30:15
нажимаем как бы ничего не происходит01:30:18
током вот выделенном себе тусит и укусит01:30:21
нам нужно чтобы когда мы нажали01:30:24
у нас текст стал полупрозрачным но то01:30:28
есть относительно другого как мы можем01:30:31
этого добиться для этого css существует01:30:36
такое состояние у чебоксар как checked01:30:38
то есть он смотрит checkbox активен или01:30:42
нет если активен на этот всех селектор01:30:47
когда срабатывает01:30:48
новый давайте это укажем что также в ту01:30:51
дуайтом на нашем им ключи дай бог если01:31:01
он выбрал к нашему в apple01:31:12
мы устанавливаем следующее правило01:31:15
просто01:31:17
при свойства почти который устанавливает01:31:20
как заливку прозрачность нашего элементы01:31:23
мы говорим что в половину его пожалуйста01:31:25
реже эти фотоны как нас работает давно01:31:30
прост сразу он был выбран вот лис мы01:31:32
обновим как бы мы переходим01:31:36
нажимаем наш элемент активируем он01:31:40
полупрозрачный нажимаем еще раз он01:31:42
обычно супер принципе основная работа на01:31:49
этом закончена01:31:50
ну то есть как бы теперь наш элементы01:31:52
становятся интерактивным мы можем с ним01:31:54
как-то взаимодействовать01:31:56
но ведь хотели добавить01:31:58
какой то линию и давайте поработаем01:32:01
снять то есть как мы можем создать01:32:06
непосредственно полосу для этого нам01:32:10
нужен получается псевдо-элемент be for01:32:15
который создаст у нашего лейбла ну01:32:21
давайте вот у дуайтом name и что когда01:32:24
нас элемент состояния check it мы этот01:32:29
элемент как бы показываем да ну сейчас01:32:34
наглядно это тоже посмотрим давайте01:32:36
сразу снова вернемся я вот это вот01:32:38
чуть-чуть сделаю вот так чтобы вам было01:32:42
понятнее то есть тут я думаю примерно01:32:44
все запомнить что происходит значит что01:32:48
дуайтом так спешим01:32:50
и это у нас ничего бокс01:32:55
выбран внутри лейбл внутри которого ну01:33:01
да не очень удобной конструкции но тут01:33:05
нам сейчас вполне себе подойдет и мы01:33:09
говорим что для него начинаем нужно01:33:15
сделать так скажем перечёркивая нет мне01:33:22
не нравится этот селектор01:33:23
я в примере явно сделал куда лучше01:33:27
давайте знаете как сделаем добавим еще01:33:32
один класс которым зовем щит вверх и01:33:38
кауаи01:33:41
[музыка]01:33:43
лично то есть вот этот класс будет01:33:46
отвечать за то будет ли при состоянии01:33:49
checked01:33:52
непосредственно перечеркивается01:33:53
упражнений так мы сможем уйти от вот01:33:55
этого безумного селектора да давайте01:34:03
сделаем вот так вот то есть01:34:06
если им путь стоит чип рокс у нас01:34:09
чиклин то мы берем все элементы ну так01:34:12
как у нас четко указано что она только01:34:14
при checked мы сделаем вот такую вот01:34:18
вещь и вот уже для него be for что нам01:34:23
здесь нужно абсолютное позиционирование01:34:30
которое будет на 50 процентов01:34:33
сверху вот эти как бы у нас есть строка01:34:35
она от нее на 50 процентов так как это01:34:39
просто линии этого нам достаточно для01:34:41
других блоков такой бани watchin01:34:42
сработала но сейчас нам на дисплее01:34:46
онлайн блок нам нужен это плотный ремонт01:34:50
который будет растягиваться но при этом01:34:53
он не будет занимать про всю ширину а01:34:56
только у которые нужно соответственно мы01:35:03
сделаем сто против давайте вначале01:35:06
попробуем здесь все же просто блога01:35:08
сделать и сделаем border01:35:16
включаетесь нам нужно партер на все01:35:20
наверно сделать ничего страшного не01:35:22
будет будет один пиксель solid и вот для01:35:25
этого нам как раз таки понадобится наш01:35:28
зеленый цвет который мы в самом начале01:35:31
указали но и не забываем про контент01:35:35
иначе наш грифон прост не появится раз01:35:40
мы тут указали раз мог адель абсолютное01:35:46
позиционирование и след ноту дуайтом01:35:49
name нужно сделать относительные чтобы а01:35:53
вот эти абсолютное позиционирование01:35:56
позиционировалась относительно нашего01:35:58
относительного позиционирования но я01:36:00
понимаю но ничего страшного мы сможем то01:36:08
кто-то а это не могут где у нас был чтобы не01:36:11
теряться01:36:12
вот мы ему поставим01:36:16
относительно и позиционирование пасешь01:36:19
in real life01:36:22
г-н весь и нигде не напутал давайте01:36:24
посмотрим этой она нам поможет так01:36:34
наверное наверно на вертолетную01:36:38
ой там и не поступает чек-бокс выбран01:36:42
а соответственно я пытаюсь найти внутри01:36:47
этого импорта ну значит придется все же01:36:51
перескочить лэйбл вот и внутри лайбу01:36:57
искать пекин верху01:37:00
ну да прыг перейдем посмотрим снова01:37:10
детектив тик тик тик тик туда и тмин под01:37:20
щеки твои будет vertical line by for так01:37:29
это очень посмотрим что у нас в школе то01:37:34
есть когда здесь всего там простая01:37:45
проверка выбираем тщательно и просто01:37:47
должны получить что-нибудь01:37:50
а мы что-нибудь не получаем01:37:55
потому что чтобы у нас есть я .01:38:06
вот так работаем любят не забывайте01:38:11
сохраняться здесь мы можем наши прежние01:38:17
состояния супер у нас появилось ли не01:38:24
единственная проблема и и не особо видно01:38:31
давайте-ка мы ее ширин а ну наша01:38:37
абсолютно с позиционирована элемент след01:38:39
нам нужно вернуть ему ширину о супер01:38:43
давайте это сделаем сто процент вот так01:38:53
вот теперь она появилась единственная01:38:57
проблема моя походка любимое выражение01:39:00
единственная проблема мы не хотим чтобы01:39:04
наш линия прям пересекала все ну то есть01:39:08
в этом нет смысла у нас здесь небольшая01:39:10
строчка а линия куда-то прямо убегает ну01:39:13
мягко скажем это не очень красиво тут01:39:20
тоже можно пойти разными путями мы в01:39:22
принципе можем через функцию call гуляет01:39:25
высчитать01:39:26
нужное нам значение там как-то очень01:39:29
сложно что-то придумывать какие-то01:39:32
настраивать просчеты хотя на rds так как01:39:38
не получилось от панаса смогло01:39:40
относительно выйти мы пойдем чуть проще01:39:42
мы снова добавим span мы выпьем01:39:47
я верну этот span01:39:49
и суть в том что вот этот checked01:39:53
vertical line я уже укажу конкретно с по01:39:56
ну то есть спа на наши будет шириной 2001:40:02
как по упражнения по грит и01:40:05
соответственно самое не станет такой же01:40:09
вернем css побольше так до должно01:40:15
сработать так посмотрим под теперь нам01:40:19
сможет ширина сварить плохую роль долго01:40:31
нам здесь может пригодиться он01:40:35
относительно вот этого идет да нам тогда01:40:40
получается нужно нужно нужно нужно01:40:46
относительно и т.д.01:40:53
дайте мне пару секунд на ту штуку01:40:56
подумать это очень важно здесь контента01:41:04
нет то01:41:05
а ну конечно же получается нужно теперь01:41:10
относительно вот этой линии то есть от01:41:14
мы здесь делаем абсолютно и01:41:16
позиционируют как мы всегда и работаем01:41:22
побольше потупим поменьше сделаем вечно01:41:27
пока мы можем убрать отсюда и вот01:41:38
единственно у нас как-то продублировал01:41:43
ась это получился прям блог01:41:53
давайте-ка мы с этим что-то сделаем01:41:56
наверно мы сделаем какой бургер01:42:00
ботом вот супер смотрите-ка с этим мы01:42:07
закончили настаиваем чтобы граница была01:42:11
только снизу01:42:14
но это конечно хорошо все у нас в01:42:21
принципе она01:42:22
работает местами мне не очень нравится01:42:24
резкий такой переход да ну то есть01:42:27
просто у нас ли не прет и флоп01:42:29
накладывается обычно хочется чуть больше01:42:32
интерактивности в таких вещах чтобы01:42:34
линии все же там слева направо как бы01:42:37
выехала давайте мы это тоже сделаем мы01:42:41
пойдем в самый низ давайте здесь зовем01:42:45
аниме шин илем01:42:49
keyframe это keyframe отвечает за то01:42:52
чтобы мы расписали шаги анимации ну то01:42:56
есть можно сделать по разному но мы01:42:59
остановимся на таком выборе сделаем01:43:01
верхний carline это мы просто назвали01:43:04
так весь имя может быть любой хоть и01:43:06
бла-бла-бла01:43:07
брак угодно мы не будем расписывать01:43:10
большой эмоции мы просто скажем что наша01:43:12
анимация от ширины вновь приходит решили01:43:21
не в сто процент соответственно ну как01:43:27
бы все мы мастера01:43:30
анимации давайте эту анимацию добавим01:43:34
вам понадобится01:43:36
они мишин мы указываем название нашего01:43:46
без правильно название да мы указываем01:43:50
название01:43:51
указываем сколько она у нас будет давать01:43:53
для примеров начерно тему одну секунду и01:43:56
мне нужно линейная ну то есть линейно01:43:58
она значит что она равномерно будет как01:44:02
бы заполняться есть много разных01:44:04
значений которые будут там в начале чуть01:44:05
быстрее потом мид какими-то урывками01:44:08
можно задавать свои функции то есть на01:44:11
самом деле можно уйти прямо в такую01:44:13
серьезную высшую математику если кто01:44:17
захочет поэкспериментировать попробуйте01:44:19
это достаточно весело ну и тут наверно01:44:23
все давайте перезагрузим вовеки как она01:44:26
меняет давайте приближу кстати по поводу01:44:30
адаптивности говорили но примерно01:44:33
плюс-минус она даже сама складывается на01:44:36
тот чуть чуть по шрифтам подработать01:44:37
чтобы они как были тоже адаптивными01:44:43
но это из-за хотите мы тут какой новую01:44:45
макете к сделаем так ну вот так то вот01:44:50
обратите внимание на скорость то есть за01:44:53
одну секунду она доходит одна секунда01:44:55
это обычно достаточно медленно01:44:57
представьте на большой большом слове01:45:00
предложения она будет литься ну не очень01:45:04
круто она должна быть чуть чуть глаза01:45:10
это должно быть заметно но не напрягать01:45:13
то есть вот такое нормально она01:45:16
достаточно быстро проходит ну все вот01:45:20
тут я поздравляю тут мы как бы эту часть01:45:22
сделали давайте добавим оставшиеся на01:45:27
что дочки с чем прелесть подходов когда01:45:31
вы по сути на классах строите ну или на01:45:35
обоими да вообще на любом подходе и01:45:37
каком таком компонентном что мы теперь01:45:39
просто взяли01:45:41
вернули где01:45:44
обернули теперь мы здесь делаем двоечки01:45:49
а как у нас не должны лишних повторяться01:45:51
снова здесь троечки здесь мы хотели01:45:55
какое-то небольшое да там ходить магазин01:45:59
а здесь на хотели побольше будет как01:46:05
медом начиналось я уже всего хочу а01:46:08
стремлюсь проконсультироваться лексин по01:46:12
поводу01:46:14
[музыка]01:46:20
поводу озерске01:46:22
3 проекта на тексты по01:46:28
мы построили прям такое большое01:46:30
предложение который явно не вместится ну01:46:35
то есть прям априори01:46:36
в принципе выглядит она неплохо то есть01:46:39
и даже работает почти01:46:44
что мы хотим сделать все же обычно в01:46:48
таких подушках не делают несколько строк01:46:51
то есть это достаточно однострочное01:46:53
такая модель мы хотим добиться того же01:46:57
что нам нужно здесь есть точный01:46:59
интересный такой подход связанный с01:47:02
переполнением контент01:47:04
давайте к нему угли перейдем нам01:47:07
понадобятся наши получается то дуайтом01:47:10
name то есть наше имя и мы что ему01:47:14
говорю так по моему это на будет01:47:17
расписать вот здесь мы говорим что при01:47:20
переполнении контента мы его скрываю но01:47:24
себя запейте с никак не сработает так у01:47:27
нас переполнение какого нет у нас текст01:47:30
не выходит за блок но мы можем заставить01:47:34
его выйти только сна для этого нам будет01:47:37
нужен свойства whitespace01:47:40
значение много врагу что она делает не01:47:47
[музыка]01:47:49
хочешь по сделал хорошо перед чем но01:47:58
wrap скажет что мы не можем переносить01:48:01
наш текст в рамках блока мы его должны01:48:04
выстроить банально просто в прямую линию01:48:10
собственно вот этот результат уже01:48:12
отчасти достаточно но мы хотим троеточие01:48:17
так как вот верстки тр-3 я то есть что01:48:21
там указано непонятно лучше уж вообще01:48:23
избавиться от этого слова чем пытаться01:48:25
угадать что же там внутри было для этого01:48:30
нам понадобится всего лишь еще одно01:48:32
свойство с мы использовали просто01:48:34
overflow для блока то есть похожие01:48:37
свойства для текста пальца на текст01:48:40
overflow и мы говорим эллипсис ну то01:48:44
есть многоточие и соответственно когда01:48:47
происходит переполнение у текста01:48:49
мы просто в конце ставим многоточие и01:48:51
будет таковой посмотрите какой окрас01:48:56
мы и добавили и как бы все теперь мы01:49:01
можем спокойно и прекрасно с этим01:49:05
работать наверное я думаю что в принципе01:49:11
мы можем считать задачу вполне себе01:49:14
сделанный понятно что ввести ехать и это01:49:18
можно считать работать можно придумать01:49:20
где-то тает вы сделать но я не знаю01:49:23
например давайте мы на этом лейбле01:49:30
вроде должно сработать01:49:34
пропишем копируем просто вот сюда вот01:49:40
видите когда мы теперь наводим у нас01:49:42
появляется полностью текст который там01:49:45
был то есть полезно полезно вот мы уже01:49:48
добавили какую-то новую фичу01:49:50
по-хорошему теперь если вы знаете же с01:49:54
все что вам надо это научить это01:49:58
приложение в играх менять дату на01:50:00
сегодняшнюю где-то хранить имя и01:50:04
добавлять и удалять вот такие вот тут01:50:06
ушки все остальное у вас уже есть у вас01:50:09
есть шаблон для артемов то есть это01:50:13
просто закидывается в компонентом у вас01:50:16
есть все стили для остальных элементов01:50:21
надо просто добавить чуть чуток логике01:50:24
поэтому ответы же если вы это сделаете и01:50:27
пришлете мне и куда нибудь ссылку на01:50:29
рабочий проект и я буду очень рад значит01:50:31
кому-то это понадобилось можете спокойно01:50:33
это разбирать себе в портфолио я01:50:35
жаловаться не буду окно наверное тут все01:50:41
что я хотел сказать01:50:43
давайте-ка я вернусь к нам в эфир01:50:48
проскочу спасибо само меню человек01:50:56
вопрос вопросики спасибо никита за01:50:59
сегодняшний открытый урок клёво все было01:51:02
показано и рассказано ну а мы переходим01:51:04
к блоку вопрос у вас остались01:51:07
пишите их обязательно в чат пишите в01:51:09
комментариях на youtube мы сейчас не01:51:11
будем отвечать на записи тоже есть01:51:15
вопросы лично к тебе что ты скажешь01:51:18
работе виртуально используешь ли ты или01:51:20
в работе виртуальные рабочие столы01:51:22
windows и почему как удобно01:51:23
переключаться между приложениями по01:51:26
какой-то другой причине01:51:27
ну я использую просто да они забирают01:51:30
переключение то есть так как у меня01:51:32
монитор один я вообще человек привыкшие01:51:35
работать с несколькими мониторами у меня01:51:37
все руки не дойдут купить себе домой01:51:39
второй монитор и честно не особо то01:51:41
хочется потому что это съест место здесь01:51:44
на работе у меня всегда как бы у меня01:51:45
редактор на одном мониторе браузер на01:51:48
другом и тут я получается эмулирует01:51:50
такую фишку просто через горячие клавиши01:51:53
быстро переключать у меня редактор в01:51:55
одном месте быстро и переключился на01:51:57
другой рабочий стол посмотрел как это01:51:59
выглядит в браузере01:52:00
ну или если этом разрабатываю какие-то01:52:02
уроки не опять ты же понятно нужны там01:52:05
документации спецификации какие то01:52:07
возможно примеры какие-то неординарные01:52:10
нестандартные решения их да я иногда01:52:15
могу их там использовать 3401:52:18
но все же стараюсь не перебарщивать к01:52:23
себе есть предложение от скорее это всем01:52:26
в эксплорере01:52:27
а можно не надо мне вообще а давайте01:52:35
попробуем я уверен что из этого01:52:37
получится что-то хорошее из to explore01:52:42
данный момент это одна из систем которая01:52:44
уже требует какой-то минимальной01:52:46
поддержке в том числе верстки потому что01:52:49
в том числе и сама microsoft explorer01:52:52
отказался но понятно что в каких-то01:52:56
допустим01:52:57
муниципальных образованиях там допустим01:53:00
там школах либо еще где то сайта на сайт01:53:03
и смотрят через01:53:05
explorer да в том числе правительстве01:53:07
это используется и многих других01:53:09
и где таких переходов пока не случилось01:53:12
поэтому некоторые сайте все-таки еще01:53:15
как-то на это ориентируется на не01:53:17
большинство современных сервисов нас пор01:53:19
пока01:53:20
ну точнее не пока уже не ориентируются01:53:23
ну что попробуем давай если вы хоть себя01:53:30
это увижу если будет не совсем плохо я01:53:32
упаду в обморок не менее я еще даже не01:53:35
запустили так мне нужно только интернет01:53:41
эксплорер настолько прекрасна что он01:53:43
короче не показывает мне и в доступах к01:53:45
экрану01:53:48
чудесно давать я полностью открою скажи01:53:53
когда будет видно так увиденный тран01:53:55
супер врубай я еще вот я скопировал01:53:59
годовой туда ну ну кстати мы не так уж01:54:07
много потеряли на самом деле мы потеряли01:54:10
фон по какой-то причине а где у нас01:54:15
выставлялся фон фон фон фон фон а с01:54:19
фоном короче ситуация такая что интернет01:54:22
эксплорер не поддерживает переменной то01:54:25
есть по сути мы можем как сделать где у01:54:28
нас он опять потерял вот тут у нас есть01:54:32
backgroundcolor01:54:33
такой а мы выше повторим это же значение01:54:36
мы просто сделаем марк с морем появилась01:54:42
на самом деле тут суть смотрите как01:54:47
работает браузер он идет постепенно то01:54:50
есть мы обработали бокс айсинг мы01:54:52
обработали ширину мы обработали по денги01:54:55
теперь мы обработали01:54:58
backgroundcolor просто со значением01:55:00
белый и следующее значение вот дублирует01:55:04
что сделает chrome oh по правилу каскад01:55:07
насти просто перезапишет предыдущая01:55:09
провел по ground color но интернет01:55:13
эксплорер не знает что такое01:55:14
backgroundcolor01:55:15
именно вот с таким значением поэтому он01:55:17
его не будет выполнять оставят вот это01:55:20
то есть тут надо тогда одновременно01:55:24
пройтись вот по всем вот этим значениям01:55:26
и просто заменить их и мы в принципе01:55:29
получим все вы здесь достаточно01:55:33
правильно01:55:34
если вы используете какие-то01:55:36
пост-процессоры типа там posts из с там01:55:39
это можно отдельно настроить чтобы вы01:55:41
там с компилировали файла он сам добавит01:55:43
вот такие так называемые fall пайки а01:55:47
чего нажимается ну смотрите она даже01:55:51
отчасти работает прикольно ну короче01:55:56
можно сказать что испытания интернет01:55:58
эксплорер мы прошли во всяком случае01:56:01
насколько это возможно для браузера01:56:03
которые больше не поддерживается так01:56:07
наташа рубай меня обратно это была одна01:56:14
из частей в самом начале когда мы01:56:16
только-только пришли ко второй части01:56:17
лайнинга01:56:19
с к одному из элемента не проще ли было01:56:23
сделать позиция абсолютно брали добавить01:56:26
просто минус 9000 можно да можно абсолютно без01:56:32
проблем то есть вот такого способа типа01:56:36
скрытия элементов01:56:39
их есть несколько то есть по факту я не01:56:43
находилось какой-то прям невозможно01:56:45
огромной разницы01:56:47
единственное если нам нужны какие то01:56:49
наверно прям супер браузеры которые не01:56:51
поддерживают свойства клип да мы можем01:56:54
унести и вообще куда-то там заоблачный01:56:58
минус 9000 и будет нормально этой01:57:01
загадки же исходить из задач и то есть я01:57:03
щас вроде интересы если они съедают01:57:07
что-то ужасное время не за это makenna &01:57:09
eus посмотрю где работает клип01:57:14
удивительно указано что клип не работает01:57:17
в интернет эксплорер хотя у нас он01:57:19
сработал ну ладно ну вот opera mini не01:57:22
поддерживает а так сейчас принципе все01:57:24
поддерживают поэтому оба способ будут01:57:27
нормально работать просто мнение такой01:57:31
привычнее01:57:32
опять таки за счет того что я очень01:57:34
много ту силу так скажем в кишках01:57:36
bootstrap а там вот примерно похоже01:57:39
подход и его мне больше поэтому01:57:41
запомнятся01:57:45
почему не запулил checkbox через позиция01:57:47
абсолютно лево вот как раз количество01:57:53
подавать на твой взгляд как раз таки так01:57:56
больше кода или меньше года понятнее код01:57:59
то есть обед к же это субъективная такая01:58:03
вещь мне например через клип понятно то01:58:06
есть я так считаю до что нам просто надо01:58:10
элемент запихнуть прямоугольник без01:58:12
соотношения какого-то ну то есть пустой01:58:15
прямоугольник в плане размеров 0 кому-то01:58:19
с позиций может показаться чуть труднее01:58:22
но да куда меньше пару свойств опять01:58:27
кижи личный подход что я говорил при01:58:30
первом ответе на вопрос в 1 часть01:58:33
ответов на вопрос что некоторым01:58:35
какого-то идеально01:58:38
правильного решения то есть и через01:58:41
позицию и абсолют влево нормально и01:58:44
через клип тоже нормально знакомьтесь а01:58:49
topnews это отдельность продуктов а дома01:58:51
в которым сейчас макеты для01:58:53
интернет-магазинов01:58:54
как правило предлагаю тебе стать как-то01:58:58
я нормально отношусь только группе - к01:59:03
adobe muse мне кажется это вот вокруг01:59:06
вам по моему уже достаточно умер я не01:59:09
знаю насколько давно он обновлялся но01:59:11
почему-то мне кажется что его уже01:59:13
закрыли ветки же идеи было расширить01:59:17
dream villar до была такая программа еще01:59:20
когда-то у компании macromedia01:59:22
одри кони у adobe который придумали01:59:25
flash просто топ потом купил это01:59:28
macromedia и да там был dream вымер01:59:31
который делал то же самое просто01:59:33
накидывали какие-то визуальные элементы01:59:35
номер стола но мягко говоря так себе01:59:37
adobe muse стал как бы прямым01:59:40
наследником этого подход добавив нам01:59:44
возможность сделать01:59:46
response of но адаптивные макеты то есть01:59:49
мы могли там указать какие то точки брак01:59:52
поинты по которым мы не строим просто01:59:54
новые макеты и в конце концов все вокруг01:59:57
это проблема в том что эта цепь01:59:59
невозможно поддерживать то есть если у02:00:01
вас нет проекта в adobe muse которые вы02:00:05
можете открывать в нем и заново02:00:07
экспортировать то есть просто взять и02:00:09
залезть там в css но я бы и не сильно02:00:13
советовал там достаточно бывает страны02:00:15
правило поддерживать это абсолютно02:00:17
невозможно добавлять что-то невозможно02:00:19
поэтому вот так я к нему отношусь02:00:21
наверное для решения задачи бизнеса нор02:00:26
но даже для этого я бы рекомендовал там02:00:29
скорее использовать какие шаблонизатор и02:00:30
типа тильды02:00:32
чё ещё есть чертом по муз02:00:36
интернет-магазинами был это же какой-то02:00:38
отдельный сервис памм тильда кстати тоже02:00:41
умеет их нет нигде не те это делает02:00:45
интеграций интернет-магазина через ecwid02:00:47
который тоже напрямую можно настраивать02:00:49
как интернет магазин еще помимо этого02:00:52
там есть x карт есть еще кучу02:00:55
всякого-разного02:00:56
есть wordpress который там же кстати02:00:58
можно спокойно настраивать не для этой02:01:01
специальной конфигурации02:01:02
есть еще всякие викс и и так далее а вот02:01:05
оживив но поэтому да я бы рекомендовал02:01:08
вот это зачем иметь еще одного02:01:09
посредника в виде какой-то программы02:01:11
поэтому такой mallet наш надо секс на02:01:15
было одно из обоснованию 2018 году02:01:17
письмом юз было в свое время закрыт и02:01:20
как раз приостановили поддержку news в02:01:24
2018 году написали об этом собственный02:01:27
блог02:01:28
эпохи было написано что вот как раз про02:01:30
смысл если вы есть еще конструкторы в02:01:32
общем программ не полетела и появились02:01:36
другие продукты которые гораздо лучше02:01:39
решают задачи которые сейчас ставится02:01:41
миг с дизайнерами и разработчиками и02:01:45
поэтому они очень все ее усилия02:01:47
аккумулировали развитие там photoshop в02:01:50
развитии иллюстратора и других продуктов02:01:52
которые у них являются более низкими02:01:54
адам себя может периодически позволит02:01:57
сначала загрузится какими-то новыми02:01:59
продуктами а из они не полетели их от02:02:01
них избавиться расскажу эту куклу но02:02:06
вообще просто дано док musa этаж свое02:02:08
время успел 102:02:09
коммерческий проект сделать поэтому но02:02:12
такой мягко говоря так по вашему мнению02:02:18
как по очередности изучать сингуляр и и02:02:21
react02:02:22
ну не ну я в принципе тоже могу что-то02:02:27
по этому поводу сказать суть в том что02:02:30
чтобы писать на angular и надо знать не02:02:34
только java script но ей typescript то02:02:36
есть02:02:37
angular и это жесткая завязка если вы02:02:41
знаете typescript ну тогда пример такого02:02:43
вопроса не было то там спокойно изучать02:02:47
и окуляр другом же случае начинайте с02:02:51
react и но надо понимать что это02:02:52
все-таки две разные вещи с двумя разными02:02:55
абсолютно подходами то есть реактором02:02:58
если react еще как-то можно сравниться в02:03:03
в каких то моментах то сравнить реактор02:03:05
тян кулер это внутри такой не забывай02:03:08
что надо знать typescript02:03:09
так что если вы знаете только java02:03:11
script берите react и изучать и именно02:03:15
его я здесь могу тогда тоже добавить что02:03:19
это все еще зависит от того какие бизнес02:03:22
задачи вы хотите лишать потому что у них02:03:24
еще и область применения совершенно02:03:26
разные и у нас на youtube канале есть02:03:28
интервью с александром козаченко которая02:03:31
является архитектором тиньков и помогай02:03:34
тиньков решать разные задачи которые02:03:36
ставятся перед их бизнес направлением и02:03:39
вот у них был по моему из когда они у02:03:43
них был react02:03:45
они переходили по моему на angular вот и02:03:48
в этом тоже было бизнес обоснование02:03:51
казалось бы ряд очень популярен но они в02:03:54
итоге выбрали для себя angular и вот там02:03:57
плане тоже есть определенный бизнес02:04:00
обоснования в том числе и решению затрат02:04:03
на стоимость разработки для потому что02:04:05
им стало проще допустим нанимать02:04:09
разработчиков которые умеют angular и02:04:13
либо какая-то другая поддержка да то02:04:17
есть это как раз связки все вашу систему02:04:19
архитектурно будут02:04:21
работа поэтому здесь скорее вопрос к что02:04:23
он конкретно нравится02:04:26
интересно если вам интересно как раз02:04:29
уходить что и скрипта почему бы нет он02:04:32
сейчас тоже очень популярен и по02:04:33
последним данным откель хаба прям вообще02:04:36
прекрасный a jet брони jetbrains тоже02:04:38
проводили исследования не каждый год это02:04:41
делают у них можно достать его02:04:42
посмотреть посмотреть тренды и увидеть02:04:44
что вот как раз разработчики те кто как02:04:47
раз работает также скриптом а не вот02:04:50
прям нагуляли вполне себе так это видимо02:04:59
опять мы возвращаемся некит почему ты02:05:01
предпочитаешь я вместо m не считаешь ли02:05:03
штора им удобнее ну во первых я не02:05:07
предпочитаю я просто для проекта выбрал02:05:11
я то есть выберем сказали бы почему я не02:05:14
выбрал юмы предпочитаю reima02:05:17
ну удобства так скажем опять же все02:05:24
зависит от задачи если нам нужен02:05:27
предположим список но вот частый пример02:05:30
различий mrm и делают нам вложенных02:05:32
списках да то есть если мы сделаем ли мы02:05:35
укажем каждому ли там 05 м у нас каждый02:05:39
последующий уровень сложности будет02:05:41
одинаковым размером то есть и это02:05:44
нормально но если мы укажем 05 кем02:05:47
каждый следующий вложенный список будет02:05:49
в половину меньше размера шрифта своего02:05:52
родителя это может быть полезно в02:05:54
некоторых случаях но есть мы так хотим02:05:57
так скажем визуально выделить информацию02:06:01
поэтому всегда надо исходить из задач то02:06:04
есть опять-таки же больших вложенностей02:06:08
бывает не всегда к тому же иногда бывает02:06:11
ситуация что вот в данном случае нам в02:06:13
проекте куда проще сказать что слово02:06:16
никита02:06:17
в полтора раза больше чем привет чем02:06:21
пытаться высчитать от текущего значения02:06:23
рейм что там оно значит было твой 3 а02:06:26
это должно быть наверное 29 и так далее02:06:30
то есть всегда зависит от наглядности но02:06:33
это это02:06:34
как бы love поэтому нормально02:06:41
ночи ребят по джессу мы все вопросы02:06:44
можно задавать открытых уроках по джессу02:06:46
нас кстати плейлисте есть уже два02:06:49
открытых урока который вы можете02:06:51
просмотреть они по словам фронтэнда из к02:06:55
деньгам игры в городах и периодически мы тоже02:06:58
будем проводить открытые уроки позже с и02:07:00
там как раз можно будет тендерам02:07:03
задавать эти вопросы от себя могу02:07:04
добавить что пример это то что02:07:06
поддерживается гуглом это окон02:07:09
собственный проект и здесь ну не знаю на02:07:12
русскоязычном сегменте я наверное не02:07:14
видела пока что проекты которые02:07:16
поддерживают именно знания полимера по02:07:20
крайней мере что это вот и мне не02:07:21
встречалось не знаете видел где-нибудь02:07:24
требование знание полимера среди02:07:25
вакансий по моему не было ну я тоже02:07:28
особо не видел я понимаю что он построен02:07:30
там на принципах веб-компонентов но мне02:07:34
кажется web component тотчас на себя не02:07:36
очень оправдали то есть одних они должны02:07:40
были стать прям невероятный киллер фичей02:07:42
но не стали пока что полимер я просто я02:07:46
не использовал ну я думаю те вещи02:07:49
которые хорошо настолько поддерживается02:07:51
сообществом то есть я даже дам можно02:07:54
посмотреть что там с него на гитхабе02:07:56
происходит полимер 21 сплайн тысячи02:08:04
звезд 2000 форков мне кажется говорят02:08:09
сами за себя что это все круто вот пишет02:08:14
что youtube это полимер ну наверное я02:08:17
честно и по этому в принципе логично это02:08:24
из говна собственные продукты может как02:08:26
раз помощью библиотек вполне себе02:08:28
позволить поддерживать другой вопрос02:08:31
если вам это интересно с точки зрения02:08:33
того как вы будете с этим работать02:08:35
именно в коммерческих задачах для02:08:37
компании которые хотели бы устроиться то02:08:40
конечно это изучение да ну и плюс ко02:08:43
всему полимера интересно будет02:08:45
посмотреть и исследовательской точки02:08:46
зрения02:08:47
между посмотреть как это вообще все02:08:49
работает все что касается того что вот02:08:52
где-то пока пальцы по моему для02:08:54
программистов самые ток от меня потому02:08:56
что это расширяет кругозор и на мой02:08:59
взгляд это не просто там потыкать как02:09:03
раз таки в код а еще и понять как это02:09:05
все работает для того чтобы решать более02:09:08
сложные задачи так следующий вопрос02:09:14
вопрос связи на борт еще умеет страниц02:09:19
его steam или экспортировать я последний02:09:22
раз не кроссворд запускал02:09:24
лет 5 назад поэтому скажу мне кажется да02:09:30
как-то костыль на выглядит учет людей с02:09:33
ограниченными возможностями стали ждать02:09:35
в будущем учетом что ему или css этих02:09:37
особенностей костылина в плане чего к02:09:43
стыдно как я сделаю или как это выглядит02:09:45
в принципе в html и css02:09:47
то есть тут нужно уточнение после02:09:50
которого можно чуть подробнее об этом02:09:54
сказать так что алексей02:09:56
допиши этот момент им или поговорю меня02:10:01
напротив равно инклюзии можно посмотреть02:10:04
интервью которое у нас было на нашем02:10:06
канале никита как раз его модерировал02:10:08
задавал вопросы прекрасным девушкам02:10:10
которые к нам приходили в гости к ферри02:10:13
я забыла фамилию .02:10:16
также у нас были гостях галлахера и02:10:23
валерия и они как раз так скажем02:10:25
специализируются на этой теме они по02:10:28
сути очень активно только за02:10:30
распространение этой культуры среди02:10:33
разработчиков и даже организуют курсы в02:10:36
том числе будет как ошалели можно будет02:10:38
увидеть это анонс и ее мы тоже помогали02:10:41
анонсировать информацию о курсе то02:10:43
цифровое тв люди и там как собственно02:10:47
предназначен для дизайнеров и и для02:10:50
разработчиков которые хотят более02:10:52
активно занимался этим и и собственно02:10:59
это все делал внедрять вот он нам02:11:02
подсказывает что соответственно глафира02:11:04
жюри валерия кур маг валерий кстати есть02:11:08
еще до мышь сказали да про курс02:11:13
записаться в 1 glory там как раз читает02:11:16
блок для разработчиков где более02:11:18
детально рассказывает какими02:11:19
инструментами можно пользоваться02:11:21
frontend специалистам для того чтобы02:11:23
собственно все инструменты по которые02:11:27
будут облегчать жизнь людям с02:11:28
ограниченными возможностями внедрить02:11:31
хочу алексей дописал02:11:34
да потом перейдем к вопросу проблем02:11:37
который выше был тот смысл в том что эти02:11:42
костыли создают не html и css02:11:45
дизайнеры ну вот то есть они хотят02:11:49
спрятать эти checkbox и потому что ну02:11:54
представить что так скажем наш чек бокс02:12:01
да не является чем боксом визуально то02:12:04
есть от как предстоит машину вы прям и02:12:05
скажем же давайте спрячем колеса но в02:12:08
теории это можно но как бы кто запретит02:12:10
inner даже можно как ты их так pad02:12:12
прятать чтобы она все равно е hv-1 колес02:12:14
не было видно но это же не проблема02:12:17
создателей автомобилей или конструктору02:12:20
дизайнеров даже автомобиля это проблема02:12:22
того странного человека который захотел02:12:24
вынуть колеса здесь ровно такая же02:12:26
ситуации во всяком случае я не слышал02:12:30
никаких подвижек02:12:31
html css чтоб править такие вещи потому02:12:35
что это не является стандартом то есть в02:12:40
будущем может быть оно появится может02:12:41
они придумали какие-то вещи именно вот02:12:44
для таких вещей так что костыль им здесь02:12:46
именно мы дизайнеры и разработчики и02:12:50
соответственно браузеры которые пытаются02:12:52
такие методы хоть как-то поддерживать02:12:56
так вопросе .02:12:59
просто будет в любом случае когда я02:13:02
допишу02:13:03
первые три модуля до конца но там таки02:13:07
да еще курсов которые хочу в четвертом02:13:09
модули будет bm будет они02:13:11
c будет свёртка писем что там еще у меня02:13:16
была но я забыл но в общем да bm будет02:13:20
но пока не могу сказать как то что и на02:13:25
вот этой ноте как раз таки я думаю что02:13:28
мы можем завершать курс и подобает02:13:31
конечно классно вы сушились большой02:13:34
набор самых разных курсов профессия02:13:36
верстальщик и вы как раз можете их02:13:38
проходить пока вы будете проходить02:13:41
накидка красного и напишет думаю что это02:13:44
база постоянно пополняется записывайтесь02:13:47
на обучение ссылка в описании02:13:49
присоединятесь к профессии верстальщик02:13:52
учитесь так как вам это будет удобно02:13:55
смотрите наши открытые уроки02:13:57
ну и как положено у всех блогеров02:13:59
подписывайтесь на наш канал ставьте02:14:00
покончено чтобы ничего не пропустить а02:14:03
если вам понравились видео о верстке02:14:05
понравился открыт урок sentido это02:14:08
ставьте пальчики вверх мы как раз на них02:14:11
посмотрим и если все понравилось .02:14:14
урок проводить хотя мои в этих позовем02:14:18
и техничных потому что мне очень02:14:20
нравится например как никита уроки02:14:22
работе02:14:23
я всегда вот о чем пишите нам02:14:27
комментарии задавайте вопросы02:14:29
знакомьтесь нашими курсами по ссылке в02:14:32
описании и всем пока покаОписание:
🔥 Начать обучение профессии «Верстальщик» на Хекслете: https://profession.hexlet.io/layout-designer Одним из частых случаев создания учебного проекта является список ToDo. Его реализуют на различных языках и фреймворках. А чем верстальщики хуже? 😀 Мы создадим свой ToDo с использованием только вёрстки. В качестве инструментов возьмём Pug и SCSS. В открытом уроке могут принять участие все желающие и повторить представленное решение самостоятельно. Урок ведёт преподатватель профессии «Верстальщик» Никита Михайлов. - Макет: https://www.figma.com/file/r3ikJX6vmcrxnGLsb2cbi3/ToDo - Код: https://codepen.io/hexlet/project/editor/Zjankx Таймкоды: 00:00:00 - старт и приветствие 00:02:01 - о преподавателе 00:04:20 - план урока 00:05:53 - разбор макета урока 00:06:30 - инструментарий урока 00:08:40 - старт урока 01:06:04 - ответы на вопросы: учёт seo, заголовки 01:08:29 - продолжение урока 01:50:55 - ответы на вопросы: виртуальные рабочие столы 01:52:23 - демонстрация урока в IE 01:56:11 - ответы на вопросы: position absolute через left, abode muse, angular, react, polymer js, удобство rem, экспорт, цифровая инклюзия, костыли Полезные ссылки: - Путеводитель по вёрстке от Хекслета: https://drive.google.com/file/d/125jYmbwwtQA_V3GNNFXC1kClNKaqvB9f/view?usp=sharing - Практикум «Верстаем блок лендинга с адаптивом»: https://www.youtube.com/watch?v=XwjjuoS0MI8 - Slack-комьюнити Хекслета: https://t.me/hexletcommunity - О групповом обучении: https://ru.hexlet.io/blog/posts/group-training
Готовим варианты загрузки
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах
Вопросы о скачивании видео
Как можно скачать видео "ОТКРЫТЫЙ УРОК: создаём TO DO только с помощью вёрстки [Хекслет]"?
Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.
Какой формат видео "ОТКРЫТЫЙ УРОК: создаём TO DO только с помощью вёрстки [Хекслет]" выбрать?
Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.
Почему компьютер зависает при загрузке видео "ОТКРЫТЫЙ УРОК: создаём TO DO только с помощью вёрстки [Хекслет]"?
Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.
Как скачать видео "ОТКРЫТЫЙ УРОК: создаём TO DO только с помощью вёрстки [Хекслет]" на телефон?
Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.
Как скачать аудиодорожку (музыку) в MP3 "ОТКРЫТЫЙ УРОК: создаём TO DO только с помощью вёрстки [Хекслет]"?
Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.
Как сохранить кадр из видео "ОТКРЫТЫЙ УРОК: создаём TO DO только с помощью вёрстки [Хекслет]"?
Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.
Сколько это всё стоит?
Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.