How to Create a Website Figma - HTML, CSS Flexbox & Grid, VS Code

Рет қаралды 166,310

Күн бұрын

In this video, we will code a site from a Figma layout using HTML and CSS Flexbox & Grid in different blocks.
⚡️ Get Template:
1) Boosty boosty.to/annblok
2) VK donut/tpverstak
3) Buy a template new.donatepay.ru/@annblok (write an email in the comment field)
Demo - annblok.github.io/Beauty/
My Video about Figma - • Figma за 13 минут для ...
CSS Flexbox Cheat Sheet - tpverstak.ru/flex-cheatsheet/
CSS Grid Cheat Sheet - tpverstak.ru/grid
Timecodes:
00:00 Introduction
00:20 Layout and preparation for work
07:54 Styling the header and first block
43:28 Styling the second block and footer
Frontend Book - tpverstak.ru/frontendbook
Ask a question about the frontend or layout - frontendhelp.me/ru
✅ Support the channel - / @annblok_webdev
✅ Website - tpverstak.ru
✅ VK - tpverstak
✅ Instagram - / annblok
✅ Telegram - t.me/tpverstak
✅ Telegram Chat - t.me/tpverstakchat
Courses - tpverstak.ru/courses/
Reviews - topic-77986122_40115279

Пікірлер: 352

@annblok_webdev 2 жыл бұрын

Авторская методичка про CSS Grid ❤С ней ты познакомишься со всеми свойствами. Объясняю так, что разберется даже ребенок. 📌 ЧТО ТАМ ЕСТЬ - Разбор всех свойств с визуальными примерами - Отмечены свойства, которые 100% пригодятся в работе - Объяснения на простом человеческом, а не на языке спецификаций - Передала весь свой опыт в работе с Grid КОМУ ДОСТУПНА МЕТОДИЧКА? ⭐ Подписчикам уровня “Мидл” на Boosty: boosty.to/annblok ⭐ Подписчикам из ВК: vk.com/donut/tpverstak 💰 Оплатившим разово: boosty.to/annblok/posts/e132b0c0-a7ec-4df0-891b-e4cea8c0f676

@FATALGIG 3 жыл бұрын

Раньше было в топе "Выучи HTML за час!" и всё равно его никто не знал)) Сейчас по бесплатным урокам реально уже профессию получить, а всё равно народ жалуется на безработицу и пишет "интернет не предлагать"... Жаль, что бесплатное не ценится, даже если материал отличный! Лайк за старания! и Огромное Спасибо за полезный контент!!

@user-xd4mv4mk4c 3 жыл бұрын

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

@user-xl8wn6ge2m 3 жыл бұрын

@@user-xd4mv4mk4c html css и js - при этом остаются фундаментом на котором всё работает, ткчт по-моему зная основы новый фреймворк можно освоить за несколько недель и также легко забыть когда станет ненужным.

@drino955jug3 3 жыл бұрын

@@user-xl8wn6ge2m ну-ну...

@user-id2wg5xc2l 3 жыл бұрын

Нам же лучше😉

@user-xd4mv4mk4c 3 жыл бұрын

@@bytheway3876 ну, во-первых, тебя никто не еб.., во-вторых, никто не ныл, как "нытье" это ты мое мнение окрестил, я лишь поделился своим видением и практическими мыслями после 1.5 года самост. и курсового обучения и попыток найти работу офлайн и на фрилансе ... Если у тебя получилось, то я на самом деле рад за тебя. Если ты "разбираешься в теме" и "не несешь чушь", то этим можно поделиться культурно на благо всем, а не посылать незнакомых тебе людей направо и налево, пользуясь анонимностью инета и не боясь, что тебе врежут по мордасам .. Всех благ!

@user-gb1kc9no2s 3 жыл бұрын

Перед началом просмотра не ожидала,что видео будет таким интересным.Много нового узнала.Очень хорошие советы. думаю многим должно пригодиться.Жду еще выпуски

