Адаптивна верстка сайту з нуля для початківців. Пояснення дій + макет та результат. HTML CSS FIGMA

Адаптивна верстка сайту з нуля. Пояснення дій для початківців. HTML CSS FIGMA
👉 Макет (відкритий доступ): / 66123653
👉 Результат верстки (відкритий доступ): / 66123653
Верстати буду з самого нуля, тільки HTML CSS, також підключимо слайдер.
🟢 Курс по верстці: edu.fls.guru/
🟢 Інші майстер-класи: master.fls.guru/
❤️ Отримати доступ к екстра-контенту + підтримати канал: / freelancerlifestyle
❤️ Спонсорувати канал: / @freelancerlifestyle
❤️ Замовити футболку: forms.gle/Hzd25o5MYy6ZA8Rh8
Корисні посилання:
👉 Безкоштовний курс по верстці: • БЕСПЛАТНЫЙ курс по вер...
👉 VS Code: • VS Code настройка уста...
👉 Как правильно навчатись: • Как правильно учиться ...
👉 План розвитку фронтенд розробника (+МАПА): • ПЛАН РАЗВИТИЯ ФРОНТЕНД...
🔴 Мапа каналу: miro.com/app/board/o9J_lZB3YKI=/
🔴 Instagram: / freelancer.lifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстці: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
👋 Мене звати Женя Андріканич, я IT - спеціалист, займаюсь розробкою сайтів.
Посилання на канал: / freelancerlifestyle
🤟 Живи, а працюй у вільний час! ©

[@akelahasmissed2815]

Євген ви не тільки майстер своєї справи, а ще й дуже добра людина, дякую вам за допомогу.

[@pavelpavlovich4544]

вiн тормоз) Дуже повiльний и лсний)

[@playtime6318]

Вы крутий! Дуже дякую за контент, та підтримую ваше бажання робити контент українською. Я із Харкова, меня також важко висловлюватись на українскій, бо звикла до російської. Але треба трохи часу і все буде🔥 бо українська завжди була у серці. ❤️❤️ Шкода людей, які не розуміють, що в житті є речі важливіші за грощі та підписніків. Та і що казати, якість важливіша за кількість👌🏻

[@vadymhalka7157]

Дякую за все: і за матеріал, і за ентузіазм - а основне - за перехід на українську. Це реально ВЧИНОК, це ПОСТУПОК реально порядної, високоінтелектуальної людини. Я просто вражений!

[@Cherniy_Stalker]

Дивився весь стрім с 11, дякую, хотілося би побачити створення сайта с джавою рівня Junior) я думаю інші глядачі підтримують цю ідею

[@Vana_223]

Прекрасна ідея) В топ)))

[@user-po7ee7vm1t]

@@YaroslavKravets я думаю мова йде про JS

[@user-hy6ye9wk5s]

Приєднуюсь до вище сказаного😂🤔

[@user-zt7cb6zn4i]

Я підтримую

[@vs5140]

Отличная идея! Поддерживаю, обеими руками!

[@chronicwebdesign]

Дякую за матеріал! Сам перейшов на українську та всім раджу. Респект та дякую за корисний контент. По твоїм відео зараз в подвалі сам вивчаю програмування.

[@rianoneq]

чел он верстает так то, а не прогерит

[@rianoneq]

@@charlie8752 бро чем захочу, тем и буду заниматься

[@pfaifer85]

Женя, ти супер. Робиш велику справу, навчаючи велику кількість людей. З такими людьми, як в нас, все буде Україна!

[@vasiliyyarosh2321]

Ніколи не пишу коментарі, але Євген дякую велике за чітку позицію, за такими як Ви майбутнє, разом побудуємо круту країну)

[@busenka_tv3650]

Вельмі прыемна слухаць ўкраінскую мову, Жека ты вялікі малайчына . Кантэнт зайграў новымі фарбамі, дзякуй табе вялікае!!! Слава Украіне і Жыве Беларусь!!!

[@user-se6ct5zu2f]

Дякую велике за підтримку України, українського контенту! Ти насправді вільна людина, яка має чітку позицію, мету та розумні наміри, ти наша гордість! Ти мене мотивуєш з кожним відео 🇺🇦🇺🇦🇺🇦

[@jaloliddinhaqnazarov2667]

