From design to code - HTML & CSS tutorial [ part one ]

Рет қаралды 107,511

4 жыл бұрын

Taking a design from a design tool like Figma to an actual working website with HTML and CSS means breaking down the design and figuring it out, so that's exactly what we're going to do in this series!
The Figma file: www.figma.com/file/GwRmx1FJ31...
#designandcode
/// Links that I mentioned
Live Server extension for VS Code: marketplace.visualstudio.com/...
/// Other videos I mentioned
VS Code shortcuts - • Unlock VS Code Efficie...
What's up with BEM? - • Why I use the BEM nami...
--
Come hang out with other dev's in my Discord Community
/ discord
---
Keep up to date with everything I'm up to
www.kevinpowell.co/newsletter
---
Help support my channel
Get a course: www.kevinpowell.co/courses
Buy the t-shirt: teespring.com/stores/making-t...
Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
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 KZfaq channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: 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!

Пікірлер: 85

@digigoliath 4 жыл бұрын

We don't get too many of 'From Design to Coding' stuff. WOW! I am loving this series. Thank you so much Kevin. So glad that it is you holding my hand. LOL, U know what I mean.

@KevinPowell 4 жыл бұрын

Things go off the rails a little in the 3rd video, hopefully you still like it by the time we get through that, lol.

@maskman4821 4 жыл бұрын

Mr. Kevin Powell is the best teacher ever you can find anywhere teaching web development, from design to code, explain everything, for both designers and developers to learn quick !!!

@KevinPowell 4 жыл бұрын

Thanks for the kind words!

@ThiagoVieira91 4 жыл бұрын

Ooooh boy! I'm pumped for this series! Already waiting for te next episodes! 💯

@DailyIntern 4 жыл бұрын

Thiago Vieira me too bro. He is a good teacher.

@fvgoya 4 жыл бұрын

That’s the type of video that worth to watch from the beginning to the end. Thank you very much for that.

@Amanda-qe5lj 4 жыл бұрын

l'm starting your course over on Scrimba, and thank you so much, all of the questions l had were answered as the classes went on and it felt like you were reading my mind. Great course and you're channel is great as well.

@lindabastard Жыл бұрын

I'm going back to web development after a long hiatus, so I need to catch up on a lot of things. Kevin's tutorials are my go-to because not only because he teaches you how to make things work, but also because he teaches the best practices and cares a lot about code organizations (see the use of BEM), even in shorter tutorials, which extremely important in the long run. Thank you Kevin!

@Darius-Paul Жыл бұрын

To be honest i've decided it's time start coding again after a 11 years break and i've learned more in the past week that i ever could on my own and for that it's hats off to you.

@aaamorek91 3 жыл бұрын

I love your positivity! Great way to teach :) Thank you for that!

@sudhirdontha1053 4 жыл бұрын

Great work! Really amazing!! Will be looking forward for more!!

@BoomerFart 4 жыл бұрын

Late comment, but I enjoy these from design to product videos very much! I would enjoy you doing these more often as it is interesting to see a project from start to finish. Great Content!

@narendrasudrik5073 2 жыл бұрын

Great energy Kevin. Thank you very much for this subject. Much needed. !!

@esraamohamed5601 2 жыл бұрын

Thank you so much, Kevin, I really like your teaching style. You're an amazing instructor.

@ReinaldoTrindade 4 жыл бұрын

Your channel is a gem! Thank you.

@theegreatestever2420 3 жыл бұрын

I learned a lot just from watching this...Figma will now be added to my repertoire and thanks again

@ne9835 4 жыл бұрын

Can't wait!!!! 😁

@Danachew 4 жыл бұрын

Nice! I really dug the design video for this :D

@FrancisBoudreau 4 жыл бұрын

Thanks for the fast pace!

@theshredguitarist25 4 жыл бұрын

Love your videos, Kevin!

@sashatv138 4 жыл бұрын

