Как работает Интернет: Знакомство с Figma

нас есть отсылка на чат есть в наушник первым первом занятии и вот она здесь что из себя представляет чат и себя представляет несколько каналов что здесь есть я сразу пройдусь по всем каналам и расскажу в анонсе я буду скидывать анонсы уноси скринкаст анонса трансляции в домашку присылайте свои домашки вот и в комментариях можете коменте друг друга вот я буду что то тоже писать но опять же на сколько у меня хватит времени важно тоже понимать что вы возможно некоторые вещи я смогу даже посмотреть особенно если вы присылаете за если на трансляции вот поэтому если вы хотите фидбэк от меня-то присылаете их до конца четверга это вот реальный только детский шанс чтобы я точно и смотрел если у вас есть какие-то предложения по трансляции по образовательному процессу их можно написать канал предложения всех прошу кто подсоединился чай ты кто уже в чате есть написать немного слов о себе в канал привет вот таким образом меня будет понятно кто вообще это все смотрит для кого это делаю вот и меня конечно другим ребятам тоже будет интересно скринкасты я буду скидывать записи предыдущих занятий даже есть она находится речь сейчас скину она находится вот мы вот это запись первого занятия поэтому имейте длиной 4 важно чувствовать вот возможно если что-то еще понадобится 1000 канавы буду их создавать это бесплатный сларк и он ограничен по моему 10 тысячами сообщений вот и ещё отличие что ты не можешь делать редон на канал поэтому если чтоб написать отдельном сообщении пишите в чат ром вот на прошу в остальные чат и писать комментарии можно и не оч на из лап потому что любую запись можно пометить и это сохраняет какое-то визуальное пространство ценность информации повышается вот от прочих и добра трансляции про ссылке ссылка всегда будут на и даже вот я иногда но потому что количестве всегда меняется вначале как раз эти будут 50 я подумал что прижать на втором занятии наверно будет человек тридцать обычно бывает и не знаю сколько сейчас вот поэтому да поэтому ссылка не меняется добавьте сибирев календари например она будет всегда как вы точно вот я буду добавлять новые места и здесь из отпуска чат меня теперь всегда какой-то страх что если к ссоре что так я думаю будет удобно если вы будете красок писать голова что блин потому что я даже не могу открыть чат зум и не блокировались моей всех вас трансляции доверить только у нас вы смотрите ребят еще раз я не буду скидывать ссылку начаты точки х найти сайт моего курса трон справа есть ссылка на материал и церкви есть супе на материалы и первым вот здесь на первом занятии есть лук и я думаю если вы более сложные вещи и так что еще у нас будет сегодня год про домашку те кто не делать ну я как бы не старой вообще сделать просто имейте ввиду что для того чтобы чтобы стать классным чуваком каком-то деле вам принесли нужно просто это делать если ты хочешь делать классно сайте тебе нужно делать сайты по другому от не сможешь ты можешь прочитать 10 magic но от того чтоб никто не научится делать классно сайт и начну делать сайты только

делая сайты и вообще любое делает не научится готовить ничего не приготовив и так что вы слышно делом поэтому вот поэтому такие дела и только для вас нужно и нужно для меня че-то же потому что мне например очень очень классная я получаю огромное удовольствие от того что когда смотрю ваши работы стали я смеялся над некоторыми но в хорошем смысле что оно было классно по этому не призываю всех закреплять материал вот и делать эти простые просто и задание и небольшой рикард того что было на первом занятии мы я рассказал про кот том что на ближайшие пара занятие это наш инструмент который мы будем писать по и мы познакомились языком разметки html и наверное да что мы изучили я рассказал про теги что тебе есть название например так h1 и удобство код пены что я могу использовать такие сокращения например я написала название этого и нажал tab и у меня сразу сгенерировала структура моего тега это открывающий так и закрывающий так то что находит смотреть также называется контент ник и его меня появился у меня появился справа это вот тот сайт который повышается слева это код сайта вправо это его производные производных года поговорили про теги мы изучили теги я стал пробеге и матч право т. к. и еще про так div 3 привет сушильные машины у тебя сплин выключи плит iphone потому что я перед ничего не слышал во-вторых мне кажется быть начат другим ребятам если иисус то щас посмотрю в чат может потому что сломалось экран только мудрить слухи реально зон слить я загляну seba так часто мне кажется нам запишем и в какой-то момент я думаю перемещусь на youtube расстаться и вот но вне оплаченный зум я оплатил но он конечно вообще не супер удобные для того что я делаю и основную попасть мне очень стыдно значительным технические к сети тора такими шли понятно чем шире цене привет ребят я увидел у кого теплый из тех поторопить слышишь приказ я заново раз шариком сереженька за счет в прессе может быть то там ты настройках цвета нормально разрешено строил это зонт ветеран всего видно или небылиц равно съедется час или перины что неудобно любят можете давайте в сладких что даже не могу открыть но супер хорошо если вдруг штаны напишите мне взлом или если у кого-то есть моя программа пришлите в telegram если вдруг будет прекратить и покажем что сложно

даже i'm sorry вещи вот этак на предыдущем занятии ночевали и те кто я рассказал еще клеит информацию можно искать это mtl это википедия pro bib разработку компания mozilla у неё есть русский язык я думаю если у вас стоит по умолчанию русский язык браузеры для кого есть язык проблемы отправить русская версия английская версия несколько больше он где википедии он наполняется людьми разработчиками и здесь есть куча этих статей prada bag начинаете здесь например можно написать h1 например какой то тогда и здесь сразу будет такая большая классно статья про конкретно что может делать как он работает и вот в таком же формате код и как он будет выглядеть по умолчанию вот это его мне кажется главное главные ценности кого совет вот поэтому то есть таким h2 которые будут органе магнит и это все есть h 3 4 это все теги по умолчанию и поэтому стиле кадр они задают это стиле по умолчанию мир ссылка суда по умолчанию она синего цвета имеет подчёркивание и у нее нет примерно наверное 14 пикселей размер текста еще я рассказала про так div это универсальный д его используют тогда нужно наклонять что-то обернуть я рассказал про то что теги бывают двух типов линейный мощный д. г. если мы сделаем я ссылки что нас есть контакты давайте словно главное бывает если мы поставим ходе на каждого новой строке то они пойдут строчку потому что вот из этих двух типов которых бывают сетапе а это ними так линейны значит что он занимает ровно столько места только нужно чтобы вместить контент что такое контент тигр контент тега это то что находится внутри тега то есть размер этого тэга будет равен ширине слова контакты да размер этого так как будет равен ширине слова главное в этом отличие от например от тегов заголовков тег заголовка по умолчанию занимает 100 процентов своего контейнера вот мы сейчас не видим код п начну даббинг он очень удобен с него классно начинать обучение разработки потому что вот то что все отображается здесь он не показывает часть не показывая часть кода на самом деле вся страниц любого сайта видимая часть любого сайта она выглядит на самом деле вот таков она находится в воде все-таки что ничего не изменилось вот сделать для того чтобы показать что вот так блочного типа он занимает 100 процентов своего контейнера что такой контейнер с простишь контейнер это этот ток это вот понятие которое можно часто встретить это не то чтобы это какой-то технический термин это такая абстракция контейнером обычно называют что называют над этим который называют что то что содержит в себе что-то другое поэтому так и с тегом контейнером обычно называют который можно другие теги то есть например я могу сказать что так боги является контейнером для всех вот этих вот тегов поэтому вот так заголовка он занимает 100 процентов боги абаде это самый такой начали дек поэтому он занимает 100 процентов место нашем окне в окне нашей страницу именно поэтому он будет занимать что процентов ширины и каждый из них будет идти на новой строчке то же самое с картинками картинки это линейный так и поэтому занимательнее

