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

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:34 - What we are starting with
01:05 - Writing the HTML
08:28 - CSS Reset + custom properties
14:40 - @font-face
18:30 - General styling
25:40 - Styling the list
31:00 - CSS organization
32:20 - Styling the form
44:30 - Making a gradient shadow
51:13 - The error state with CSS-only
1:03:00 - Changing the picture source for large screens
1:04:40 - Updating the layout for large screens

#css

--

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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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.

---

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

[Azhtyhx]

I always thought you said "Hello my friend and friends". I don't know, I guess it probably made sense to me as I didn't really pay any attention to it. Ah well, you learn something new every day!

[bwknowles]

These are the best videos because I know I can do this, but I'm glad to learn better ways to do it, and it also allows new devs to learn from scratch the right way from the start.

[mamaburroughs]

I know you mentioned that there are enough form videos on the internet, but with all of the ones that I have found, they are so hard to understand and follow and I hope that one day you can do an expansion on how to do write form action and lets say have it link to a Google sheet or something of that nature. Appreciate your videos and you are truly the other person I watch for this content. Keep it up!

[farmarcos]

I still have a lot to learn, but watching professionals in action is invaluable. It's a great way to pick up new techniques, discover more efficient approaches, and understand the journey to becoming an expert. Thanks, @Kevin.

[AngelHoxen]

I love all the little explanations that you do. Great teacher!

[cheekianteoh]

The way you handle the error state in the client side is neat! Thanks for the CSS Tips.

[thefuntom]

I rarely subscribe to people I watch, because I seldom watch certain youtubers on a regular basis. Your channel is one of some exceptions - the way you present the basics and convention to CSS styles is very helpful and understandable. Thank you!

[CamaguNcoso]

Ever since I discovered Kevin Powell, I decided I'm going to learn CSS from scratch. Although I'm familiar with CSS, I had just lost confidence.

[devlayton]

This is a masterpiece, I would say I am pretty confident in CSS but there is always something you learn by watching your videos. Is it either best practices or new selectors or new thinking method, ... Thanks for this Kevin!

[HenriqueErzinger]

You actually CAN transition gradients in two ways: first, the background-position property is fair game, so just design your gradient as a sprite, with background-size 200% or something like that and move it; second, you can use custom properties as your color values and transition that. To be able to transition a color value, you’ll need to use a @property rule, and declare it as color, but with that it just works as expected.

[GlitzyIsBored]

I'm experienced in html and css but I suck when it comes to designing webs. I really appreciate this video!

[slemenceu]

Wow Kevin, that button gradient shadow is worth it. Thanks for teaching me that cool trick.

[cicartaya]

I like how you showed different ways to do the same thing and described the tradeoffs. I think that's a great way to learn things. That process is similar to coding interviews, where it's good to find a brute force approach and then try to find a way to optimize the solution while discussing the tradeoffs. Awesome video! 😊

[kopilkaiser]

Let's go. I am super excited to learn from your this video. Thank you for all your efforts and hard work 😁👌🏼

[octothorpe]

I am a huge fan of making a TOC at the top of my CSS file, with identical section comments below so you can easily use the find command to pop to a particular area.

[alisajadahmadi]

This was really a helpful video. I learned a of new things. THANK YOU Powell.

[clevermissfox]

Ive been liking using a fieldset (or nested fieldset) to group label and inputs together instead of a div. If this is semantically incorrect, please lmk! Just seemed like a good pairing within a form. Ive also seen legend used.

[EnricoRos]

Loved it. Never settles and always pushes for the perfect layouts. (Also, mind blown with isolation!)

[mavsocc]

nice one. more like this please, very helpfull for beginners

[sawilliams]

Who the hay-who said don't use descendant selectors!? Thats one of the great powers of css