Never mind, I just read your notes... Ty so much, I am starting to learn so much from watching your videos. You are so good with words and expressing your content.
I just love those moments when I'm guessing the correct properties even before you type them! These videos are really bringing my skills up! Cheers for one of the most competent, at least to my knowledge, people on YT in terms of CSS.
Thank you so much for this, I have been learning web design for quite a while now and I always find it difficult to implement what I have learned but watching this and coding along made my foundation very strong and feel more confident approaching web design in the future and all of this would not have been possible without your amazing explanation.
I've being a frontend developer professionally over the last 4 years and my pain in the ass always was the CSS. Starting to look over it again now and I wanna master it (resposive layouts, grids, flex-box, pseudo-elements, pseudo-classes and so on). Thank you very much for this video!
Thank you, Kevin, I don't usually wait for someone's latest videos on RUclips, but I clicked so fast when I saw yours on my RUclips homepage. You are a kind soul who inspire thousands. Someday I will give back to the community like you did - when I am skillful enough! :)
YES!! Thanks Kev! Looking forward to crushing this, this memorial weekend! I don’t know if they celebrate that in Canada… But if they do.. Celebrate it with CSS!
We celebrate around the 23rd of May. Queen Victoria's birthday....but we call it May Day. Maybe the US should consider that ...because that's what I'm hearing them say all the time now.
Dear Kevin Powell Sir, What you did is a serious "Grid" engineering there! WoW! I was hoping to see you made one more addition to it, which is: On clicking on the arrow button, the image, and the description changes along with the number behind it like (1/5). That would have been a marvel! Thank You so much for your efforts. Stay Safe.
@kevin A great tutorial indeed. I am not clear on the exact benefit of using subgrid over grid. For example, in the layout for the header, we used a subgrid to place the nav bar. What is the benefit over using grid-template-columns: repeat(3, 1fr)? If we use this, the nav bar uses the exact same layout as it had been using earlier, and we can still place the nav bar in 2/4. Thank you once again for sharing your knowledge openly!
Hi Kevin.It is Ivan from the course.You are great in what you are doing keep this way.Regarding subgrid, it is good but together with the grid has one major limitation which I think will be resolved in near future.the objects cannot go outside its grid parent without distorting other objects.In other words, it would be great if we can make CSS grid being able to write a column layout that doesn't explicitly declare the number of rows or columns, but automatically creates them based on somewhat loose instructions and the content you provide.But I couldn't find the way to do this with grid so far neither with flexbox grid.I will send you visual examples on your email.
I'm so glad future Kevin stepped in and fixed the column sizing, I was worried. I think you could have doubled up your column gap, or halved the left/right so the paragraph on the left doesn't touch the overflowing ::after bg. A bit surprised you let that slide, I know how much you hate text touching edges, but I guess that's what the original design has.
Firstly. thank you Kevin for your easy to follow you tube video's. After many hours of frustration and frustration, I have managed to create a competition knock out template for a sports club I am a member off and created the web site for them. My question to you is:- I am asking why when I use Dreamweaver 20.1 (Build 15211), Mac pc Catalina 10-15-4 and FireFox browser . i do not see the rows location flags in my first column when I use the Firefox Grid Inspector. I have played for hours doing various html swap out's and css changes etc. i will attach my screen shot with my template. It is a large template of 67 plus rows and 7 columns. This screen shot is stage 1 of a multi-stage plan to make a draw sheet using CSS Grid. I have moved column 3 for example and swapped it with column 1, the fault stays in row 1. I thought it was me, basic skills on a pc and new version of Dreamweaver so i contacted Adobe. They told me to put the view mode to LIVE on the Dreamweaver work page. I did and it stopped a lot of intermittent issues i had. But I still do not see row line numbers in the No 1 column, what ever column i place there in my html. I also copied column 3's css and renamed it to Column1, still no line numbers in rows 1-2, 2-3, 3-4 etc etc. Is it a Firefox bug when using large numbesr. i would love to send you my template code so you can see it.
33:04 When I'm looking at how to make a grid out of overlapping content: Well... there's x-amount of columns, but then there's that overlapping content, maybe I could align those, or maybe I could create an extra column, but then I have still have to align the grid properly, or I could create more empty columns so they're distributed evenly,... Why am I even trying to use grid when I could just simply align everything properly individually without having to build a grid? Grid is great when you have an actual grid, but when you have content that doesn't necessarily fits the grid it's hard to visualize and base decisions on it. Hopefully the rest of your video will show me your thoughtprocess on how you choose your grid layout.
Seems like it's just easier not to use grid in this case lol. And then you used subgrid... :( Meaning that only about 5% of browser users will be able to see the design and everyone else will gouge their eyes out. :')
i feel like im following along pretty well until you get to min columns and max this, min that and whatever haha then yea i get so lost BUT i still really enjoyed the video good job :)
Hello, thank you for all the information. In your video you are creating gird layout for a single page design. But in the case of multiple page, for example I have a site that have: - Home page - shop page - blog page - video page - account page - contact us page And each page body needs a different layout. So what should I do in this case, of course the header, nav and footer have the same layout in all pages but body differ in each page. Should I create layout grid, and different body nested grid for other pages? Also in the header I have 2 blocks, and the nav have 4 blocks. Do you think each block should be an item in the grid, or I do the gridding for the header, nav, body and fotter and than use flex for internal block arrangements design?
Hi kevin been following your vid for a while now, can you do also responsive design using css framework like bootstrap? I would love to explore more of it. Thanks, I hope you can create one :) cheers
Hi Kevin, Wanted to know about resetting the html font size to 62.5% and then setting the body fontsize to 1.6rem. Then using everywhere rem units for padding,margin and fontsizes. For responsiveness changing html fontsize for fluidness. What about this ways? Any downside for this one?
If you can explain the details of the CSS and how and when to use them, I will grateful. I understand what you are trying to do, but the code in use is making me a little bit confused. I am mixing things up. If you can explain the elements of declaration of the CSS, it will be more useful than a full tutorial Thanks a lot.
Thanks for the tut Kev. At the 27-29 min mark, just wondering if the final button effect really worth the extra byte of code and productivity time in creating the effect compared to just styling a standard button. Thanks.
Hi shall I try this with u I mean try myself side by side with you for learning and understanding!? ...without having that much knowledge in flex box and grid....
Kevin's channel seems to be superuseful, but this is the 2nd video I watch and he seems to always skip through the content of the markup, images and more stuff, he seems to cut to where he already added it, is this regular in his videos?
I'm new to watching Kevin, so I'm not so sure. However, if he does skip through to much for you and you get lost, check in github for the final code to see the things that you have missed.
Thank you Kevin your videos are so important for me they help me a lot. By the way. Taking can this become a real part-time job? and how much could you possibly earn when you make this kind of project? Friendly Yannis from Athens.
Can development be a job? It's a pretty big industry! As far as how much you'd make, that depends. If you're freelancing, how good of a sales person are you? 😅
@@KevinPowell oh i understand. I mean can you find people who will give you these kinds of tasks, like what you did today ? I am asking because I like front end and i wish i could earn some cash. Do you have any online page for freelancers asking for these projects?
There are freelance sites out there. If I were you I'd focus more on networking and trying to find clients instead of relying on online sites where you have to compete with 100s of othefs
Hi Kevin, thank you so much for this video. I wonder where did you get this new CSS property "clamp" ? Is there a resource where we can follow up the new and the upcoming CSS properties ?
I mostly learn about things through Twitter to be honest, lol. Twitter, CSS Tricks, not sure what else really. It's been on my radar awhile, not sure where I first learned about this one.
Hi Kevin. Thanks again. I just found out your website and your courses so I am definitely going to signup for the responsive bootcamp. Kevin this is really important ... can you make a video or maybe a short course discussing and walking us through all the new in CSS? This video of ours where you lay out just a few of them made me crazy 😉👍
I've tried doing this only on chrome and the results and that bad. just had to do a lot of trade-offs and some small hackes. you got any tips link to site.
I totally forgot that big "01" 🤦♂️ - the final code on GitHub includes it though!
Kev can you tell me what a scetching editor u used in this tutorial?
Pawel .n adobe xd
what do you use to view result as you edit your code
Never mind, I just read your notes...
Ty so much, I am starting to learn so much from watching your videos. You are so good with words and expressing your content.
I just love those moments when I'm guessing the correct properties even before you type them! These videos are really bringing my skills up! Cheers for one of the most competent, at least to my knowledge, people on YT in terms of CSS.
I totally agree ✌️ maybe Kevin would do a full course for us ?
Thank you so much for this, I have been learning web design for quite a while now and I always find it difficult to implement what I have learned but watching this and coding along made my foundation very strong and feel more confident approaching web design in the future and all of this would not have been possible without your amazing explanation.
I think i have learned half of css from this video alone, Really Helpful
Great video, as always. At 3:14. you highlighted which HTML tags correspond to which elements of the final product, I love that touch
I love these asymmetrical designs. I hope you do more of these in the future.
Best responsive video I've watched in a while. Really loved the attributes used.
I've being a frontend developer professionally over the last 4 years and my pain in the ass always was the CSS. Starting to look over it again now and I wanna master it (resposive layouts, grids, flex-box, pseudo-elements, pseudo-classes and so on). Thank you very much for this video!
Thank you, Kevin, I don't usually wait for someone's latest videos on RUclips, but I clicked so fast when I saw yours on my RUclips homepage. You are a kind soul who inspire thousands. Someday I will give back to the community like you did - when I am skillful enough! :)
Nice, the very moment im looking into asymetrical design, Mr. Powell saves the day
Your work will bring a lot of insights into solving our next problem.
thank you sir. Always wanted to learn designs like this. Please do more complex designs like these
I've been CSSing hard for coming up on 5 years and I still feel like I learn something new every video.
Thanks very much for your videos
Easy to understand for people who is starting.
This really means a lot to my HTML development. Thanks a Lot
YES!! Thanks Kev! Looking forward to crushing this, this memorial weekend! I don’t know if they celebrate that in Canada… But if they do.. Celebrate it with CSS!
Am too celebrate in India 🤩🥰
We celebrate around the 23rd of May. Queen Victoria's birthday....but we call it May Day. Maybe the US should consider that ...because that's what I'm hearing them say all the time now.
i love this one. please make these type of website design more!
Wow, been using css grid to do basic column layouts but this takes it to another level
It's amazing, every time I think I got finish CSS I find a new property in your tutorial 😅
Your enthusiasm is contagious Kevin! Love your videos a lot. Now I just wish my colleagues who hate CSS would watch this :'D
This video is next level. Hella value packed in such a short video. keep them coming. Bless your heart Good SIr
Thank you Kevin, great video to step up from the basic stuff :)
Bro, you BLEW my mind when you just did ".class" and it just autogenerated. Like my mind.is.blown.
You keep blowing my mind with these shortcuts.
wow, I now love grid.. thank you!
i am gaining confidence watching your videos ....thanks kevin.
this was cool! Very underrated video
Dear Kevin Powell Sir, What you did is a serious "Grid" engineering there! WoW! I was hoping to see you made one more addition to it, which is: On clicking on the arrow button, the image, and the description changes along with the number behind it like (1/5). That would have been a marvel! Thank You so much for your efforts. Stay Safe.
This guy helped me so much... it's unreal...
Awesome content Kevin ! Keep it going !!
This video is a treasure
Great video! I'm learning a lot when I see you coding!
Thanks @kevin powell i'm also really looking forward to your css demystified content!
It's being delayed a little, but I'm working on it!
I just loving how you did it and why you did it to be honest, I'm waiting for your another video 🏃
Loooooooooooooving this video!!!!!! Learnt soooo many new things along the way......
Great Kevin you are the best. Again a greeting from Florence
Thank you so much!
@kevin A great tutorial indeed.
I am not clear on the exact benefit of using subgrid over grid. For example, in the layout for the header, we used a subgrid to place the nav bar. What is the benefit over using grid-template-columns: repeat(3, 1fr)? If we use this, the nav bar uses the exact same layout as it had been using earlier, and we can still place the nav bar in 2/4.
Thank you once again for sharing your knowledge openly!
Your content is great. Thanks for sharing.
Learned a lot of things. Thanks a lot.
Thank you so much. Good job!
love you dude
Hi Kevin.It is Ivan from the course.You are great in what you are doing keep this way.Regarding subgrid, it is good but together with the grid has one major limitation which I think will be resolved in near future.the objects cannot go outside its grid parent without distorting other objects.In other words, it would be great if we can make CSS grid being able to write a column layout that doesn't explicitly declare the number of rows or columns, but automatically creates them based on somewhat loose instructions and the content you provide.But I couldn't find the way to do this with grid so far neither with flexbox grid.I will send you visual examples on your email.
Thanks so much. It it is way too advanced form me, but i'm trying to bee fluent in that as you.
Really enlightening
Another great video, Kevin - thank you. And how much easier to read the CSS without unnecessary SASS!!
Thank you kevin
I'm so glad future Kevin stepped in and fixed the column sizing, I was worried.
I think you could have doubled up your column gap, or halved the left/right so the paragraph on the left doesn't touch the overflowing ::after bg. A bit surprised you let that slide, I know how much you hate text touching edges, but I guess that's what the original design has.
new look , i like it
Great video
Excellent as always. I would think the description text coulduse some spaceon the right though, to avoid it toucing the gray bar in the background?
Thanks..... I have learn lot of from you...
Great Job :)
cool.
.
love it
opened that repo I was like WTF it's shifted! ::after I've remembered you said it's only for FireFox
How come you're not using Firefox :p
Cooool!
I would really like to make websites for a living! Thank you for your videos!
I follow you all the time. Question; what's gonna happen to Figma?
Thank you so much.
Can you please talk about AMP. Thanks 🙏🏻
Nice video
Firstly. thank you Kevin for your easy to follow you tube video's.
After many hours of frustration and frustration, I have managed to create a competition knock out template for a sports club I am a member off and created the web site for them.
My question to you is:-
I am asking why when I use Dreamweaver 20.1 (Build 15211), Mac pc Catalina 10-15-4 and FireFox browser .
i do not see the rows location flags in my first column when I use the Firefox Grid Inspector.
I have played for hours doing various html swap out's and css changes etc.
i will attach my screen shot with my template. It is a large template of 67 plus rows and 7 columns.
This screen shot is stage 1 of a multi-stage plan to make a draw sheet using CSS Grid.
I have moved column 3 for example and swapped it with column 1, the fault stays in row 1.
I thought it was me, basic skills on a pc and new version of Dreamweaver so i contacted Adobe.
They told me to put the view mode to LIVE on the Dreamweaver work page.
I did and it stopped a lot of intermittent issues i had. But I still do not see row line numbers in the No 1 column,
what ever column i place there in my html.
I also copied column 3's css and renamed it to Column1, still no line numbers in rows 1-2, 2-3, 3-4 etc etc. Is it a Firefox bug when using large numbesr.
i would love to send you my template code so you can see it.
Great as always, any reason not using sass? trend going down?
33:04 When I'm looking at how to make a grid out of overlapping content: Well... there's x-amount of columns, but then there's that overlapping content, maybe I could align those, or maybe I could create an extra column, but then I have still have to align the grid properly, or I could create more empty columns so they're distributed evenly,... Why am I even trying to use grid when I could just simply align everything properly individually without having to build a grid?
Grid is great when you have an actual grid, but when you have content that doesn't necessarily fits the grid it's hard to visualize and base decisions on it.
Hopefully the rest of your video will show me your thoughtprocess on how you choose your grid layout.
Seems like it's just easier not to use grid in this case lol. And then you used subgrid... :( Meaning that only about 5% of browser users will be able to see the design and everyone else will gouge their eyes out. :')
Thanks Kevin, I'm trying to use yours suggestions for an app made with vuejs..
i feel like im following along pretty well until you get to min columns and max this, min that and whatever haha then yea i get so lost BUT i still really enjoyed the video good job :)
I wish you did the navbar fix for mobile lol
lol how much things you can do with grid, i need to learn all this cool properties
Thanks for the vid Kevin, once again. Is there a place where i can find figma/XD designs specifically designed to build with HTML/CSS for practice?
Hey Kev, Its been a year since you made this video. How about its browser support in 2021? Good for production?
Hello, thank you for all the information.
In your video you are creating gird layout for a single page design.
But in the case of multiple page, for example I have a site that have:
- Home page
- shop page
- blog page
- video page
- account page
- contact us page
And each page body needs a different layout.
So what should I do in this case, of course the header, nav and footer have the same layout in all pages but body differ in each page.
Should I create layout grid, and different body nested grid for other pages?
Also in the header I have 2 blocks, and the nav have 4 blocks.
Do you think each block should be an item in the grid, or I do the gridding for the header, nav, body and fotter and than use flex for internal block arrangements design?
I’m curious why you setup hovers on the mobile layout.
Hi kevin been following your vid for a while now, can you do also responsive design using css framework like bootstrap? I would love to explore more of it. Thanks, I hope you can create one :) cheers
Please do a tut on light boxes??? Please please please
I probably understood most of it, but lose it in the grid part 😢
Hi Kevin, Wanted to know about resetting the html font size to 62.5% and then setting the body fontsize to 1.6rem. Then using everywhere rem units for padding,margin and fontsizes. For responsiveness changing html fontsize for fluidness. What about this ways? Any downside for this one?
If you can explain the details of the CSS and how and when to use them, I will grateful.
I understand what you are trying to do, but the code in use is making me a little bit confused. I am mixing things up. If you can explain the elements of declaration of the CSS, it will be more useful than a full tutorial
Thanks a lot.
Thanks for the tut Kev. At the 27-29 min mark, just wondering if the final button effect really worth the extra byte of code and productivity time in creating the effect compared to just styling a standard button. Thanks.
I don't like his button style at all. Way to small, looks bad before the effect.
Jesus! This is so good! Thanks for putting these up! Question, what software do you use for your mockups?
Hi shall I try this with u I mean try myself side by side with you for learning and understanding!? ...without having that much knowledge in flex box and grid....
Hi kevin what blogs/sites do you use to keep up to date with the latest technologies and trends? Thanks.
CSS-Tricks, Smashing Magazine, and Twitter :) - Most research is done via MDN.
Kevin's channel seems to be superuseful, but this is the 2nd video I watch and he seems to always skip through the content of the markup, images and more stuff, he seems to cut to where he already added it, is this regular in his videos?
I'm new to watching Kevin, so I'm not so sure. However, if he does skip through to much for you and you get lost, check in github for the final code to see the things that you have missed.
Thank you Kevin your videos are so important for me they help me a lot.
By the way. Taking can this become a real part-time job? and how much could you possibly earn when you make this kind of project?
Friendly Yannis from Athens.
Can development be a job? It's a pretty big industry! As far as how much you'd make, that depends. If you're freelancing, how good of a sales person are you? 😅
@@KevinPowell oh i understand. I mean can you find people who will give you these kinds of tasks, like what you did today ?
I am asking because I like front end and i wish i could earn some cash. Do you have any online page for freelancers asking for these projects?
There are freelance sites out there. If I were you I'd focus more on networking and trying to find clients instead of relying on online sites where you have to compete with 100s of othefs
Hi Kevin, thank you so much for this video. I wonder where did you get this new CSS property "clamp" ? Is there a resource where we can follow up the new and the upcoming CSS properties ?
I mostly learn about things through Twitter to be honest, lol. Twitter, CSS Tricks, not sure what else really. It's been on my radar awhile, not sure where I first learned about this one.
Hi Kevin. Thanks again. I just found out your website and your courses so I am definitely going to signup for the responsive bootcamp. Kevin this is really important ... can you make a video or maybe a short course discussing and walking us through all the new in CSS? This video of ours where you lay out just a few of them made me crazy 😉👍
everything falls in together so nice...
this can't be!!! must be black magic!
burn the witch
Hi kevin, what is the browser extension you are using for webpage resizing
🤩🤩
Hey Kevin! Would adding a title to a link have the same effect as an aria-label?
what is the reason behind using "01" in so many website ? does it mean "we are number 1"......btw sir u made electrifying design
What edtension you use for live watching page
what if your images dont shrink to the size of the mobile viewport after applying the max-width value?
I've tried doing this only on chrome and the results and that bad. just had to do a lot of trade-offs and some small hackes. you got any tips link to site.
I used bootstrap col-md to split columns which is best bro??
What did you use to design? Figma or what is that xd
Hello, this project didnt end up looking well on chrome? Do you have any reason?
Can this apply to margin and padding? Im talking about inherit in box-sizing: border-box
sir please make a tutorials on making webSockets with core php ...🙇🙏🙏
That's way out of my wheelhouse! I'm really HTML, CSS, maybe some JS every now and then 😊
@@KevinPowell
no problem 😇
thanks for replying sir...
Love from india
Hey kevin can you please make a landing page like, morningbrew or theskimm please. I developed mine but its not responsive and not making sense🤦🏿♂️
I could look into those
Hi thanks for the tutorial, so basically Bootstrap ewwwwwwwwwwww? Is it the comic sans of web design?
Does the grid work a different way in Chrome? The results are off. Ran it on both chrome and firefox and the difference is there.
because "subgrid" property (ex.: 'grid-template-columns: subgrid; ' ) is only compatible with Firefox and Safari.
recommended better use SCSS not soo different can use live scss vscode extension to compile.. Beginner will find it more helpful... less code
My chrome seems to not supporting subgrid. Any alternative ways?
Subgrid is only supported by Firefox at the moment :(