I always thought you said "Hello my friend and friends". I don't know, I guess it probably made sense to me as I didn't really pay any attention to it. Ah well, you learn something new every day!
These are the best videos because I know I can do this, but I'm glad to learn better ways to do it, and it also allows new devs to learn from scratch the right way from the start.
Really enjoy these type of Frontend Mentor start-to-finish videos. Good to know what CSS works and why but seeing the thought process throughout a project is extremely helpful.
I still have a lot to learn, but watching professionals in action is invaluable. It's a great way to pick up new techniques, discover more efficient approaches, and understand the journey to becoming an expert. Thanks, @Kevin.
I know you mentioned that there are enough form videos on the internet, but with all of the ones that I have found, they are so hard to understand and follow and I hope that one day you can do an expansion on how to do write form action and lets say have it link to a Google sheet or something of that nature. Appreciate your videos and you are truly the other person I watch for this content. Keep it up!
I rarely subscribe to people I watch, because I seldom watch certain youtubers on a regular basis. Your channel is one of some exceptions - the way you present the basics and convention to CSS styles is very helpful and understandable. Thank you!
This is a masterpiece, I would say I am pretty confident in CSS but there is always something you learn by watching your videos. Is it either best practices or new selectors or new thinking method,... Thanks for this Kevin!
You actually CAN transition gradients in two ways: first, the background-position property is fair game, so just design your gradient as a sprite, with background-size 200% or something like that and move it; second, you can use custom properties as your color values and transition that. To be able to transition a color value, you’ll need to use a @property rule, and declare it as color, but with that it just works as expected.
Yup, both of those work 😊. Registered custom properties with @property are definitely the way to go, but browser support isn't great yet. It's in all major browsers, but it's relatively new
great video Kevin, your explanation for the shadow was great, i kept, wondering why not use a box or drop-shadow, think i am going to try using grid where i used to change the flex direction to column and see how that works, take care and God Bless
I am a huge fan of making a TOC at the top of my CSS file, with identical section comments below so you can easily use the find command to pop to a particular area.
I like how you showed different ways to do the same thing and described the tradeoffs. I think that's a great way to learn things. That process is similar to coding interviews, where it's good to find a brute force approach and then try to find a way to optimize the solution while discussing the tradeoffs. Awesome video! 😊
One thing I'm definitely taking away from this is to use grid much more - in fact, use it at all!! Especially for the scenarios like for the checkmark list. Takes a lot of pain away from the css.
Quick question. I notice you often use rem and em for padding and margin. If the user has their font size set to something really big won't this make things look completely different to the design?
Ive been liking using a fieldset (or nested fieldset) to group label and inputs together instead of a div. If this is semantically incorrect , please lmk! Just seemed like a good pairing within a form. Ive also seen legend used.
I've also never heard of the dl tag! Another list?! That's exciting! I also like how you only remove list styles from ul[role=list]. However I thought that attribute was inherent to ul/ol? EDIT: aha just got to the part about how if you take off the list style , safari screen reader may no longer announce it as a list ! Love these kind of tips.
Last one: can we make a container query for a picture element somehow so its media query is looking at the size of the picture element and not the screen to switch sources ? Or would that just have to be a background image like any other element ?
For the image, it has to be in the HTML, which is a little annoying... As for fieldset, usually that's for additional grouping within the form, where you might have several labels and inputs together. The easy use case is for a group of radio buttons, where you have one question (the legend in the fieldset), and then all the label + radio inputs.
@@KevinPowell yea I've used fieldset for radio groups or for grouping several fields together but is it okay to use fieldset>(fieldset > label + input ) + (fieldset > label + input) + (fieldset > label + input)? Or should the parents of the label+inputs just be divs ?
Hate to bug you. I've been trying to locate a tutorial you did where you had an animated multi-color background section that was orange, purple, blueish from a static image and then used css to make it move and flow like a lava lamp. It was a multi-color lava lamp type color in a hero that moved and flowed. Kinda like your blob and your colored orb that tracked with your mouse. Same colors to that. I recall you had an online utility generate the initial image / svg and then made it move. I've looked and looked and cannot find it. any ideas? on the plus side, I've looked over most of your videos today. But I'm not sure what the lesson was you were teaching so without the title or thumbnail indicating it's the one, I'm looking through videos and lives.
Great video as always! Do you know if there is any difference between the behavior of `:not(:focus):invalid` and the new `:user-invalid` pseudo class? As I understand it, the latter is made precisely for this use case. Browser support is not perfect yet however.
Covered this in my most recent video! If you missed it, a :not(:focus):not(:placeholder-shown):invalid is almost the same as :user-invalid, but with better browser support :)
Hi Kevin, If the list text uses , then .checkmark-list li {display: grid; grid-template-columns: 1rem auto; } breaks. Please tell me how to fix this. Thanks in advance, Alex
Lovely Kevin Just got inspired by you and I just started my YT channel, uploaded new Vid today for beginners also.... Tune In My Lovely People ❤ Thanks 👍 #GivingBackToTheCommunity 😜
This does not work when an input is set to 'required' because it will always be invalid unless it contains text, therefore the invalid styling is always active until the input field is filled. Is there any way around this?
In my personal projects, I've always named elements with their names. So my entire page is always with a bunch of , , , , , , , , .... any wacky name you can think of. But it kinda helps me with readability AND CSS styling as well. My question is, does this approach affect other factors like accessibility/screen readers?
Not good to do bud. You should be using HTML 5 tags/elements. You also shouldn’t really be styling elements directly, you want to add classes to them. Using a naming convention such as BEM is good.
I don't like to declare variables that are only used once. Also what happens if you link to several CSS files, that have also the root property declared? Will it overwrite, inherit and add. should this be left to rules and chances?
at 22.32, can someone explain why he doesn't just use .content as the selector, and instead directly descends from .newsletter-cta? I know its more specific, but would .content not give the same results? I assume there could be an issue later in some projects doing this but can't figure it out
Skilled front end developers - like Kevin - will be in demand for a longgg time to come. It’s easy to write CSS, but to write concise, clear and easy-to-understand CSS with good accessibility features, requires years of practice to master.
AI spits out random text, it can't be guaranteed to work out of the box. So even if an AI generates some code some persons still needs to understand it enough to make sure it's only doing what it's supposed to or that it even works at all.
I always thought you said "Hello my friend and friends". I don't know, I guess it probably made sense to me as I didn't really pay any attention to it. Ah well, you learn something new every day!
I was reading this comment and was like nooooooo and I turned on the subtitels & was like WHAAAAAAAAAT :D
Same 😂
I just recently realized it's Front-end Friends too.
I thought this for years, and thought it was a bit of an odd expression 🤭
You're not alone haha
These are the best videos because I know I can do this, but I'm glad to learn better ways to do it, and it also allows new devs to learn from scratch the right way from the start.
Really enjoy these type of Frontend Mentor start-to-finish videos. Good to know what CSS works and why but seeing the thought process throughout a project is extremely helpful.
The way you handle the error state in the client side is neat! Thanks for the CSS Tips.
I still have a lot to learn, but watching professionals in action is invaluable. It's a great way to pick up new techniques, discover more efficient approaches, and understand the journey to becoming an expert. Thanks, @Kevin.
I know you mentioned that there are enough form videos on the internet, but with all of the ones that I have found, they are so hard to understand and follow and I hope that one day you can do an expansion on how to do write form action and lets say have it link to a Google sheet or something of that nature. Appreciate your videos and you are truly the other person I watch for this content. Keep it up!
I rarely subscribe to people I watch, because I seldom watch certain youtubers on a regular basis. Your channel is one of some exceptions - the way you present the basics and convention to CSS styles is very helpful and understandable. Thank you!
Your videos are life saver, thanks Kevin for such a great help to the community.
I love all the little explanations that you do. Great teacher!
Wow Kevin, that button gradient shadow is worth it. Thanks for teaching me that cool trick.
I'm experienced in html and css but I suck when it comes to designing webs. I really appreciate this video!
Let's go. I am super excited to learn from your this video. Thank you for all your efforts and hard work 😁👌🏼
This is a masterpiece, I would say I am pretty confident in CSS but there is always something you learn by watching your videos. Is it either best practices or new selectors or new thinking method,... Thanks for this Kevin!
MORE OF THESE PLZ!
You actually CAN transition gradients in two ways: first, the background-position property is fair game, so just design your gradient as a sprite, with background-size 200% or something like that and move it; second, you can use custom properties as your color values and transition that. To be able to transition a color value, you’ll need to use a @property rule, and declare it as color, but with that it just works as expected.
Yup, both of those work 😊. Registered custom properties with @property are definitely the way to go, but browser support isn't great yet. It's in all major browsers, but it's relatively new
This was really a helpful video. I learned a lottttttttttttttt of new things. THANK YOU Powell.
Ever since I discovered Kevin Powell, I decided I'm going to learn CSS from scratch. Although I'm familiar with CSS, I had just lost confidence.
I love these types of videos.
nice one. more like this please, very helpfull for beginners
Loved it. Never settles and always pushes for the perfect layouts. (Also, mind blown with isolation!)
great video Kevin, your explanation for the shadow was great, i kept, wondering why not use a box or drop-shadow, think i am going to try using grid where i used to change the flex direction to column and see how that works, take care and God Bless
Thanks!
Thank you so much! 🙏
My pleasure; thank YOU for the AMAZING videos
Wonderful 🎉🎉🎉
I am a huge fan of making a TOC at the top of my CSS file, with identical section comments below so you can easily use the find command to pop to a particular area.
I like how you showed different ways to do the same thing and described the tradeoffs. I think that's a great way to learn things. That process is similar to coding interviews, where it's good to find a brute force approach and then try to find a way to optimize the solution while discussing the tradeoffs. Awesome video! 😊
You are wonderful bro😊
One thing I'm definitely taking away from this is to use grid much more - in fact, use it at all!! Especially for the scenarios like for the checkmark list. Takes a lot of pain away from the css.
Who the hay-who said don't use descendant selectors!? Thats one of the great powers of css
Keep doing sir ❤
Amazing!
It is really helpful to us😊
Could you make a tutorial on how to implement algolia to a static site? There is no simple to the point explanation on the internet about this.
Quick question. I notice you often use rem and em for padding and margin. If the user has their font size set to something really big won't this make things look completely different to the design?
From figma to code 😊
Ive been liking using a fieldset (or nested fieldset) to group label and inputs together instead of a div. If this is semantically incorrect , please lmk! Just seemed like a good pairing within a form. Ive also seen legend used.
I've also never heard of the dl tag! Another list?! That's exciting! I also like how you only remove list styles from ul[role=list]. However I thought that attribute was inherent to ul/ol?
EDIT: aha just got to the part about how if you take off the list style , safari screen reader may no longer announce it as a list ! Love these kind of tips.
Last one: can we make a container query for a picture element somehow so its media query is looking at the size of the picture element and not the screen to switch sources ? Or would that just have to be a background image like any other element ?
For the image, it has to be in the HTML, which is a little annoying...
As for fieldset, usually that's for additional grouping within the form, where you might have several labels and inputs together. The easy use case is for a group of radio buttons, where you have one question (the legend in the fieldset), and then all the label + radio inputs.
Waiting for this 🎉🎉❤
@@KevinPowell yea I've used fieldset for radio groups or for grouping several fields together but is it okay to use fieldset>(fieldset > label + input ) + (fieldset > label + input) + (fieldset > label + input)? Or should the parents of the label+inputs just be divs ?
Completed the tutorial
Superr 🎉
Hello Kevin, I have a question on the button you made it relative and the after absolute, why does the relative not make it isolate?
Hate to bug you. I've been trying to locate a tutorial you did where you had an animated multi-color background section that was orange, purple, blueish from a static image and then used css to make it move and flow like a lava lamp. It was a multi-color lava lamp type color in a hero that moved and flowed. Kinda like your blob and your colored orb that tracked with your mouse. Same colors to that. I recall you had an online utility generate the initial image / svg and then made it move. I've looked and looked and cannot find it. any ideas? on the plus side, I've looked over most of your videos today. But I'm not sure what the lesson was you were teaching so without the title or thumbnail indicating it's the one, I'm looking through videos and lives.
Great video as always! Do you know if there is any difference between the behavior of `:not(:focus):invalid` and the new `:user-invalid` pseudo class? As I understand it, the latter is made precisely for this use case. Browser support is not perfect yet however.
Covered this in my most recent video! If you missed it, a :not(:focus):not(:placeholder-shown):invalid is almost the same as :user-invalid, but with better browser support :)
Hi Kevin,
If the list text uses , then .checkmark-list li {display: grid; grid-template-columns: 1rem auto; } breaks.
Please tell me how to fix this.
Thanks in advance, Alex
Lovely Kevin Just got inspired by you and I just started my YT channel, uploaded new Vid today for beginners also....
Tune In My Lovely People ❤
Thanks 👍
#GivingBackToTheCommunity 😜
I challenge you to re-create the xbox 360 blades dashboard with functional page-switch/animations.
why you did not use css nesting here?
This does not work when an input is set to 'required' because it will always be invalid unless it contains text, therefore the invalid styling is always active until the input field is filled. Is there any way around this?
In my personal projects, I've always named elements with their names. So my entire page is always with a bunch of , , , , , , , , .... any wacky name you can think of. But it kinda helps me with readability AND CSS styling as well. My question is, does this approach affect other factors like accessibility/screen readers?
Not good to do bud. You should be using HTML 5 tags/elements.
You also shouldn’t really be styling elements directly, you want to add classes to them. Using a naming convention such as BEM is good.
Why don't you use .woff format instead of ttf? can i use has the same percentage of supporting, but i 2 times smaller than ttf
Great video, just one question: why didn't you add a fallback font like sans-serif to the Roboto font-family?
U never know if all fonts will be present
@@simple-stack-by-edthat's why I asked
I just did this project a week ago 😂 🎉
You mentioned the browser support of :has() which as of today is 92.8% which honestly is maybe a safe threshold, or am i wrong
Is there any playlist of frontend mentor projects that you did?
I would like to know how I do to show the full structure in the emmet abbreviation, please
I don't like to declare variables that are only used once. Also what happens if you link to several CSS files, that have also the root property declared? Will it overwrite, inherit and add. should this be left to rules and chances?
thx you rock
at 22.32, can someone explain why he doesn't just use .content as the selector, and instead directly descends from .newsletter-cta? I know its more specific, but would .content not give the same results? I assume there could be an issue later in some projects doing this but can't figure it out
Caution: you are watching masters at work
What's the difference between : and :: on pseudo elements?
If the image is decorative, why not embed it in css and it has nothing to do with the page content? 3:15
Can u do it with js please ... watching you making frontend mentor challenges will help me a lot with css and js
If you don't have to use js, don't. It would be bad for performances and useless complexity
I was talking about some other projects that require Js...he can really help us
Is css and html still relevant when ai there are lots of ai that can do the same?
Skilled front end developers - like Kevin - will be in demand for a longgg time to come. It’s easy to write CSS, but to write concise, clear and easy-to-understand CSS with good accessibility features, requires years of practice to master.
AI spits out random text, it can't be guaranteed to work out of the box.
So even if an AI generates some code some persons still needs to understand it enough to make sure it's only doing what it's supposed to or that it even works at all.
37:06
You didn't start writing those codes from scratch how are we going to understand 😢
?,he is starting from scratch bro!
I think it is the time to move to Tailwind
Nah...css for the long term...it will make u grow.
Your lessons are great, but please talk a little less. One gets overwhelmed by the jokes and side explanations 😬.
I like the way he does the videos just the way they are.
It’s fine the way it is. He’s a super talented and knowledgeable guy and makes all this stuff seem a little less intimidating.