будут ровно столько места сколько занимает картинка в картинке всегда есть параметры это ширина и высота статья картинках картинки то таким уж и мы еще поговорили про то что у тебя бывают дополнительные параметры и это все что нужно знать об html языке html дополнительные параметры так и называются атрибуты и они записываются в открывающие в открывающей части т. г. и у тебя имидж есть атрибут src него записывается ссылка на изображении вот сейчас мы на третьем или четвертом занятии мы уже будем делать сайт редакторе кода делать его у нас на компьютере не пользовался ими пользуемся под феном мы вынуждены использовать какие то что у нас есть самые частые картинки которые используя получения по разработке картинки готов и не то чтобы конечно этот любите котов и для котов люблю так вот и кстати акций припал что изображение от ставилась таком формате я ведь не самый классный формат и не будучи по ним рассказывать чтобы взорвал голова будет поэтому я еще раз картинку найду какой-нибудь для того чтобы найти картинку я нахожу левую картинку на любом сайте нажимаю левую картинку правой кнопкой мыши и копирую адрес картинки обе имидж локейшн у меня браузер firefox глаз браузер chrome может быть сафари это может называться по-разному атака иначе каждая картинка она хранится на каком-то сайте и она имеет какой-то путь потому что ну вот картинка это файл да как файл у меня на компьютере либо у вас на компьютере они и где-то хранятся вот например у меня рабочий стол на нем куча скриншотов и если я betula alba скриншоты если я открою свойств в любом скриншот у меня будет путь этого скриншот пусть у него будет год он находится на жестком диске на kent hd users can hear of disco ну и так иначе если правда понравилось какой-нибудь диск c можно проследить путь до любой картинки вот у всего вообще в компьютеру всего есть у всего есть свой адрес в этом рассчитаю в программировании нет бомжей серсея все имеет определенное место жительства ужасные шукура копии mesh локейшн копируем адрес картинки и вставляем его в программу объект найсу сломалась поэтому картинку я вставляю в атрибут src добей манш картинг стал очень большой потому что ну вот такая картинка она в своем оригинале занимает и настройка место наверно там она вот кстати тысячи 800 до 1200 пикселей может добавить еще один атрибут и вот эти образом это противник поменьше атрибут называется вы например 200 будет 200 пикселей я на тебя здесь навечно все вопросы можно написать в сладком специалист канал для вопросов и вот всем ребят здесь вопросов пишите в telegram пошлите какие то вопросы то все сломалось стене работает в либо срочно починить кидайте вопросы флаг и тот момент я буду двигаться на них отвечать вот и он сам добавляю 3 буду выть мы уменьшили мой мишка картин кого да и потому что картинка это линейный так-то оно встало на одной линии с моими ступнями теперь вопрос как сделать так чтобы не пролить расклад на прошлом занятия тут даже съел домашки у меня две картинки как используя те тэги которые я здесь сделать так чтобы вот эта картинка

давайте принесу их вниз чтобы эти картинки были на разных строчках друг за другом есть идеи решение простое использовать те тэги которые мы знаем никаких плавок тегов смотреть решение следующих надеюсь здесь есть проект решения решение следующие для этого нужно блочный перк div сделать контейнером картинки дейв это блочный т теперь картинка spear div является контейнером и получается что сам этот так div он занимает стал процентов и в него вложили картинку то есть вот эти теги div а никак не знаю и как папочки как полочки можно про них так говорить поэтому этот простой это простой ответ на то как сделать так чтобы линейный ток расположить на самом деле друг за другом мы просто используем другой так этот прием он используется постоянно его используют везде потому что если мы откроем вот любого сайта про так вот смотрите кровь любого сайта и расскажу в настоящем горячие вот мы так и дальше мы видим то что большинство тэгов из которых сделаны сайта это то где он не имеет уникальных стилей и он как такой минимальный строительный элемент для сайта такой кирпич который мы можем разукрасить сделать разные кирпичи разные по размеру по следу по форме вот из них уже сделать сайт и в них уже вкладывать то есть наверное кирпич не самая лучшая налоги она так или иначе вот такие вот папочки да если мы говорим какая-то башня вот если есть три книжки вот и они все разные не всех разная ширина и высота вот и как бы это вот та же самая очень похожи на структуру любого сайта у нас есть какой-то такой миф который подрыва желтый фон у которого сюда допустим 200 пикселей есть вот такой у которого розовый фон у него высота допустим 50 пикселей есть вот такой у которого уже внутри находится там 33 элементы и каждый из них тоже какие то есть текст внутри каждого тэга и позволяет нам расположить вот у меня такая аналогия вас может быть своя поэтому мне кажется будет удобно каждому привести какую лишь для себя свои ноги наводить но приводите налоги и это важно чтобы просто голове потому что тема сложная и она не понятно сразу поэтому если он сейчас что-то непонятно чего страшного самый лучший способ проверить вообще будущее то все это попробовать что-то сделает игру проводит урок сделать домашнее задание это самый такой типа классный пример потому что всегда важна цель делаешь какие-то абстрактные картинки кошек и полная чушь это не работает день не понятно что ты делаешь в это домашки будет цель вот и важно будет сделать ее любым возможным способом это тоже важно потому что способов создания сайтов способов робот можно решить какую-то конкретную задачу с помощью html css их 1000 огромное количество и нет какого-то правильного есть критерии по которым можно оценить например скорость сайта его работу на мобильных устройствах для этих факторов и критериях так много что нельзя точно сказать что вот этот сайт сделал правильно и вот самое главное например для меня я как оцениваю если сайт вообще работает открывается и человек может получить информацию ту информацию которую он пришел и эта информация легко доступна то есть не знаю какая то контрастность она соблюдает черный текст на белом фоне сочетается не все понятно еще не ребята тоже важно не теряешься на сайт куда ты понимаешь где ты находишься и как тебе найти то зачем ты пришел это тоже важно но это тоже отдельная история возник во время asking есть вопросы вы можете а следующий пластинка это

у патрика ули приколе очень талантливый я музыкальный продюсер который умер 34 года от ядра вот на такие начнем прямо вдохновил мы еще оков и например мадонна кучу всего использовала того что он сделал олей дул называется dark андрис очень крутые либо один из любимых лэйбл af он занимается тем что они находят какие-то безумные груды истории прямо как бы копают а конфет вот эта пластинка это они всегда сопровождает историями нормально первые работы патрика кроули он делался он треки для лыбу была фирма фокс и делал музыку это чуваки они нашли как бы это все закрылось давным-давно они нашли кассеты нашли вот эти большие бабины оцифровали все это пересмотрели кучу материала и ушли пластинка классная альбом super потребовали дорогин 300 же крутые чуваки его них уникален для какой-то всегда в качестве материала вот не наверное нет смысла давайте так если будут вопросы можно писать в чате и вообще трон я не кайф еще очень красиво классная просто на их сегодня разберем отброшена если будет вопрос напишите мне кажется идеально для того чтобы и по крайней мере это можно посмотреть подобным вот ссылку с машиной дин идем дальше начнем с того что давайте вообще разберемся процесс с это был рик об еще важная вещь очень важная вещь я сейчас вернусь домашки многих ребят это заметил и сейчас объяснишь них покойных ребят заметил историю ссылками вот например здесь мне кажется изменилось ты прям в этом наверно работаешь я понял да делайте новые планы сохраняйте свою работу потом будет если вы продолжите то делать какое-то время будет классно вернулся и посмотреть вашу первую работу поэтому не удаляйте сохраняйте это прям до громкой потом вернуться через steam через пять лет посмотреть ваши первые работы я хочу найти сайт не сестра сделала сайт про ленина я и говорю что слушающему лечим господа что они часто истории про будет виден на что не похож на тебя решить правда похож смешно я покажу прям здесь наверно какая-то ссылка и что даже прикольно каждый pn будут тоже крутая особенность это же принцип интернет на принцип работы интернета что он всегда доступен это в этом отличие от программ когда-то сделал программ запрограммировал написал код программы программировал программу то твой год он скомпилировал ся в код понятным процессору поэтому его нельзя прочитать ну то есть если я открою код программу любое там будет единиц 0 или что то еще я не смогу понять когда ты делаешь сайты пишешь код который понятен браузеру и я ташкент скрип и он понятен мне приятен вам ведь любому человеку поэтому его можно открыть взять скопировать изменить продолжить скормить себе вот в этом вообще супер классное преимущество потому что у меня плохо вообще sand азии мне сложно что-то придумывать поэтому я очень бы почти готовы его менять это моя такой мой рецепт успеха так рассылки поэтому именно действия могу добавить какой то вот ссылка добавилось google и ничего не пришло потому что нет ссылки молодец

адрес ссылки как добавляем ссылку мы в атрибут в открывающий тег тогда мы добавляем атрибут грех и записываем адрес сайта на который мы хотим чтобы пользователь перешел когда он нажмет на ссылку в этом случае это будет аж так он и контентом тега является слово google и что самое интересное вы можете использовать свое как контейнер в этом случае если я картинку оберну так а у меня картинка станет ссылкой и слить это видно ну картинка не загрузилась потому что прям по 4 ну что-то видео это алис вот так или иначе в левом экране во всех браузерах обычно тебя показывают ссылку на которой ты будешь переходить если мы не можем ничего не произошло вообще какая-то ошибка вылезла почему это произошло потому что это особенно из-под pin-код по и ну такая хитрая штука такой хитрый сайт который делает сайт внутри сайта то есть вот это сайт и его кто сайт как пена и внутреннего он читает твой код который ты пишешь не на виду у тебе и генерирует еще один сайт внутри твоего сайта технология называется айфрейм про неё можно почитать вот здесь но часто вот сейчас ты используется реже но раньше это использовалось повсеместно вот такая штука то есть у меня сейчас это использую например youtube самых плат какие то такие вещи какие-то вот их называют виджетами виджеты часто используют oriflame на не всегда например если мы нам нужно ставить карту то тот код который мы скопируем на ютюбе там скорее всего будет айфрейм вот любит вот так что прям сайт внутри другого сайта и раньше использовали частью но в какой-то момент появилось очень много фишинга и очень много атак на конечных пользователей хищник это когда кто-то делает сайт похоже на другой сайт например есть от банка и кто-то сделал хакер хотим сделал сайт похоже на этот в банках и я бы на у пользователя пользовал пользователь гол свои данные фишинговый сайт хищника слова удочка рыбачить и поймал на живца вот и иногда использовали с вытянутой фрейка на банке словам бориса и доставляет не хоть фреймы и тем самым люди платили свои данные не на сайт она и край и общего попадала не все руки вот и именно поэтому здесь не работа такая что-то потому что это вот не совсем как бы это сайт но есть еще у того как работает айфрейм и у него есть свои особенности это такая супер прыжок продвинутая тема я хочу про нее сейчас рассказывать как сделать так чтобы сумки ссылки работали над фрейме соки работали под принесет это просто нужно добавить в таргет равен откроется новые вкладки и это в принципе очень удобная и полезная штука я например люблю которые открываю они открываются новые никто из самых да именно правый вот что я обычно я зажимаю кнопку карман дайте зажать кнопку полном либо конкретного windows сайта будет скрываться новой вкладки и обычно смекаю по сумкам и оседает у нас the party за жанну но в случае если мы направили к любой ссылке атрибут равен план то теперь сайты ссылки будут открываться новых парке а если я здесь не к шоу теперь скатился новые фотки вот это такая чтобы достаточно удобная важно и чуть чуть давайте расскажу про наш проект которым будем делать так и кстати я

