Дизайн и разработка: мобильный сайт с ссылками для Инстаграма c помощью Figma, HTML и CSS

ну здравствуй дружок рассказываю сегодня как сделать сайт для инстаграма куда можно разместить кучу ссылок а этот сайт потом разместить в профиль в инстаграме и человек зайдёт в instagram профиль откроет ссылка там куча других ссылок это очень удобно расскажу как сделать дизайн такого сайта фигня а потом расскажу как его запрограммировать помощь html и css вот такое изделие мы сегодня сделаем и поскольку мы будем делать дизайн оберни версии я выбираю фрейм который назван 11 pro x и первое что я сделаю я добавлю да я вот grid я изменю его на колонки однако лонг и я добавлю отступ двадцать четыре пикселя я люблю числа которое кратно 8 эта штука нам добавят кайды и отступы слева исправим это удобно дальше я добавлю links и сделаем его красным цветом немного увеличу размер допустим 64 может быть немного увеличивал между буквенный интервал а потом потом я все испорчу я переведу текст в кривые этого нажму комнате я теперь я могу растягивать текст делать с ним все что угодно издеваться делайте все что угодно можно вообще делать все это ваша песочница ваша площадка дальше дальше так чтобы он строг уберут свет сделаю красный строк и потом я просто увеличу эту историю и сделал его по центру у меня получится такая вот история после этого единственное что не нравится что я буквой l сделал не заглавную все отменить опять потом я добавляю подложку делаю серым цветом и отправляю ее вниз помощью кнопок карман квадратная скобка роман труба квадратная скобка и теперь я просто подгоню как-нибудь вот так вот может немного еще увеличится закрыть дырку но в общем делайте что хотите это ваша какой то что мне кружок увеличивается каждый раз вот в вай наверное вы должны пользоваться главным но по фигу тебе чтобы было еще выглядело максимально небрежно как будто бы мне вообще все равно и наплевать еще могу их двигают немного могу развлекаться как хочу вас призываю делать то же самое развлекаетесь относитесь к этому серьезно в этом это сесть к этому серьезно относитесь к этому как к эксперименту попробуйте сегодня одно завтра второе главное мне кажется чтобы вам было весело не конечно предыдущая версия нравится больше но чего имеем что имеем предыдущий нравится больше потому что она была вытянутым и поэтому на хорошо смотрелась с вытянутой этой истории может быть я немного уменьшу но конечно если час здесь можно до бесконечности все это делает двигать теперь нужно добавить фотографию есть говорят добавлением фотографии есть вариант неудобно есть вариант удобные рассказываю крайне удобный вариант я просто добавляю фотографию перед дракон перенес и она огромна и мне нужно будет ее одзу mich для этого я использую команд просто кара да есть в режим вот много есть режим скин когда ты режиме скилл и сохраняет пропорцию и это очень удобно вот это первый вариант и я добавляю во фрейм потом дальше уже как-нибудь там двигаю а

