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 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!
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!
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 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!
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.
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.
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
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! 😊
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?
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.
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?
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 ?
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
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?
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 :)
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 😜
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.
![[DRAGON BALL LEGENDS REVEALS ＆ STUFF] LEGENDS FESTIVAL 2024 Special Edition Part 1](http://i.ytimg.com/vi/mV5bGIswTtQ/mqdefault.jpg)
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.
The way you handle the error state in the client side is neat! Thanks for the CSS Tips.
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 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!
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 love all the little explanations that you do. Great teacher!
Your videos are life saver, thanks Kevin for such a great help to the community.
I'm experienced in html and css but I suck when it comes to designing webs. I really appreciate this video!
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
Wow Kevin, that button gradient shadow is worth it. Thanks for teaching me that cool trick.
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!
Let's go. I am super excited to learn from your this video. Thank you for all your efforts and hard work 😁👌🏼
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.
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.
This was really a helpful video. I learned a lottttttttttttttt of new things. THANK YOU Powell.
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
MORE OF THESE PLZ!
nice one. more like this please, very helpfull for beginners
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.
its worth mentioning that, if anyone added the REQUIRED attribute to the INPUT field, like I did, it messes up Kevin's approach to the validation.
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
I love these types of videos.
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.
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! 😊
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?
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?
Who the hay-who said don't use descendant selectors!? Thats one of the great powers of css
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.
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?
I would like to know how I do to show the full structure in the emmet abbreviation, please
Loved it. Never settles and always pushes for the perfect layouts. (Also, mind blown with isolation!)
Wonderful 🎉🎉🎉
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 ?
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
why you did not use css nesting here?
You are wonderful bro😊
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 challenge you to re-create the xbox 360 blades dashboard with functional page-switch/animations.
From figma to code 😊
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?
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 :)
Completed the tutorial
Is there any playlist of frontend mentor projects that you did?
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
Thanks!
Thank you so much! 🙏
My pleasure; thank YOU for the AMAZING videos
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 😜
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
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
It is really helpful to us😊
Amazing!
What's the difference between : and :: on pseudo elements?
Keep doing sir ❤
If the image is decorative, why not embed it in css and it has nothing to do with the page content? 3:15
I just did this project a week ago 😂 🎉
Superr 🎉
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
thx you rock
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.
Caution: you are watching masters at work
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.