пропустил выпустил то что хотел сказать вначале что вообще чем поговорить процесса выскажу процесс с что это такое это стиль для сайтов если мы говорим что html структура сайта о помощи стиле мы можем эту структуру как-то называть расскажу селекторы как выбирать мы с помощью селектора выбираем нужный и определяет потому стиле таким образом получается сайт у нас есть много разных видов с помощью разных стилей нас может большой стиль который определяет фон цвет текста размер текста здесь это такой будет большой блок стилей и он может относиться только к бегу и вот селектор определяет такому как он относится сегодня про розовый серебра цвет фона размера и он богаче барр все чтоб не относится про фильмы наверно прямо сейчас начну мне кажется даже цвет не ложь два часа но давайте я начну прям самого начала я открою из то что три экрана конечно supersu набор ну ладно я сейчас открою фильму режиме инкогнито вот если вы никогда не открывали хельмута у вас примерно чтобы такое должно открыться что следует сделать дальше здесь классный windows про фирму по чести умен. дизайн системы и у них есть блок и они рассказывают про то как они работают продукт и делать его потому что фильм это первая счета сайт и это сайта друзья. наверное один из самых таких это прям сайт рокет сайенс то есть он из используйте все а санкции технологии и поэтому получилось сделать такую полноценную замену не photoshop но как со всеми этими функциями которые были фотошопе чтобы делать приложить чтобы делать прототипы это было удобно делать вот сам у нас получается полноценная замена приложение типа photoshop типа этом sketch а например но только в браузере и есть преимущество о том что это работает быстрее ну что браузер потребляет ну в общем да это работает быстрее чем photoshop несмотря на то что на ваш компьютер photoshop тоже обновляется not я помню что там десятом году 2 макбуки для photoshop тормозил какие-то моменты не всегда нам тормозил нормально и даже вот сейчас у меня компьютер 18 года оставил он стран тормозил и это конечно абсурд тормозит в этом преимуществе она даже работает на айпаде что тоже классно вот поэтому все что вам нужно сделать нажать на и я вот использую аккаунт гугла поэтому можете но кого нету можете сделать свой вот я пока расскажу про наш проект я даю нажимаются на google и дальше перехожу на авторизацию вот меня есть два аккаунта есть рабочий и есть личный для писали использую просто разных браузеров firefox личных целей chrome я использую для chrome используя рабочих что мы сегодня будем делать сегодня им скучным занятием появилась идея сделать сайт у ректора есть кратеры есть много друзей классный который ситуации люди поучаствовать создания этого проекта сейчас да никак не делиться какими-то вещами да понятно что сейчас все чем занимаемся временно самообразование

короче человеке крутые на есть архитекторы есть принцип жизни такой микро блок не грани комедия платформу заливать звуки моя задача это все отобразить весь каком формате вот такой план поэтому сразу расскажу здесь есть сейчас просто скажу а потом вернусь и понимаешь меня алексей что там нет 3 6 4 монитор для того чтобы просто отображать все сайт на ipad на нем управление трансляции можно переключаться между экранами очень удобно основной экран с которого я работаю и треть экран это проектор я его использую как монитор трансляции то что производили нормально 4 итак здесь вы зашли фильму ну что у вас какой-то будет новый вас примерно такой будут их по номеру посмотрим возможно будет другое возможно и не помню положение возможно вот так вами что вам нужно здесь сделать мы сделаем новый проект поэтому много если вам любом интерфейсе в принципе про интерфейс и бросайте все какие-то приемы они все очень похожи и поэтому вот него смотрит этот стрим срок поэтому мам не переживай не бойся просто стараюсь обращать внимание на повторяющиеся элементы они во всех программах более-менее одинаковые например если я хочу сделать что-то новое я ищу какой то плюс или там слова new важно не бояться нажимать какие-то кнопки потому что ничего не сломается вообще с помощью сайта невозможна подходить на такой вирус потому что сайты работают в сайт работы в браузере чтобы скачать чтобы запустить вирус сайты тебе нужно скачать вирус его запустить и тогда у тебя как бы что-то произойдет но в любом случае ничего они придают просто так никаких вирусов невозможно сделать с помощью сайта теперь в любом случае нужно самому мне пользователя нужно сказать типа да готов установить ok давайте популярно история кстати стен когда меняюсь начальной страницы и меняется поисковик вы что-то в этом роде вот это тоже происходит когда вы соглашаетесь на какие то действия странные у вас власть для кошки ok нажимаем еще не сайт которые имитируют интерфейс и при сложной системы и они нам говорят у вас вирус нужно срочно все не рвут вот это тоже это важно потому что у браузера нету нет доступа к вашей описал системы то есть сайт работают браузере поэтому сайт вы может получить доступ к вашим например файла сайт может получить доступ только к информации который находится в браузере а в браузере находится информация это история посещений это язык локаль то есть английский язык либо русские системы это что еще мне кажется это почти все но еще есть история с тем что целом есть вот эти вот метки да с помощью который вообще работает вся эта история с гуглом и яндексом но это такая отдельная большая тема то есть важно понимать что сайт ничего сломать не может и в принципе какой-то вирус если у вас есть цель написать места были сворачивать ничего не получится и так интерфейс figma фигура вот это окно всех проектов для того чтобы начать новый нужно нажать плюсик нас начинается на вывод 20 вас появится окошко и я вернусь в предыдущую предыдущие свое окно есть работаем дальше что здесь есть верхняя панель это панель инструментов здесь есть 1 этот фрейм то что могу использовать часто я использую почти всегда быстрые клавиши под кейн для того

чтобы сделать новый фрейм рф либо мы нажимаем да сюда и у нас выпадает в правой части правая часть она всегда будет меняться в зависимости от контекста то есть у нас сейчас фрейда здесь вот такая ножка здесь у нас другая менюшка вот поэтому здесь будут находиться конкретные настройки выбранного инструмента что такое фрейм это рамка вот это еще можно вынимать как папку так слой давайте попробуем здесь сразу поскольку фильмы это инструмент для удобного прототипирования сайтов и приложений здесь есть экраны но на самом деле это размеры то есть никакой логики в этом не заложено здесь это просто размеры и соотношение сторон то есть дар iphone 11 эта 35 на 712 это размер экрана телефона на есть планшет и вот 11 это 834 на что-то ещё и так далее мы будем сейчас делать сайт для прототипировать делать дизайн поэтому я обычно использую macbook pro и это 1440 на 900 это такой как бы вот пост получился у нас кнопки плюс минус на клавиатуре они позволяют масштабировать еще есть z а еще работают на тачпаде можно тоже удобно ценится вообще как бы фильмы такой универсальный инструмент что с помощью него мозгов орды все что угодно кто-то оппонент задачи и у него еще есть мультиплеер мне можно работать вместе еще очень большие широкие бесплатные рорти то есть скорее всего там и до 100 процентах случаях это покроется срабатывание на компании не чистишь крутые функции для командной работы ты машешь какие-то сделать стилю компонентов и потому что этих между разными файлами была дата очень удобно его за этого поведения образом они зарабатывать если около 300 паспорт на заработки заработок ани с помощью подписан вообще такой популярный сейчас формат монетизации продуктов когда у тебя есть какая-то большая щедрая щедро бесплатная часть которая покрывает 90 процентов ну что фрилансеров либо на людей одиночек вот и зарабатывает потом с помощью каких-то вот таких корпоративных лицензий но ребята вот эти вот 10 процентов для кого ты мог кататься носитель на важно окей вот и так я сделал фрейм с macbook pro 15 у меня все что получилось у меня нарисовался вот такой вот я перемещаюсь по всему этому окну с помощью пробела я сжимаю про дневника 45 снова нажимаю на лап принцип интерфейс лишь похож на все остальные какие-то программы для прототипирования создание графического продукта качество признаком поэтому корейские клипы например над фрейм у меня вот слева тоже да уже появляется настройки конкретного фрейма это размер этой почему такой размер это просто так то помогут и потому что сейчас чаще всего это вот 1920 1080 до этого самый популярный экран на десктопе это был размер 1306 на 700 608 вот но преимущество этого в том что здесь можно расположить допустим сайт будет вот такой всегда можно что-то примерно такое сделать дальше что у нас есть дальше у нас есть фрейм понятно дальше есть инструмент геометрических того что я использую часто это наверное rectangle вот это можно рисовать такие вот генетические объекты быстро кнопкой pen tool когда можно прочим ни на кого брали весьма логично кто знает их разберет дальше текст текстовый блок мы можем выделить все принципе тоже самое и также в правой панели есть настройки для работы с текстом это и