@Anodoree 3 жыл бұрын

Неожиданно резко закончилось) Спасибо! Очень полезное видео и как раз вовремя)

@dimlivelong 3 жыл бұрын

Круто!!! Мы так ждали этого урока

@user-qe2pb9fg5j 3 жыл бұрын

Анна, спасибо за труды, учусь верстать с Вами) Спасибо за труды))

@Non_Konformist 3 жыл бұрын

Как раз искал видео по данной тематике, спасибо за информацию.

@json_js 3 жыл бұрын

Большая молодец, все понятно и доходчиво!

@starkstark3908 3 жыл бұрын

Огромное вам спасибо за видео и ваши ценные советы! Желаю вам дальнейших успехов .

@user-ub5qr1lo4w 3 жыл бұрын

Да, очень подробно разобран пример - спасибо за ролик!

@user-zn9gq3qn2s 3 жыл бұрын

Анна,здравствуйте и спасибо огромное за видео и конечно отдельное спасибо за шпаргалки!

@user-pr6ll7sn2m 3 жыл бұрын

Очень пригодилось видео, как раз искал на такую тему, СПАСИБО!

@userSergeyZabolotny 3 жыл бұрын

Анна, спасибо огромное! У вас хорошая подача предмета. Даже просто идя по вашим шагам, все работает. Не нужно ни чего ремонтировать по дороге. Еще раз спасибо что делитесь знаниями!!!

@annblok_webdev 3 жыл бұрын

Спасибо 😊

@Preferred1 3 жыл бұрын

Ну не знаю как кому,а я всё понял прекрасно. Благодарю вас за массу полезной информации.

@user-xr2vj8gy8y 3 жыл бұрын

Интересно послушать компетентного специалиста,немного быстро,но понятно,спасибо Анна.

@igr3943 3 жыл бұрын

Как всегда прекрасный материал!! One Love!

@PearlDpUa 3 жыл бұрын

Ого, спасибо за такой подробный разбор!

@denismaltcev3356 3 жыл бұрын

Огромное спасибо за годноту. Лучший канал )

@kocmoc7434 3 жыл бұрын

Умница,доходчиво и понятно объясняет.серьезно относиться к своей работе) Успехов тебе 😉 Подписка однозначно

@user-gl4rp1ou6w 3 жыл бұрын

Спасибо.Все объяснили буквально с 0.То что я и искал)

@user-mo7wi8db8k 3 жыл бұрын

Отличный гайд, как раз увлекся недавно этой темой.

@margaritazamula5093 2 жыл бұрын

Огромное спасибо за урок! Невероятно сложно - у меня ушло 2 дня))) Но супер интересно

@m.petrova 3 жыл бұрын

Огромное вам спасибо за видео и ваши ценные советы! Желаю вам дальнейших успехов на ютьюб и в жизни! От меня ловите лайк.

@user-fd5le5bx9j 3 жыл бұрын

Шикарно. Аня - чудо))

@Natik1865 3 жыл бұрын

Побольше таких интересных видео, они мне нравятся.

@user-tt6eb7xr3i 3 жыл бұрын

Лучшая побольше таких видео!

@user-gb5vh6oz7u 3 жыл бұрын

Практично и полезно, подробно объяснили создание сайта, спасибо

@TheLordoftheElements 3 жыл бұрын

БОСС это круто ) за объяснения отдельный лайк) ибо голос у тебя приятный и микро шик,так почему бы не по объяснять) ,так что тут ты попала в точку спасибо большое

@eugenia9999 3 жыл бұрын

Класс )))) как всегда, все очень понравилось !!)))

@rimazaqyan8001 3 жыл бұрын

С удовольствием посмотрел ваш видео обзор,спасибо вам за полезную информацию, от меня лайк.

@rabirai8136 3 жыл бұрын

Классный ролик получился особо спасибо за таймкоды.

@user-dy3qq9oc3d 3 жыл бұрын