потом меняю порядок слоя с помощью быстрых но кнопок не вот эту штуку нужно выделить картинку вот все получилось второй вариант более удобный я рисую прямоугольник нужны не а потом с помощью кнопок аванс shift к я выбираю ту же самую картинку на майке это удобно сделать если просто вернешься сюда и он сразу и выделит это super hind чит-код и теперь я просто нажимаю прямоугольниками сразу выделился мне здесь удобно потому что не нужно каждый раз риса и сделать это изменило мою работу в тысячу раз получил движение карьерной лестнице поставок начал пользоваться этим нехитрым приемом следующие следующем нам нужно сделать ссылки первым делом делаем стиль чтобы это было похоже на ссылки что как вообще выглядит ссылки по умолчанию на всех сайтах это синий цвет и это подчёркивание по чарке не добавляю с помощью текстового слоя текстовых параметров фигня и decoration underline теперь ссылка немного нечитаемое чтобы это исправить я кстати могу скрыть и показать до еды с помощью control я добавляю дрожжи фрейм не нужно обернуть текстовый слой во фрейм для этого я использую сочетание общем команд джей и у меня принялся фрейм а для фрейма добавляю заливку и таким образом получилась красота следующая история у меня будет 32 воздух я вот эти две штуки более во фрейм называю его для удобства я фрейм называют лесным удобстве чтобы потом не запутаться и это будет список list links link list links lynx лист звучит странно но да ладно а каждая из этих вещей будет элементом списка лист лист лист ling ирина на английском не string лист аргумент крутая итоге получилось зачем я все это сделал я это всё сделал затем чтобы теперь превратить этот контейнер список ссылок нить of the way out что это мне дает теперь как только добавлю новый фрейм он сразу возьмет нужно остов которая тогда выстроил а теперь я могу его управляет здесь да я могу здесь поставить например 24 и это просто улёт это следующее моё повышение карьерной лестнице когда я начал использовать этот нехитрый прием времени сразу стало гораздо больше получилось записывать youtube видео нерабочее время дальше меня будет ссылки на youtube канал да как сделать теперь что вообще произошло почему у меня текста вот такая тут не такой все потому что у меня вот здесь такой штучки нету ресайз тусит этот элемент вам стало равен по ширине удачно пикселей тексты но все съехала почему съехала потому что не стоит выравнивание чтобы поставить выравнивание выбираем нужные элементы и уровню его по левому краю супер осталось последний штрих как говорится артист detail чтобы эту штуку и нарисовать какую-то свою эту непонятную я использую плагин который называется в фмс рф это плагин который позволяет стричь с разными параметрами всякие вот такие вот штуки здесь динамика ok и вот на меня нарисовался такой вектор дальше и могу просто его чуть-чуть chicks шик дело сделано как бы мы сделали дизайн сайта как его дальше можно проверить во первых что я рекомендую делать каждый раз когда я закончила какую-то операцию я делаю копию что потом вдруг я захочу к не вернуться и что-то типа добавить что-то исправить в общем и это всегда полезно

поэтому рекомендую вам это делать теперь в этой новой версии что я хочу сделать я хочу проверить как это будет выглядеть на айфоне 11 pro x мне понятно но непонятно как это будет выглядеть на других устройств давайте посмотрим устройство это будет выглядеть наверное вот так вот мне это не нравиться как это можно исправить во-первых я выделю это логотип в этом ну во первых я сейчас сгруппируем его группой назову это logo это фоновая картинка теперь я logo этот паз будет это будет б. г. и теперь я выделил логвин sllist я добавлю в новый фрейм и назову их контейнер зачем я это сделал за тем чтобы я мог настроить как будет вести себя этот элемент при масштабировании я хочу чтобы он находился по центру по горизонтали но и по вертикали пусть бы тоже пациенту давать это будет выглядеть будет видеть это вот так вот отлично неплохо следующее что мне нужно сделать мне нужно изменить пока она будет с келли сам быть стелется по вертикали и по горизонтали червь будет прибита к низу выстроит вы прибиты книзу и то же самое будет делиться не давайте посмотрим теперь как это будет выглядеть нового так это будет выглядеть и мне нравится как это выглядит дело сделано дизайн готов теперь переходим части 2 программирования сейчас мы сердило запрограммируем с помощью html и css простите меня за это погнали для этого я открою проект который я сделал на прошлом видео про делаю себе сайт разработчика и я здесь делаю просто новый страницу назову ее links я открываю гитхаба стоп нам несет проекты я открывает проект в visual studio куют отлично вот на страницу и на самом деле сдать здесь у нас только какая-то картинка и файл html я сделаю новый файл назову его винкс. html генерируем шаблон штатный знак это увеличу текст из винкс теперь структура теперь структура удобно вы будете лучшим другом разработчика если вы будете классно миновать все свои эти поспать и дизайн и но в общем вы поняли как бы из этого уже понятно структуры и потому что мы ее протестили в разных разрешениях и the responses responsive design он настолько отзывчивый что фу ой тут кстати вот маленькие косички да штук у меня в автово ялте супер сильно бесит что нужно каждый раз выравнивание выстраивать класса вы знаете что такое вернусь к этому я тут больше нравится кривая больше нравится и и логотипчик поэтому первым делом не еще забирают сюда все супер кстати есть такая штука что вот сейчас в этом макете я не могу выбрать нужно меняться почему потому что я заблокировал контейнер я этим пользуюсь когда я не хочу чтобы какие-то элементы практиковались обычно это мог быть формула изображения либо что то еще в общем я туда что замок он короче гликация или каца ничего не будет 9 рядов блога я сейчас слово вытащу пологая экспортного всв export sg совершиться как скейл был vector graphics что расшифровывается как векторная графика которую можно спилить который можно изменять размер мне нравится получилось мороженое очень люблю такие вещи но я не расстраиваюсь я отношусь к этому как фотографирование на пленку ничего не знаешь что у тебя в итоге выйдет я добавлю ее в папку media обычно хорошим считается правилом все картинки хранить в папке какой-то отдельный плат как вы назовете неважно это может быть в миде это может остаться это может быть и mogers по типу до в папке меди у меня будут меня будет графиках из меня были стиле они были был в папке например окей у нас есть