Жека всегда крутой контент Уже 2 года посмотрю и изучаю После это великолепный курса начал изучать Javascript и Vue js и потом устроился работу фронтенд разработчика Я из Узбекистана Огромный спасибо Жека

[@g_Earth]

Каков заработок в Узбекистане у тебя на данный момент?

[@user-nw9jq7do1h]

Теж люблю рок і розвиток, тому вже проходжу платний курс, лупаю сю скалу і рухаюсь вперед! Дякую за можливість та позицію, це дуже круто💪💪💪

[@GoblinsWatch]

Бляяяяяяяяяяяя Який я радий що чую українську !!!!!! Респект за таке прийняте рішення !

[@weterdam]

Жека, дуже тобі дякую за твої майстер-класи, насправді вони дуже допомагають всім нам освоїти верстку і стати спеціалістами в своєї справі!! Саме твій план подачі матеріалу мені дуже подобається, незважаючи на те, що в ютюбі дуже багато таких верстальщиків, але не всім дано вчити других, ще раз тобі дякую!!!!

[@YENTO]

Це просто бомба слухати матеріал солов'їною!!! Женя Вам респект, візьміть до себе в учні.

[@FreelancerLifeStyle]

edu.fls.guru/

[@viktorriabiy]

Повернувся до вивчення frontend. Був на стрімі, дуже тішився українській мові. Вчора подивився кілька відео російською мовою, тепер повернувся знову до цього сайту і зробив висновок. Як же ахуєнно все-таки чути свою ріденьку мову. Дуже дякую тобі!

[@vl8224]

Доброго дня. Ще раз дякую за Ваш час та допомогу. З нетерпінням очікуємо нових знань.

[@bianchi1946]

Файна українська🇺🇦❤ Дякую за контент, приємно познайомитись!)

[@user-ou1rh7dv7n]

Дякую тобі за стрим, за навчання, за українську, за все, що ти робиш. Жека, ти - чудова людина, і ми, українці - непереможні!

[@AlberUA]

Супер. Дякую за майстер клас!!! Дякую за мову! Слава Українській нації!!!

[@Easycore2000]

Окреме дякую за безкоштовний макет та архів) Вже хочу записатись на курс

[@user-ke2on2ju8m]

Не звично чути тебе українською, як і мені писати ) Велике дякую за все!

[@user-gl9xp3iv9q]

Жека - це дуже чудово, що ти даєш змогу навчатись у такий складний час для України та Українців. Дякую. Все буде Україна!

[@user-bz3kf2dm7y]

Велике тобі дякую. Те що ти робиш безцінно. Матеріал подаєш дуже гарно і зрозуміло.

[@user-no4xd6om2e]

Респект до автора! Я буду надалі вас підтримувати, як підписник! Слава Україні!

[@user-dy8gc8vz5t]

Дякую за майстер-класс, завжди приємно пригадати як то робиться на чистих мовах) Дякую за стрім українською, Мабуть найкраще рішення як відрізати ЗАЙВУ аудиторію.

[@PROGAMER-qv4hw]

Дякую вам за вашу роботу і ваші відео. Слухати вас на українській як бальзам на уши)

[@yevheniiavierovchuk2142]

дуже Вам дякую. респект за українську. підтримаємо як можемо.

[@inokentiyMay]

Твої уроки і так були найкращі і найзрозуміліші. Завжди коли щось не міг написати вкл фрілансера і во вже є рішення. А зараз ще українською це взагалі ТОП!!!!

[@user-lm9gg6oc6n]

Кожен урок по практиці дивлюся, завантажую макет і верстаю його, а потім передивляюся запис і звіряю правильність. Найскладнішим виявився слайдер, сам не зміг адаптувати фото. Дякую вам за такі гарні та якісні уроки!

[@oleksandrrol793]

Вдячний за стрім, дякую за твою працю. Було багато корисних фішок і цінної інформації

[@user-rj9qo1fm2y]

Дякую за корисний контент. Буду вчитися надалі із тобою

[@Enthe0genic]

Дякую, за запис. На стрім, нажаль не потрапила. Думала, що у відео для початківців не відкрию для себе щось дуже нове, але була приємно здивована багатьма цікавими нюансами👌

[@andriibo87]