шрифт размеры интерлиньяж интервал строчные и не появления текста это все расскажу уже в процессе уже и еще наверное про интерфейс следует добавить что здесь есть вот левая часть смерть здесь показывать кто еще смотрит сейчас это то есть кому я дал ссылки могут судить об взойдет или тут будет показан и люди есть шеер это прикольно чтобы понять рассказывать не буду но потому что в работе смотреть это для прототипирования можем получить превью как типа будет выглядеть наша чтобы вот эта play как раз данная есть шер это для доступ к здесь можно настроить доступ документы можно травить ком косой и написать что там какой-то чувак может еще не только просматривает но может редактировать на самом деле поэтому часть когда дизайнеры первый макет разработчика просто даю им по умолчанию разработчик откроет он ничего не сможет поменять но он видит все необходимые параметры вот в этой панели справа что тут еще панель здесь есть навигационная панель по вот это наверно чем сравнить выпускником фотошопе из них нам блин борт и прочим это странице данного проекта может быть неограниченное количество страниц прикольная штука которую я стал не тогда но делать это делать обложку вот яде новый файл называют кого помещаю его наверх и сейчас я не помню точно сейчас скопирую мышцы скопировать у меня в предыдущем несколько раз параметры назначение параметров хоккей и не 120 прошла то есть из обратили внимание у некоторых файлов привил них есть такие вот обложки и это удобно вы пророчит и часто использую оставляет ответ на ну короче как это сделать я сейчас просто поменяю фон у этой странице того что он в этой странице доска текстами нём я нажимаю кнопку программ я допустим поставлю какой-нибудь сложно будет подобрать свет форекс но короче такой пастельный цвет взял и сейчас добавлю текст и слова виктор набрав байт прошли байконур съела лишь класс навигатор а у меня в этом нарушении при совмещении есть внизу слухи про которую я как-то будут именно они ссылка на убиваешь и вот здесь еще есть ну да я просто начну куда-нибудь в центр и таким образом у меня через какое-то время обновить вот эта страничка у меня будет как раз негатор отвода крана вот это такая такой для удобной навигации не что проект она закончилась и пока открою slug можете что-то написать лесу тебя тут было mp4 почти ли это не гифка он по 4 это видео а девка это то что имеет расширение gif поэтому она и называется гибкой анимированная картинка mp4 видео и просто как бы div эта картинка для того чтобы вставить mp4 нужно использовать другой ты на вот этот такая штука хитрая не подошел в нем нельзя списывать вот это просто прототипы и внешнего вида да это имя это для дизайна ты можешь процитировать и ты можешь сделать прототип может продать и в который будет работать как сайт то есть его классно показатель например заказчику клиенту это классная история то есть это прям будешь похожа на работающий прототип мне только айфона как кран для того чтобы были не iphone и у тебя справа вот они здесь в таблице ты

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

мне очень нравится это удалим что он больше не болеть по моему но здесь такие очень таким модные когда-то ехавшие сайты которые ну короче очень важно смотреть на будет объяснить но да здесь как раз гиды классные смелые гирин вот-вот можно тоже здесь свет но это только как раньше нора это просто можно долго очень смотреть задавайте бы логично тянуть что прикольно я не знала кого спасибо крутяк вы сохранить это можно по mstar deals него пару что раньше можно было ставить сообщение дошло сестрицы кстати да хороший вопрос про шрифты это у фильма есть приложение доступные которые такое точно как и сам сайт за диск печеньем что него находится у него есть организация со шрифтами и просто устанавливаешь пегматит чем оно есть на их сайт предлагает установить выбираю синхронизируется шрифты в общем с асей так в сгау next в общем с того чтобы я обычно делаю так я чет накидываю просто просто начиная с того что я просто что-то делаем я обычно просто пишу текст просто рисую какой-то рандомный кубики дальше уже начинаю как делать что тот гол и потому что я не умею делать хороший дизайне считается дизайнер считаешься смазывать его программисты и дизайнеры буду рассказывать про то какую какие такие вещи используя вот и в итоге как я с этим работу я например что-то накидал дальше я выделяю в этот нажимает по манси либо ну commander к матери копировала либо я зажимаю alt и переношу рядом и таким образом у меня получается такой шаг в какой-то момент я просто могу вернуться к предыдущему шагу и прошкина работа так происходит вот это про это просто party организовывать свою работу сложно заводить организации закидываю прямо картинки сразу сюда это сделано очень тоже удобно вы просто берете и перекидываете прямо на drogon дракон года не загрузи вот в этом случае фильма уже можно использовать как ранее знак аналог интересов дающему можно писать текст во и можно дать поэтому борт если мы делаем заказ на сайт и нужно покупать настроение можно начали с того что просто нагрейте и отправить клиенту клиент может здесь есть функция комментариев это вот последняя штука на можно написать что здесь хороший главное вот и это как зону получить комментарий от заказчика дальше но это в итоге всех этих моих сегодня утром я подумал что у меня будет такая история и почему и решил процесс смерти мальчик figma потому что фильме поскольку фирмы это сайт и то что мы делаем уже по сути является сайтом и уверены что через какое-то время может быть в этом году может следующем году а у фирмы совершенно точно появится экспорт сайты то есть можно быть и свой сайт и прям здесь то есть как такой как вот про дима и это прям не сомнение потому что это уже сайт вот то что мы уже сделали это сайт просто как бы он прочно они пока не сделали экспорт вертикально но уверен что это скоро будущем очень совершенно появится

вот поэтому домашнее задание у вас будут следующая вещь сейчас поставлю сразу чтобы можно было мне кажется начинать ним работать то что я буду рассказывать проекторы вы можете в это время делает свое домашнее задание домашнее будет следующая можно нужно были я бы часть меня блокнот и есть какие-то макеты вот таковы наши какие-то вещи рисую право здесь то есть это то что можно назвать фото чипом никак сам аид наглядно чтобы это вот такая тип такие вещи и первое задание в домашки это будет просто возьмите какой-то сайт который вы часто пользуетесь может быть хорошо с ним знакомы воду нарисуйте его макет видео прямоугольника да ты здесь я использую нужно писать текст не нужно подписывать картинки для текста я использую линии для картинок я использую прямоугольник перекрестный прямоугольника эти такие обозначение которые всеми используются какой то ни стало понятно программы бальзамик макс то мне кажется примерно вода 1 не просто рисуйте как fixed который играл хорошо знаком и это здание на понимание вообще сетки скорее всего из года крупные рисунки белья яндекса там какая то есть система скорее всего взаимосвязи между элементами дает какие-то постоянные вот эти вот отступы и самый лучший способ это понять это найти приличного тито поэтому этого задание можно сделать это захвати для этого подарка ручка и бумага вот второе задание вам нужно будет эту чтобы перенести сигну вот то что вы сделали ну прошло-то выбирай слова ли эту вещь теперь вы можете это поменять вот и перенести это фильм и наполнить его контент что может быть контентом контента может быть будет и ваш лично я не знаю микро-микро go микро медля если у вас есть подкаст если вы собираете музыку либо картинки да это может быть аналог товара вот попробовать что такое просто вот начали трясти этот контент используя полученную сетку легла сделать новую сетку используя вы можете наполнить контентом полученную сетку вот и последняя часть это зале встать за сайт поэтому присылаете такие любые моменты вписывайте канал наполнив канал замашками на канал с домашкой и вот а вот как же анимация если анимация фильм не тоже есть внимательно тоже есть и это называется процитировать вот вам можно написать что будет происходить такие вещи можно делать это чтобы простить если кликнуть если навести лера просто в начале и можно классно вещи делать про это можно где то почитать смотреть такая мера не использовать вот поэтому сейчас покажу какие то моменты как что нет чем я как вообще пришел потому что есть сейчас да это какая-то сетка вот и правила еще которые я использую которую вы можете тоже использовать вот мне не помогает потому что очень часто я пришел ты все из разработки это если начал делать сайта вот а потом ну то есть я был уверен что есть какие-то правила еще спрашивал всех моих друзей которые ледника есть или исследования когда можно готовить какие-то математические формулы расстояние от этого всего то есть шрифтов которые можно использовать чтобы быстро получить то что но то что приятно смотреть вот это был мой запрос но как то чет никто мне ничего не говорил селе вы скрывали или кто ребят говорили что уже не знает