контейнер по структуре техно файле есть контейнер контейнера есть локон дальше есть лист я него есть листы элементы дальше у меня есть бага что мне еще есть умеющий деюсь чем ноги у меня есть фоновая картинка на значит на фоновую картинку я повешу для бодя я стиля буду прям здесь писать 1 у меня есть logo и влога я ставлю картинку которая находится в медиа слышь logo. svg и я сразу открою свой сайт с помощью дефов браузер и отлично сайт почти готов список я изменю на юлю л расшифровывается как он ордер tlist геев класс ли фредди-мен ну ладно это будет полезно вы узнаете что есть нативные элементы нативные стандартный элемент html которые можно использовать и их рекомендуется использовать потому что тогда ваш сайт вас ваш текст будет размечен у структуры более правильным то есть если у меня список то для списка рекомендуется использовать элемент списка ваш сайт в итоге будет индексироваться поисковыми системами и вообще обрабатываться системами для обработки тексты и сайтов лучше ребят рассказала как мог от души извиняюсь если вдруг непонятно у меня будет лист элемент класс да все супер здесь их будет какое-то количество на 3 него будет ссылка и так удобно переключать внутреннего бы 100 бил youtube чернилами прямо сейчас буду копировать это все grand и еще мне нужно экспортного тут вот этого дружка дружочку пусть это будет тоже svg не нравится что фирма стала экспортировать все папки то так неудобную чирк учусь и папок я называю не пасу своего корж что последняя слаще картинка ребят важно очень картинку и не буду экспортировать отсюда потому что начинает скорее всего обрежьте или нет или не обрежешься неважно и я картинку возьму из папки где она лежит у меня в папке с названием папка без названия вот мне лично эта картинка и теперь я ее оптимизируем у нее уже нормально решение единственное что ее у она кстати хочет она мало весь я использую сайт тайне png для компресса изображения чтобы мой сайт в последствии открывался гораздо быстрее рекомендую вам делать то же самое вот в итоге у меня размер изображения сократился на 73 процента то есть если бы у меня картину погрузилась например секунду теперь она будет грузиться нам типа меньше секунды это классно отличная скачал и точно также я добавлю сюда папку media и перминова ее бага кстати мне бага здесь нужно потому что мы договорились что я это наводим повешен можно начать со стилем боя ground имидж grow so is not это поставить grounds меня сайт будет покрывать это все ковер и бэкграунд рипит на уретрит background grown позиция центр и давайте посмотрим что получилось отлично отлично что-то получилось дальше в воде у нас есть доступ и иост у меня будет посмотреть сколько стоит сверху меня отступ здесь у меня он стоп сверху 11 пустыри

