From design to code - HTML & CSS tutorial [ part three- fighting with CSS Grid]

We're on the home stretch! This one was a ton of fun to make, and goes a lot into my thought process when making something responsive. A lot of people have asked me how to figure out the inbetween stages from when you have a design and I go pretty heavy into that here, all the while getting into a fight with grid, and refactoring my code along the way as well.

I really hope you enjoyed this series, it was a blast to make!

#designandcode

---

Keep up to date with everything I'm up to

---

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!

[KevinPowell]

Take a drink every time I say I'm looking forward to subgrid 🍻

[bruslaw]

Your style of presentation including all the mistakes, stumbling blocks and figuring stuff out as you go along is much more informative than carefully scripted and edited tutorials. That's because it shows your process and way of thinking, which is of way more practical use than simply dialing in some (seemingly) arbitrary settings. Thank you.

[theegreatestever]

The fact that even Kevin sometimes struggles has just somehow made me more forgiving to myself for not understanding certain things. This was so informative and definitely worth my time so thanks Kevin

[nathanm]

That was a great series. I love watching how you just adapted on the fly. I feel like when I design a site, I just bounce around breaking one thing after another.

[erichobbs]

I went ahead and did these before watching what you did. I really enjoyed trying to fix the problems, and then watching and seeing you have the same issues. I always seem to learn better from mistakes than when everything works out the first time. Great series, Figma is exactly the tool that I have been looking for.

[yesyesyay]

I watched all three. Really interesting to get into your thought process. Thank you, Kevin :)

[sauerlaenderk]

Learned so much in this full course (first time using Figma), especially how to transfer it from Figma to HTML&CSS. Please keep these "full courses" coming, u are a great teacher! Thanks!!

[tom_we]

Great series 🏆 There are tons of tutorials out there on YouTube but what makes your videos stand out, is your passion that everyone can see and feel within the first few seconds of your videos.

[narendrasudrik]

Enjoyed going through all 3 a/vs. Watching Kevin think & do is a great learning. Thanks Kevin.!!

[timsch]

This series really reassured me that I approach media queries in an acceptable way, thanks!
Also I am learning so much about design from your videos, especially the one on typography was extremely valuable!

[mafhper]

@kevin thanks for your efforts to teach. I'm a little rusty, but your videos filled me with motivation to get back to studying web development. Thank you my friend.

[chinmayghule]

Great series, and it also includes humour! This episode especially gave me second-hand frustration LOL.

[FlorimonMedia]

Awesome job! What a talent! Thanks for the hard work! I am a UI designer, and this definitely will help me with HTML, CSS, and JS!

[augustinekirumba]

i love the way you teach from your mistakes. It works best to show the concept.... subgrid though

[tlotliotllotlleng]

Love your content, I've done like 2 of your Grid websites while we still waiting for subgrid, on this video what I did was include a wrapper in the header for logo and nav, having them span the 2 columns

[joeloftus]

I love how you always say "POH-zi-shun" when slowly typing out position! :)

[BashaBill]

Nice little video series Kevin, I have watched a few of yours now. I am trying to create a website for a project I am working on (out of my working hours where I am a WPF developer). I started off working with bootstrap and have a working website but it isn't very 'clean'. So am going to start on 'My Project V2'. Will start off with a simple Figma prototype (thanks for that!) and then I will attempt to code it up from there. I have moved over to FireFox (thanks for that!) when designing and have also installed Eagle (so thanks for that too!).

[washierlosalter]

I learned a lot from your videos, thanks!

[prashannakumar]

Thank you so much for this video. I was stuck in between the process of transforming my figma designs into a real website. Would you maybe consider making a full course like this? For an entire website. I've been really looking to improve my skills to get better at implementing my designs, and most courses teach HTML, CSS and Javascript. But having a whole process of making a sleek design with Figma and transforming it with advanced concepts from HTML, CSS and Javascript would be fantastic. I've not seen it around yet- I appreciate your teaching style and clear delivery!

[andreamarchi]

Thanks Kevin. Greetings from Italy so tried