как или что такого нету из а как бы либо рассмотрим нас ненавижу это слово тебе не могу вот и в общем вот я расскажу только что обнаружил те статьи которые я нашёл про все эти исследования первое что это сетка как делать сетки здесь если у меня есть начнем с простого хвоста цвету беру вот и если мы сделали новый фрейм давайте добавим фон он добавляется вот здесь есть вкладка фильм он по машине ваз белый сейчас вот нажал блеск у меня появился белый фон я добавлю сейчас серый цвет и возьму тот который вот можно выбирать цвет таким грузом есть классная история мне очень нравится формат это будет формат в машине формат вас либо rgb либо кекс наверно текст вот такие форматы здесь и польский формат который используется йога не очень нравится формат эйч sl он очень крутой при использовании генеративной графики он супер логичный heroes и creation всё это оттенок первое число то есть наш цвет это будет набор чисел 1 и чьи слова это оттенок хотя напугается здесь вот здесь меняется число то есть можно но понятно что мы сейчас на постинге оттенок не играет роль дальше у нас сочи решим то есть насыщенность менять видно что как раз на эта штука она ползет в породе google его здесь вот уже можно придумать какую-то аналогию если мы собираем световую палитру для нашего сайта то я начну с того что я вот использую палитру на основе вот основе этого формата то есть а просто яблоки и 60 какие-то 30 на какие-то такие вещи вот это супер удобно и войны свадьбу с отелем вверх мерки врач крутая штука сказал про числа дальше я набросал фоне слова допустим что такое тяготит выбрал потолок не нашли но из тех шериф так ладно я наверно час порт прошивки сильно рассказывать не буду я во первых проник я в этом всем профан в этом части есть ребята которые знают гораздо больше я был бы рад если ребят если вы захотите кстати принять участие сказать тоже что-то давайте сделать вместе как закон за кого базируемся если у вас идеи с лайки есть по 10 мяча для этого есть предложение вот можете мне написать личным сообщением до угодно вот я буду только рад правда потому что иногда помощь необходимы и нужны иллюстрации цифровые иллюстрации анимировать по графику даже видеть вот дальше выбираю шрифт шрифт выбирается в эту область я тут заметил родить внимание что рак только есть подвалил элемент он появился вот в этом fraina внутри него тоже какая делегации внутри окна дальше я подбираю размер шрифта вот как то так получилось где-то прочитал пару статей еще аксель о них не помню про волшебные числа ом году что 88 это волшебное число связанные с их на самом деле так и есть потому что я бегаю от компьютера к компьютеру науках все это обычный уличный кот и как бы число 21 он вот и короче 830 степени буду учиться погружусь буду них туда и ничего толком не смогу рассказать сна и стали в том что я выбираю размеры кратны и 8 иногда кратный 4 если нужно еще добавить и в принципе большей части это работает естественно какой-то момент я что-то даю дизайнеры и

он же этом заработке трещина в создании прототипа если использовать ту историю про родные 8 даже если вы возьмем все вот эти вещи типа вся 420 86 подсоблю нации 1024 да там iphone размером это еще и размеры экранов сам популярны до тысячи 24 популярных быть момент был размер экрана вот и чаще всего получается так то что размеры экранов популярных устройство не тоже кратное 8 не всегда но другой кратно вот поэтому это будет работать в данном случае какие-то такие популярные меня размеры это может быть 2432 что там дальше у нас так что самый 48 вот такие вещи играющий rift здесь использую шрифты которые есть кажется углу шанс не у всех у них есть керамическое начертание поэтому будь аккуратна если у вас есть какие-то жилами шахты то вам нужно скачать фильм моды кто и в этом случае произойдет синхронизации рамеш их там дальше его начертание если она поддерживается сам ним самим семействе я очень часто использую интер мне очень нравится интер она ездит phones вот и у него есть как раз разные использование paypal речь который ешь сделал для виктора и размер пусть будет 48 вот я буду дальше идет навигация навигацию на разных сайтах можно сделать по-разному это как раз вопрос про удобство есть вообще в создании есть таких два подхода и тогда мы делаем они отличаются от того как начинаем делать дизайн и есть то что называется model for когда мы в начале делаем дизайн куда реформа потому что экологически сейчас делать так потому что популярный и самый способ потребления контент в интернете этот телефон поэтому часто бывает так что начинать делать дизайн с того что делает его от телефон да у тебя есть content id и как ты его пытаешься расположить вот в этот фрейм с размерными фаном с размерами телефон и вот я в этом случае начал с листа по но иметь в дождь и есть два разных подхода и вот с в любом случае в какой-то момент скорее всего если вы делаете работающий сайт работающий продукт потребу использоваться совершенно точно придется делать дизайн и версия для дистантной версия для мобильного устройства вот в этом не помогают сетки на сетке сейчас расскажу на обычно стараюсь что я делаю это какая-то навигация ты кинул что возможно будет меня три страницы и между ними дуем как ты приключаться пока сам не против еще пластинки классные компиляции ритмов chance сайт magic так magic это такой digger ки джей с безумной коррекции и он обычно находит всякие самые неизвестные тебе редкие никто не слышал супер летной композиции использует своих миксах и какой-то момент договариваюсь права по стенку сборник тебе нужно со всеми чуваками говорить вот случае если это какие-то старые композиции твои сложно сделать потому что возможно там чувак с десяток записывал такие товарные позиции на исследователи никому не было нужно и так это осталось а через 30 лет а он

обиделся что музыку всегда-всегда в этом чего-то классные классный компиляции отлично настал клава наверняка будет огромное количество навигация я представлю что будет 3 страницы поэтому я обычно я учитываю себя здесь я использую быстрый club кнопки еще раз это команд просто к и нажимаю и что у меня есть дальше я прям обычно копируете все вещи на что у нас есть дальше друзьях можно просто перечислить всех друзей проекта бери сказать про каждого из не и еще у нас есть архив основная идея я предположу что может быть на главной странице то есть сайта будет не будет ленты и нельзя строить ты открывающий каждый день там какая-то новая ссылка вот возможно это ссылка про книжку со 2 частью старая книжка. возможно это материал про pin бауш что не стильно сегодня настя это основать этого проекта я посмотрел это полный улет такой быстрый чуть-чуть читер контент трели месяц боюсь даже назвать страну конвертации ударным который является дизайнер критик интерьерный дизайн бенуа подруг чуваков это тот кто любят на это что то невероятное театральные история это балет вот поэтому на главное будет какой-то материал и возможно картинку возможно немного текста я пока не подумал но вот на данном этапе виде прототипа это полет по там это можно отправить будет настя она комментирует и можно быть следующей фазе азии разработки обычно что еще делаю фильм очень крутая тем что здесь есть компоненты и вот в какой-то момент фильма и вообще структуру здесь тебя здесь у нас становится нереально сильно похожи вообще на структура ешьте то есть очень если из леса сделать классно то вы как если вы кондитерские с разработчиками то вы очень здорово облегчить жизнь разработчик расскажу про эти сейчас вот первое что использую компоненты смотрите если я предположил что вот это у меня будет ссылки но нужно ещё понять что ссылки будут скорее всего двух видов до обычно есть да на сайтах есть интерактив меня есть просто просто ссылка да есть еще наведение посылка вот я подумал что например у меня вот это будет статичный момент я по этому назарову допустил link вот я еще сделаю соль которая будет подчеркиваться как сделать подчёркивание фигня у фирмы есть в разделе для работы с текстом есть три точки вот здесь можно уже штуки сделать например подчеркивание ребра капс суперсеты вот ездил подчёркнутый я и есть я придумал что при наведении ссылку можно подчеркивать как-то показать это можно показать что во первых здесь написать кого еще они рагу делать первые использовать боже некоторые ребята прямо не любят мои рыбы что же можно сделать я использую такую штуку я увеличу размер