12 здесь 56 не критично очень хорошо 1024 сейчас у меня будет сверху 12 пикселей работать по часовой стрелке первое число 2 3 4 сверху справа снизу слева но можно сократить если они одинаковые то есть сверху и снизу справа слева дальше отступ об logo марджан потом у меня будет двадцать четыре пикселя и потом у меня есть еще лист еще есть элементы списка и заметьте что по умолчанию у меня училась следующий история что по умолчанию добавить маркеры и еще появилось кстати как стать посмотреть ребят как проверить на соответствие мобильной версии это можно очень просто открываю developer to us аспект и здесь есть такой режим девайс тулбар например iphone x вот так это все выглядит изображение кстати не растягивается потому что у меня html занимает не все пространство не всю высоту а занимает ровно столько сколько да ему нужно место очень часто я прям сюда что-то пишу могу проэкспериментировать допустим хайд 100 вы high-class работает я теперь это все беру копируют сюда копируя вот сюда теперь у меня он работает на всю катушку дальше стиле вот эти вот обратить внимание что у этого элемента есть стиле по умолчанию называется стиля по умолчанию для браузера ними для некоторых элементов они работают по разному на разных браузеров например формы кнопки сафари будут отличаться поэтому нам нужно убрать отсюда padding морджим и убрать еще листал type list all type list style type нам маршем 010 кажется всё ничего не забыл отлично теперь я это скопирую для моего креста отлично дальше в лист элементов такого парня у нас есть заливкой белого света бэкграунд по ground color white и еще у него есть отступаю отступ равен в этом случае 40 пикселей маршем потом 40 пикселей цвет синий можно кстати вот так все эти низ элемент абела что это значит точного этот стиль и получат все ссылки вич и элементы а внутри элемента с классами лист элемент в этом случае это сработает сюда применится стиль сюда пока не применится потому что у меня здесь не стоит элементы ссылки лист элемента у меня будет color blue и через decoration непонятно фонд можно использовать фотку inspect здесь прям показывается сразу все что мне нужно для css и вот здесь есть форма геометрия фон says in height ну и так далее кстати меняется прикольно круто и очень удобны это прям обновление не помню такого что было что прям нажимаешь какое интересное который ведет офигенны удобно и круто четко хорошо не росли здесь нужно только francaise и в исходе можно спросить вращение например фан сайт будет фаз или фазе francaise 32 пикселя тексте горящим надрываем он по умолчанию соки есть но опишу его еще раз почему бы нет отлично только единственное что мне не нравится что у меня заливка идет во всю строку для того чтобы там не было я сейчас попробую изменить на свойства дисплей умолчанию это блочный элемент это дисплей блок он занимает всю ширину контейнера в котором он находится в этом случае у меня в новый равно 100 ком занимает место поэтому я поменяю его на inline блок онлайн лайнрок лайт блок занимает место ровно