Величезне дякую тобі, гідний контент гідної людини. Давно дивлюсь тебе і бажаю успіху у цій не простій справі. 💪🤝

[@volodymyrmatselyukh8808]

Дякую за стрім! 5 годин корисного контенту, мабуть буду весь тиждень по годині дивитись) Треба переходити на фріланс бо з регулярною роботою зовсім мало часу на навчання випадає)

[@ivannapogreda9085]

Дякую за тверду про Українську позицію. Ти приклад навіть для більшості українського населення

[@user-fc8nh4mm4z]

Дякую! Дуже корисний і потрібний матеріал! Ви - крутий! Дякую!!!!

[@daniilmylo6805]

Дякую за те, що Ви підтримуєте контент українською мовою) Дякую Вам

[@yuliiahordieieva9297]

Євгене, ти надзвичайно неймовірний і крутий! Дякую і за те що кажеш про війну в голос, і за те, що перейшов на українську, не побоявшись втратити частину аудиторії! Дякую за те, що продовжуеєш навчати! Це неймовірно надихає й мотивує! З приходом війни залишилась без роботи але знову вирішила потихеньку повертатися, почавши з твого уроку - треба багато згадати, наздоганяти й надолужувати. Сподіваюсь, що потихеньку повернусь до улюбленої роботи. Успіхів тобі!

[@yarolsavt.5501]

Дивлячись твої відео і цей стрім, те як ти висловлюєш думку, я частково впізнав себе, насправді я вважаю тебе, Жека, справжнім Українцем (саме з великою букви) і найкращим Frontend спеціалістом, твій контент не сухо заточений щоб як по методичці викласти матеріал, дивіз твого каналу підходить як ніяк краще тому що кожен має змогу побачити тебе як людину в житті, вільну, справжню і тверду, продовжуй в тому ж дусі, ніколи не зраджуй своїй позиції і своєму духу, навіть якщо твоя аудиторія складатиметься лише з таких як ми, розуміючих людей зі схожою позицією, але ми будемо твоєю найкращою і найпотужнішою аудиторію, тому що ти наш вчитель та наставник і ти неймовірно надихаєш, тому дякую тобі за твій контент, бажаю успіху і віддаю тобі всі 100% своєї підтримки, ти найкращий україномовний ютубер!

[@daryavlasova2409]

Дякую вам, за цю можливість навчатися, не дивлячись на суворі обставини нашого життя зараз. Дякую за вашу працю! Все буде Україна)))

[@sergeynazarenko2316]

Спасибі Жека, твої відео завжди надихають

[@valeriia_7769]

Дякую велике за Вашу роботу!! Дуже якісний, дійсно цікавий контент і мега корисний (вчуся за Вашими відео)! ✨️

[@Margarita-nx8kd]

Дуже дякую за такі відоси! Починала вчитися по ним і досі є моменти які не знаю, підмічаю для себе!

[@tarasrachuk8097]

Велика дяка за майстер-клас! Все дуже круто, доступно і зрозуміло. Автору респект!

[@FreelancerLifeStyle]

Будь ласка! Радий що корисно

[@riticnergy7174]

Знаю що ти це чуешь дуже часто, але дякую тобі за такий якісний і зрозумілий матеріал. Насправді добре розповідаешь і так щоб було зрозуміло кожному. Дивлюся і вчуся тільки у тебе. Не буду ходити на ліво, до інших викладачів.

[@romanisopenko4011]

Супер! Дуже класний матеріал! А за солов'їну та Твою позицію окремий респект!

[@user-vh6eo5nu4e]

Дякую, Євгене! як завжди насолода з тобою вчитися і творити магію) 3:40:54 - підключення свайпера

[@irinasname]

Я повинна це написати)) Як приємно слухатии вас укрїнською, просто музика для моїх вух.😀💛💙

[@Mari-ml6iy]

Ви дуже класна людина, дякую за те, що робите!!

[@anduzha]

Я кайфую від ціє музики))) Дякую за безцінну інформацію!!!!

[@user-ch4vd4ki3o]

Дуже приємно слухати вас українською Дякую за майстер-клас Коли ти тільки на початку - дуже важливо побачити, як організовую процес досвідчений девелопер В мене багато речей стали на свої місця в голові, бо був хаос )

[@Ivan0707]

Я раніше принципово твій канал не дивився, а в даний момен в кайф.