лайк забыл поставить. вернулся и поставил)

@adanabdulle3456 3 жыл бұрын

Only speak English but I appreciate your help in teaching us web development. Thank you!

@veles8431 3 жыл бұрын

Интересно было посмотреть и послушать вас. Отличный ролик для начинающих.

@GalynaStegniy 2 жыл бұрын

Большое спасибо, для новичка очень полезно!

@onebytesiteit30-75 3 жыл бұрын

Как всегда годно . Как всегда доходчиво . Молодец. И Спасибо за труд! Все больше и больше людей становятся адаптированными к работе в сети !

@nastenavanbina2026 3 жыл бұрын

это точно уже многие начали зарабатывать в сети, это уже стало как обыденность

@onebytesiteit30-75 3 жыл бұрын

@@nastenavanbina2026 да конечно. По себе знаю. Но просто многие не начали. А зря.

@AlexandrWD 3 жыл бұрын

@@onebytesiteit30-75 А зачем тебе конкуренты?

@onebytesiteit30-75 3 жыл бұрын

@@AlexandrWD конкурентов нет. Рынок не заполнен

@user-yn3qf8fv6v 3 жыл бұрын

Спасибо,Анна,за такой подробный разбор макета.Вы очень помогаете новичкам,которые с одной стороны хотят уже начать сами верстать,но с другой сторон, боятся.С вами это выглядит совсем не страшно!А там уже и опыт появляется.

@annblok_webdev 3 жыл бұрын

Рада, что видео помогают 🤗

@arktikmoon 3 жыл бұрын

@@annblok_webdev Мне кажется вам не хватает эмоций. Вы же живой человек, а разговариваете как робот гугловский или яндекс спич. Я понимаю что здесь важна дикция, чёткость произношения и артикуляция. Но всё же на мой взгляд нужно проще немного и легче говорить. Тяжело воспринимается видео из за этого. Всё как то монотонно. Не хотел вас обидеть или как то поставить под сомнения ваши навыки. Просто мне кажется нужно больше легкости и улыбаться во время записи видеоуроков.

@AlexandrWD 3 жыл бұрын

Спасибо за очень полезный контент!

@tolasnisar2494 3 жыл бұрын

Спасибо вам за информативным видео ролик.

@user-vk4jv7es1j 3 жыл бұрын

Спасибо за видео, очень хорошо объясняешь , все понятно как будто сам делаю. Много нового узнал только из твоих видео. Продолжай в том же духе, красава!!!

@annblok_webdev 3 жыл бұрын

Спасибо 🤗

@roxanaspitz1958 28 күн бұрын

Я только начинаю учить css и это видео шикарно! Спасибо ❤

@marilynavila5922 3 жыл бұрын

здорово! Спасибо .. Я понятия не имел, как начать проектировать

@user-km6mn9lj8f 2 жыл бұрын

Благодарю, отличный гайд 😊

@elenanew2125 2 жыл бұрын

Анна, спасибо за Ваш труд.

@annblok_webdev 2 жыл бұрын

🔥🤗

@GANGST1ER 3 жыл бұрын

За пиксель в пиксель спасибо. Интересная методика.

@irina-s 2 жыл бұрын

Спасибо за шпаргалку по флексам, регулярно пользуюсь.

@DenisFazlyev 3 жыл бұрын

Спасибо за ваши старания

@aalolooo 3 жыл бұрын

Спасибо за видео. Вы 👍

@user-kf7lx6rg1t 3 жыл бұрын

Сам не занимался созданием сайтов. Все толково рассказано!

@jeviellio 3 жыл бұрын

круто, что такое делают бесплатно) хорошое обучение

@user-pk8dr8qg4o 3 жыл бұрын

Данное видео мне было интересно и полезно с меня лайк.

@vanzo16 3 жыл бұрын

выражаю благодарность за этот чудесный урок :)

@user-pz1jh7po5e 3 жыл бұрын