столько сколько нужно чтобы вместить туда свой контент плюс что еще после этого я могу например добавить padding например там 85 если то есть да еще немного его увеличить если не это нужно у меня добавлю внутренние отступы своему этому элементу понятно дисплей поменяем дисплей онлайн блог что у нас дальше они казались все сталь явлению потому что теперь мне не точны элементы это конечно нет конечно беда если честно значит что мои решения не работают поэтому в этом случае я просто по ground color перенесла отсюда перенесу вот сюда и это будет более правильное решение и в этом сезоне программирование невозможности это всегда метод проб и ошибок ошибаетесь вы пробуете пробуйте заново каких-то прямо в 100 процентах решений что в этом случае делает арка так но такого наверное нет я думаю что тот момент можно было решить огромное количество способов я еще сделаю первое что пришло в голову дальше мне нужно теперь все эти вещи обернуть в ссылке к сожалению не знаю какого то быстрого способа что просто текст оборачивать это было бы очень круто но типа не писать вот так утомительны чтобы самого кого шик меня где то ошибка есть потому что он выравнивает prev а открытую с открытой открыто закрыто открытие затем почему вы выравниваете а вот для ошибкой все вокруг их а еще значит остался пас добавить и умён в контейнере сидит контейнер заканчивается здесь выделяет активно телесным цветом поэтому три контейнера я добавлю керж мы должны не в контейнер и сидеть потому что контейнер и есть отступы должна сидеть здесь вообще теперь летела и не все так теперь с картинкой я поступлю о чем просто я сейчас скопирую вот эти все его значения это будет очень удобно что не буду ничего придумывать копим сейчас посмотрим как это будет работать барт родис мне нужен нет это все они то нет то количество абсолютный оптимизм с 1534 tab a701 вот он 32 ну может быть давайте проверим left to right окей вот та помню не уверен посмотрим как это будет работать и еще хорош и ночь быть пациентов чтобы он растягивался потом тренер по какой большой красиво еще можно такую штуку стой чем уметь при абсолютно позиционирование я могу добавить индекс попробует 0 1 никому идется все они супер класс он нашел подтекст это то что я хотел сделать что осталось сделать ребят осталось добавить выравнивание пациентами мирами пациента делается очень просто есть огромный крест из способов это один из вопросов собеседования этот разработчиков один из как в ранить элемент по центру когда проверяют названием или css очень много способов я сделаю следующий способ я не думаю что он сейчас не сломается у меня есть внутри боги есть контейнер и есть хор в которую выровнена абсолютно поэтому всё должно быть хорошо поэтому я сделаю дисплей гриб для боя play сайта мтс в и сайта мтс центр что-то что они так давайте посмотрю что пошло не так у меня есть бодик который grid которого почему-то какой-то странный вас тут появился либо этот вот этой штуки она разрывает или о чем и прикольно это вот такой вот интересный глюк или это все-таки друг браузеры до этого браузера все классно работает от q тут появляется в истории это видимо отключения да это один из

способов как это сделать очень быстро его просто контейнер в которой все это влажном и вкладной слой great place один центр то есть все будет пациенту стоять последний штрих осталось добавить сотен так в ссылке ссылки первое bio у меня будет вести на мой сайт сюда будет масть твой до его открыть и потом скопировать ссылку отличный обновил себя сайтик добавил новую фотку спасибо за этой женщине филатовой за прекрасные фотографии дальше youtube channel кто не знает ссылку на мой канал теперь я узнает где я скопировать вот это наверное так кстати классная штука это чтобы сути плевались не знала окна торги было young с нижнем подчеркивании чем разница в том что ссылки откроется новой вкладке вместо текущей channel работает telegram чину отличным лично храм плейлист это этом музыка и у меня есть плейлист просто сейчас скопируем сквайр помогает квай рынке ремонт для которого я делал фотографию классные фотки который я сделал но к сожалению я когда-то увидел я очень расстроился потому что сверху фоток нарисовали люстрации которые мне еще не очень понравились фотки очень люблю вот в общем рекомендую всем этим мистиками мы все опробовал и последняя ссылка это splash я его подзабросил но что классная какой-то момент туда выложил фотки из путешествие чего-то еще это 100 бесплатных фотографий после этого там какие-то фотки есть который прям очень часто используются какие-то на медузе были очень популярная фотка с котиком за компом очень верная фотка с ногами вот эту вот какая-то популярная водятся популярное не о том что мне кстати есть статистика вот у нее типа 2 миллиона короче все эти фотки бесплатно их можно использовать вот какой-то мент надо будет мне добавить новый фоток в общем такая штука тоже есть все работает все ссылки работают я только не добавил им атрибут чтобы открывались в новом окне чтобы не закрывали теперь осталось это дело добавить на сайт прошлый раз вам казалось все это дело сделано поэтому теперь все уже настроено осталось только добавить я напишу что я добавил страниц слова links which комету мастер и push origin все готово все просто работает сейчас опровергнуть или фоне меня смущает огромный отступ сверху и я пока не знаю а тень от почему нажимать при выравниваются по центру отлично я хочу чтобы меня вот до 600 пикселей это было бы onlineam а потому менялой на этом с по центру как это сделать это еще один стиль он называется медиа ни один screen and max быть мин-мин лиц 600 пикселей вроде война этом с что это говорит это новый стиль который сработает только для экрана и только если минимальная ширина и только начиная от ширины 600 пикселей только тогда сработает стиль давайте проверим вот ширина она сверху здесь и

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