[@user-fd6li1ww6c]

Рідко пишу коменти....Але не втрималася))))). Ще пів року тому в цьому нічого не розуміла, то нічого не сказати)))) Але з вашими відео опанувала - HTML/CSS, (JS- в процесі). Пробую себе в марафонах.... Приємно коли дивишся і розумієш!!! А ще крутіше, коли робиш то сама!!! Дякую за відео-навчання, Дякую за українську!!!!!

[@serezhakaushnjan8443]

Дякую Велике)❤ Україна обов'язково переможе!)

[@mrBurlaka1]

Євгене, дорогий, дякую за уроки!

[@ttarrmii1903]

Дякую за вашу роботу! :)

[@dmytrobarchuk6030]

Дякую за контент! Важлива справа, особливо в такий час!!! В тебе витримка прямо на 1000 балів. +1 в карму)

[@skouts8093]

велике спасибі за ваш контент, я сам розробник-початківець і дійсно ваш контент допомагає, а на вигуки людей з чату не реагуйте, адже є люди які вас підтримують і цінують

[@antonmykhalchuk7757]

Як завжди у Вас безцінний контент. Якісно, зрозуміло і просто. Це вже не просто респект..це РЕСПЕКТ галактичного масштабу

[@maksymtyshchenko7084]

Женя, дякую за стрім!

[@romanlyp6065]

Дякую, за такий якісний матеріал !

[@tarashnatkiv134]

ТИ ПРОСТО НАЙКРАЩИЙ, ТВОЇ ВІДЕО І ТВОЯ ПОЗИЦІЯ ЗАХОПЛЮЮТЬ ТА НАДИХАЮТЬ!!! ВСЕ БУДЕ УКРАЇНА!!!💙💛

[@antonmykhalchuk7757]

Дякую вам! Респект за такий якісний контент. Просто топ.

[@bohdanpavlius4357]

Жека дякуємо тобі від усього сердця за твою працю! Продовжуй! Ти найкрутіший вчитель! )

[@Torash417]

Ура! Вдалося. Дякую велике, дядько Женя! Здоров'я, удачі!

[@ivannakryvan5342]

Дуже дякую за чудовий контент

[@BeyondTheScreen89]

Нормально и клёво на украинском. Мне как молдованину все понятно. Спасибо.

[@dianazubach1166]

дякую за стрім, все дуже доступно подано, дякую!

[@vladosprotos]

Дякую за збережене відео і за твою працю , переглядаю зараз , оскільки вчора не було можливості )

[@oleksandraokhotnykova8672]

Дякую за такий корисний контент!

[@qwimik]

Ти дуже крутий!) Дякуючи тобі захопився фронтом, тепер вивчаю) Хочу запропонувати ідею для нового відео) Багато людей хотіли б побачити приклад твоєї справжньої швидкості верстки) з усіма твоїми сніпитами) якийсь приклад, так скажемо, без коментарів(тому що будуть затримувати)! Дякую тобі за твої старання! Коли почну заробляти версткою, стану спонсором)

[@user-rf5kp9je7s]

Дякую Вам за контент, дякую за навчання. Почав вчитися по Вашим відеоурокам і продовжую. Ви великий молодець , що висловили свою проукраїнську позицію. А тим дурням і говорити нічого , все одно вони не розуміють 😂

[@liubart931]

Дякую за навчання! Чекаю нових відео😉

[@Happyendrew]

Дякую Вам за Вашу працю!

[@DmitroKopilov]

Євгене як завжди вищий клас!!! Нажаль не потрапив на стрім, але з задоволенням подивився запис. Дуже дякую за відмінний контент!!))

[@yaroslavliukhovskiy3653]

Дякую за український контент і звичайно за хороші уроки

[@user-by7fb9fl2e]

Дуже дякую за вашу роботу!

[@pavlov220984]

Женя, СПАСИБО ТЕБЕ ОГРОМНОЕ!!!!!

[@solitudebychoice]

Лайк! Зверстати задля практики це гуд!

[@mordskerl1430]

Блин, не понимаю, даёшь настолько ценный контент , знания, а с 44к просмотров 3к лайков, люди если вам дают бесплатно то не поленитесь хотя бы заплатить лайком подпиской и комментом!

[@user-it2eq8kw1u]

