всем привет я рад приветствовать вас на очередной встрече нашего most рандом комьюнити сегодня у нас мы продолжаем серию наших открытых интервью у нас было три три интервью для для мида у разработчика для сине разработчика java script разработчиков и сегодня мы продолжаем нашу серию открытых интервью сегодня у нас будет интервью для front and html css разработчика это накладывает некоторые ограничения то есть мы уже с вами говорили про java-script обычно на интервью на эту позицию спрашиваю java script даже
00:00:02 - 00:01:24
но в нашем случае мы пропустим секцию java скрипта и будем фокусироваться в основном на верстки на html and css вы можете писать вопросы в чате вопросы мы будем отвечать после того как пройдет интервью еще хочу вам сказать напомнить что у нас есть телеграм-канал в котором мы обсуждаем разные интересные новости из мира java script фронт-энд и у нас есть youtube канал на котором вы собственно смотрите текущую трансляцию подписывайтесь ставьте колокольчики будет интересно и сейчас я передаю слово нашим интервьювером и
00:00:42 - 00:02:11
кандидату и мы вам покажем процесс собеседования на front and stimulates с разработчик давке привет привет всем я вика так с нами тут еще есть женя женя тебя пока не слышно вот проверяем звук и маргарита привез и маргарита которая сегодня будет отвечать на наши вопросы вот маргарита как как дела волнуюсь честно волнуюсь но очень надеюсь что все пройдет отлично и удастся показать хорошие результаты за bethesda а не буду стараться interviewer и тоже волнуються все будет хорошо так как обычно в начале интервью по пройдемся по
00:01:29 - 00:03:23
дженди а значит сегодня у нас интервью на frontend тема front and html css поднимем с тобой такие темы как общие вопросы по загрузке веб-страницы тем html css а шрифтов картинок вот ну и в конце обязательно поговорим про оптимизацию про оптимизацию загрузки оптимизаций рендеринга страниц и и так далее если вопросов никаких нет к интервьюером я думаю мы сможем начать сейчас и первый вопрос первый вопрос маргарита к тебе расскажи пожалуйста что вообще происходит как за по как происходит загрузка страницы вот мы вбили а ю л л в
00:02:27 - 00:04:14
браузере и что происходит под капотом до того как вся страница отображена на экране до происходит запрос на сервер вызов запрос на получение html учиться это html документа вот потом мы получаем этот html документ и отрисовывает подходит построение дом дерево потом а css он дальше происходит построение дерева рендеринга она же рендер 3 называется вот после этого идет происходит построение происходит обработка нотка но то есть там мастер actimel тегов и так далее а долежат происходит построение лейаута и в конце
00:03:20 - 00:05:24
отрисовка то есть и paint окей хорошо раз ты вот сказала что мы получаем html и происходит построение дом дерево как вообще браузер парсит html-файл как он понимает что это узлы этого дерева как он понимаешь что это услы как построить это дерево у нас насколько есть несколько я понимаю он по ним а обрабатывает теги которые подходят по сути все узлы являются тегами страниц о славе с ресурсами внешними которая браузера собственно с 4 по сумме html-кодом например какая то картинка стиль скрипте что с ними происходит ну
00:04:26 - 00:06:26
они окружают на страницу по моему еще при с помощью на втором этапе когда при когда происходит запросы и когда происходит запросах темы вот и запросы dota на картинке на файлы css в том числе десятки до ограничения по этому поводу сейчас для браузера по количеству параллельных запросов затрудняюсь ответить хороша давайте будем двигаться дальше давайте перейдем к вопросам почти милю мы обязательно вернёмся к вопросам рендеринга когда будем обсуждать оптимизацию этого рендеринга 2 и такой вопрос вопрос что такое doctype а для
00:05:34 - 00:07:41
чего нужен doctype определяет тип документа то есть по сути в нем задает то есть видим задается то что быть отнимали у либо то может быть и xhtml и версия собственно артема ли сейчас напишем такой понималь будет на что мы используем html5 если мы если мы бы использовали html 4.1 например прописывается doctype html 4.1 и еще кучу непонятных слов слов которые хоть и не видела потому что сразу использовал html5 короткая запись как то что ему почему убрали вот это лишнее ничего не написали взамен например доисторическая
00:06:42 - 00:08:37
такая штука самом деле если честно затрудняюсь ответить [музыка] ok давайте двигаться дальше расскажи нам маргарита что такое мета теги и для чего они нам нужны в мета тегов хранятся and honey хранится информация для браузеров для поисковых систем допустим могут быть метатеги ведь это как может храниться кодировка страницы могут это ключевые слова для поисковых систем вот по которой можно будет потом найти эту страницу есть еще метатег viewport вот это уже тасс сафари вели его и сначала разработчики сафари для
00:07:39 - 00:09:17
корректного отображения страницы на мобильных устройствах потому что размер экрана телефона и размеры размер телефона и размер там его экрана отличается и нужно было корректно отображать и страницу на мобиль на экранах вот мобильных девайсов вот и другие разные метатеги тоже есть но и кажется ничего не менее часто используется задавать контент вроде бы еще можно а метатег со свойством name кажется там имя автора но тут тоже не сталкивалась лично обычно это для кодировки для viewport а вот для seo
00:08:34 - 00:10:05
оптимизации тоже говорила по поводу ключевых слов люди хорошо расскажи пожалуйста как ты понимаешь слова семантика значению слова чтобы тебе такой соматически семантика логические правильный день наименование тегов то есть и для для по для разработчиков для поисковых систем то есть допустим если так де внесет тебя какое-то информации кроме того что это просто блочный так допустим то вот есть назвать так ходор то уже будет понятно что он будет использоваться там для верхней части страницы для вот либо там цыганов
00:09:20 - 00:10:54
если тырново он для навигации помогает как это снимать помогает как для accessibility так и для поисковых систем и чтобы поисковые роботы могли раз почти страницу и понимали за что отвечает какая часть вот это все в таком духе хорошо отдавать сказала про стимул 5 да какие появились где ты стал устаревшим до из новых т.к. вот семантически теги как артикул мэйна в хедер footer а заменить то появились и новые теги для отображения видео для аудио то сейчас уже есть исписан теги видео аудио альбомы для аудио были другие треки но
00:10:06 - 00:11:56
они сейчас стали и устарелыми появились в html5 и новые атрибуты для input об такие как дал им email color и другие вот чаша блендера сумму как у canvas еще координат они были ставил судах салют пожалуйста из устаревших акроним я слышала мельком из таких интересных b и и которые вместо них лучше использовать тонкий и м потому что не является семантически несут семантическую ценности для screen dry top of a b и и такой ценности несут поэтому например почему тайги стали устаревшими допустим либо же теги были устаревшими потому что
00:11:02 - 00:12:46
раньше они совмещали в себе свойства потому что не они приносили свойства css допустим сразу вот как тот же т.б. вот но так как началось разделение что html больше на для контента а вся все-таки и для стилей то вот те тэги которые а который применять какие-то сессия стиле тоже уже не рекомендуется использовать в большинстве своем пух окей вы тут заговорили про screen рида рипперы праксис обелить маргарита расскажу и что это такое accessibility это адаптация страницы для адаптации сайта для людей с
00:11:54 - 00:13:19
ограниченными возможностями вот скрин три древних не особо вникал это понимаю что они позволяют считывать эти тексты со страницы то есть для тех кто не может ее увидеть окей хорошо вот такси соберите мы используем даже этот подход эту технику для людей с ограниченными возможностями что входит в эту технику какие требования к разработчику чтобы сделать нашу страничку access обл ты что-то вроде бы есть прим 3 уровне accessibility но из из таких примеров как можно сделать более доступной это вы имиджа водить атрибут alt он не
00:12:40 - 00:14:21
обязательно должен быть и не в нем должен быть готов помогать и льный текст кстати говоря вот но если он есть это мы назвали еще есть таких это привязка лэйбл лейблов допустим им потому либо других элементом формы той чтобы обеспечить навигацию клавиатур пока через клавиатуру вот карета навскидку требования к самому дизайну есть дизайну там много требований и по цвету чтобы он был достаточно контраст и отношение 7 к одному было я читала вот а по размеру текста есть вот но это больше заморочки мне кажется все таки
00:13:31 - 00:15:28
дизайнеров и обычно разработчики нет не так сильно уделять этому внимание либо вообще не уделяют обычно с этим приходит уже дизайнеры вот но accessibility для дизайна рабы для девелоперов мне кажется совсем разные хорошо нам совершила вкратце прошли intact и пример шарит экран возьмем первую задачку если что у нас есть мы тебе скинули за несколько минут до начала нашего интервью ссылки на джессику в общем то можешь расшаривать экран и открывать первую из них до суть задачи в том чтобы каким-либо образом разместить сделать
00:14:30 - 00:16:06
так что у нас будет продолжаться до нужного разрешения экрана соответствующая картинка и из требования для отображения каждого из них окей сейчас тогда попробуем а в теги и мышь есть такое отличное свойство как как ассорти сет обратно добежишь во вкладку css а я как раз спасибо большое а вот так хорошо так чтобы было видно так serviced так сюда мы забиваем урлу с нужным размером так 600 только не в пикселях осы буквой v то есть настоящий размер этой картинке потом идет атрибут медиа нет ни медиа says медиа это в другом так
00:15:18 - 00:17:36
идет атрибут says is a кстати если на то пошло то надо было тогда надо будет здесь все перечислить закладочку джастин беру пожалуй ну мешать чуть-чуть так следующее у нас а мне показалось хоккей мне пока что что есть одинаковая но нет так у нас шириной до не обивка что не одинока и в названии но нет так видимо все таки должна быть 200 600 в если исходить из названия так следующий у нас вот это вы про пожалуйста хорошо предпоследнее сейчас будет последний 640 так 768 так последнюю вроде бы не обязательно указывать размером возможно
00:16:28 - 00:18:29
ошибаюсь пусть пока будет так так союза сказать на сайт с у нас нужно написать медиазапрос тебе слово медиа просто так формат desktops возможного сила прощать более детально факел и сами так винвин винвин оказывается из потом окажется что перепутал направлении будет очень обидно так если кто-то скажет что перепутал в синтаксисе что-то будет еще более обидно потому что не часто сталкиваюсь с таким заданием сожалению но полезно будет вспомнить по крайней мере чувство мне подсказываешь уйду я в правильном
00:17:41 - 00:19:08
направлении куда-нибудь и так окей и фото у нас последнее excel пожалуйста так лозин пиксели окей что там она и последняя кассир си кей так мыслить если не ошибаюсь нужно задать только одно значение если вдруг а сердце сет не подхватить не будет работать других браузерах вот чтобы найти скажите господа близко к правде не хватает продавца и за с одного атрибута еще в каждом из перечисление том 2 3 вот она вершина слата мин вид и через пробел да это ширина но это на самом деле мелочи потому что синтаксис
00:18:40 - 00:21:12
какой среда не часто его пишешь поэтому дата вам целом сходиться хорошо да и там же будет такой же да может еще предложу это вариант кроме секса я видела еще похожие варианты но использованием тегом picture но правда там о хорош там был стеком соус но внутри тоже пыталась ассорти сад но вместо сайт с было медиа и там нет да просто ветер это бы мне нужно было 32 так второе значение правду за про записывать мими invites такое каком значении и усё ну и в конце счета писать и просто и мышцы с россии таким-то таким-то
00:19:59 - 00:21:45
вот если что-то кто вы его подхватит вибрации соберите все такое что-то насчет мудрыми хватает у тебя alt и будто alt которое да у тебя может быть и дальше их у окей отлично хорошо так сейчас по как авторы вкладке перейдем еще небольшой такой вопрос про атрибута вот есть такие атрибуты когда-то атрибуты для чего они нужны дата атрибуты нужные для хранения информации который может без визуального отображение ваш темой которые можно потом из использовать через java script вот там даже довольно удобный синтаксис
00:20:53 - 00:22:36
тесто есть там а элементы datasette и название этого дата элемента отлично хорошо переходим дальше хоть и самый интересный вопрос пошли моём ой как он довольно обширный но давай начнем сначала расскажу о том какие то знаешь и вообще зачем они нужны методологии да хорошо самая известная распространенная считать и методология бэм есть еще ost смак называется то обще currency все с о-о-о-о css вот о томе xyz с вроде бы тоже сюда входит вроде бы да да вот но обычно обычно про три указанных три упомянутых мною встречаются довольно
00:21:44 - 00:23:55
редко у нас больше наиболее распространен по сути это просто организация структуры кода правило наименования классов допустим пойми а это разделение я маг темой страницы допустим в bemeta эти делится на блоке в блоках есть элементы и модификаторы то есть словно страниц всю страницу можно разделить на блоки которые можно будет потом переиспользовать и менять местами не сама всю страницу элементы тоже более такие атомарной сложности и внутри блока вот если допустим расстояние потери навигацию как блок то
00:22:53 - 00:24:30
какую то там ссылку в этой навигации уже будет вычитаться элементом а если нужно отлить а следить и ссылку актив ссылку то вот и класс там на fight of active уже будет модификатором то есть придерживать состоянии на примере сейчас как раз визуализирует это можно на самом деле они не писательниц важны класса важны важно собственно понимание структуры как ты не понимаешь вот задачка и у тебя есть структура блока напишите пожалуйста например на ну и сначала ли проблем давай будем свой дом сейчас я прочитаю что здесь нужны
00:23:41 - 00:25:24
эти почести под список каких-то пользователей и у каждого из пользователей есть некоторые набор некоторых трибутов вот и соответственно нужно отобразить в разметке хоккей список пользователей у них есть ой там person in country условно каждый этом это карточка так давай начнем нужно сделать эту карточку надо верстка две карточки где мы будем отображать аватар имя на каждый из карточек будет аватар имя страна пол и так далее ok пусть допустим это будет текст экшен в нем будет класс если правильно понимают опрос то есть то есть
00:24:33 - 00:26:38
допустим это будет как блок с классом user и уже каждого каждого юзера есть там свой аватар ok хорошо если уже не вдаваться в подробности to close аватар так жить хорошо у вас здесь есть нечто м от есть которому намного проще писать дядя поддержка и моторист то есть ты можешь просто писать имя класса и нажимать там наши-то выдержки год настройки среди нужно идти некуда но я к тому чтобы ты быстрее подписал а вообще есть вы хорошо спасибо штучки ситуациях можешь говорить как ты думаешь воспринимаешь собственное структура
00:25:36 - 00:28:02
этого бога ну как как я сейчас пока что вижу что в целом юзер это просто идет блок а уже аватар person немка unde3 это его элементы также будет рендером online status в целом это элемент но у него может быть еще дополнительный класс сейчас если начать online status to take допустим user как блок потом нижнее подчёркивание показывает то что это будет следующий элемент просто путь будет статус статус и дальше уже юзер статус и такие тоже мы-то как элемент но через два дефиса у нас будет пусть будет
00:27:26 - 00:29:06
оффлайн пока что вот это вот понимаю что мы потом с припечатал онлайн и оффлайн вот дальше у нас не сюда не туда все правильно рейтинг какие рейтинг тоже как элемент 1 плюс 1 десятая болта автор waiting on a lucky данный элемент есть две кнопки и текст посередине с числом то есть рейтинг будет элементом еще внутри у него есть кнопки рейтинг понял хорошо то есть пока что пусть это будет див тот же с цикла сам от глаз отображая то что у нас это является элементом класса user рейтинг дальше раскрываем down вот батон ok
00:28:17 - 00:30:20
батон так так блок у нас остается все тем же юзер down вот bottom давно вот давай подумаем над тем какие из этих элементов которые расписала чтобы перри использовала где-то еще в теории аватар можно перед хотя и и если вы если развалила враг в рамках блока то он будет 1 person in country гендер online status скрип шин обычно просто перес пользуются блоки и я неверно что можем перес пользовать именно элементы где-то отдельно ну например там вообще скобы перес пользовать это прям целиком где-то при оценивании
00:29:15 - 00:31:29
чего либо еще на сайте в теории можно но туда я думаю его нужно было бы сделать отдельным блоком и то к чему я веду потому что двигательным блоком тату то есть если мы сделаем то не юзера рейтинг то то ему можно быть были использовать ну и вверх еще на восьмой строчке тоже то есть пе сюзи рейтинг как-то так окей а у меня такой вопрос а почему ты выбрала и т.п. для username а верх чуть-чуть поднимемся петлю сырным но юзер коровье div а username как минимум потому что это неплохо в нем находится текст на и
00:30:25 - 00:32:32
так те и если так смотришь наверное было бы логичнее использовать испан и конечно смотрите по разметке надо но я думаю что все таки было барство нету скорее spans пони обычно текст находится небольшой текст в теги по уже большие параграфы а username это как-то не тянет а почему не просто дифф я не говорю что если неправильно просто интересно почему именно или span семантически будет неправильно они в используется для блоков куда уже может складываться теги с текстом допустим вот это а п а п либо
00:31:42 - 00:33:23
span уже семантический будет более правильно использовать для текста span единиц однако семантической нагрузки совсем хорошо последний момент по баму давай вот и достал одну кнопку напишет во вторую пожалуйста это для понижения рейтинга вторую для повышения смотри как бы ты сделала поступила на ситуации если бы тебе нужно было вид элемент записать это одна и та же кнопка не она отличается всего лишь даже не знаю возможно ничем не отличается защит зрения html + в 1 статьи в другой минус ну или же например
00:32:32 - 00:34:12
будет бэкграунд какой-нибудь там картинка в одном стрелка вниз другой ссылка вверх собственно у тебя один элемент или дома гифи котором как бы ты расписала поменяла свои классы в этом случае то есть по сути это было бы тогда одна кнопка вместо двух ну допустим был-бы блок рейтинг потом элемент того условно и если модификатор то рейтинг to call a free teen talk all down давайте хорошо здорово пойдем пожалуй дальше пришли а теперь мы перейдем к части касаемо а сотов картинок 6 всего остального что
00:33:31 - 00:35:35
подключается на страницу и первым делом если поспрашивать из ты вот да ты уже перешла на это примерчик собственно справа есть болванка для фантой со и там чуть выше и снова подключить есть я с таким вот интересным именем самым носом у фонда есть вариант навсегда которые нам нужно подключить а4 начертания обычные жирная и и толики варианты для век с тебя написать эти четыре директива фулфейс ok но font family у нас нужно задайте в свой раз комментирую собственно погнали ok а что так вот красиво хорошо то есть и
00:34:32 - 00:36:30
начала нужно прописать у нас font family который будет использоваться сам косам в фонд он орлами новая не заморачиваться возможно сурья файл dance перечисленные расширение файлов которые могут использоваться касательно фонд вариант также просто потом прописывается снизу фонд м о господи он творит самое сложное слово допустим реку регуляр но у нас обычно font-family то пусть им и видела фонд о стенд фонд regular и к нему свойств он творит там normal но ключевое слово да норм а вот для для льда puffin для жирных болт и
00:35:31 - 00:37:51
есть и обычно идет другой font-family то есть под особый фонд болт и уже для и в отдельном форт хейс и прописывая друга family создавай до [музыка] допустим допустим болт обычно тоже погружается вместе с другими вид другими шрифтами тут будет болт либо можно прописать и цифрами 600 вместо фонд normal 400 регулярно 700 ну не суть да хорошо реальный вопрос первый вопрос в чем ошибка если назовешь собственно в том что ты нас два fantasy назвала 2 3 фонд фейс использовала разные font family [музыка]
00:36:44 - 00:38:41
что такое phone 7 или вообще для браузера font family обычно это . тот крем который используется название ой а номер три вести это слово в общем то семья шрифта кто вестись 0 сервис уже вполне месте семейство шрифтов на может быть ошиблась в том что нужно было фонтейна ли называть везде одинаковым потому что при список она ведь я бы тарелкам но вы с россии уже будут разные пути допустим в первом случае будет подгружаться фото стенд фонд обычные потом для фото из который должен быть жирным ход фейс
00:37:48 - 00:39:23
успели сам of sample and phone with фонд болт и так далее одинаковым до в этом ключе до делается все теперь давай немного про оптимизацию этой записи поговорим но твой взгляд какие точнее не то чтобы на твой взгляд какие сейчас шестые нужны вот у тебя есть пять сейчас перечисленных какие из них нет ну практически нет в общем то потому что у них нет необходимости но я ела те используются только для интернет эксплорер а насколько знают для остальных он не используется вот тоже не используется вместо него обычно
00:38:35 - 00:40:06
используется вот этот бог или дабы офис 2 либо текке f он вот этот пикет самый распространенный остальные уже постольку поскольку ну вот хорошо для современных браузеров давай уберем лишнее славим только пошла вот этот нам сто процентов не нужен свет же я немножко сомневаюсь обычное свечи используется для гоночных шрифтов допустим а для обычных шрифтов кажется я не видела я бы его тоже убирала вот я считаю что вот прийти вот такие самые распространенные ну а идти нужно для экспорта это возможно 8 стихе поэтому
00:39:20 - 00:40:55
его тоже может быть можно убрать бьете для совершенно старых версий там до 10 9 поэтому тоже глисты хорошо как бы еще можно было бы ускорить во-первых поиск шрифта что ли чтобы помочь браузеру быстрее найти при возможности этот файл су-100 и начать раненых и что делать браузера с тем как рендере текст какой-то в тот момент пока еще не загружен wishlist то есть браузер необходимо отобразить ход как-то текст на странице но вершит не загружен соответственно что делать браузер и как можно ему помочь а
00:40:08 - 00:41:30
я думаю может быть и я думаю можно указать и кто-то пустил так и там optima либо body прописываешь и потому ли которая используется там допустим этот запросам в фонд которого нету людей на компьютере как прогружается поставите дописать еще 2 там допустим ареал либо бердана который у всех у всех пользователей есть на компьютере тогда подгрузится тот второй шрифт хорошо как помочь пользователю которых есть локальное тот 6 файл составе он установлен системы труб затрудняюсь ответить есть еще которые можно указать
00:40:49 - 00:42:21
[музыка] хорошо 6 пожалуй все века давай картинкам да давай мне пока еще не будем сюда переходить будет еще один вопрос по html будем закрывать на этом вопросы там по верстке оса там про картинки хочу поговорить да какие самые популярные форматы картинок мы используем для б предки писали можешь красоту и звезд картинки говорю да какие самые популярные форматы мы используем для в актерстве этим и вообще используем какие лучше использовать банки обычно используем джипег бывает снега изображения окей хорошо как
00:41:40 - 00:43:24
оптимизировать эти картинки как оптимизировать загрузку этих картинок на странице если про оптимизацию картинок поговорить то есть специальные ресурсы которые сжимают эти картинки если говорить про загрузку то есть и такая техника как lazy loading вот она правда обеспечивается с помощью java script а то есть суть в том что картинка не погружается до тех пор пока пользователь до нее не до скроллер окей хорошо если у тебя на странице много допустим иконок райт и окей что это такое а можно собрать и и если речь идет о
00:42:30 - 00:44:06
небольших картинках как вот и иконки то можно их собрать и в одном в одно и изображение то есть брать по сути спрайт является одним изображением на котором собраны все иконки и просто спор и потом допустим и отображать их помощью свойства background-image есть через background позиция отображать именно нужную картинку в нужном месте вот то есть нам не придется загружать кучу картинок а подбросит будет продолжаться только одна вот окей хорошо как по твоему мнению ты упоминала про шрифт с выгода для иконок
00:43:19 - 00:44:51
или вот спрайты что лучше использовать лично я думаю что стоит использовать svg допустим у меня был опыт когда мы даже создавали свой икон ночные шрифт то есть на основе картинок с мега генерировались иконочки вот и с вами в принципе к что более привлекательными потому что они они всегда выглядят при любом при любой нее высоты иконки то есть векторная графика если я не ошибаюсь вот из целого не по производительности сколько помню все таки будут получше чем картинки окей хорошо ну что леди и джентльмены
00:44:04 - 00:45:34
двигаемся дальше в css ну для начала давайте по селекторов чтобы самое простое типа селекторов селекторы и классы классов атрибута в универсальные селектор есть это есть звездочка дочерней с истринские селекторы потомков вот то что вспомнилось хорошо окей хорошо давайте поговорим про специфичный селекторов что это такое css specificity и как она вычисляется да если поговорить процесса специфичность сейчас я просто здесь напишу что самая слабая специфичность имеет так звездочку универсальный селектор потом идут всем дан элементы
00:44:56 - 00:46:56
откуда потом идут псевдо-элементы и чтоб и теги а то то есть если допустим это пишем мы захотим упредить какой-нибудь свойства допустим звездочка для эммы храме захотел поделите цветом зеленый либо а потом для того определить цвет красные то у тегов будет соответствует красный потому что выше специфичность то есть он будет перед специфичностью перезаписывают одессы более низ элемент из селектора с более низкой специфичностью вот после того что упомянула идут потом идут классы псевдоклассы и от и атрибуты у них более
00:46:00 - 00:47:42
высокая специфичность потом айди потом онлайновые стиле и потом important почему слова import ok хорошо смотри вот такая задача перед тобой стоит ты видишь верстку ты видишь объявленный стиль первое первый вопрос как не изменяя объявления которое у нас есть 1 2 3 сделай пожалуйста опусти его ниже это 123 да вот там где написано классный swan сделай пару пробелов чтобы первая вторая третья строчка остались пустыми но пусть это объявление ниже ниже просто бы стива css вкладочка классный мсп н.б. подними курсор в самый верх и сделай
00:46:51 - 00:48:39
пару enter да как этот вот классный мсп nb пришел у тебя откуда нибудь да с другой библиотеке ты его поменять не можешь но тебе нужно покрасить баба до имя боб в красный цвет как это сделать и вот это поменять не можешь никак а вот это не могу менять а я благодарю а там чтобы сколько приписка здесь кое-что да да да я потяну сверху сказал а потому что а почему я кстати сказала все чтоб сверху потому что следую пишу не жетону просто перезапишет целостность если допустим делаю вот так вот классная
00:47:47 - 00:48:52
экспандер снизу другой цвет она просто перезапишет а почему бы устройство которое мы пишем ниже в css файлики а не перезаписывают те что выше уже стоят окей хорошо что там у нас как бы минимум у нас просто постой а т б мы к нему еще не добавите к сожалению caspa ну тоже классный но к счастью классно его мы можем добавить так div и повысились специфичность на единичку окей хорошо я хочу покрасить до покрасили мы 1 баба в красный я хочу папок просить 2 баба в синий 2 года с которой строчки 10 куда
00:48:24 - 00:50:24
хорошо если мы так хотим это сделать так сейчас [музыка] эти of type 2 то есть ti 2 то есть на стек пск ты так отец интересов type имеется ввиду что мы берем 2 x 2 tb конор да посмотри на верстку внимательно то есть у нас три независимых диего да не не вложены друг в друга у нас есть не достанем и два других дива без классов нибудь потому что у нас классные модема окей хорошо и я хочу покрасить 3 в какой-то другой цвет не знаю розовый погоди этого мы потратили на этом этапе они покрасили 2 что не показали какой слог won't show
00:49:25 - 00:51:41
on soft ipod shuffle вообще заветного агинского на у не жеского плэев идти не весь документ а только вложены то есть у нас было бы два т.к. внутри спая туда болдов попросился бы 2 случае нтс вот я хотела смотреть я написала потому что посмотреть как исправить на давай так детстве мы допустим запишу так окей значит если перебор спать это первый актив извиняюсь это все нервы так окей здесь нам нужно когда что это 2 киев мы не окажем как строить и так я просто сейчас думаю то есть нам нужно все теги
00:50:59 - 00:53:21
баба не в принципе одинаковые видя на одном месте все они внутри span of разве что указать что нам нужно использовать 2 div да ну или соседней и или сосед но только именно 2 потому что соседи здесь много до 2 соседи о по кстати по идее если нам стив то там тоже без этого он исчез борового как вариант хорошо а теперь последний покрасим его в розовый хорошо так тот может так скорее всего не выкрутимся так а ну ка сейчас мтс допустим если вы укажем в топ 3 сейчас не то что вес полоса прям совсем часовые нашлось
00:52:11 - 00:54:30
работает но попытка не пытка так если нет будем искать обходные варианты сработала какая красота окей какие-то еще варианты есть как мы могли бы покрасить его в розовый moments of type ok еще какой то ему можно он так-то просто указать что он был что последний div да я не помню синтаксис плюсик все-таки давай вернемся на пятую строчку что означает плюсик плюсик это означает первые сестринский элемент то есть допустим нас классные div и первые сестринский у него будет див написали бы матильду были бы все
00:53:34 - 00:55:10
сестре такие которые будут и ниже чем этот костным то есть мы не можем добиться до тегов которые были выше тем этот текст с классом классный вот есть ещё вот такой то есть и прямые наследники у нас бы это тоже не сработало потому что классные монету прямых наследников в тегов div вот много к вариант такой есть окей хорошо спасибо двигаемся дальше ты упоминала про псевдо не давай останемся здесь же чердак предыдущем предыдущую до 200 мвт упоминала еще псевдоклассы и псевдо-элементы да вот что является давай уточним точно
00:54:21 - 00:56:09
что является псевдо классом и что является псевдо-элементы какие мысли селекторы точнее псевдоклассов селекторы псевдо селекторы для а сама запуталась для элементов севда класс этот элемент ключами хорошо но в целом псевдоклассы определяют динамическое состояние и определенных селекторов то есть допустим при наведении мышкой на селектор при и фок при фокусировании на этот то есть и лектор то есть допустим есть такие псевдоклассы как ховар и как фокус у ленки 6 свои своей как там линк и везде ты и так
00:55:16 - 00:57:16
далее вот и псевдо-элементы в свою очередь определяют псевдо-элементы не существуют в том дереве они плата рифма благодарение можно добавлять и дополнительный контент из помощью css даже есть специальное свойство как контент вот псевдо-элементы есть такие педали менты как before автор и форслайн first letter вот они четко не определены в том дереве вот добавлять только с помощью css вот а вот этот инсов type это что такое это псевдо класс тоже к ним относятся хорошо хорошо давайте двигаться дальше так дальше у
00:56:15 - 00:58:15
нас процесса с unity css юнита давай поговорим какие вообще бывают счастью нет и измерение в css и размеров шрифтов и так далее в целом бывают абсолютные и относительные относительно это такие как m&m и то есть и рамы вычисляются относительно функций за корневого элемента а м и вычисляются относительно функций за родительского элемента если говорить о абсолютно перед относительные это вот относительно это более римом и абсолютное это пустим как пиксели самой распространенной и есть еще куда меньшими не используются мы не
00:57:15 - 00:59:07
используем как там сантиметр и дюймы если не ошибаюсь и а такое чудо с 75 и этом пике вроде бы но они используются максимум для печати а для постепенной жизни обычно используются пикселей еще процент то есть как относительные положение по сути измеряют если допустим это больше ширина в процентах то есть вы будете ладно зачем это говорю в общем пациента окей хорошо а если все-таки и размерность как w&h что это такое да это относительно относительно viewport а то есть ты просто здесь запишут моего удобства
00:58:16 - 01:00:08
скорее пусть будет вид 100 то есть она будет то есть это будет высота равняться ровняем а ему всему в порту если я не ошибаюсь вот есть вид тоже есть дата ширина в есть человечеств а есть еще две в мин и макс то есть тут уже а если допустим и минто вычисляется от наименьшего разрешить эту sisley высота меньше чем же ширина экрана то вычисляется от высоты если вы макс-то от самой самого большого измерения чего-то в общем если ширина больше чем высота то будет вычисляться относительно ширины того что она больше чем высота
00:59:12 - 01:01:20
вот и еще такой вопрос и даже как ты думаешь какие лучше использовать абсолютные или относительные величины при верстке при создании стилей я думаю зависит от ситуации допустим мы обычно используем а пиксели для высоты для для знания высоты и ширины кого-то компоненты элемента но для отступа в для функций за обычно используем относительно такие как рамы и мы не используем они могут тебя ввести немного непредсказуемо если ширина текста меняется в в вложенных элементах вот но в принципе вот для для текста и для
01:00:18 - 01:02:08
по 1 гомогенного обычно используем и рамы потому что что чтобы одеть менялись относительно экранный тест на для более маленьких кран остановились и более маленькие отступы более маленькая высота текста легче было читать легче было воспринимать информацию хорошо спасибо жизнь была хорошо давай пойдем дальше расскажи про такое чтобы процесс из раза зачем она вообще на какие есть виды и что там сейчас можно использовать css resets просто сбрасывает обновляет базовой е.с. базовые свойства т.к. вы либо базовое значение я который
01:01:14 - 01:03:02
определяет сам браузер каждый браузер и применять свои свойства для пустим для заголовков для для списков вот зараза к кресту называются может быть встроенные стили стиле браузера если браузер move + окей вот из помощь и и так как было раньше когда браузерах могли стиль и стиль сильно отличаться друг от друга то их пытались привести к одному виду и потом уже на основе этого строить и уже основываясь на этом делать и дизайн к делать верстку которая будет иметь одинаковый дизайн на всех на всех поддерживаемых браузерах вот но это
01:02:08 - 01:04:00
обычно это было обычно это было не очень удобно вы придумали из теста с нормала из который не спрашивал просто все стили ну что это в браузере есть уже свои стили потом они все сбрасываются то есть это еще бар добавлять здесь и стилей которые перезаписывают дефолтные браузерные стиле и потом еще на них поверх и записывались и желаемое стиле то есть сильно увеличивалось и и это переопределение переопределение стилей и создали при придумали normal а здесь который не просто сбрасывает все существующие стиле
01:03:06 - 01:04:47
браузера а приводит их к одному общему виду паху одинаковым для всех браузеров можно даже этот файлик найти в интернете там подробно расписано какие свойства почему они удалялись то есть почему не изменялись можно подогнать их под себя даже в быстро пей свой нормала из ссс вот так что лично мое мнение что использовать tor малость такие более рационально и удобнее что-то пойдем бокса выпады скажу что такое из чего она состоит и хотите 10 стажем вида боксмода совсем внутри есть идет контент потом подёнки . внутренние отступы
01:03:56 - 01:05:49
дальше идет border то есть рамка идут внешние отступы приплыли это случилось что у нас их вдруг несколько стала мы с этим живем кого буксовых моделей а но они они выполняют разные цели то есть допустим по дефолту нас что нас там бокса 1 год box айзен и контент и бокс идет то есть и в боковую модели не входит и входят поединке и borders но если мы допустим находиться хотим делать box айзен border бокс тогда уже в него будут входить тогда уже в эту боксу тогда уже будет бы исходить сюда и все кроме машина в кровь
01:04:52 - 01:06:50
при конечной шириной например да да да хорошо какающая сидите и не помню ладно возможно это я путаю хорошо давай так прям в уме посчитай нас есть блок и пошли на 200 пикселей по кейс отступ эп1м по 40 пикселей ну то есть слева справа 46 borders по 10 пикселей и есть морщины по 20 пикселей по kei какая финальная ширина будет у него этого блока прибор the box & trick on the dogs а общий шире до 200 до nuvi 200 значения до 13 по 40 борода падешь окей то есть и сейчас будет и content pack 100 в него
01:05:56 - 01:08:00
так вид то есть если при контент бокс у нас будет каток контента будет занимать час музыки может быть проще записать себя бокс райзинг так пусть так какие то ладно так длится 200 пикселей так поденки так 40 то пусть так и по мечтой куда и morgen 20 [музыка] так но если прикол если при контент бокс то будет так 240 у нас двух сторон еще 80 плюс плюс 20 получается суммарно 300 и джон манн можно вроде нет можно учитывать целине так а если как бокс ну да запутались мы уже сбор боксом и баксом давайте двигаться
01:06:58 - 01:09:27
дальше жизнь там и себя момент исходу собак самой моделью расскажи пожалуйста про такую чтобы вы помажем коллапс что это такое и зачем оно это происходит в блочных тегах то есть если допустим нас разметки div 1 и за ним еще потом второй находится один допустим у первого диван margin ботом 40 пикселей у второго типа будет маджин бот машин топ-20 то суммарно не будет между ними отступа 60 а будет отступ который равняется большему значению моржана в этих двух элементах то есть будет и margin 40 останется машин 40 а если они
01:08:56 - 01:10:59
будут с разными значениями виду одно положительное другое отрицательное что таком случае будет будет какой-то коллапс тамаре виде что там произойдёт вот тут не помню к сожалению на работе с отрицательными а в каком случае не будет работать на джим collapse вот у тебя эти два дела у которого а я у первого 40 пикселей снизу у второго нас пиксель и сверху когда там будет 60 не совсем верно но по-моему он происходит когда есть тег когда есть еще дисплей блок возможно slim поменять дисплей то не будет но тут и не вернуть
01:09:59 - 01:11:26
немножко то вот и место в функции работает достаточно на работу но да ученику хорошо окей давайте дальше немножко про старую школу поговорим что такое флот если допустим задайте картинки флот и right to она сместиться вы право а остальное контент допустил какой-нибудь текст будет обтекать и обтекатель окей хорошо а если я не хочу чтобы эту картинку optical или какой-то там часть optical а часть не optical а ну туда есть свойство clear clear боссов отменяет обтекание слева и справа также мазать clearlight либо clearlove смотря
01:10:59 - 01:12:56
сквозь turned обтекание нужно отменять беда собственно этих лотов почему снимет 1 обороте было надеюсь было ну допустим если поместить и условную картинку в блог в котором не задано высота то этот блок будет схлопываться для этого придумали специальный хак который называется clear fix задается в этом же блоке там а через псевдо-элемент автор с пустым контентом дисплей тайбл overflowing хидан если я не ошибаюсь вот чтобы он не схлапывался и картинка не выпадала как так как бы из из этого блока ok а благодаря чему это работает в это
01:11:58 - 01:13:49
вдруг извлекает запрещают обтекание собственно магия в дисплей тайбл что там под капотом есть тут и затрудняюсь ответить ok а тогда почему размеры картинки не учитываются что с картинкой самой случается куда она попадает или на обогревает падает на выпадает из потока как я понимаю вот давай поток а поток это размещения элементов на странице html под по оси z то есть и допустим на странице а элементы могут располагаться несколько слоев один выше другой ниже по сути можно назвать и контекстом наложения
01:12:58 - 01:15:08
то есть начало правильно но вот ось z тебя завела не туда окей окей хорошо то есть это нормально расположение элементов внутри от проповедник 100 форматирование или теперь следующий вопрос сможешь ли ты сказать что добавить контекст форматирования и что его создает можно как нибудь может быть навести немного на мысль о такая мысль почему это наводка на мысль flow плохо влияет на перформанс страница если мы используем флоты и рендеринг риф flow происходит очень долго ну не очень долго дольше чем ok давайте тогда
01:14:09 - 01:16:17
двигаться дальше давайте поговорим о более современных способах размещения элементов на странице жизнь давай что у нас там пришло на смену бог сдам да в чем его смысл работы как его будь какие ключевые в отличие от того что было раньше от слова квоту но в целом flex pass и предназначен для более хорошо предан оси для построения layout а в flex боксах и есть и если задать их а элементу свойства flash что он будет выстраиваться по горизонтальной оси также можно элементы перестраивать по вертикальной оси если менять и rapidly
01:15:24 - 01:17:17
называются правильно ну про вторую pray про второй прослушала как перпендикулярный оси а первая главная мейн нет дома и на явное а вторая на первичном поперечины на багажник да продолжаем оао шилов цицерон секс сказать то есть нокий хорошо его немного про структура фокса как работают например свойства флеш-дро и флаг слинг для чего не нужны в целом лексу кроу удобные для построения колонок если допустим нам нужно поделить страницу на три одинаковых колонки то можно задать и каждый каждому только
01:16:18 - 01:18:00
отвечаешь и это по сцене ты колонки flex гром один вот и и они будут и по сути они все будут одинаково тащить на друг друга и занимать одинаковое положение на странице вот по сути задает размер относительно других но faction соответственно для чего савинковым у меня всегда были пропустишь выполни давайте переходить к этой задаче которая на экране будем двигаться дальше то что мы что-то с вами долга очень хотим за время пропустим фокс и собственно вопрос для начала расскажи пожалуйста об отличии дисплей блоку disney онлайн
01:17:17 - 01:19:31
в чем отличие дисплее блог по дефолту стоит облачных тегов display inline устроенных если стоит дисплей блок то блок занимает всю доступную ширину вроде родительского элемента автоматически переносится на новую строчку если говорить про display in inline то а margin допустим а отступай сверху снизу не будут нести никакого влияния на элементы сверху и снизу вот максим разве что если задать фон и вы внутри и двойного те господин гамме тонко что будет чуть больше вот этот снятся на эти по денги вот но в целом верхний и нижний
01:18:21 - 01:20:22
уступ и в них не имеет никакого влияния построчно теги занимать только ширину своего контента [музыка] хорошо теперь расскажи об отличиях дисплей нан вот в билете видом на дисплее если мы задаем элементу дисплей нанта он выпадает из потока в общественной странице если мы задаем везде белить и хитин то там то место которое занимает этот элемент оно просто остается пустым и соответственно не влияет на стоящие рядом элементы кучу это чудо все что место остается окей да давай теперь посмотрим на задачку она больше про наверное даже
01:19:24 - 01:21:18
реакцию браузера на все это дело вот в общем то можешь ставить на правый нижний угол он расписаны все кейса здесь вопрос о том загрузит ли браузер ресурс то есть из картинка внешние которая вас первом случае например это просто картинка которая скрыта будет ли брал загрузить картинку то я думаю нет потому что брался загружают только деньги мы и элементы вот на такой дисплей на даже нет в потоке для него не нужно потерять какое-то место то я думаю что он что картинка не закрутится негодник а во втором случае визин или на
01:20:24 - 01:22:11
дисплей на так окей веб конечно тоже сказал что не загрузит теперь у меня уже возникают сомнения как мне кажется тут ok ставлю сетки на тоже и загрузит но либо c не понимаю логики покоя загружают даян образом снова дороге да загрузит она так и мышь ракету до думаю что в третьем случае он не закрутится а valtrex down не забудут про ground окей хорошо так визин элементы забили тихий дон так покровы и платишь ну могу по позже и шут не знаю везде белки хитон как-то в этом случае мне кажется принципиально отличается от дисплей на
01:21:21 - 01:23:39
вот загрузит таксистами вариантом за свой груз окей не сталкивалась таким к сожалению быть буду знать на будущее чтоб потом не краснеть хорошо да да да двигаемся дальше маргарита переходи на следующую вкладочку задача тоже простенькая поначалу кажется если можешь увеличь пока чуть чуть вот эту часть виде нарисована кошка или котенок да побольше вот сейчас будет там серия вопросов к тебе 1 почему картинка не до конца доходит ну то есть чуть border вокруг картинки вокруг дива чуть-чуть отступает от
01:22:44 - 01:24:22
картинки вот внизу там у нас есть белая полоска что это такое у нас gif него иметь вставлен есть ширина высоту мы пока не указали есть margins у этого дела и border но почему-то картинка оставило нам и все пустое место снизу окей хорошо давай тогда самая такая как выровнять картинку по центру соли было плохо слышно можно просто еще раз меня было плохо слышно как выровнять картинку по центру вот и тот же пример давайте варианта хорошо еще стройте попробуем так и мыши так у вас так пока по горизонтали
01:23:38 - 01:25:51
выравниваем так он сейчас если мы делаем more out of a что нужно было нет макей так исчез да то если бы она была известна высота ширина картинки тогда можно было бы через marginal аута но у нас и inima ok если в целом как можно выравнивать тот можно выравнивать по горизонтали и через flex и те же если задать родителю свойства flex и justify контент-центр можно выравнивать с помощью позиции если задавать родителю позиция нра лаки а дочернему элементу позиция абсолют лифт 50 процентов и transform translate
01:24:55 - 01:26:57
свойства transform значения translate x минус 50 процентов что будет означать минус пятьдесят на пятьдесят процентов от внутреннего блока то есть картинки вот шуршишь такого интересного ну давай какой-то один способ реализуем самый простой для тебя если самый мой любимый то это дисплей дисплей секс всегда был x-lander да это же вопрос почему пропал отступ немцы нижнего почему он пофиксил ся магия эта магия скорее дело в дисплея было окей хорошо а если представить что вот этот div который у нас есть мы хотим
01:25:58 - 01:27:53
чтобы он всегда был на в правом верхнем углу экрана весь div с картинкой как это сделать весь утвердив не оставь это все классно было так красиво весь-весь div да вот тысяч сможешь увеличить эту картинку чтобы весь весь дешевого он сейчас он арсен прекрасно да все красивенько по центра я хочу чтобы он был в правом верхнем углу экрана всегда как это сделать окей если в правом верхнем углу экрана всегда то через позициям fix the и даже при прокрутке будет фиксированное положение какого-нибудь его
01:27:14 - 01:28:49
если справа сверху the top 0 1 0 окей хорошо а ну ладно все давайте дальше не будем можно тратить на это время на самом деле много вопросов езда дали образцы же слабой на время давайте дальше к следующему этому самому же да давай можем попробовать это сделать котик как бы сделать изображение квадратным задачи такую же высоту для как ключи 1 [музыка] не просто это для киева плена я подписываю 6 картинки так окей если бы для этой картинке было бы одинаковая высота и ширина колонок это тоже способ
01:28:01 - 01:29:50
можешь продолжить давайте их 200 долларов афинам чтобы у нас был квадрат а вот теперь как картинка выровнять по центру здесь то есть центральную часть картинки показать чтобы она вне зависимости от своих размеров уровне был виден только ее центр всем тестам и картинке вообще через объект фит можно понять это все что я хотел саша да хорошо знаешь еще раз способа какие-то как можно картинку рандомных размеров в квадрат привязать не так навскидку не скажу пойдём тогда дальше следовать давайте может сразу продуктивность
01:29:03 - 01:31:03
поговорим про адаптивность но давайте тр адаптивность расскажу что такое адаптив что такое response а в страница веб-страницы то в целом это два подхода для того чтобы обеспечить и для того чтобы для того чтобы сайт хорошо отображался на разных размерах экрана будь то мониторы разных размеров будет планшеты будь то телефон и если говорить про респаун tiff to a layout и меняется при гибко меняется при увеличении и уменьшении крана на любых при любых размерах если говорить про адаптивные подходы то
01:30:02 - 01:31:50
а там идет и не несколько вариантов верстки под разные брик point обычность самая распространенная допустим 320 пикселей ширины для телефона вы 768 пикселей для планшетов 1024 для компьютеров и так далее вот эти вкратце окей хорошо скажи пожалуйста что мы должны обязательно указать в этих когда мы пишем css даже для того чтобы сработали эти брик поинты вот 320 там 760 и так далее ну у нас есть специальные медик very которых мы указываем допустим если бы очень быстренько написать медиа а потом мин вид и такое то там значение
01:30:56 - 01:32:43
вот это по сути и будет наши брак пойнта стиле будет применяться для экрана вы что-то мтс не invites меньше с ним даже если максимальный окей то есть для 768 пикселей и больше ok а какие еще мы можем сюда передавать параметры в медиа кроме мин вид саймак свитс а ты упомянула его уже до aspect ratio можем передавать можем даже порт аренды шин сумел основу портреты либо 2 другой а также можем передавать дефолта это по-моему скрин можно еще и только для экранов еще есть еще были другие варианты кроме экранов а сбить еще был
01:31:50 - 01:33:48
вот вот вот такие вот обычно окей хорошо двигаемся тогда дальше давайте поговорим про префиксы инвентарная да да да ринго а фидерный префиксы а по сути они добавляются к свойству и от этого определенное свойство будет работать только в определенном браузере допустим если мы добавим гитарный префикс webkit к сможет вот он будет работать и в хроме и опере те который использует этот движок если мост а для мазилы если место для интернет эксплорер обычно это использовалось для экспериментальных свойствах вот со
01:32:51 - 01:34:37
временем в них потребности вашей части отпадала разве что для интернет эксплорер а даже последних версий тогда действительно необходимый префикс вот как то так хорошо а давай наконец затронем тему прибраться сравним а что собственно как они возникнут почему они стали такими популярными до сих пор нас не отпускает в целом они упрощают процесс разработки и делают его более гибкой то есть допустим если про говорить про особенности при процессоров то допустим можно задавать те переменные можно задавать миксины можно создавать циклы и
01:33:45 - 01:35:25
в них есть система импорт of вот то есть по сути как-то более простая организация кода идет также в них более удобное я хотел сказать очень умны фразу про амперсанды на возможность до вложенность особенно в методологии бэн довольно удобно то как там обычно один блок и через ampersand просто прописываешь ampersand там нижнее подчеркивание название элемента то есть и будет использовать то есть и вместо амперсанда будет использоваться название блока предыдущего допустим класса предыдущего селектора хорошо а
01:34:35 - 01:36:13
скажи пожалуйста чем отличается импорт со со со делюсь выбор от импорта в принес as well as импорта миссис s а не сталкивалась практически только с естественностью но как потому что делает выбор блондином с оси и там импорт и какой-то url указан urn css файла просто что могу сказать про допустим ipart скорее стс а допустим если задавать те названия файлов css нижнем подчеркивании перед ним вот это все не портить в один файлик остер сердца то те файлы которые мы импорте лисы с нижним подчеркнуть
01:35:25 - 01:37:05
ним и они не будут создавать дополнительные css-файл вот и на выходе будет по сути только вот тут один css файл который мы все за импорте ли вот поводу импортом с css и узнает о чем отличается счас переменная от переменных в процессоре а переменные с с и можно использовать и иметь якорях их можно к ним можно достучаться через java script они могут наследоваться годива какие-то черного лишь ссс про при процесс а сейчас обычно говорилось что да хорошо вот ok давайте двигаться дальше у меня ещё такой по css у один вопрос наверное
01:36:15 - 01:38:20
все поблагодарят за него всем очень лень всегда писать полностью с нуля css вот и пользуются всякими библиотеками известными или неизвестными если все таки мы решили лишаем использовать библиотеку как нам ее правильно выбрать но и вообще какие ты знаешь как ее выбрать но самые распространенные bootstrap и есть еще частично на нее похоже в foundation css balm а есть такой довольно интересный библиотека коктейль винты с совершенно другим подходом мне нет компонентов только utility класса из них можно комбинировать компоненты вот
01:37:17 - 01:38:47
но это так лирика в целом если выбирать то нужно я что ретироваться то насколько ее легко будет кастомизировать и какие в ней уже есть и компоненты элементы которые нам нужны в нашем приложении вот которые мы поможем и перес пользовать и подогнать под себя а насколько просто задав насколько просто сделайте разные темы опять так если это необходимо вот желательно еще чтобы если допустим брать быстро кто не погружайте вообще все компоненты все элементы которые есть чтобы была возможность выбрать те
01:38:03 - 01:39:42
которые нам действительно нужны вот активности комьюнити насколько насколько активен библиотек развивается насколько активно в ней в не относится от другие фичи вот исправляются старые баги и так далее вот это тоже важно окей хорошо так но на самом деле у нас тут еще был блок вопросов о перформанса вот но я думаю что это будет уже во второй серии нашего интервью мы набросимся в гости в мы с рэндом еще раз вот у меня только и все даже не достался это кот quality что такое код кволити в html и css и
01:38:50 - 01:40:19
какие есть метре метрики этого катка летели как понять что код хороший или плохой в целом есть специальный есть специальный валидаторы w3c валидатор то есть от консорциума которая задает эти стандарты собственно можно там проверять и из этапа дата это кажется и по артема ли процесс можно проверять и а также из на проекте использовали sonar куб то есть помощью него еще можно проверять вот с помощью линкоров просто можно подгонять под определенные стандарты но которой уже устанавливается именно в проекте , то
01:39:39 - 01:41:21
сидим то глобальным вот из globally скорее валидатор наиболее подходящий ok хорошо супер я думаю что мы на этом заканчиваю в нашу интервью части вот и переходим к фидбэка вот давайте на рожать до вас тебя начнем давай да хорошо давайте попробуем смазывать судьбе но в целом маргарита то или плохое знание обширное знание всех областей в общем-то фонтена даст и разметки и стилей и все что с чем мы работаем там помимо офисе остальным есть некоторые в нюансах но это абсолютно нормально потому что нельзя
01:40:30 - 01:42:04
реализовывать все нельзя знать всех тонкостей всех возможности браузеров немного заметно что поскольку ты относительным возможно новый человек в принципе в разработке тебя более влечет естественно более новые вещи и которая сейчас можно потрогать которая вызывает вау-эффект и всякие там вещи которые были при динозаврах они не настолько интересны один интересный возможно нам завра дополнить значит молодость пустить слезу но один из андрей то есть ответы на какие-то вопросы по типу почему нас debug своей модели это
01:41:19 - 01:42:38
сорян да не те вопросы которые на которые душа за год вот так что такое можно не обращать внимание единственная единственное такое возможно замечание от меня это немного поработать с разжился и кода то есть быть на шаг впереди и заранее думать что может расшириться что может поменяться как-то 30 кусок кода скомпоновать так чтобы в дальнейшем его перри использование было намного безболезненным простым и менее затратно по времени в целом я бы сказал что у меня впечатление позитивная от тебя как от кандидата и я бы дал
01:41:58 - 01:43:29
положительный всегда курсы да присоединяюсь к положительному фидбэка спасибо тяжение за динозавров все хочется казаться что вы молоды но да есть уже те технологии которые к счастью не затрагивают но но и в новых людей людей в разработке и это прекрасная очень мы рады за нашу наш прогресс который есть в нашей работе вот маргарита мой фидбэк по интервью мне очень понравилось мне понравились твои ответы ответы было очень хорошо видно те темы в которых ты хорошо разбираешься не были очень расширенные с примерами с
01:42:44 - 01:44:06
возможными подводными камнями твоими предположениями и так далее вот конечно же да то есть те вопросы и хорошо их было видно где ты сомневалась в своих ответах и если бы мы давали как обычный письменный фидбэк мы бы обязательно прислали ссылки тебе где то почитать вот что что чтобы можно было хорошо отвечать на те вопросы на которые ты не так прекрасно ответил а вот но на самом деле собеседование у нас на мидл pozis позицию до фронт-энд разработки и с точки зрения html и css а ты это собеседование прошла
01:43:24 - 01:44:53
вот понятное дело и уже андрей это подчеркнул что собеседование на frontend позицию включает еще и java script собеседования вот но она уже была записана комьюнити и можно посмотреть например вот про по frontend части html css у прекрасные ответы г поесть но все эти грибы можно просто проработать там за какое-то время прочитав все эти рекомендации которые вы получите от интервьюеров спасибо андрей то говорить кордовой вейдер сейчас нет спасибо ребят которые пишут в чате если у вас есть вопросы вы можете
01:44:09 - 01:45:55
их задать могут ответить вам организовать старался и поддержать какая глубина что мисси пола и целом давно не спрашивали для вас клип об этом не спрашивали всякий сорский новые штуки ну может быть у нас под будущем что ещё хотел сказать если у нас есть обратной связи пожалуйста заполнять его постараемся сделать интересно и полезно для вас ещё похожие важно ничего прошла она может быть несколько полезных неделю материал по артем с и посоветуйте что нибудь материалы по html css насколько я услышал да для тех кто начинает только
01:45:05 - 01:48:08
до начинающие разработчики есть прекрасный ветре schools ресурс абсолютно со всеми базовыми примерами по html css а где можно поиграться где можно попробовать какие-то фичи вот прекрасные для именно для начала прекрасный ресурс кроме этого конечно же уже там кто любит читать документацию после того как мы прочитали для чайников в 3 schools мы переходим более тяжелым артиллерия мы начинаем читать стандарты вот и тогда когда мы читаем стандарты мы находим очень много всего интересного от которое не вошло в сокращенное здание в
01:46:58 - 01:48:22
3 schools вот это уже должно быть вторым этапом сначала все-таки что там берем такое где можно пощупать и попробовать от от меня уже не пожелали он разве что присоединились с тем что до specs мдм и очень много инфы на самом деле есть в комьюнити то есть есть сайты например там куча подкаста я сейчас помимо этого очень хорошо дачном не заходить когда я все время остановился до front эльдаром очень хорошо находил twitter и сейчас его актуальность никуда не потерялась топовые люди это было люди комьюнити активно ведут свои twitter
01:47:41 - 01:49:13
аккаунты и там инфо просто с первых уст о том что происходит с делением свойство с какой-то фичей новый с тем как нашли какой-то там лайфхак вы можете просто подписаться в замке в твиттере на интересующих вас людей и получать эти известия из первых уст ну и пробовать нужно пробовать еще раз пробовать я бы тоже хотела порекомендовать this free code camp там очень много заданий и in html лености яс-с-сно accessibility норрис паутина flex бокс на grid вот с и хорошо песчаной теории и задачи их чуть
01:48:27 - 01:49:55
ли не по каждому свойству вот я проходила очень было полезно снимали к даме тоже пока похожим форматом на медиуме много полезных статей вот тоже по любым тему хоть по accessibility хоть паре спать его хоть по базовым темам стилей вот-вот следует какие особенности 1 приходите интересно сейчас ссылочку да спасибо ребята за время спасибо андрею за приглашение было интересно интересный опыт надеюсь он будет полезным зрителям спасибо спасибо всем удачи пока пока
всем привет я рад приветствовать вас на очередной встрече нашего most рандом комьюнити сегодня у нас мы продолжаем серию наших открытых интервью у нас было три три интервью для для мида у разработчика для сине разработчика java script разработчиков и сегодня мы продолжаем нашу серию открытых интервью сегодня у нас будет интервью для front and html css разработчика это накладывает некоторые ограничения то есть мы уже с вами говорили про java-script обычно на интервью на эту позицию спрашиваю java script даже
00:00:02 - 00:01:24
но в нашем случае мы пропустим секцию java скрипта и будем фокусироваться в основном на верстки на html and css вы можете писать вопросы в чате вопросы мы будем отвечать после того как пройдет интервью еще хочу вам сказать напомнить что у нас есть телеграм-канал в котором мы обсуждаем разные интересные новости из мира java script фронт-энд и у нас есть youtube канал на котором вы собственно смотрите текущую трансляцию подписывайтесь ставьте колокольчики будет интересно и сейчас я передаю слово нашим интервьювером и
00:00:42 - 00:02:11
кандидату и мы вам покажем процесс собеседования на front and stimulates с разработчик давке привет привет всем я вика так с нами тут еще есть женя женя тебя пока не слышно вот проверяем звук и маргарита привез и маргарита которая сегодня будет отвечать на наши вопросы вот маргарита как как дела волнуюсь честно волнуюсь но очень надеюсь что все пройдет отлично и удастся показать хорошие результаты за bethesda а не буду стараться interviewer и тоже волнуються все будет хорошо так как обычно в начале интервью по пройдемся по
00:01:29 - 00:03:23
дженди а значит сегодня у нас интервью на frontend тема front and html css поднимем с тобой такие темы как общие вопросы по загрузке веб-страницы тем html css а шрифтов картинок вот ну и в конце обязательно поговорим про оптимизацию про оптимизацию загрузки оптимизаций рендеринга страниц и и так далее если вопросов никаких нет к интервьюером я думаю мы сможем начать сейчас и первый вопрос первый вопрос маргарита к тебе расскажи пожалуйста что вообще происходит как за по как происходит загрузка страницы вот мы вбили а ю л л в
00:02:27 - 00:04:14
браузере и что происходит под капотом до того как вся страница отображена на экране до происходит запрос на сервер вызов запрос на получение html учиться это html документа вот потом мы получаем этот html документ и отрисовывает подходит построение дом дерево потом а css он дальше происходит построение дерева рендеринга она же рендер 3 называется вот после этого идет происходит построение происходит обработка нотка но то есть там мастер actimel тегов и так далее а долежат происходит построение лейаута и в конце
00:03:20 - 00:05:24
отрисовка то есть и paint окей хорошо раз ты вот сказала что мы получаем html и происходит построение дом дерево как вообще браузер парсит html-файл как он понимает что это узлы этого дерева как он понимаешь что это услы как построить это дерево у нас насколько есть несколько я понимаю он по ним а обрабатывает теги которые подходят по сути все узлы являются тегами страниц о славе с ресурсами внешними которая браузера собственно с 4 по сумме html-кодом например какая то картинка стиль скрипте что с ними происходит ну
00:04:26 - 00:06:26
они окружают на страницу по моему еще при с помощью на втором этапе когда при когда происходит запросы и когда происходит запросах темы вот и запросы dota на картинке на файлы css в том числе десятки до ограничения по этому поводу сейчас для браузера по количеству параллельных запросов затрудняюсь ответить хороша давайте будем двигаться дальше давайте перейдем к вопросам почти милю мы обязательно вернёмся к вопросам рендеринга когда будем обсуждать оптимизацию этого рендеринга 2 и такой вопрос вопрос что такое doctype а для
00:05:34 - 00:07:41
чего нужен doctype определяет тип документа то есть по сути в нем задает то есть видим задается то что быть отнимали у либо то может быть и xhtml и версия собственно артема ли сейчас напишем такой понималь будет на что мы используем html5 если мы если мы бы использовали html 4.1 например прописывается doctype html 4.1 и еще кучу непонятных слов слов которые хоть и не видела потому что сразу использовал html5 короткая запись как то что ему почему убрали вот это лишнее ничего не написали взамен например доисторическая
00:06:42 - 00:08:37
такая штука самом деле если честно затрудняюсь ответить [музыка] ok давайте двигаться дальше расскажи нам маргарита что такое мета теги и для чего они нам нужны в мета тегов хранятся and honey хранится информация для браузеров для поисковых систем допустим могут быть метатеги ведь это как может храниться кодировка страницы могут это ключевые слова для поисковых систем вот по которой можно будет потом найти эту страницу есть еще метатег viewport вот это уже тасс сафари вели его и сначала разработчики сафари для
00:07:39 - 00:09:17
корректного отображения страницы на мобильных устройствах потому что размер экрана телефона и размеры размер телефона и размер там его экрана отличается и нужно было корректно отображать и страницу на мобиль на экранах вот мобильных девайсов вот и другие разные метатеги тоже есть но и кажется ничего не менее часто используется задавать контент вроде бы еще можно а метатег со свойством name кажется там имя автора но тут тоже не сталкивалась лично обычно это для кодировки для viewport а вот для seo
00:08:34 - 00:10:05
оптимизации тоже говорила по поводу ключевых слов люди хорошо расскажи пожалуйста как ты понимаешь слова семантика значению слова чтобы тебе такой соматически семантика логические правильный день наименование тегов то есть и для для по для разработчиков для поисковых систем то есть допустим если так де внесет тебя какое-то информации кроме того что это просто блочный так допустим то вот есть назвать так ходор то уже будет понятно что он будет использоваться там для верхней части страницы для вот либо там цыганов
00:09:20 - 00:10:54
если тырново он для навигации помогает как это снимать помогает как для accessibility так и для поисковых систем и чтобы поисковые роботы могли раз почти страницу и понимали за что отвечает какая часть вот это все в таком духе хорошо отдавать сказала про стимул 5 да какие появились где ты стал устаревшим до из новых т.к. вот семантически теги как артикул мэйна в хедер footer а заменить то появились и новые теги для отображения видео для аудио то сейчас уже есть исписан теги видео аудио альбомы для аудио были другие треки но
00:10:06 - 00:11:56
они сейчас стали и устарелыми появились в html5 и новые атрибуты для input об такие как дал им email color и другие вот чаша блендера сумму как у canvas еще координат они были ставил судах салют пожалуйста из устаревших акроним я слышала мельком из таких интересных b и и которые вместо них лучше использовать тонкий и м потому что не является семантически несут семантическую ценности для screen dry top of a b и и такой ценности несут поэтому например почему тайги стали устаревшими допустим либо же теги были устаревшими потому что
00:11:02 - 00:12:46
раньше они совмещали в себе свойства потому что не они приносили свойства css допустим сразу вот как тот же т.б. вот но так как началось разделение что html больше на для контента а вся все-таки и для стилей то вот те тэги которые а который применять какие-то сессия стиле тоже уже не рекомендуется использовать в большинстве своем пух окей вы тут заговорили про screen рида рипперы праксис обелить маргарита расскажу и что это такое accessibility это адаптация страницы для адаптации сайта для людей с
00:11:54 - 00:13:19
ограниченными возможностями вот скрин три древних не особо вникал это понимаю что они позволяют считывать эти тексты со страницы то есть для тех кто не может ее увидеть окей хорошо вот такси соберите мы используем даже этот подход эту технику для людей с ограниченными возможностями что входит в эту технику какие требования к разработчику чтобы сделать нашу страничку access обл ты что-то вроде бы есть прим 3 уровне accessibility но из из таких примеров как можно сделать более доступной это вы имиджа водить атрибут alt он не
00:12:40 - 00:14:21
обязательно должен быть и не в нем должен быть готов помогать и льный текст кстати говоря вот но если он есть это мы назвали еще есть таких это привязка лэйбл лейблов допустим им потому либо других элементом формы той чтобы обеспечить навигацию клавиатур пока через клавиатуру вот карета навскидку требования к самому дизайну есть дизайну там много требований и по цвету чтобы он был достаточно контраст и отношение 7 к одному было я читала вот а по размеру текста есть вот но это больше заморочки мне кажется все таки
00:13:31 - 00:15:28
дизайнеров и обычно разработчики нет не так сильно уделять этому внимание либо вообще не уделяют обычно с этим приходит уже дизайнеры вот но accessibility для дизайна рабы для девелоперов мне кажется совсем разные хорошо нам совершила вкратце прошли intact и пример шарит экран возьмем первую задачку если что у нас есть мы тебе скинули за несколько минут до начала нашего интервью ссылки на джессику в общем то можешь расшаривать экран и открывать первую из них до суть задачи в том чтобы каким-либо образом разместить сделать
00:14:30 - 00:16:06
так что у нас будет продолжаться до нужного разрешения экрана соответствующая картинка и из требования для отображения каждого из них окей сейчас тогда попробуем а в теги и мышь есть такое отличное свойство как как ассорти сет обратно добежишь во вкладку css а я как раз спасибо большое а вот так хорошо так чтобы было видно так serviced так сюда мы забиваем урлу с нужным размером так 600 только не в пикселях осы буквой v то есть настоящий размер этой картинке потом идет атрибут медиа нет ни медиа says медиа это в другом так
00:15:18 - 00:17:36
идет атрибут says is a кстати если на то пошло то надо было тогда надо будет здесь все перечислить закладочку джастин беру пожалуй ну мешать чуть-чуть так следующее у нас а мне показалось хоккей мне пока что что есть одинаковая но нет так у нас шириной до не обивка что не одинока и в названии но нет так видимо все таки должна быть 200 600 в если исходить из названия так следующий у нас вот это вы про пожалуйста хорошо предпоследнее сейчас будет последний 640 так 768 так последнюю вроде бы не обязательно указывать размером возможно
00:16:28 - 00:18:29
ошибаюсь пусть пока будет так так союза сказать на сайт с у нас нужно написать медиазапрос тебе слово медиа просто так формат desktops возможного сила прощать более детально факел и сами так винвин винвин оказывается из потом окажется что перепутал направлении будет очень обидно так если кто-то скажет что перепутал в синтаксисе что-то будет еще более обидно потому что не часто сталкиваюсь с таким заданием сожалению но полезно будет вспомнить по крайней мере чувство мне подсказываешь уйду я в правильном
00:17:41 - 00:19:08
направлении куда-нибудь и так окей и фото у нас последнее excel пожалуйста так лозин пиксели окей что там она и последняя кассир си кей так мыслить если не ошибаюсь нужно задать только одно значение если вдруг а сердце сет не подхватить не будет работать других браузерах вот чтобы найти скажите господа близко к правде не хватает продавца и за с одного атрибута еще в каждом из перечисление том 2 3 вот она вершина слата мин вид и через пробел да это ширина но это на самом деле мелочи потому что синтаксис
00:18:40 - 00:21:12
какой среда не часто его пишешь поэтому дата вам целом сходиться хорошо да и там же будет такой же да может еще предложу это вариант кроме секса я видела еще похожие варианты но использованием тегом picture но правда там о хорош там был стеком соус но внутри тоже пыталась ассорти сад но вместо сайт с было медиа и там нет да просто ветер это бы мне нужно было 32 так второе значение правду за про записывать мими invites такое каком значении и усё ну и в конце счета писать и просто и мышцы с россии таким-то таким-то
00:19:59 - 00:21:45
вот если что-то кто вы его подхватит вибрации соберите все такое что-то насчет мудрыми хватает у тебя alt и будто alt которое да у тебя может быть и дальше их у окей отлично хорошо так сейчас по как авторы вкладке перейдем еще небольшой такой вопрос про атрибута вот есть такие атрибуты когда-то атрибуты для чего они нужны дата атрибуты нужные для хранения информации который может без визуального отображение ваш темой которые можно потом из использовать через java script вот там даже довольно удобный синтаксис
00:20:53 - 00:22:36
тесто есть там а элементы datasette и название этого дата элемента отлично хорошо переходим дальше хоть и самый интересный вопрос пошли моём ой как он довольно обширный но давай начнем сначала расскажу о том какие то знаешь и вообще зачем они нужны методологии да хорошо самая известная распространенная считать и методология бэм есть еще ost смак называется то обще currency все с о-о-о-о css вот о томе xyz с вроде бы тоже сюда входит вроде бы да да вот но обычно обычно про три указанных три упомянутых мною встречаются довольно
00:21:44 - 00:23:55
редко у нас больше наиболее распространен по сути это просто организация структуры кода правило наименования классов допустим пойми а это разделение я маг темой страницы допустим в bemeta эти делится на блоке в блоках есть элементы и модификаторы то есть словно страниц всю страницу можно разделить на блоки которые можно будет потом переиспользовать и менять местами не сама всю страницу элементы тоже более такие атомарной сложности и внутри блока вот если допустим расстояние потери навигацию как блок то
00:22:53 - 00:24:30
какую то там ссылку в этой навигации уже будет вычитаться элементом а если нужно отлить а следить и ссылку актив ссылку то вот и класс там на fight of active уже будет модификатором то есть придерживать состоянии на примере сейчас как раз визуализирует это можно на самом деле они не писательниц важны класса важны важно собственно понимание структуры как ты не понимаешь вот задачка и у тебя есть структура блока напишите пожалуйста например на ну и сначала ли проблем давай будем свой дом сейчас я прочитаю что здесь нужны
00:23:41 - 00:25:24
эти почести под список каких-то пользователей и у каждого из пользователей есть некоторые набор некоторых трибутов вот и соответственно нужно отобразить в разметке хоккей список пользователей у них есть ой там person in country условно каждый этом это карточка так давай начнем нужно сделать эту карточку надо верстка две карточки где мы будем отображать аватар имя на каждый из карточек будет аватар имя страна пол и так далее ok пусть допустим это будет текст экшен в нем будет класс если правильно понимают опрос то есть то есть
00:24:33 - 00:26:38
допустим это будет как блок с классом user и уже каждого каждого юзера есть там свой аватар ok хорошо если уже не вдаваться в подробности to close аватар так жить хорошо у вас здесь есть нечто м от есть которому намного проще писать дядя поддержка и моторист то есть ты можешь просто писать имя класса и нажимать там наши-то выдержки год настройки среди нужно идти некуда но я к тому чтобы ты быстрее подписал а вообще есть вы хорошо спасибо штучки ситуациях можешь говорить как ты думаешь воспринимаешь собственное структура
00:25:36 - 00:28:02
этого бога ну как как я сейчас пока что вижу что в целом юзер это просто идет блок а уже аватар person немка unde3 это его элементы также будет рендером online status в целом это элемент но у него может быть еще дополнительный класс сейчас если начать online status to take допустим user как блок потом нижнее подчёркивание показывает то что это будет следующий элемент просто путь будет статус статус и дальше уже юзер статус и такие тоже мы-то как элемент но через два дефиса у нас будет пусть будет
00:27:26 - 00:29:06
оффлайн пока что вот это вот понимаю что мы потом с припечатал онлайн и оффлайн вот дальше у нас не сюда не туда все правильно рейтинг какие рейтинг тоже как элемент 1 плюс 1 десятая болта автор waiting on a lucky данный элемент есть две кнопки и текст посередине с числом то есть рейтинг будет элементом еще внутри у него есть кнопки рейтинг понял хорошо то есть пока что пусть это будет див тот же с цикла сам от глаз отображая то что у нас это является элементом класса user рейтинг дальше раскрываем down вот батон ok
00:28:17 - 00:30:20
батон так так блок у нас остается все тем же юзер down вот bottom давно вот давай подумаем над тем какие из этих элементов которые расписала чтобы перри использовала где-то еще в теории аватар можно перед хотя и и если вы если развалила враг в рамках блока то он будет 1 person in country гендер online status скрип шин обычно просто перес пользуются блоки и я неверно что можем перес пользовать именно элементы где-то отдельно ну например там вообще скобы перес пользовать это прям целиком где-то при оценивании
00:29:15 - 00:31:29
чего либо еще на сайте в теории можно но туда я думаю его нужно было бы сделать отдельным блоком и то к чему я веду потому что двигательным блоком тату то есть если мы сделаем то не юзера рейтинг то то ему можно быть были использовать ну и вверх еще на восьмой строчке тоже то есть пе сюзи рейтинг как-то так окей а у меня такой вопрос а почему ты выбрала и т.п. для username а верх чуть-чуть поднимемся петлю сырным но юзер коровье div а username как минимум потому что это неплохо в нем находится текст на и
00:30:25 - 00:32:32
так те и если так смотришь наверное было бы логичнее использовать испан и конечно смотрите по разметке надо но я думаю что все таки было барство нету скорее spans пони обычно текст находится небольшой текст в теги по уже большие параграфы а username это как-то не тянет а почему не просто дифф я не говорю что если неправильно просто интересно почему именно или span семантически будет неправильно они в используется для блоков куда уже может складываться теги с текстом допустим вот это а п а п либо
00:31:42 - 00:33:23
span уже семантический будет более правильно использовать для текста span единиц однако семантической нагрузки совсем хорошо последний момент по баму давай вот и достал одну кнопку напишет во вторую пожалуйста это для понижения рейтинга вторую для повышения смотри как бы ты сделала поступила на ситуации если бы тебе нужно было вид элемент записать это одна и та же кнопка не она отличается всего лишь даже не знаю возможно ничем не отличается защит зрения html + в 1 статьи в другой минус ну или же например
00:32:32 - 00:34:12
будет бэкграунд какой-нибудь там картинка в одном стрелка вниз другой ссылка вверх собственно у тебя один элемент или дома гифи котором как бы ты расписала поменяла свои классы в этом случае то есть по сути это было бы тогда одна кнопка вместо двух ну допустим был-бы блок рейтинг потом элемент того условно и если модификатор то рейтинг to call a free teen talk all down давайте хорошо здорово пойдем пожалуй дальше пришли а теперь мы перейдем к части касаемо а сотов картинок 6 всего остального что
00:33:31 - 00:35:35
подключается на страницу и первым делом если поспрашивать из ты вот да ты уже перешла на это примерчик собственно справа есть болванка для фантой со и там чуть выше и снова подключить есть я с таким вот интересным именем самым носом у фонда есть вариант навсегда которые нам нужно подключить а4 начертания обычные жирная и и толики варианты для век с тебя написать эти четыре директива фулфейс ok но font family у нас нужно задайте в свой раз комментирую собственно погнали ok а что так вот красиво хорошо то есть и
00:34:32 - 00:36:30
начала нужно прописать у нас font family который будет использоваться сам косам в фонд он орлами новая не заморачиваться возможно сурья файл dance перечисленные расширение файлов которые могут использоваться касательно фонд вариант также просто потом прописывается снизу фонд м о господи он творит самое сложное слово допустим реку регуляр но у нас обычно font-family то пусть им и видела фонд о стенд фонд regular и к нему свойств он творит там normal но ключевое слово да норм а вот для для льда puffin для жирных болт и
00:35:31 - 00:37:51
есть и обычно идет другой font-family то есть под особый фонд болт и уже для и в отдельном форт хейс и прописывая друга family создавай до [музыка] допустим допустим болт обычно тоже погружается вместе с другими вид другими шрифтами тут будет болт либо можно прописать и цифрами 600 вместо фонд normal 400 регулярно 700 ну не суть да хорошо реальный вопрос первый вопрос в чем ошибка если назовешь собственно в том что ты нас два fantasy назвала 2 3 фонд фейс использовала разные font family [музыка]
00:36:44 - 00:38:41
что такое phone 7 или вообще для браузера font family обычно это . тот крем который используется название ой а номер три вести это слово в общем то семья шрифта кто вестись 0 сервис уже вполне месте семейство шрифтов на может быть ошиблась в том что нужно было фонтейна ли называть везде одинаковым потому что при список она ведь я бы тарелкам но вы с россии уже будут разные пути допустим в первом случае будет подгружаться фото стенд фонд обычные потом для фото из который должен быть жирным ход фейс
00:37:48 - 00:39:23
успели сам of sample and phone with фонд болт и так далее одинаковым до в этом ключе до делается все теперь давай немного про оптимизацию этой записи поговорим но твой взгляд какие точнее не то чтобы на твой взгляд какие сейчас шестые нужны вот у тебя есть пять сейчас перечисленных какие из них нет ну практически нет в общем то потому что у них нет необходимости но я ела те используются только для интернет эксплорер а насколько знают для остальных он не используется вот тоже не используется вместо него обычно
00:38:35 - 00:40:06
используется вот этот бог или дабы офис 2 либо текке f он вот этот пикет самый распространенный остальные уже постольку поскольку ну вот хорошо для современных браузеров давай уберем лишнее славим только пошла вот этот нам сто процентов не нужен свет же я немножко сомневаюсь обычное свечи используется для гоночных шрифтов допустим а для обычных шрифтов кажется я не видела я бы его тоже убирала вот я считаю что вот прийти вот такие самые распространенные ну а идти нужно для экспорта это возможно 8 стихе поэтому
00:39:20 - 00:40:55
его тоже может быть можно убрать бьете для совершенно старых версий там до 10 9 поэтому тоже глисты хорошо как бы еще можно было бы ускорить во-первых поиск шрифта что ли чтобы помочь браузеру быстрее найти при возможности этот файл су-100 и начать раненых и что делать браузера с тем как рендере текст какой-то в тот момент пока еще не загружен wishlist то есть браузер необходимо отобразить ход как-то текст на странице но вершит не загружен соответственно что делать браузер и как можно ему помочь а
00:40:08 - 00:41:30
я думаю может быть и я думаю можно указать и кто-то пустил так и там optima либо body прописываешь и потому ли которая используется там допустим этот запросам в фонд которого нету людей на компьютере как прогружается поставите дописать еще 2 там допустим ареал либо бердана который у всех у всех пользователей есть на компьютере тогда подгрузится тот второй шрифт хорошо как помочь пользователю которых есть локальное тот 6 файл составе он установлен системы труб затрудняюсь ответить есть еще которые можно указать
00:40:49 - 00:42:21
[музыка] хорошо 6 пожалуй все века давай картинкам да давай мне пока еще не будем сюда переходить будет еще один вопрос по html будем закрывать на этом вопросы там по верстке оса там про картинки хочу поговорить да какие самые популярные форматы картинок мы используем для б предки писали можешь красоту и звезд картинки говорю да какие самые популярные форматы мы используем для в актерстве этим и вообще используем какие лучше использовать банки обычно используем джипег бывает снега изображения окей хорошо как
00:41:40 - 00:43:24
оптимизировать эти картинки как оптимизировать загрузку этих картинок на странице если про оптимизацию картинок поговорить то есть специальные ресурсы которые сжимают эти картинки если говорить про загрузку то есть и такая техника как lazy loading вот она правда обеспечивается с помощью java script а то есть суть в том что картинка не погружается до тех пор пока пользователь до нее не до скроллер окей хорошо если у тебя на странице много допустим иконок райт и окей что это такое а можно собрать и и если речь идет о
00:42:30 - 00:44:06
небольших картинках как вот и иконки то можно их собрать и в одном в одно и изображение то есть брать по сути спрайт является одним изображением на котором собраны все иконки и просто спор и потом допустим и отображать их помощью свойства background-image есть через background позиция отображать именно нужную картинку в нужном месте вот то есть нам не придется загружать кучу картинок а подбросит будет продолжаться только одна вот окей хорошо как по твоему мнению ты упоминала про шрифт с выгода для иконок
00:43:19 - 00:44:51
или вот спрайты что лучше использовать лично я думаю что стоит использовать svg допустим у меня был опыт когда мы даже создавали свой икон ночные шрифт то есть на основе картинок с мега генерировались иконочки вот и с вами в принципе к что более привлекательными потому что они они всегда выглядят при любом при любой нее высоты иконки то есть векторная графика если я не ошибаюсь вот из целого не по производительности сколько помню все таки будут получше чем картинки окей хорошо ну что леди и джентльмены
00:44:04 - 00:45:34
двигаемся дальше в css ну для начала давайте по селекторов чтобы самое простое типа селекторов селекторы и классы классов атрибута в универсальные селектор есть это есть звездочка дочерней с истринские селекторы потомков вот то что вспомнилось хорошо окей хорошо давайте поговорим про специфичный селекторов что это такое css specificity и как она вычисляется да если поговорить процесса специфичность сейчас я просто здесь напишу что самая слабая специфичность имеет так звездочку универсальный селектор потом идут всем дан элементы
00:44:56 - 00:46:56
откуда потом идут псевдо-элементы и чтоб и теги а то то есть если допустим это пишем мы захотим упредить какой-нибудь свойства допустим звездочка для эммы храме захотел поделите цветом зеленый либо а потом для того определить цвет красные то у тегов будет соответствует красный потому что выше специфичность то есть он будет перед специфичностью перезаписывают одессы более низ элемент из селектора с более низкой специфичностью вот после того что упомянула идут потом идут классы псевдоклассы и от и атрибуты у них более
00:46:00 - 00:47:42
высокая специфичность потом айди потом онлайновые стиле и потом important почему слова import ok хорошо смотри вот такая задача перед тобой стоит ты видишь верстку ты видишь объявленный стиль первое первый вопрос как не изменяя объявления которое у нас есть 1 2 3 сделай пожалуйста опусти его ниже это 123 да вот там где написано классный swan сделай пару пробелов чтобы первая вторая третья строчка остались пустыми но пусть это объявление ниже ниже просто бы стива css вкладочка классный мсп н.б. подними курсор в самый верх и сделай
00:46:51 - 00:48:39
пару enter да как этот вот классный мсп nb пришел у тебя откуда нибудь да с другой библиотеке ты его поменять не можешь но тебе нужно покрасить баба до имя боб в красный цвет как это сделать и вот это поменять не можешь никак а вот это не могу менять а я благодарю а там чтобы сколько приписка здесь кое-что да да да я потяну сверху сказал а потому что а почему я кстати сказала все чтоб сверху потому что следую пишу не жетону просто перезапишет целостность если допустим делаю вот так вот классная
00:47:47 - 00:48:52
экспандер снизу другой цвет она просто перезапишет а почему бы устройство которое мы пишем ниже в css файлики а не перезаписывают те что выше уже стоят окей хорошо что там у нас как бы минимум у нас просто постой а т б мы к нему еще не добавите к сожалению caspa ну тоже классный но к счастью классно его мы можем добавить так div и повысились специфичность на единичку окей хорошо я хочу покрасить до покрасили мы 1 баба в красный я хочу папок просить 2 баба в синий 2 года с которой строчки 10 куда
00:48:24 - 00:50:24
хорошо если мы так хотим это сделать так сейчас [музыка] эти of type 2 то есть ti 2 то есть на стек пск ты так отец интересов type имеется ввиду что мы берем 2 x 2 tb конор да посмотри на верстку внимательно то есть у нас три независимых диего да не не вложены друг в друга у нас есть не достанем и два других дива без классов нибудь потому что у нас классные модема окей хорошо и я хочу покрасить 3 в какой-то другой цвет не знаю розовый погоди этого мы потратили на этом этапе они покрасили 2 что не показали какой слог won't show
00:49:25 - 00:51:41
on soft ipod shuffle вообще заветного агинского на у не жеского плэев идти не весь документ а только вложены то есть у нас было бы два т.к. внутри спая туда болдов попросился бы 2 случае нтс вот я хотела смотреть я написала потому что посмотреть как исправить на давай так детстве мы допустим запишу так окей значит если перебор спать это первый актив извиняюсь это все нервы так окей здесь нам нужно когда что это 2 киев мы не окажем как строить и так я просто сейчас думаю то есть нам нужно все теги
00:50:59 - 00:53:21
баба не в принципе одинаковые видя на одном месте все они внутри span of разве что указать что нам нужно использовать 2 div да ну или соседней и или сосед но только именно 2 потому что соседи здесь много до 2 соседи о по кстати по идее если нам стив то там тоже без этого он исчез борового как вариант хорошо а теперь последний покрасим его в розовый хорошо так тот может так скорее всего не выкрутимся так а ну ка сейчас мтс допустим если вы укажем в топ 3 сейчас не то что вес полоса прям совсем часовые нашлось
00:52:11 - 00:54:30
работает но попытка не пытка так если нет будем искать обходные варианты сработала какая красота окей какие-то еще варианты есть как мы могли бы покрасить его в розовый moments of type ok еще какой то ему можно он так-то просто указать что он был что последний div да я не помню синтаксис плюсик все-таки давай вернемся на пятую строчку что означает плюсик плюсик это означает первые сестринский элемент то есть допустим нас классные div и первые сестринский у него будет див написали бы матильду были бы все
00:53:34 - 00:55:10
сестре такие которые будут и ниже чем этот костным то есть мы не можем добиться до тегов которые были выше тем этот текст с классом классный вот есть ещё вот такой то есть и прямые наследники у нас бы это тоже не сработало потому что классные монету прямых наследников в тегов div вот много к вариант такой есть окей хорошо спасибо двигаемся дальше ты упоминала про псевдо не давай останемся здесь же чердак предыдущем предыдущую до 200 мвт упоминала еще псевдоклассы и псевдо-элементы да вот что является давай уточним точно
00:54:21 - 00:56:09
что является псевдо классом и что является псевдо-элементы какие мысли селекторы точнее псевдоклассов селекторы псевдо селекторы для а сама запуталась для элементов севда класс этот элемент ключами хорошо но в целом псевдоклассы определяют динамическое состояние и определенных селекторов то есть допустим при наведении мышкой на селектор при и фок при фокусировании на этот то есть и лектор то есть допустим есть такие псевдоклассы как ховар и как фокус у ленки 6 свои своей как там линк и везде ты и так
00:55:16 - 00:57:16
далее вот и псевдо-элементы в свою очередь определяют псевдо-элементы не существуют в том дереве они плата рифма благодарение можно добавлять и дополнительный контент из помощью css даже есть специальное свойство как контент вот псевдо-элементы есть такие педали менты как before автор и форслайн first letter вот они четко не определены в том дереве вот добавлять только с помощью css вот а вот этот инсов type это что такое это псевдо класс тоже к ним относятся хорошо хорошо давайте двигаться дальше так дальше у
00:56:15 - 00:58:15
нас процесса с unity css юнита давай поговорим какие вообще бывают счастью нет и измерение в css и размеров шрифтов и так далее в целом бывают абсолютные и относительные относительно это такие как m&m и то есть и рамы вычисляются относительно функций за корневого элемента а м и вычисляются относительно функций за родительского элемента если говорить о абсолютно перед относительные это вот относительно это более римом и абсолютное это пустим как пиксели самой распространенной и есть еще куда меньшими не используются мы не
00:57:15 - 00:59:07
используем как там сантиметр и дюймы если не ошибаюсь и а такое чудо с 75 и этом пике вроде бы но они используются максимум для печати а для постепенной жизни обычно используются пикселей еще процент то есть как относительные положение по сути измеряют если допустим это больше ширина в процентах то есть вы будете ладно зачем это говорю в общем пациента окей хорошо а если все-таки и размерность как w&h что это такое да это относительно относительно viewport а то есть ты просто здесь запишут моего удобства
00:58:16 - 01:00:08
скорее пусть будет вид 100 то есть она будет то есть это будет высота равняться ровняем а ему всему в порту если я не ошибаюсь вот есть вид тоже есть дата ширина в есть человечеств а есть еще две в мин и макс то есть тут уже а если допустим и минто вычисляется от наименьшего разрешить эту sisley высота меньше чем же ширина экрана то вычисляется от высоты если вы макс-то от самой самого большого измерения чего-то в общем если ширина больше чем высота то будет вычисляться относительно ширины того что она больше чем высота
00:59:12 - 01:01:20
вот и еще такой вопрос и даже как ты думаешь какие лучше использовать абсолютные или относительные величины при верстке при создании стилей я думаю зависит от ситуации допустим мы обычно используем а пиксели для высоты для для знания высоты и ширины кого-то компоненты элемента но для отступа в для функций за обычно используем относительно такие как рамы и мы не используем они могут тебя ввести немного непредсказуемо если ширина текста меняется в в вложенных элементах вот но в принципе вот для для текста и для
01:00:18 - 01:02:08
по 1 гомогенного обычно используем и рамы потому что что чтобы одеть менялись относительно экранный тест на для более маленьких кран остановились и более маленькие отступы более маленькая высота текста легче было читать легче было воспринимать информацию хорошо спасибо жизнь была хорошо давай пойдем дальше расскажи про такое чтобы процесс из раза зачем она вообще на какие есть виды и что там сейчас можно использовать css resets просто сбрасывает обновляет базовой е.с. базовые свойства т.к. вы либо базовое значение я который
01:01:14 - 01:03:02
определяет сам браузер каждый браузер и применять свои свойства для пустим для заголовков для для списков вот зараза к кресту называются может быть встроенные стили стиле браузера если браузер move + окей вот из помощь и и так как было раньше когда браузерах могли стиль и стиль сильно отличаться друг от друга то их пытались привести к одному виду и потом уже на основе этого строить и уже основываясь на этом делать и дизайн к делать верстку которая будет иметь одинаковый дизайн на всех на всех поддерживаемых браузерах вот но это
01:02:08 - 01:04:00
обычно это было обычно это было не очень удобно вы придумали из теста с нормала из который не спрашивал просто все стили ну что это в браузере есть уже свои стили потом они все сбрасываются то есть это еще бар добавлять здесь и стилей которые перезаписывают дефолтные браузерные стиле и потом еще на них поверх и записывались и желаемое стиле то есть сильно увеличивалось и и это переопределение переопределение стилей и создали при придумали normal а здесь который не просто сбрасывает все существующие стиле
01:03:06 - 01:04:47
браузера а приводит их к одному общему виду паху одинаковым для всех браузеров можно даже этот файлик найти в интернете там подробно расписано какие свойства почему они удалялись то есть почему не изменялись можно подогнать их под себя даже в быстро пей свой нормала из ссс вот так что лично мое мнение что использовать tor малость такие более рационально и удобнее что-то пойдем бокса выпады скажу что такое из чего она состоит и хотите 10 стажем вида боксмода совсем внутри есть идет контент потом подёнки . внутренние отступы
01:03:56 - 01:05:49
дальше идет border то есть рамка идут внешние отступы приплыли это случилось что у нас их вдруг несколько стала мы с этим живем кого буксовых моделей а но они они выполняют разные цели то есть допустим по дефолту нас что нас там бокса 1 год box айзен и контент и бокс идет то есть и в боковую модели не входит и входят поединке и borders но если мы допустим находиться хотим делать box айзен border бокс тогда уже в него будут входить тогда уже в эту боксу тогда уже будет бы исходить сюда и все кроме машина в кровь
01:04:52 - 01:06:50
при конечной шириной например да да да хорошо какающая сидите и не помню ладно возможно это я путаю хорошо давай так прям в уме посчитай нас есть блок и пошли на 200 пикселей по кейс отступ эп1м по 40 пикселей ну то есть слева справа 46 borders по 10 пикселей и есть морщины по 20 пикселей по kei какая финальная ширина будет у него этого блока прибор the box & trick on the dogs а общий шире до 200 до nuvi 200 значения до 13 по 40 борода падешь окей то есть и сейчас будет и content pack 100 в него
01:05:56 - 01:08:00
так вид то есть если при контент бокс у нас будет каток контента будет занимать час музыки может быть проще записать себя бокс райзинг так пусть так какие то ладно так длится 200 пикселей так поденки так 40 то пусть так и по мечтой куда и morgen 20 [музыка] так но если прикол если при контент бокс то будет так 240 у нас двух сторон еще 80 плюс плюс 20 получается суммарно 300 и джон манн можно вроде нет можно учитывать целине так а если как бокс ну да запутались мы уже сбор боксом и баксом давайте двигаться
01:06:58 - 01:09:27
дальше жизнь там и себя момент исходу собак самой моделью расскажи пожалуйста про такую чтобы вы помажем коллапс что это такое и зачем оно это происходит в блочных тегах то есть если допустим нас разметки div 1 и за ним еще потом второй находится один допустим у первого диван margin ботом 40 пикселей у второго типа будет маджин бот машин топ-20 то суммарно не будет между ними отступа 60 а будет отступ который равняется большему значению моржана в этих двух элементах то есть будет и margin 40 останется машин 40 а если они
01:08:56 - 01:10:59
будут с разными значениями виду одно положительное другое отрицательное что таком случае будет будет какой-то коллапс тамаре виде что там произойдёт вот тут не помню к сожалению на работе с отрицательными а в каком случае не будет работать на джим collapse вот у тебя эти два дела у которого а я у первого 40 пикселей снизу у второго нас пиксель и сверху когда там будет 60 не совсем верно но по-моему он происходит когда есть тег когда есть еще дисплей блок возможно slim поменять дисплей то не будет но тут и не вернуть
01:09:59 - 01:11:26
немножко то вот и место в функции работает достаточно на работу но да ученику хорошо окей давайте дальше немножко про старую школу поговорим что такое флот если допустим задайте картинки флот и right to она сместиться вы право а остальное контент допустил какой-нибудь текст будет обтекать и обтекатель окей хорошо а если я не хочу чтобы эту картинку optical или какой-то там часть optical а часть не optical а ну туда есть свойство clear clear боссов отменяет обтекание слева и справа также мазать clearlight либо clearlove смотря
01:10:59 - 01:12:56
сквозь turned обтекание нужно отменять беда собственно этих лотов почему снимет 1 обороте было надеюсь было ну допустим если поместить и условную картинку в блог в котором не задано высота то этот блок будет схлопываться для этого придумали специальный хак который называется clear fix задается в этом же блоке там а через псевдо-элемент автор с пустым контентом дисплей тайбл overflowing хидан если я не ошибаюсь вот чтобы он не схлапывался и картинка не выпадала как так как бы из из этого блока ok а благодаря чему это работает в это
01:11:58 - 01:13:49
вдруг извлекает запрещают обтекание собственно магия в дисплей тайбл что там под капотом есть тут и затрудняюсь ответить ok а тогда почему размеры картинки не учитываются что с картинкой самой случается куда она попадает или на обогревает падает на выпадает из потока как я понимаю вот давай поток а поток это размещения элементов на странице html под по оси z то есть и допустим на странице а элементы могут располагаться несколько слоев один выше другой ниже по сути можно назвать и контекстом наложения
01:12:58 - 01:15:08
то есть начало правильно но вот ось z тебя завела не туда окей окей хорошо то есть это нормально расположение элементов внутри от проповедник 100 форматирование или теперь следующий вопрос сможешь ли ты сказать что добавить контекст форматирования и что его создает можно как нибудь может быть навести немного на мысль о такая мысль почему это наводка на мысль flow плохо влияет на перформанс страница если мы используем флоты и рендеринг риф flow происходит очень долго ну не очень долго дольше чем ok давайте тогда
01:14:09 - 01:16:17
двигаться дальше давайте поговорим о более современных способах размещения элементов на странице жизнь давай что у нас там пришло на смену бог сдам да в чем его смысл работы как его будь какие ключевые в отличие от того что было раньше от слова квоту но в целом flex pass и предназначен для более хорошо предан оси для построения layout а в flex боксах и есть и если задать их а элементу свойства flash что он будет выстраиваться по горизонтальной оси также можно элементы перестраивать по вертикальной оси если менять и rapidly
01:15:24 - 01:17:17
называются правильно ну про вторую pray про второй прослушала как перпендикулярный оси а первая главная мейн нет дома и на явное а вторая на первичном поперечины на багажник да продолжаем оао шилов цицерон секс сказать то есть нокий хорошо его немного про структура фокса как работают например свойства флеш-дро и флаг слинг для чего не нужны в целом лексу кроу удобные для построения колонок если допустим нам нужно поделить страницу на три одинаковых колонки то можно задать и каждый каждому только
01:16:18 - 01:18:00
отвечаешь и это по сцене ты колонки flex гром один вот и и они будут и по сути они все будут одинаково тащить на друг друга и занимать одинаковое положение на странице вот по сути задает размер относительно других но faction соответственно для чего савинковым у меня всегда были пропустишь выполни давайте переходить к этой задаче которая на экране будем двигаться дальше то что мы что-то с вами долга очень хотим за время пропустим фокс и собственно вопрос для начала расскажи пожалуйста об отличии дисплей блоку disney онлайн
01:17:17 - 01:19:31
в чем отличие дисплее блог по дефолту стоит облачных тегов display inline устроенных если стоит дисплей блок то блок занимает всю доступную ширину вроде родительского элемента автоматически переносится на новую строчку если говорить про display in inline то а margin допустим а отступай сверху снизу не будут нести никакого влияния на элементы сверху и снизу вот максим разве что если задать фон и вы внутри и двойного те господин гамме тонко что будет чуть больше вот этот снятся на эти по денги вот но в целом верхний и нижний
01:18:21 - 01:20:22
уступ и в них не имеет никакого влияния построчно теги занимать только ширину своего контента [музыка] хорошо теперь расскажи об отличиях дисплей нан вот в билете видом на дисплее если мы задаем элементу дисплей нанта он выпадает из потока в общественной странице если мы задаем везде белить и хитин то там то место которое занимает этот элемент оно просто остается пустым и соответственно не влияет на стоящие рядом элементы кучу это чудо все что место остается окей да давай теперь посмотрим на задачку она больше про наверное даже
01:19:24 - 01:21:18
реакцию браузера на все это дело вот в общем то можешь ставить на правый нижний угол он расписаны все кейса здесь вопрос о том загрузит ли браузер ресурс то есть из картинка внешние которая вас первом случае например это просто картинка которая скрыта будет ли брал загрузить картинку то я думаю нет потому что брался загружают только деньги мы и элементы вот на такой дисплей на даже нет в потоке для него не нужно потерять какое-то место то я думаю что он что картинка не закрутится негодник а во втором случае визин или на
01:20:24 - 01:22:11
дисплей на так окей веб конечно тоже сказал что не загрузит теперь у меня уже возникают сомнения как мне кажется тут ok ставлю сетки на тоже и загрузит но либо c не понимаю логики покоя загружают даян образом снова дороге да загрузит она так и мышь ракету до думаю что в третьем случае он не закрутится а valtrex down не забудут про ground окей хорошо так визин элементы забили тихий дон так покровы и платишь ну могу по позже и шут не знаю везде белки хитон как-то в этом случае мне кажется принципиально отличается от дисплей на
01:21:21 - 01:23:39
вот загрузит таксистами вариантом за свой груз окей не сталкивалась таким к сожалению быть буду знать на будущее чтоб потом не краснеть хорошо да да да двигаемся дальше маргарита переходи на следующую вкладочку задача тоже простенькая поначалу кажется если можешь увеличь пока чуть чуть вот эту часть виде нарисована кошка или котенок да побольше вот сейчас будет там серия вопросов к тебе 1 почему картинка не до конца доходит ну то есть чуть border вокруг картинки вокруг дива чуть-чуть отступает от
01:22:44 - 01:24:22
картинки вот внизу там у нас есть белая полоска что это такое у нас gif него иметь вставлен есть ширина высоту мы пока не указали есть margins у этого дела и border но почему-то картинка оставило нам и все пустое место снизу окей хорошо давай тогда самая такая как выровнять картинку по центру соли было плохо слышно можно просто еще раз меня было плохо слышно как выровнять картинку по центру вот и тот же пример давайте варианта хорошо еще стройте попробуем так и мыши так у вас так пока по горизонтали
01:23:38 - 01:25:51
выравниваем так он сейчас если мы делаем more out of a что нужно было нет макей так исчез да то если бы она была известна высота ширина картинки тогда можно было бы через marginal аута но у нас и inima ok если в целом как можно выравнивать тот можно выравнивать по горизонтали и через flex и те же если задать родителю свойства flex и justify контент-центр можно выравнивать с помощью позиции если задавать родителю позиция нра лаки а дочернему элементу позиция абсолют лифт 50 процентов и transform translate
01:24:55 - 01:26:57
свойства transform значения translate x минус 50 процентов что будет означать минус пятьдесят на пятьдесят процентов от внутреннего блока то есть картинки вот шуршишь такого интересного ну давай какой-то один способ реализуем самый простой для тебя если самый мой любимый то это дисплей дисплей секс всегда был x-lander да это же вопрос почему пропал отступ немцы нижнего почему он пофиксил ся магия эта магия скорее дело в дисплея было окей хорошо а если представить что вот этот div который у нас есть мы хотим
01:25:58 - 01:27:53
чтобы он всегда был на в правом верхнем углу экрана весь div с картинкой как это сделать весь утвердив не оставь это все классно было так красиво весь-весь div да вот тысяч сможешь увеличить эту картинку чтобы весь весь дешевого он сейчас он арсен прекрасно да все красивенько по центра я хочу чтобы он был в правом верхнем углу экрана всегда как это сделать окей если в правом верхнем углу экрана всегда то через позициям fix the и даже при прокрутке будет фиксированное положение какого-нибудь его
01:27:14 - 01:28:49
если справа сверху the top 0 1 0 окей хорошо а ну ладно все давайте дальше не будем можно тратить на это время на самом деле много вопросов езда дали образцы же слабой на время давайте дальше к следующему этому самому же да давай можем попробовать это сделать котик как бы сделать изображение квадратным задачи такую же высоту для как ключи 1 [музыка] не просто это для киева плена я подписываю 6 картинки так окей если бы для этой картинке было бы одинаковая высота и ширина колонок это тоже способ
01:28:01 - 01:29:50
можешь продолжить давайте их 200 долларов афинам чтобы у нас был квадрат а вот теперь как картинка выровнять по центру здесь то есть центральную часть картинки показать чтобы она вне зависимости от своих размеров уровне был виден только ее центр всем тестам и картинке вообще через объект фит можно понять это все что я хотел саша да хорошо знаешь еще раз способа какие-то как можно картинку рандомных размеров в квадрат привязать не так навскидку не скажу пойдём тогда дальше следовать давайте может сразу продуктивность
01:29:03 - 01:31:03
поговорим про адаптивность но давайте тр адаптивность расскажу что такое адаптив что такое response а в страница веб-страницы то в целом это два подхода для того чтобы обеспечить и для того чтобы для того чтобы сайт хорошо отображался на разных размерах экрана будь то мониторы разных размеров будет планшеты будь то телефон и если говорить про респаун tiff to a layout и меняется при гибко меняется при увеличении и уменьшении крана на любых при любых размерах если говорить про адаптивные подходы то
01:30:02 - 01:31:50
а там идет и не несколько вариантов верстки под разные брик point обычность самая распространенная допустим 320 пикселей ширины для телефона вы 768 пикселей для планшетов 1024 для компьютеров и так далее вот эти вкратце окей хорошо скажи пожалуйста что мы должны обязательно указать в этих когда мы пишем css даже для того чтобы сработали эти брик поинты вот 320 там 760 и так далее ну у нас есть специальные медик very которых мы указываем допустим если бы очень быстренько написать медиа а потом мин вид и такое то там значение
01:30:56 - 01:32:43
вот это по сути и будет наши брак пойнта стиле будет применяться для экрана вы что-то мтс не invites меньше с ним даже если максимальный окей то есть для 768 пикселей и больше ok а какие еще мы можем сюда передавать параметры в медиа кроме мин вид саймак свитс а ты упомянула его уже до aspect ratio можем передавать можем даже порт аренды шин сумел основу портреты либо 2 другой а также можем передавать дефолта это по-моему скрин можно еще и только для экранов еще есть еще были другие варианты кроме экранов а сбить еще был
01:31:50 - 01:33:48
вот вот вот такие вот обычно окей хорошо двигаемся тогда дальше давайте поговорим про префиксы инвентарная да да да ринго а фидерный префиксы а по сути они добавляются к свойству и от этого определенное свойство будет работать только в определенном браузере допустим если мы добавим гитарный префикс webkit к сможет вот он будет работать и в хроме и опере те который использует этот движок если мост а для мазилы если место для интернет эксплорер обычно это использовалось для экспериментальных свойствах вот со
01:32:51 - 01:34:37
временем в них потребности вашей части отпадала разве что для интернет эксплорер а даже последних версий тогда действительно необходимый префикс вот как то так хорошо а давай наконец затронем тему прибраться сравним а что собственно как они возникнут почему они стали такими популярными до сих пор нас не отпускает в целом они упрощают процесс разработки и делают его более гибкой то есть допустим если про говорить про особенности при процессоров то допустим можно задавать те переменные можно задавать миксины можно создавать циклы и
01:33:45 - 01:35:25
в них есть система импорт of вот то есть по сути как-то более простая организация кода идет также в них более удобное я хотел сказать очень умны фразу про амперсанды на возможность до вложенность особенно в методологии бэн довольно удобно то как там обычно один блок и через ampersand просто прописываешь ampersand там нижнее подчеркивание название элемента то есть и будет использовать то есть и вместо амперсанда будет использоваться название блока предыдущего допустим класса предыдущего селектора хорошо а
01:34:35 - 01:36:13
скажи пожалуйста чем отличается импорт со со со делюсь выбор от импорта в принес as well as импорта миссис s а не сталкивалась практически только с естественностью но как потому что делает выбор блондином с оси и там импорт и какой-то url указан urn css файла просто что могу сказать про допустим ipart скорее стс а допустим если задавать те названия файлов css нижнем подчеркивании перед ним вот это все не портить в один файлик остер сердца то те файлы которые мы импорте лисы с нижним подчеркнуть
01:35:25 - 01:37:05
ним и они не будут создавать дополнительные css-файл вот и на выходе будет по сути только вот тут один css файл который мы все за импорте ли вот поводу импортом с css и узнает о чем отличается счас переменная от переменных в процессоре а переменные с с и можно использовать и иметь якорях их можно к ним можно достучаться через java script они могут наследоваться годива какие-то черного лишь ссс про при процесс а сейчас обычно говорилось что да хорошо вот ok давайте двигаться дальше у меня ещё такой по css у один вопрос наверное
01:36:15 - 01:38:20
все поблагодарят за него всем очень лень всегда писать полностью с нуля css вот и пользуются всякими библиотеками известными или неизвестными если все таки мы решили лишаем использовать библиотеку как нам ее правильно выбрать но и вообще какие ты знаешь как ее выбрать но самые распространенные bootstrap и есть еще частично на нее похоже в foundation css balm а есть такой довольно интересный библиотека коктейль винты с совершенно другим подходом мне нет компонентов только utility класса из них можно комбинировать компоненты вот
01:37:17 - 01:38:47
но это так лирика в целом если выбирать то нужно я что ретироваться то насколько ее легко будет кастомизировать и какие в ней уже есть и компоненты элементы которые нам нужны в нашем приложении вот которые мы поможем и перес пользовать и подогнать под себя а насколько просто задав насколько просто сделайте разные темы опять так если это необходимо вот желательно еще чтобы если допустим брать быстро кто не погружайте вообще все компоненты все элементы которые есть чтобы была возможность выбрать те
01:38:03 - 01:39:42
которые нам действительно нужны вот активности комьюнити насколько насколько активен библиотек развивается насколько активно в ней в не относится от другие фичи вот исправляются старые баги и так далее вот это тоже важно окей хорошо так но на самом деле у нас тут еще был блок вопросов о перформанса вот но я думаю что это будет уже во второй серии нашего интервью мы набросимся в гости в мы с рэндом еще раз вот у меня только и все даже не достался это кот quality что такое код кволити в html и css и
01:38:50 - 01:40:19
какие есть метре метрики этого катка летели как понять что код хороший или плохой в целом есть специальный есть специальный валидаторы w3c валидатор то есть от консорциума которая задает эти стандарты собственно можно там проверять и из этапа дата это кажется и по артема ли процесс можно проверять и а также из на проекте использовали sonar куб то есть помощью него еще можно проверять вот с помощью линкоров просто можно подгонять под определенные стандарты но которой уже устанавливается именно в проекте , то
01:39:39 - 01:41:21
сидим то глобальным вот из globally скорее валидатор наиболее подходящий ok хорошо супер я думаю что мы на этом заканчиваю в нашу интервью части вот и переходим к фидбэка вот давайте на рожать до вас тебя начнем давай да хорошо давайте попробуем смазывать судьбе но в целом маргарита то или плохое знание обширное знание всех областей в общем-то фонтена даст и разметки и стилей и все что с чем мы работаем там помимо офисе остальным есть некоторые в нюансах но это абсолютно нормально потому что нельзя
01:40:30 - 01:42:04
реализовывать все нельзя знать всех тонкостей всех возможности браузеров немного заметно что поскольку ты относительным возможно новый человек в принципе в разработке тебя более влечет естественно более новые вещи и которая сейчас можно потрогать которая вызывает вау-эффект и всякие там вещи которые были при динозаврах они не настолько интересны один интересный возможно нам завра дополнить значит молодость пустить слезу но один из андрей то есть ответы на какие-то вопросы по типу почему нас debug своей модели это
01:41:19 - 01:42:38
сорян да не те вопросы которые на которые душа за год вот так что такое можно не обращать внимание единственная единственное такое возможно замечание от меня это немного поработать с разжился и кода то есть быть на шаг впереди и заранее думать что может расшириться что может поменяться как-то 30 кусок кода скомпоновать так чтобы в дальнейшем его перри использование было намного безболезненным простым и менее затратно по времени в целом я бы сказал что у меня впечатление позитивная от тебя как от кандидата и я бы дал
01:41:58 - 01:43:29
положительный всегда курсы да присоединяюсь к положительному фидбэка спасибо тяжение за динозавров все хочется казаться что вы молоды но да есть уже те технологии которые к счастью не затрагивают но но и в новых людей людей в разработке и это прекрасная очень мы рады за нашу наш прогресс который есть в нашей работе вот маргарита мой фидбэк по интервью мне очень понравилось мне понравились твои ответы ответы было очень хорошо видно те темы в которых ты хорошо разбираешься не были очень расширенные с примерами с
01:42:44 - 01:44:06
возможными подводными камнями твоими предположениями и так далее вот конечно же да то есть те вопросы и хорошо их было видно где ты сомневалась в своих ответах и если бы мы давали как обычный письменный фидбэк мы бы обязательно прислали ссылки тебе где то почитать вот что что чтобы можно было хорошо отвечать на те вопросы на которые ты не так прекрасно ответил а вот но на самом деле собеседование у нас на мидл pozis позицию до фронт-энд разработки и с точки зрения html и css а ты это собеседование прошла
01:43:24 - 01:44:53
вот понятное дело и уже андрей это подчеркнул что собеседование на frontend позицию включает еще и java script собеседования вот но она уже была записана комьюнити и можно посмотреть например вот про по frontend части html css у прекрасные ответы г поесть но все эти грибы можно просто проработать там за какое-то время прочитав все эти рекомендации которые вы получите от интервьюеров спасибо андрей то говорить кордовой вейдер сейчас нет спасибо ребят которые пишут в чате если у вас есть вопросы вы можете
01:44:09 - 01:45:55
их задать могут ответить вам организовать старался и поддержать какая глубина что мисси пола и целом давно не спрашивали для вас клип об этом не спрашивали всякий сорский новые штуки ну может быть у нас под будущем что ещё хотел сказать если у нас есть обратной связи пожалуйста заполнять его постараемся сделать интересно и полезно для вас ещё похожие важно ничего прошла она может быть несколько полезных неделю материал по артем с и посоветуйте что нибудь материалы по html css насколько я услышал да для тех кто начинает только
01:45:05 - 01:48:08
до начинающие разработчики есть прекрасный ветре schools ресурс абсолютно со всеми базовыми примерами по html css а где можно поиграться где можно попробовать какие-то фичи вот прекрасные для именно для начала прекрасный ресурс кроме этого конечно же уже там кто любит читать документацию после того как мы прочитали для чайников в 3 schools мы переходим более тяжелым артиллерия мы начинаем читать стандарты вот и тогда когда мы читаем стандарты мы находим очень много всего интересного от которое не вошло в сокращенное здание в
01:46:58 - 01:48:22
3 schools вот это уже должно быть вторым этапом сначала все-таки что там берем такое где можно пощупать и попробовать от от меня уже не пожелали он разве что присоединились с тем что до specs мдм и очень много инфы на самом деле есть в комьюнити то есть есть сайты например там куча подкаста я сейчас помимо этого очень хорошо дачном не заходить когда я все время остановился до front эльдаром очень хорошо находил twitter и сейчас его актуальность никуда не потерялась топовые люди это было люди комьюнити активно ведут свои twitter
01:47:41 - 01:49:13
аккаунты и там инфо просто с первых уст о том что происходит с делением свойство с какой-то фичей новый с тем как нашли какой-то там лайфхак вы можете просто подписаться в замке в твиттере на интересующих вас людей и получать эти известия из первых уст ну и пробовать нужно пробовать еще раз пробовать я бы тоже хотела порекомендовать this free code camp там очень много заданий и in html лености яс-с-сно accessibility норрис паутина flex бокс на grid вот с и хорошо песчаной теории и задачи их чуть
01:48:27 - 01:49:55
ли не по каждому свойству вот я проходила очень было полезно снимали к даме тоже пока похожим форматом на медиуме много полезных статей вот тоже по любым тему хоть по accessibility хоть паре спать его хоть по базовым темам стилей вот-вот следует какие особенности 1 приходите интересно сейчас ссылочку да спасибо ребята за время спасибо андрею за приглашение было интересно интересный опыт надеюсь он будет полезным зрителям спасибо спасибо всем удачи пока пока
01:49:11 - 01:52:03