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'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 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.
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.
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.
@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!
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. :')
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.
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?
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 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 :)
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?
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 😉👍
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.
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 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
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.
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.
Hi, so i've been writing some css and html on atom, but as an output there is a problem it only displays few things and like 40%of the other properties don't get executed or displayed, i've been looking for a while to find a solution but i'm super confused and upset about this idk what to do, i've even following some tutorials on youtube so i can get to know is the problrm generating from my abilities in css and html or smt else, anf yeah i did the exact same thing un the tutorials and still the output was totally different. Hope i'll get a reply soon and thanks a lot for putting an effort into reading this
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 ?
I think i have learned half of css from this video alone, Really Helpful
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!
I love these asymmetrical designs. I hope you do more of these in the future.
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.
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! :)
Great video, as always. At 3:14. you highlighted which HTML tags correspond to which elements of the final product, I love that touch
Best responsive video I've watched in a while. Really loved the attributes used.
Nice, the very moment im looking into asymetrical design, Mr. Powell saves the day
I've been CSSing hard for coming up on 5 years and I still feel like I learn something new every video.
Your work will bring a lot of insights into solving our next problem.
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.
This really means a lot to my HTML development. Thanks a Lot
Your enthusiasm is contagious Kevin! Love your videos a lot. Now I just wish my colleagues who hate CSS would watch this :'D
It's amazing, every time I think I got finish CSS I find a new property in your tutorial 😅
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.
thank you sir. Always wanted to learn designs like this. Please do more complex designs like these
This video is next level. Hella value packed in such a short video. keep them coming. Bless your heart Good SIr
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
Thanks very much for your videos
Easy to understand for people who is starting.
i am gaining confidence watching your videos ....thanks kevin.
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.
Thank you Kevin, great video to step up from the basic stuff :)
Awesome content Kevin ! Keep it going !!
Great video! I'm learning a lot when I see you coding!
This guy helped me so much... it's unreal...
this was cool! Very underrated video
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 🏃
This video is a treasure
Great Kevin you are the best. Again a greeting from Florence
wow, I now love grid.. thank you!
Loooooooooooooving this video!!!!!! Learnt soooo many new things along the way......
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.
Your content is great. Thanks for sharing.
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.
Learned a lot of things. Thanks a lot.
@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!
Thank you so much. Good job!
Thank you kevin
new look , i like it
Thank you so much!
love you dude
Really enlightening
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
Thanks so much. It it is way too advanced form me, but i'm trying to bee fluent in that as you.
Great Job :)
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?
cool.
.
love it
Great video
Thanks..... I have learn lot of from you...
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. :')
Another great video, Kevin - thank you. And how much easier to read the CSS without unnecessary SASS!!
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.
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?
Great as always, any reason not using sass? trend going down?
I would really like to make websites for a living! Thank you for your videos!
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 follow you all the time. Question; what's gonna happen to Figma?
Cooool!
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.
Nice video
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.
Hey Kev, Its been a year since you made this video. How about its browser support in 2021? Good for production?
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 :)
Jesus! This is so good! Thanks for putting these up! Question, what software do you use for your mockups?
Thank you so much.
Can you please talk about AMP. Thanks 🙏🏻
what if your images dont shrink to the size of the mobile viewport after applying the max-width value?
I’m curious why you setup hovers on the mobile layout.
lol how much things you can do with grid, i need to learn all this cool properties
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?
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 😉👍
Hi kevin, what is the browser extension you are using for webpage resizing
Thanks Kevin, I'm trying to use yours suggestions for an app made with vuejs..
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.
Hey Kevin! Would adding a title to a link have the same effect as an aria-label?
I wish you did the navbar fix for mobile lol
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
Hello, this project didnt end up looking well on chrome? Do you have any reason?
I don't understand what the value -1 in grid-column property does. Is it possible that Chrome and Firefox displays this in a different way?
-1 means that 1 from last, i think
@@AkshayShukla. I think so, but apparently my chrome doesn't display it properly
what is the reason behind using "01" in so many website ? does it mean "we are number 1"......btw sir u made electrifying design
how do you do it. When I try to put my vs code and my browser side by side. One always leaves. It's like they are on the process of divorce.
everything falls in together so nice...
this can't be!!! must be black magic!
burn the witch
@12:36 uhhh what... lolol
What edtension you use for live watching page
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.
My chrome seems to not supporting subgrid. Any alternative ways?
Subgrid is only supported by Firefox at the moment :(
Please do a tut on light boxes??? Please please please
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
I used bootstrap col-md to split columns which is best bro??
Can this apply to margin and padding? Im talking about inherit in box-sizing: border-box
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
I probably understood most of it, but lose it in the grid part 😢
🤩🤩
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.
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.
Hi, so i've been writing some css and html on atom, but as an output there is a problem it only displays few things and like 40%of the other properties don't get executed or displayed, i've been looking for a while to find a solution but i'm super confused and upset about this idk what to do, i've even following some tutorials on youtube so i can get to know is the problrm generating from my abilities in css and html or smt else, anf yeah i did the exact same thing un the tutorials and still the output was totally different. Hope i'll get a reply soon and thanks a lot for putting an effort into reading this
Not 100% sure what the problem is. Come and join us in my discord community (link in the description). Be easier to ask people in real time :)