беру подчёркивание вот это используя не вязание просто доказать что мне очень нравится всегда не было мне конечно очень довольна 40 лет придумал еще что еще есть обычно всегда к навигации есть активная страница то есть этот текущий страниц если мы придумали что вас будет три страницы то нам обычно как то можно выделить и кучу страницу вот поэтому обычно второстепенные странице я тогда потеряю добавляю болезнь какой то процент а белого и можно использовать цвет да но не лечащего используя дать проработать не будете белых форме беседы естественно будет примерно в другой серии себе но чаще всего особенно в таком формате явно сюда вот и в этом случае у нас есть получается друзья вот и все они вместе и получается эта штука это будет не активная ссылка я могу добавить ногтик назвать его а дальше у меня есть линк avr и на самом деле нха вряд ли будет и неактивный сок потому что у меня если буду наводить на эту вот мне активно у меня лихачество прострел тоже самыми поэтому я их назову даже не хаммер зароет троллинг про наименование я использую не совсем в чем есть такая история называя себя это система наименование файлов конечно не важно пусть будет пока чего система наименования которые придумал индекс расшифровывается как блок элемент модификатор очень классная штука и я придумаю дорогу для того чтобы яндексе работает куча разработчиков очень много и важно чтобы все эти разработчики когда не писали код они придерживались 1 методологии разработки есть них были правила и регаты например делаешь прототип дизайн как ты именуешь эти файлы вот и у них появилась система для наименования этих файлов она классно она работает некоторых моментах оно сложное для понимания мне понадобится какое-то время штуки явно реально начать использовать и она крутая мне она очень нравится она действительно помогает избежать хаоса некоторых моментах и ясность в код как она так оно используется у нас есть базовый элемент в этом случае называется линий мой базовый это было то что называется так потому мне идет модификатор модификаторы это инактив либо актив и они отличаются на самом деле как они пишутся если у меня блок это просто лин модификатор этого блока то есть например не активно это пойду модификатор который меняет только внешний вид. зимняя саттон я конечно супер рассказчик бывает выпуска сочи вот они придумали что они будут использовать 1 подчеркивание и допустим у нас сейчас не вернусь вещи про эту карточку это может быть качество товара в данном случае у нас денег это вот такой элемент которого есть картинка у которого есть заголовок да он старается тоже здесь вот здесь контент они одинаковые сюда катенька если ты сотового вот в этом случае блоком будет являться мой карт вот здесь вас болгар заголовок будет называться карт два нижних подчеркивания это тоже самое с картинкой эта картинка она находится внутри этого элемента да мы можем дней определить написать

определенные стили то есть какие то это может быть ограничение по размеру либо придумать фильтра на нее то и такой стик что они будут все черно белый я могу наложить черный фильтр но вообще или же не вложения используют и как раз в этом есть отличием что сам по себе он не живёт он живет только внутри этой карточке если мы использование наименования когда делегация среди элементов как и дизайн-макета так года она становится очень простой очень удобный то есть не важно где то где-то казался ты всегда и поймешь где ты находишься и что тебе стоит изменить потому что когда на самом деле одна используются дальше программирование это придумывание названий например придумывать назвать название для переменных придумывания звонят с 1 класса тот это как прием который использует чтобы избежать эти проблемы название вот у нас есть 3 и теперь я готов сделать блок навигации как я сделаю блок навигации я расположу их пока просто все рядом я вот у меня есть поток это будет обычно кстати да ней все вот эти какие-то рабочие вещички и штучки я хорошо за пределы хайма и работаю прямо так какой то момент когда я заканчиваю работу я переношу их весь все вот эти вот такие рабочие вещи при начале в отдельных фреймов называют компоненты на момент работы прям как работает вот у меня будет отдельная сока и будет получается 2 неактивных случае ну да бывает удобно называть прям в названии хорош неактивных ребенок здесь я сделаю выучивает теперь у меня есть вот три этих элементы которые будут представлять собой блок навигации поэтому я exeo сгруппирую и здесь кстати да важная вещь фигни есть какой-то кокса фреймов они очень похожи между собой но отличается деталях и как забегая вперед я рекомендую использовать файл а потому что какой-то момент я использовал группы и наткнулся на некоторые вещи которые мне больше поэтому я использую 99 процентов я использовал свои руки я назову иванов и делегация эту штуку я назову logo это просто название которое будет понятно не когда я буду приносить пакет теперь я хочу выровнять расстояние между всеми относительно новые вещи фигня относительно новой вещи о фильме это of the loyalty это то что сделала фильма добавим лаги и динамичности и добавила какой-то новый шаг на каких реальным уже сайтом как его сделать у меня есть 3 элемента которые я определил блок вот тёплой 6 то есть контейнер вот представьте себе штука 3 ссылки а вот кто-то уже начинает схватывать 3 ссылки и одни все объединены в один div вот теперь новая функция фирма называется are the loyalty вот я ее нажму у меня элементы волшебным образом уровнях и принцип по которому он выравнивается это css свойства здоровьем когда мы будем изучать css пока замечу то что распределение здесь происходит равномерно то есть у нас первый последний элемент встают у обеих кассах

обоим концам все другие элементы они распределяются равномерно и это его горизонтальный вариант можно использовать также вертикальной оси и здесь у нас можно настроить так же интервал между элементами цели зависит с такими сейчас также активно используется для презентаций так что это ваш слайд сделать шаблон а потом просто пока pais там делать много страниц и есть кнопки для быстрого переключения между своими next вот у нас появился огромный блок и здесь тоже правил 8 простое несколько например ну опять же было можно не усердствовать если вас все устраивает можно создать такое что я для себя такой я хочу чтобы своем прототипе все было кратно 8 по умолчанию сюда размеры на 16 человек усилий дальше у нас сейчас наш маркса тела когда я вот твоя японка поменялось что это у нас состоял of the wild не всегда работает если вы хотите испортить сложная структура сложность для всего сайта реклама для простых элементов для такого решения когда нас есть 3 элемента исходил это работает когда достаточно до пустырях я никуда кладбища скажу потом проект старый больше пока просто способами можно дает компонент я взрослый пирог компонентов эта штука которые можно переиспользовать очевидно что между сонный но он будет бери использоваться на всех страницах то есть навигация всегда найти все которых страницах был до дна и для этих вещей особенно компонентом но говорим что у нас есть там мастеркопия этот мастер это главный компонент мы делаем койку компонентов ягра я выделил в начале долгах свою группу нажива правит над камыше и выбрал три тополя сделать дыру компонент потом сделал кафедру компоненты туман церкви и у меня появился тепла пор для этого компонента они отличаются они всегда выделяется при этом цветом мастер компонентами новая иконка чем вообще преимущество давайте представим что у нас есть несколько страниц да это будет другая страниц друзья вот и теперь если я вдруг решил поменять что-то в своём прототипе например изменить размер у меня меняется все компоненты которые являются у меня какой-то момент в дизайне появилась новая новый такой термин в тех компонентов дизайн системы для компонентов киргизами и 2 для такие мощные штуки поэтому как называется беседования вот как это требование требуется хоть какой-то область этим сильнейшая что ты мог эти вещи просто делают собирать потому что вот эта вещь нам разработчики тоже крайне полезны и приседания сайтах то тоже это крайне полезный подарок и 200 одно место потому что меня наверно самая большая была более разработчики когда свой первый сайт не пришла ли дизайн сальдо разных вещах быстро достичь ее куда шагнуть в дизайне в армейский страниц да бывает

такое что когда все это делается вручную и где ты за меньший где-то нет где то там чуть подровнял где-то в этот момент мне как разработчику было непонятно что же является правильным вот как проекте вот размер 16 лет использую случае если мы используем компоненты и таких просто не будет важно использовать давайте быстро почитаем что там есть может вопросам прикольно я не знал и кроме правды гротеск я загрузил потому что мне естества но это мой аккаунт она у меня дома есть режимы наложения есть даже положение есть они находятся вообще секунду этого я сделаю блок вот он в настройках плеера вот у меня есть допустим какой нибудь кислотных цветов зелененький и режим наложения в одну посылку вот режим положение это вот наш танк за шагом да прогон спасибо вот это несложно погружаться сначала потому что прям огромные педологии использую для всего года для наименования файлов вот и есть я просила суд который такая является водным более отец поезда и чтобы смотрелось дальше конечно работает на мне точно не то ли пакетов в принципе сейчас не занимаясь фрилансом и но вообще если есть и вообще куда если кто-то просит делать сразу эту я хочу сразу билотти мне и вывески час вообще теме можно и портной и скетча. главное что подбрасывать мне было уже в чем сделать нам вообще куда я сейчас не занимаясь фрилансом много-много всего и работу я все свободное время я решила перейти дальше важная вещь смотрите у нас есть наш этот основной контейнер важно контейнер html контейнера здесь контент здесь лишь похож на мы здесь посмотри делая можете мая структура здесь есть сверху в контекстном меню текст блоки есть удобные режиме выравнивания они работают вот у меня сейчас находится мой блог на он находится на требуется и поэтому вот эти режимы выравнивание не будут работать относительно этого видоса то есть относительно своего контейнера вот это тоже очень похожи на турок работает вырабатывают сайту проводят с этим допустим на горизонтальный центр два слова достала пацанами ну это же самое например вот три первых это горизонтальная 1 правому краю по центру вот эти три эта вертикальная что оно значит дальше нас осталось картинка из головы так что бельгийский дизайнер вот важная вещь что в какой-то момент там не всегда удобно тебе нужно перенести прям вот в это папка лишь вот я обычно ли вы количество смотришь на меня смотрит нас здесь есть комментарии ты прям аж прям сейчас даже включил сетку вот я вроде просто как-то