Дякую за якісний контент)

[@dipster1992]

Файний контент, дуже подобається!!!

[@idina5462]

Дякую за цікавий стрім і можливість розвиватись! Верстала макет і 1 секція була схожа, текст і картинка. Я робила картинку абсолютом до секціїі, щоб вона не була в контейнері. Ви в цьому стрімі зробити через флекс і марджин, я щось і не подумала так спробувати, тепер знаю декілька варіантів)

[@Mljamljaful]

Жека дуже круто, де ти раніше був з укр. мовою.... Все супер. Чекаю курсу із вивченням англійської для ІТ.

[@user-kl5lj6po8p]

1:07:18 Величезне дякую! Слава Україні! Слава українським ITшникам)

[@7ka4]

Дуже круто дякою тобі за це

[@user-pe7ob1rv7v]

"А хтось і не піде"🤣дякую за вашу роботу ❤‍🩹

[@user-yi8nc3rs2r]

Жека, навіть незнаю, що написати щоб передати тобі наскільки я вдячний за твою роботу, і за те, що ти робиш для нас. Закінчив твій безкоштовний курс (залишився великий і страшний JS) і тепер щоб краще все засвоїти і закріпити навички дивлюся і після перегляду повторяю твої майстеркласи (ну звичайно для початківців) це просто ДУЖЕ ДУЖЕ кирисно. Це третій майстерклас для початківців який я подивився і зробив потім, і я просто відчуваю наскільки розвинулись мої навички. Повторюсь ще раз -це дуже корисно, дякую. Хочу ще запитати, чи можна використовувати макети з твоїх майстеркласів потім в своєму портфоліо і чи буде це доречно?

[@FreelancerLifeStyle]

Я радий! Так, звичайно. Усі макети з МК можна використовувати для портфоліо.

[@user-gv3gc5qt3i]

Євген, ви як завжди на висотi! Жодного лишнього слова! Процвiтання вам. Мирного неба вам та вашiй родині!

[@USlan1945]

Дякую за вашу працю!!!

[@artemmikhalenia2948]

Спасибо большое за труды! Очень крутое видео!

[@goraciobora7069]

Дякую за цікавий контент та чітку принципову позицію! Є декілька побажань на майбутнє: хотілось би більш котрастну тему у VS-Code, ввечері норм, а от у сонячний день не дуже... А ще, коли ти закодив щось більш-менш складне - зроби, будь ласка, невеличку паузу, щоб можна було роздивитись, бо ти відразу перескочуєш, щоб показати як це виглядає. Ще раз дякую!

[@MrVIPKent]

Дякую за такий гідний україномовний контент

[@olegshepelenko2797]

дякую за стрім )

[@user-ze7se8uq2l]

Супер , спасибо!!!!

[@Elena_Petrenko]

Евгений, благодарю за это видео!

[@annkichapina]

дуже корисний стрим🔥 дякую!

[@begimaiimamidinkyzy2343]

Дякую за стрим.

[@martinyis6453]

//Header + Main// 1:15:03 How to center items inside a block6 1:21:00 Layout of decor picture 1:35:00 Header making absolute 1:37:00 How to make content in block with pic 1:40:00 Doing button 1:47:00 How to align items inside the block 1:50:00 Locating image in the main block 1:56:00 How to locate decor on image 2:03:00 Responsive decor 2:06:00 Responsive header 2:08:00 How to get rid of decor due to responsive website 2:15:00 Responsive button’ 2:42:21 How to make a responsive image //Page with guitars// 2:36:00 Structure of flex cards 2:42:00 Structure of store items 2:46:00 Grid structure 2:48:00 Aligning items 2:49:00 Responsive grids 2:54:00 Grid responsive 2:58:00 Putting image inside the card 3:00:00 Best way to make margins and padding 3:01:00 Putting text inside image 3:03:00 Ibg technology 3:05:00 How to do a gradient with (before) 3:13:00 Layout of brands 3:20:00 Img width in cards //=========Why block====// 3:29:00 Layout of cards in new block 3:31:00 Contant aligning 3:31:56 Aligning item inside another one 3:35:00 Justify-content stretch

[@bogdanmarchenko9903]

Дякую за корисний контент!👍👍👍

[@olenadats4728]

Дякую! Яка краса)