Поддерживаю, побольше давайте таких видосов. Лайк автору

@meowmeowmeowmeow000 5 ай бұрын

Спасибо за хорошее видео, пиксель перфект топ!

@user-fl7ov6tj4q 3 жыл бұрын

Спасибо, что показали вёрстку сайта с нуля для начинающих, всё понятно.

@user-ul3iv4vs6c 2 жыл бұрын

Анна, было бы хорошо, если бы вы в ссылках прикладывали ссылочку с кодом. Иногда смотришь и что-то пошло не так, а найти не можешь. А так прекрасный материал!

@ASADULLAH-wo5re Жыл бұрын

Спасибо за внятные комменты

@user-gf4fs8pn5z 3 жыл бұрын

Благодаря этой инструкции я разработал свой первый реально работающий сайт. Которым можно комфортно пользоваться. Спасибо.

@lilxmortyboy7055 3 жыл бұрын

ну и где он))

@delite378 3 жыл бұрын

Покажешь?)

@user-fq5rm2jr4c 3 жыл бұрын

Вроде все просто и понятно, но на этом еще и можно заработать хорошие деньги.

@Hunter-yw3ow 3 жыл бұрын

Отличный урок для начинающих !!

@whilefordo 3 жыл бұрын

26:30 я так понимаю див bgwhite изначально задумывался как белый фон от края до края нужно было просто ему назначить белый фон а не хедеру. у меня так получилось

@armenakcomp 3 жыл бұрын

Очень хорошее видео, мне очень понравилось работать с pixel perfect, интересно было познакомится с гридами и вообще очень интересно как Вы верстаете, спасибо за хороший контент.

@annblok_webdev 3 жыл бұрын

Я рада, что вам понравилось видео 🤩

@hasanyusupov3427 2 жыл бұрын

я только учусь начинающий ну считайте что ноль ходил на одни курсы ушел , у Вас просто супер понимаю сразу очень доходчива спасибо а у вас есть курс полный по html css. Супер спасибо Вам.

@stangulya 3 жыл бұрын

Анна, спасибо Вам за этот видео урок. У меня только один вопрос: когда делаю экспорт темплейта из фигмы, он какого-то огромного размера выходит в плагине PP, гораздо больше, чем то, что получается. Размер в PixelPerfect стоит 1х, в фигме - тоже. Может это быть из-за разрешения экрана, или здесь проблема в другом? Заранее спасибо!

@BoJIK_Ha_Dopore 9 ай бұрын

Анна, привет! Вот это круто!!!! Я Ваш!!!!

@Ahmed__123j Жыл бұрын

понятно и ясно лайк-подписка

@agibalova24 3 жыл бұрын

Спасибо за видео - очень доступно! Единственное не могу понять почему по макету нельзя ставить отступы, а используется плагин в хроме? из-за размеров экрана?

@vitalyshevchenko5030 2 жыл бұрын

Благодарю за видео!

@annblok_webdev 2 жыл бұрын

🤗 Рада слышать, что помог урок!

@afsmzd 2 жыл бұрын

Спасибо вам за урок.

@katerina8017 3 жыл бұрын

эта нереально крутая распродажа

@user-xd4mv4mk4c 3 жыл бұрын

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

@ZombiePmIo 3 жыл бұрын

Мой любимый учитель.

@user-tc9ml2mu5k 3 жыл бұрын

Можно пару советов,может я и не прав,но я все же выскажусь. 1)Структура папок, гораздо проще особенно новичкам их создавать еще на рабочем столе,затем ПКМ ,открыть папку с помощью Vs-code и нет проблем! 2) Я бы подключал хоть минимальные стили обнуления,пусть новички хоть немного вникают что это вообще такое. 3) Почему при оформлении меню так долго его делаем. Ведь можно иначе: nav>ul.menu>li.menu__link*5 TAB ,это же гораздо быстрее и проще,новички должны хоть по немногу привыкать к ТАБУ,иначе это долгая песня будет. Удачи.