Cool! Thank you, Kevin!

@joechen2947 2 жыл бұрын

I've been looking for a video like this! Great tks

@Horoe 4 жыл бұрын

wow this is the best channel on youtube for programming great!

@DailyIntern 4 жыл бұрын

Wow Godfather of CSS. Thank you for this tutorial.

@brad5798 3 жыл бұрын

Kevin is very pleasant to watch and explains well

@JeradAcosta9 Жыл бұрын

This video is so awesome I can't wait to wait the next after dinner! This has filled in so many gaps for me. I have, until now, copy and pasted my way through web apps focusing on data science R and Python, but now I can build my sites from the ground up without using templates from Hugo and the likes! Thank you for giving me this creative freedom! Instant like and subscribe!

@JeradAcosta9 Жыл бұрын

This was perfectly paced btw. The right speed, content and maturity level. THANK YOU

@mihailodukic601 4 жыл бұрын

You make my day

@readerboot108 3 жыл бұрын

I am impressed with your coding.

@Cello624 2 жыл бұрын

This is amazing learned so much. Are the other videos from this series still posted on your channel?

@stephenhammond1745 Жыл бұрын

Not sure why you would hesitate over making this video. It seems like a natural progression: you designed something, now how do you implement that design. I was thinking about this after watching some of the Figma videos and thinking; well that's all very nice but now what do I do with it. Then I stumbled upon this. Good timing.

@fernandosalas4885 4 жыл бұрын

I used to 'hate' CSS till' I knew Kevin. Thank you so much!!!

@cano5063 4 жыл бұрын

Really apriciate your contant thank you ! Keep up the work. Also i and im sure many of us would love to see a indeph series from start to finish how you would go about coding a e-commerce website with the necessery backend to make it full functional, to show us not only how to make it work but some best practices along the way. It would be much but thank you anyway

@KevinPowell 4 жыл бұрын

You'll have to find someone else for that, I don't touch back-end... too scary, lol.

@patrickjaeger9714 Жыл бұрын

at 5:03 you hit the point! what's all that figma thing is helping the developer? a designer can dream about many things! photoshop/ illustrator is same deal for developer. as far a I understand figma does not even give class names for css. a developer has to think them up himself.

@markovujanic 4 жыл бұрын

4:24, nice tip. I tend to use Ctrl+\ for show hide UI. Basically the same but better :)

@KevinPowell 4 жыл бұрын

I didn't know about that one! Nice.

@allthingsinteresting4396 4 жыл бұрын

Awesome video Kevin. Do you think, using something like the `dl` element could bring more semantic meaning to the weather gadget?

@KevinPowell 4 жыл бұрын

That's a good question. It probably would have been a good idea 👍

@saihanachowdhury1499 4 жыл бұрын

Thank you so much

@tanayraj2991 3 жыл бұрын

Hey Kevin can u plzz tell me why you are not simply copy pasting the css given in Figma because i tried doing that and some elements were not exactly positioned as they were in figma?

@ashleyhoward14 3 жыл бұрын

If you press ctrl + backslash (\), you can toggle figma's panels!

@msvmanikantasrivishnu7788 4 жыл бұрын

Thank you

@afzalmahmud1974 2 жыл бұрын

Thank you, Thank you and Thank you sir ❤️❤️❤️❤️❤️❤️❤️❤️🇧🇩

@ronimedia73 4 жыл бұрын

Very god

@forgiveness_denied 4 жыл бұрын

you should always use alt="logo", it's used by blind people & screen readers stuff, it's very important for them, thanks

@KevinPowell 4 жыл бұрын

I probably should have put some, but, in this case the company name would make sense. Just logo doesn't really help them if they don't know what the logo is. I think in this case the actual name of the logo, or even "company name" would work. The alt attribute should always be there, but for decorative images, and not informative ones, you probably should leave them blank

@ariasabe 3 ай бұрын

