Популярное

Музыка Кино и Анимация Автомобили Животные Спорт Путешествия Игры Юмор

Интересные видео

2025 Сериалы Трейлеры Новости Как сделать Видеоуроки Diy своими руками

Топ запросов

смотреть а4 schoolboy runaway турецкий сериал смотреть мультфильмы эдисон
dTub
Скачать

From Design to Code // HTML & CSS from scratch // Frontend Mentor

Автор: Kevin Powell

Загружено: 2023-03-14

Просмотров: 173782

Описание:

Taking on a Frontend Mentor challenge to explore how I go from design to code, including breaking down some of my thought processes along the way. This project is a fun exploration of flexbox, grid, custom properties, and variable fonts, to name a few things.

If you're thinking of signing up for Frontend Mentor PRO account, you can get 10% off with the code KEVINPOWELL10

🔗 Links
✅ The project: https://www.frontendmentor.io/challen...
✅ My finished code: https://github.com/kevin-powell/resul...
✅ More on variable fonts:    • Getting started with Variable fonts on the...  
✅ More on custom properties:    • CSS Custom Properties  
✅ Playlist of Frontend Mentor projects:    • Frontend Mentor projects  

Some links may be affiliate links. When you click on these links and make a purchase, we may receive a small commission at no additional cost to you. This helps support my work and allows me to continue providing valuable content. I only recommend products and services I use myself.

⌚ Timestamps
00:00 - Introduction
00:56 - Analysing the design and writing the HTML
11:20 - CSS - setting up the font-face declaration
12:11 - The custom properties
14:33 - A simple reset
15:22 - The base styles
17:17 - The result-summary layout
18:54 - The result section
26:40 - The relationship between the two columns
27:44 - The summary section
33:10 - Fixing the padding

#css

--

Come hang out with other dev's in my Discord Community
💬   / discord  

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺   / kevinpowellcss  

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon:   / kevinpowell  

---

My editor: VS Code - https://code.visualstudio.com/

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter:   / kevinjpowell  
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

From Design to Code // HTML & CSS from scratch // Frontend Mentor

Поделиться в:

Доступные форматы для скачивания:

Скачать видео mp4

  • Информация по загрузке:

Скачать аудио mp3

Похожие видео

array(10) { [0]=> object(stdClass)#7103 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "LkZPd0oRlMQ" ["related_video_title"]=> string(43) "From Figma to Code / Creating a resume page" ["posted_time"]=> string(21) "2 года назад" ["channelName"]=> string(12) "Kevin Powell" } [1]=> object(stdClass)#7076 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "rxnX1jdoI6c" ["related_video_title"]=> string(32) "Avoid These 5 Awful CSS Mistakes" ["posted_time"]=> string(21) "2 года назад" ["channelName"]=> string(12) "Kevin Powell" } [2]=> object(stdClass)#7101 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "eynG6X_xunI" ["related_video_title"]=> string(43) "I challenge a CSS Magician to a CSS Battle!" ["posted_time"]=> string(25) "2 недели назад" ["channelName"]=> string(12) "Kevin Powell" } [3]=> object(stdClass)#7108 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "3elGSZSWTbM" ["related_video_title"]=> string(32) "Flexbox or grid - How to decide?" ["posted_time"]=> string(21) "3 года назад" ["channelName"]=> string(12) "Kevin Powell" } [4]=> object(stdClass)#7087 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "FHg6nanN56Q" ["related_video_title"]=> string(106) "Тебе ВРАЛИ про IT! Мифы, которые мешают стать программистом" ["posted_time"]=> string(21) "7 дней назад" ["channelName"]=> string(31) "Кирилл Жильников" } [5]=> object(stdClass)#7105 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "PoJaRi7Ug7Q" ["related_video_title"]=> string(60) "Адаптивная верстка сайта на HTML CSS" ["posted_time"]=> string(21) "3 года назад" ["channelName"]=> string(50) "ВебКадеми | Юрий Ключевский" } [6]=> object(stdClass)#7100 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "nrEdavr-d6c" ["related_video_title"]=> string(117) "Путин на скамье подсудимых / Соловьёв захватывает страны Балтии" ["posted_time"]=> string(23) "5 часов назад" ["channelName"]=> string(12) "NEXTA Moment" } [7]=> object(stdClass)#7110 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "l04dDYW-QaI" ["related_video_title"]=> string(41) "The Easy Way to Build Responsive Websites" ["posted_time"]=> string(23) "1 месяц назад" ["channelName"]=> string(5) "Sajid" } [8]=> object(stdClass)#7086 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "pFKwmEdwZZQ" ["related_video_title"]=> string(78) "CI/CD — Простым языком на понятном примере" ["posted_time"]=> string(27) "9 месяцев назад" ["channelName"]=> string(25) "Артём Шумейко" } [9]=> object(stdClass)#7104 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "vHuSz4fRM88" ["related_video_title"]=> string(35) "The secret to mastering CSS layouts" ["posted_time"]=> string(21) "2 года назад" ["channelName"]=> string(12) "Kevin Powell" } }
From Figma to Code / Creating a resume page

From Figma to Code / Creating a resume page

Avoid These 5 Awful CSS Mistakes

Avoid These 5 Awful CSS Mistakes

I challenge a CSS Magician to a CSS Battle!

I challenge a CSS Magician to a CSS Battle!

Flexbox or grid - How to decide?

Flexbox or grid - How to decide?

Тебе ВРАЛИ про IT! Мифы, которые мешают стать программистом

Тебе ВРАЛИ про IT! Мифы, которые мешают стать программистом

Адаптивная верстка сайта на HTML CSS

Адаптивная верстка сайта на HTML CSS

Путин на скамье подсудимых / Соловьёв захватывает страны Балтии

Путин на скамье подсудимых / Соловьёв захватывает страны Балтии

The Easy Way to Build Responsive Websites

The Easy Way to Build Responsive Websites

CI/CD — Простым языком на понятном примере

CI/CD — Простым языком на понятном примере

The secret to mastering CSS layouts

The secret to mastering CSS layouts

© 2025 dtub. Все права защищены.



  • Контакты
  • О нас
  • Политика конфиденциальности



Контакты для правообладателей: [email protected]