@user-ei6ft8ov5t 2 жыл бұрын

Топово!

@RuslanBereza 3 жыл бұрын

А отличное пособие для обучения - верстка сайта с нуля для начинающих | HTML, CSS Flexbox & Grid, VS Code, Figma!!!!!!!

@user-yg4jy6tz3t 3 жыл бұрын

Если разбираться не спеша, то, в принципе, понятно! Анна, в таймкодах время не 20.00, скорее 02.00 Макет и подготовка к работе)

@annblok_webdev 3 жыл бұрын

Да, ошиблась, поправила, спасибо☺️

@andremasko5177 3 жыл бұрын

Зачем создавать и потом писать в css display: block? Можно же использовать . Поясните, пожалуйста. (Это было при включении logo-image)

@user-kl6mo4do8c 2 жыл бұрын

Не перезагружайте страницу, спасибо за уточнение в самом конце объяснения, теперь всё сначала начинать, наверное найду другое видео, где будут обучать с нуля и подробно, удалим margin-top, всё-таки добавим margin-top....header-bottom.nav>li {margin-left: 15px; margin-right: 15px; почему эту строку нельзя было добавить в редакторе, или код так пишут , то тут , то там.

@aliakseipuchko1402 3 жыл бұрын

Спасибо большое за крутое и полезное видео! Здесь собрано все то, что мне как раз нужно для изучения. Открыл для себя много нового, видео ставил на паузу и дополнительно гуглил. Поэтому видео и прорабатывалось не полтора часа (сколько идет), а гораздо дольше. Это хороший знак - много всего полезного. Однако, не совсем понял один момент: в конце видео словно резко обрывается или неполное, ведь в оригинале вашего кода используются медиа-запросы, но в видео ничего о них не сказано, что-то тут не так?

@VitalyVasilega 3 жыл бұрын

Спасибо вам за ваши уроки. Сам сейчас занимаюсь изучением вёрстки и повторяю за вами. Но есть вопрос. На 57 минуте, вы объясняете, почему элементы с креслами самостоятельно выстроились в ряд и там вы затронули неявную сетку CSS Grid'а. Нет ли ошибки в объяснении? Мне казалось, что элементы выстроились в ряд по той же причине, почему они выстроились в ряд с самого начала, после того как мы задали количество колонок. Браузер сам разместил элементы в каждую ячейку grid'а. А так как мы первую линию грида распределили между тэгами h2 и image, то остальным элементам не остаётся ничего, кроме как, расположиться с новой строки?! Неявная сетка, вроде как, это когда количество grid-элементов превышает заданное количество ячеек, или просто элемент размещён так, что выходит за границы созданной сетки, это создаст треки неявной сетки. Проясните, пожалуйста. Спасибо.

@lobstershow4582 3 жыл бұрын

Сейчас протестируем) Пошел за ноутом)

@annblok_webdev 3 жыл бұрын

Отлично 👍🏻

@tamskiy Жыл бұрын

А можно вопрос, figma сразу даёт код css стоит ли его использовать ?

@popachka_uwu 2 жыл бұрын

Очень интересное видео,но есть готовый вариант в виде файла?

@rustemnasyrov8079 3 жыл бұрын

хорошее видео!

@user-sv5cp6rd5m 3 жыл бұрын

Подскажите, пожалуйста, что сделать в случае если с google fonts скопировал ссылки, вставил их в документ но вместо отображения шрифта просто знаки вопросов?

@St_ress 2 жыл бұрын

Смотрю урок и возник вопрос - почему не пользуетесь Emmet ul>li*5 а копируете? Для уроков мне кажется важным приучать "студентов" как я

@elenakhmelevskaya6563 3 жыл бұрын