беру и выравниваю если мне вдруг не хватает сюда что еще использую есть удобные кнопки это ком слэш можно скрывает эти панели слева нравится значит ты сейчас на что еще скрыть скрипит эти панели мне кажется есть неверно какой-то какая-то кнопка текст меню я использую быстро кнопку циля не знаю как к этому вернуться но это команд слэш у меня находится слева от эль драко запись в этом вот кому слышно скрывает все эти вещи какие-то используя это использую этот момент у меня уже типа становится с вами я могу что ты меня и то есть тут у меня уже похож на рядом с атрибутами сайт открыт вот это тоже одна из тех вещей которые мне очень нравятся фильмы что я делаю сайт находясь встречи короче вот здесь не могу уже как-то там настроите правильно вообще как с этими могу такие вещи на поверку для его да вот это вот такой тип 1 так дальше начинается этап сетки включить это тоже самое фонд рф слышно извините ребята если громко можно можете на обычно листья говорю команд в кино видел все это будет панк-рок дальше наступает режим это этап сетки как работает секты фильме сразу скажу что вообще секунды автобусы делать новый расскажу что есть не страшные сетки на питание леха есть покраски и сетки есть книжки про сетки немцы ли такая несмотря на какую подростка ложку нет книжка очень понравилась потому что здесь на самом деле просто здесь есть в общем то tireblack здесь куча разных примеров там сайт есть упаковка есть плакаты и что самое крутое под каждым из них указано спецификации сетки то есть не знаю видно нет но очень в этом блоке колонок какой мишка лоне вот-вот книгу спасибо мире вылетели вот и да еще есть в общем еще есть книжка хорошая на ваши какие-то книжки если есть вот ссылки на них есть нашими рассказы в общем сетка мы выделяем фрейм сетку можно применить его на фрейм здесь есть ноябрь и совпало яд может познакомились с настройками фрейма мы познакомились в явный я нажимаю плюшек у меня появляется такая вот сетка 10 пикселей это мне обычно не подходит я кликаю на иконку и меня и искре дар нора колонки какое любимое число и здесь и дело 8 колонок только меня янина встреч на центр и дальше я могу уже выбрать очередного колода будет там 104 например gator может быть 24 хотя я помню что сегодня заморочиться и посчитал 8 как бы это такая история потому что я вы супер в этом всем разбираешь и вот тоже кстати секрет что

какой-то момент я занялся преподаванием просто потому что я понял что это супер классно способ научиться чему-то через ты что бы рассказать про ты про это в общем больше и больше читаешь и больше ты делаешь поэтому если что-то выучить бумажки про это рассказать например набрать за это денег классный способ вроде ответственности не ты никогда не побьешь если 3 сотни. но опять же если вдруг где-то что-то говорил мне управлять раз я знаю что не смотрят очень круто ребята вот сетка до 8 колонок здесь находятся настройки закричал он и иногда бывают еще нужно то есть обычно не этого хватает как включить режим как его скрыть ишим отражение сеток это уже кстати на маке тоже это контру джей я принц скрыть и показать вот я в этом случае валяю сетку с кровью беды и уже начинаю сравнивать уравнивать проливать по сетке снова к пацан трюк из пациенток раз я колонки это дальше если необходимо то я добавляю еще одну сетку это ряды добавляют следующим образом зажимаешь плюсик кошмарные планку здесь выбираю нет алгебре вреда вожу 100 тип то в этом случае у меня появляется 100 рыдал в сверху стоп любого нибудь и дальше играю gator высоту 8 гардероб и в этом случае меня появляется да там такая сетка можно сделать например на 816 этого нужно чтобы вот выровнять как раз в эти расстояние потому что будет тоже удобно мерить как раз эти все расстояния бывает такое невозможно продумать все элементы дизайне бывает такое что разработчику это часто вот несколько лет такое часто уверен что многие просто вышкам приходится часто додумать какие-то вещи то есть но когда есть какая-то неточности непонятность вот в этом случае просто говорю например слушаешь давай сделаем так что все авто бы кратно 8 это естественным элементами допустим если нужно у меня будет вот это вот какой то центральный блок кстати хороший момент чтобы его определить во фрейм назвать его включается ну самый универсальный это card2card потому что карточка здесь назову это card 2 подчёркивания тогда подчеркивания потому что это элемент внутри блока элементами три блока определяются через подчёркивание модификатор который просто если через один и картину вот в этом случае стало понятно что вообще почему одна стоит можно назвать просто этот материал как можно назвать артикул дальше если мне уже нужно выровнять какие то же там другие вещи например если он увижу на перфекционизм это еще я начинаю править всем этим вещам вот на эту же такая какая-то закругленная работа вот нам так и насчет такие еще одни еще какой ты которые помогут вам какие-то вещи букет вещей уровень но еще могут разработчику потому что если об этом скажете что у тебя был словно вертикальные вертикально рост это будет такое вращая большое облегчение для разработчиками ну и большому как то

так то есть словно я накидал бы сыграть где вечно вот примерно про делся то же самое что показало сейчас вот и вернулся тесте пришел такому такой вариант есть какие то вопросы важно сейчас думать я расскажу да про эти вещи подробности материалов будет вести вспомни в основном это вот что у нас есть это брак он кажется да сетка вот спасибо как трезва dance элементов делаешь отдельных фрейм деля элементы но вот у меня есть два элемента я делаю из них 3 from section вот начинаешь ургант это по-моему да и то на обычные результаты да они подписывайтесь вот если скидывать сейчас можно взять нашла бы пошла округляться сейчас создавать у вас постинг это оркестра как а пингвин мощным и тоже классный ребята о них есть про нечести дельный выпуск вниз ваш сказал убогая вырастать вот в итоге мы сделали против и нужно но без него сверстать я сделаю новый план и нужно начать со структура я обычно начинаю сайте почти ларьков то там выступают с расходом джейсон не нужно поэтому я расследование я не буду наверно сейчас все делать хотя есть не так много информации может просто в целях экономии времени быстро накидаю основные вещи и потом покажу основные css свойства чтобы вы уже могли жить дальше экспериментировать я обращаю внимание на свою структуру то есть у меня есть карт есть мотивируя потому что мы только тьма вот у меня есть карты есть у нас и есть logo это такая не самые удачные истории я поэтому объединю вот это было элемента на своих фрейм и зову их людей и энергично ее тон извиняюсь никак властитель тогда вытащить из элемента вытащить из своим обычно покинуть следите внимание за вот этим вот я их на подсказки на рок на 7 лет хедер и нас я объем logo на это будет хедер да такая тоже важная штука что сейчас если я выделяю федор у меня показывается размер его правильно и вначале сюда вставил как для того чтобы изменить причинить размеры да я вот нажимаю такую кнопку здесь леса и stuffit даем станет рона подать размер но эта шапка сайта и она меня снимать

они возят я сейчас отключу тогда этот из того чтобы кайт для того что подключенного супер много девайсов и потом скину как выглядит так как выглядит трансляция на меня было переходник врача здравствуйте республика не подключено и негатив все эти вещи на вроде мне кажется все исправилось продолжим значимость на структуре я сделал шапку и когда ли составь и там по умолчанию тебя делает все размер поскольку есть сетка то я сделаю эту историю преимущество этого размера этой сетки в том что можно преимущество как бы такое простое решение для того чтобы сайт жевать увеличивать то есть мы ограничиваем просто по ширине ширина получается 1048 ширина снова моего контента слева справа получается будут просто добавляться полях поэтому давайте начнем с этого у меня есть header и есть еще карт и это не очень понятно что это такое поэтому я карт положил еще лимфой и назову и контент теперь структура сайта стало слышно понятный меня в моем сайте почему яндекс это главная страница это название главной странице любого сайте можно ваш тимошкина затем но я называю описание главной страницы на которой ты попадаешь когда открываешь сайт домены и я вот в этом случае федор один всё стало более менее понятно поэтому с этого и начну я сделаю как вообще вот у меня есть название есть название химия название фреймов да тут пока ясно только деньги да пусть у меня будет один тип 1 проглотив будет под контент это и что-то делать дальше есть такая штука как класса это учебный год и в этом случае я скопирую название классно право суда у меня будет получается пласт ядрах love panto в этом преимущественно больнице также потому что разработчикам уже будет понятно название класса про что такой-то свои сейчас пока это сам по себе его ничего не сделает это просто название плотной класс федор класс контент ничего не изменилось и вот так был div универсальным элементом дальность элементы типа ссылки картинка до картина 1 von универсальный он не имеет какого-то значения вот и с помощью класса я могу дать ему название могу придумать ему смысл так работ по нити только не поэтому в css я теперь могу обратиться этому элементу и я сейчас написал селектор пишется начиная с точки. и дальше название классный дальше после