even today no one is teaching this, most courses are just a video lecture of the free documentation that is available for every language.

@alrazy12 3 жыл бұрын

how you put the vscode and the browser side by side ?

@Andrii87 3 жыл бұрын

6:03 Magic trick

@pinnaclewd 3 жыл бұрын

I know design layout using 6 column or 12 column graph paper and mark elements then code up in css grid its a breeze now I don't need to write loads of media queries 👍

@sojibmia3931 4 жыл бұрын

nice

@Noor-nv7hc 2 жыл бұрын

How i can get the images???

@sugaslate14 Жыл бұрын

Within the first 2 minutes of this I knew I was in the right place. I’m a welder looking to break into front end web dev. There re great oooortnities in my area. I just need to learn

@simoneberg6236 4 жыл бұрын

Why not do the logo as an H1 and using the font that is already imported?

@KevinPowell 4 жыл бұрын

I think the days of having a logo as an h1 are past us. Titles should be for the page, not the site. Also, for search intent purposes, big companies will rank anyway (think big brands, Apple, Nike, etc), and small companies don't need or want to rank for their name, they want to rank for search things like "skiing in quebec" or whatever. I know in the past it was popular to have the name and an image, and to hide the text and only show the image as a background, but from what I've seen, and my experience, it's no longer needed. If you have a blog, the h1 should be the title of each article, for example, and not the name of the site.

@syediqbalahmed3176 4 жыл бұрын

good

@dougallen2742 4 жыл бұрын

Kevin and reason to add a class to all your elements?

@KevinPowell 4 жыл бұрын

Keep specificity equal across the board mostly. And just habit.

@rzr9222 3 жыл бұрын

0:11 Top 10 rappers Eminem was to afraid to diss

@benjamincardona5444 3 жыл бұрын

I completely hate CSS and HTML but i do love javascript but man, you're slowly making me think twice about it

@RodrigoMendoza7 4 жыл бұрын

4:20 Try hiding Figma's panels with "CTRL + \" or "CTRL + SHIFT + \"

@KevinPowell 4 жыл бұрын

Thanks :D

@RodrigoMendoza7 4 жыл бұрын

@@KevinPowell You're welcome 😃

@JimKernix 3 жыл бұрын

What is XD? Is it another free design site?

@jefferynewton9578 3 жыл бұрын

Adobe XD

@infosandfacts7536 4 жыл бұрын

Oh yes its tomorrow :))))))))

@zbigniewiksinski 3 жыл бұрын

what vs code theme is that, anyone?

@KevinPowell 3 жыл бұрын

Atom One Dark :)

@efexzium 3 жыл бұрын

Whats the point of using Figma if u have to build the website from scratch 2 times...

@BrianGawlik 3 жыл бұрын

I was actually wondering this as well! I suppose it may just be helpful to visualize the site, but it seems like being able to export HTML/CSS would be extremely helpful. I have seen some export to HTML/CSS plugins around for Figma, but I don't know much about them, how/how-well they work, etc. Do you know anything about those or other tools which may have a similar capability?

@viniciocoelho3538 4 жыл бұрын

Please, please could tou use css grid? Thanks.

@KevinPowell 4 жыл бұрын

I do! Though it does end up being a little bit of a mess to be honest 😂 Shows some of the limitations of grid and how to overcome them I suppose though, as we do get there by the end. Almost all of the grid content will be in the 3rd video.

@viniciocoelho3538 4 жыл бұрын

@@KevinPowell could I include a nav bar within the grid, instead of make a list with display inline, and etc? Or is It best treat the nav bar separately? Thanks Man. You make awesome videos. I am learning a Lot.

@KevinPowell 4 жыл бұрын

In this case I'm going to use display: flex on the list itself. Seems to be lists are still the best way to do it.

@viniciocoelho3538 4 жыл бұрын

@@KevinPowell you are the best man. Thanks.