Анна здравствуйте. После просмотров очень большого количества видео и обучающих материалов, я могу подобрать макет для сайта и сверстать, изучаю JavaScript, у меня вопрос: с этими знаниями я могу сделать сайт и выложить его в интернет что бы он работал или надо больше знаний по другим языкам? Я имею в виду минимальный сайтик как портфолио или блок или сайт для заказа услуг. Или после верстки надо обращаться к программистам? WordPress нерасматриваю хочется свой своими силами созданный. Этих трёх навыков хватит или нужны дополнительные знания?

@user-uy9lb5el2f 3 жыл бұрын

Еееей!)

@bigfoot1447 2 жыл бұрын

Подскажите плиз как называется конкретно ваш плагин инспектор, немогу найти?

@user-mf6ug7kd4t 3 жыл бұрын

Вчера голову себе чуть не сломала. Установила картинку через background-image? все сделала точь в точь, а картинка обрезана. Открывала через live server VS code, а сегодня случайно открыла просто из папки, где храниться проект в том же браузере, на том же пк и фон не обрезан. В чем может быть проблема?

@ggo_webdev 3 жыл бұрын

Еще было бы круто замутить адаптив ;) а так всё на достойном уровне!

@annblok_webdev 3 жыл бұрын

Адаптив добавила по ссылке Github

@koshmar1319 3 жыл бұрын

адаптив это домашка _)

@annblok_webdev 3 жыл бұрын

Не исключено 😉

@TheBreade 2 жыл бұрын

Что делать в ситуации, когда, используя расширение pixel perfect, картинка как бы уезжает за пределы окна браузера ? В таком случае невозможно наложить ее поверх сверстанного собой сайта и верстать по пикселям. Это связано с разрешением экрана ? И можно ли как-то это исправить ? Как сделать так, чтобы картинка из расширения встала от края до края ?

@rashvmatrix9387 3 жыл бұрын

Давно хотел сайт создать на нормальном движке.

@ksimysmax1222 2 жыл бұрын

Подскажите почему когда я прописываю тег hr горизонтальная линия отображается только с права а не через всю площадь как показано на видео? И меню под линией так же отображается почему то справа

@svhanz 3 жыл бұрын

Анна просто богиня! Я ее обожаю! Редкое сочетания ума и красоты! Спасибо за очередной классный туториал!

@sadlemon4110 3 жыл бұрын

Спасибо за видео. Внес пару модификаций, по типу иконочных шрифтов итд, получилось красиво. Лайк

@annblok_webdev 3 жыл бұрын

Я рада, что все получилось 😊

@whiteredfox2505 3 жыл бұрын

В плагине figma в окне браузера открывается картинка в маленьком масштабе, в чем причина не пойму..

@Anna08427 3 жыл бұрын

Сделала только шапку, 3 слоя пота сошло со лба 😅 делала часа 2 😁 это первая моя верстка по уроку.. интересно только как потом самой все делать 😅 🤷‍♀️ надеюсь получится 🙂 Анна, вам большая благодарность за урок 🌷 и с Новым Годом⛄❄️🎅

@annblok_webdev 3 жыл бұрын

Спасибо, и вас 😊

@eazye3351 3 жыл бұрын

получается верстать самой сейчас?)

@Anna08427 3 жыл бұрын

@@eazye3351 пока учусь. Есть канал, там подробно объясняют, но видео длинные. И я решила чтоб каши в голове не было и легче усваивалось не весь сайт верстать, а по частям, ну первая идёт обычно шапка. Разобралась , полностью поняла как что, скачала макет с инета , сама с лёгкостью сверстала шапку. Завтра начну страницу по уроку, потом также сама. Ну дальше легче должно быть, потому что многое поняла и так. Очень помогает devtools, когда непонятно как сверстали в видео. Наглядно посмотреть так сказать. А у вас как, есть успехи?

@user-yq9ml7yn8j 3 жыл бұрын

А вот скажи я тут награбил курсов по ява скрипт а они 15-17 годов они еще нормальные или там что то поменялось в ява скрипт и их можно выкинуть? Но я знаю где еще можно спи...........прихватизировать какие года действующие?