пробела идут фигурные скобки сейчас напишу в этом месте очень делаю дальше после это дело не для фигурных скобки обычно все редакторы кода они тебе помогают поэтому если я поставил одну подобную структуру под например сразу не поставил закрывающими дальше что мне стоит сделать дальше я сразу ставлю нажимаю и в этом случае у меня еще такая помещу и табуляцию это такая тоже история удобные и наглядные внутри так называется селектором готовься чтобы наговориться стиль это стиль для кадра стиль мы напишем внутри давайте какой может быть новости программ давайте подумаем про размер понятно размер 100 процентов пока не сейчас мы будем писать давайте начнем с простого давайте начнем концерна это семей скульптур на прошлом занятии мы кажется псковском вы пишите название что так это может быть орел может быть семейства я не помню как с местом фэнтези переводится он декоративные курсив отечественные которые не используйте семейств раза хотя мне кажется бруталист веб-сайт сейчас может быть актуально ладно курсив и два основных сам царь и целях как вообще работает sarif это шли с осечками сам серов безо всяких мечел кажется гротеском поступи пришлось разработки я сразу их принял называть сервиса с засечками как сет работает поскольку мы не знаем готовить наш сайт какие у них общее шрифты пока мы наш рис жать не будем я это расскажу потом ваш но сейчас мы не сделали семейства и это значит то что вот это будет написан семейством из рыбы глен шрифтом из семейства с засечками которые есть у человека который откроет твой сайт можем уточнить хочу чтобы это был таймс допустим мне кажется этот акт а если можно писать без кавычек можно писать по вышкам мне кажется не справочник тоже будет работать я просто привык писать кавычках потому что css я просто кавычками потому что не нравится когда люди я без кавычек пишу славов отрыв нет пробелов то есть например там и дочка рио я напишу без кавычек и эта запись на буткемп сам-то что для элементов спасом кадр будет использован шрифт arial о нескольких станет то любой шрифт из семейства сиськами что очень странно и поэтому можно указать если ты которой шрифта нету будет указан можно написать например вот так вот обычно на ворота типично начали гельветика потом марио то есть этот шрифт если этого шрифта нет и так далее я напишу да если это генетика можно не писать можно можно остановить вообще вам sangsin и в момент когда например шибер учиться если вы на сайте указали отключив нужно какое-то время штук он загрузился и

показ будут грузиться нужных пошли с показать поэтому будет показан этот шрифт метро его укажите потом пополз дальше вы написали инсоляция со свойством или стене конце нужно поставить., точки, когда мере не встречается очень часто что еще можно указать можем указать фан-сайт как у нас есть кстати вот очень важно при можете особенно у нас есть волшебный копты код который показывает все свойства мы нажимаем на яндекс наш меня показаны все свойства которые можно использовать но тоже важно понимать отделаемся динамичный то есть он будет как бы тянутся работе хорошо на всех устройствах поэтому не на все свойства копья которые здесь указано в этот css код следует обращать внимание здесь нам нужен только фон потому что ширина и высота должна быть динамично да здесь мне просто не что такая будет всегда я такого не хочу а хочу что поменялось а это видит что скопировать скопируй программ дай мне износа steam для фидера теперь вот эти все вещи шрифт я почти не принялись не как всему сайту по этот бункер стала что все сайты они находятся в категории вот поэтому обычных css какой-то первый стиль это стиль для будем поэтому напишу в воде сюда перемещу по грамоты фон в этом случае у меня как раз применился план на всю страницу и так же шрифт применился на также для всех элементах то есть те стили которые напишу сюда они будут работать для всех элементов которые находятся внутри ну так приз работа css если мы например каждых среда камер внутри хедера поместим элементом то эти элементы получит стиле который мы послали его родителя и от называется расследованием важное слово которое важно запомнить тоже наполнитель программирование она использует тоже очень часто структура камер и контент внутри хобби у меня есть логотип есть он я сейчас дойду до да кстати такая тоже важная вещь можно быстро писать стиль можно быстро писать название класса если я напишу. я нажму так не сгенерируется сразу письма сумок и каким образом делаются все сайте вот если вы посмотрели год любого сайта основном это будут делаю спас на и вот поэтому можно сказать что строится следующим образом мы пишем структуру мы определяем классы для вот этих стоит для блоков на контейнер и к этим классу мы пишем стиле таким образом мы стараемся это блоке у нас был стиль она так прошло вот первая задача нам нужно этот на про центрировать и я не хотел про это рассказывать на 1 общество порог за эти процессы на самом деле теперь это мой accent я командир сказал просто лайалл что о своем своей работе очень похож на все со свойственным вот эта информация рай pharmacy он где я говорил что все блоки бывают вы обе либо точны или пленение это тоже верно вот теперь ti2 информации час третьем пиратские которая имеет смысл имеет отношения к ним обоим и то есть свойство которое позволяет изменить этот тип блока по просьбе идет и называется свойства не думаю travel

писать наверное ну ладно это свойство называется display: и css то что вы дела сейчас фиолетово называется css свойства а то что после двоеточие называется значением этого свойства то есть медбокс она имеет отношения дисплее этот цвет это цвет шестнадцатеричном формате он имеет отношение баграм бы эти нас логических они не отношения к функции то есть я не могу paypal и ставить баграм это не будет работать это будет ошибкой поэтому любые можно посмотреть в день и определяется туда типа потому такие всевозможные бывают значение ответ на вас и вы можете посмотреть возможности диеты может у меня есть найдут рисунки очень удобно я всегда использую начаты ни названия тега умножить меня будет три сути умножить на 3 давай так не режиме сразу три тогда случае я здесь вижу что дальше я думаю ему законченный танец через десять мы сделали flex бокс игру но это насолили человек лекс бокс работать как а вторая как таял нам нужно указать это будет горизонтальных или вертикальных и позвать способ барабаны отображаются они названия свойств я сразу скажу они не очень они не ли вас поминаются потому что они называются страны например чтобы выбрать выравнивание для элемента по горизонтали нам нужно написать чистки файл преимущества редакторах поле этого подсказки потому что свойство очень много не размахнуться заполнить поле никого нету я сейчас вкусный круглый близкий файл свой контроль я расскажу про долго искать ошибки на наверное где-то следующем году чейза на занятия но это то что приходится очень часто не зависит насколько ты пир могло куда ты всегда что боишься невозможно чтоб запомнить избегать резкого что есть стране который позволяет смотреть под любого сайта его про вич и смотреть так и стиля так у меня есть хайдер и занимает 100 процентов него есть нет и такие ошибки такие шутки не очень часто вы будете делать огромное количество ошибок и один здесь главное не отчаивается главное отметить ошибки правильно сказать поэтому в этом случае это называется xbox и же поражение так это посмотреть можно чаще

образом я обычно есть нужно что-то найти я пишу мчс и первая ссылка у меня будет потому что я как раз уточняю вот здесь есть всевозможные свойств вот flex изначально все сайты мечтали стабильнее тепла 10 1 вообще с того как какие-то сложные макеты металлист объектами потом появились да потому вот вы встретите если будет почитать и посмотреть есть ужасно термин который творится дивная верстка это кажется придуманный на русских форумов есть много форумов русскоязычные для красоту ждать какие-то вещи конечно бывают эти приколы переводы на lada kalina что начну с помощью универсальных вот потом появился flex и самый последний это гриб прикольный проглочу не знаю что такое руки горит эта сетка дата может давать колонки ряды и 340 надо. лекс уж простой он делает наш элемент он на самом деле работает для своих детей мы актуален так что теперь наш бог будет не блочным и нелинейным будет пик сам то мы не говорим что все дети этого контейнера него напрочь он станет резиновый он может тянуться я думаю это будет очень понятно но практике вот но так или иначе мы теперь можем еще выровнять его по например по горизонтали вот hero 6 flex а выровнять content to steve vai контакт выровнять контент по сандра по весь контент а что контента в кадре контент в хедер у меня это вот это те вещи dewspo сам на нем песочин да это то же самое как мастер тура здесь у меня есть и дыры в нем снах вот и наш у меня выровнен по центру относительно кадры это как сделать ваш css вот и я думаю да это был также лишь пинок как так сегодня домашнее задание по макетам на стресс актуальным вот ли от вас жду и сделаете насколько сможете сверстать его помощью уже классов и xs возможно какие-то свойства вам придется найти самому вот вы знаете где то искать это м. д. но опять же токсичность и литературы и технической литературе я нужно уметь правильно читать ей нужно стать художества литература я обычный сет правой я сразу прям еще по странице естественно если я как бы еще брать не знаю мне почитать на потом следующий раз это уже ты читаешь сверху вниз подогнали ищешь ответ на слова просто кусок полина вот это кажется все на сегодня я остановлю запись пытаюсь уйти из ума он травы секет вопрос еще можете спросить и сейчас вырублю всю эту историю стоп экрана вас человек этих 11 смотрю вообще есть если человек спасибо всем что пришли делать не знаю да маш

мне будет приятно если вы где нибудь напишите кто то я снимал в прошлый раз выкладывала 100 грамм спасибо вам огромное потому что в какой-то момент да я возвращаюсь на тип через год я хочу найти очки тагулы что было и в общем мне приятно спасибо большое вот поэтому не болейте тем