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.
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.
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 !!!
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!
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.
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!
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!
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.
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
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.
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?
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 👍
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
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.
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
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?
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.
@@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.
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.
Things go off the rails a little in the 3rd video, hopefully you still like it by the time we get through that, lol.
That’s the type of video that worth to watch from the beginning to the end. Thank you very much for that.
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.
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 !!!
Thanks for the kind words!
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!
Ooooh boy! I'm pumped for this series! Already waiting for te next episodes! 💯
Thiago Vieira me too bro. He is a good teacher.
I love your positivity! Great way to teach :) Thank you for that!
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.
Great work! Really amazing!!
Will be looking forward for more!!
Great energy Kevin. Thank you very much for this subject. Much needed. !!
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!
Thank you so much, Kevin, I really like your teaching style. You're an amazing instructor.
I learned a lot just from watching this...Figma will now be added to my repertoire and thanks again
Your channel is a gem!
Thank you.
Nice! I really dug the design video for this :D
Thanks for the fast pace!
Love your videos, Kevin!
Can't wait!!!! 😁
wow this is the best channel on youtube for programming great!
I've been looking for a video like this! Great tks
Cool! Thank you, Kevin!
Wow Godfather of CSS. Thank you for this tutorial.
Kevin is very pleasant to watch and explains well
You make my day
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!
This was perfectly paced btw. The right speed, content and maturity level. THANK YOU
I am impressed with your coding.
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.
I used to 'hate' CSS till' I knew Kevin. Thank you so much!!!
This is amazing learned so much. Are the other videos from this series still posted on your channel?
Thank you so much
Thank you
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
You'll have to find someone else for that, I don't touch back-end... too scary, lol.
Thank you, Thank you and Thank you sir ❤️❤️❤️❤️❤️❤️❤️❤️🇧🇩
4:24, nice tip. I tend to use Ctrl+\ for show hide UI. Basically the same but better :)
I didn't know about that one! Nice.
If you press ctrl + backslash (\), you can toggle figma's panels!
Very god
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.
6:03 Magic trick
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?
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 👍
Awesome video Kevin.
Do you think, using something like the `dl` element could bring more semantic meaning to the weather gadget?
That's a good question. It probably would have been a good idea 👍
nice
you should always use alt="logo", it's used by blind people & screen readers stuff, it's very important for them, thanks
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
good
even today no one is teaching this, most courses are just a video lecture of the free documentation that is available for every language.
0:11 Top 10 rappers Eminem was to afraid to diss
how you put the vscode and the browser side by side ?
Oh yes its tomorrow :))))))))
How i can get the images???
I completely hate CSS and HTML but i do love javascript but man, you're slowly making me think twice about it
Why not do the logo as an H1 and using the font that is already imported?
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.
Kevin and reason to add a class to all your elements?
Keep specificity equal across the board mostly. And just habit.
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
4:20 Try hiding Figma's panels with "CTRL + \" or "CTRL + SHIFT + \"
Thanks :D
@@KevinPowell You're welcome 😃
What is XD? Is it another free design site?
Adobe XD
what vs code theme is that, anyone?
Atom One Dark :)
Whats the point of using Figma if u have to build the website from scratch 2 times...
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?
I bet you learnt some time after this that you can hide figma's tools by hitting ctrl + \
Please, please could tou use css grid? Thanks.
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.
@@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.
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.
@@KevinPowell you are the best man. Thanks.
images link
You can get them all from the Figma design file which is linked in the description.
Emmet cheatsheet docs.emmet.io/cheat-sheet/
Very fast, pls taken mid slow... but super design sense...
file ??
I forgot the link! Here it is: www.figma.com/file/GwRmx1FJ31evTNq6hpCpCs/Amazing-Mountain?node-id=0%3A1