You can also adjust values in devtools by using arrow keys . So for example a style has px values you can click on it and increase or decrease . Handy when you want to see real-time what a value will do
I came here for the learning, realised I already learneded all this stuff by myself, stayed because its awesome information, and commenting for the algorithms! Every web dev or aspiring web dev needs to know how easy it is to debug their css. Thanks again for making such useful content!
In the dev tool, you can enable some features for better debugging CSS in the settings ( the gear icon on the top right of the dev tool). For example, in the preferences, scroll down a little bit to the section Elements, you can enable the "Show rulers on hover" feature to line up your elements without extension. Or, you can add some presets to your preferred responsive devices when debugging in responsive mode.
I use all of these tools every day, but I learned a bunch of little tricks I've somehow overlooked over the years. Very informative, thanks for the great tips!
Chrome now has the greyed out align-self [this element is not a grid or flex child]. Just happened to see that exactly this morning when I thought I had grid on its parent. Very helpful. I ❤ dev tools! The animation tab is extremely extremely useful. As is the ability to mess with your timing functions! I had no clue there is a clip-path tool too? What else don’t I know that I don’t know??!
So much cool stuff! Thank you! I knew about the style tab years ago. I worked at a daily newspapersnd would "change" the home page on my machine and call my co-workers over in a panic just to see their reactions.
I mentioned on discord but I'll mention it here again, I was just watching this video and just by looking at your screen at 4:37 made me realize what was wrong with the responsive part of a project I was working on for a week! Thank you so much for that!!!
Didn't know about the breakpoint visualisation option or the information box in Firefox. But I usually spend maybe 60 - 80 % in the DEV tool than in my editor when styling. Right now I'm even testing prototypes for my works live Shopify page, where I edit the HTML and enter my CSS to see how it integrates with Shopify's div and CSS hell 🤣🥰
I don't remember if Kevin demoed it in another video already but... when editing a numerical value in the dev tools you can scroll the mouse wheel to increment and decrement. If you hold shift and scroll, it increases/decreases by 10's; alt and scroll for 0.1's
Hey Kevin! Hope you find this. I did the free scrimba course you did for HTML and CSS. I then used what I learnt in my university assessment and got a High Distinction. Been a fan for a while 😃
thanks kev, i do use the dev tools everytime i am coding for some reason or another, but this video was great for reminding me to maybe us them before i have an issue and for testing, one thing i hate s making a change or two and after deciding it wasn't what i wanted, i wlil undo everything and for some reason things are out of whack, that's when the dev tools can be very handing if i can't find the error in the code myself, if you are using chatGPT, you need dev tools, don't know about anyone out there, but i don't think chatGPT could code a button without an error.
Love your videos. Coding my first project right now in vscode and struggling with things not working when i think they should. I've been using chrome and am immediately switching to firefox!!
Great video Kevin! You are helping me a lot to learn, thank you! I'm glad I found the grid and Flex stuff because I'm stuck doing a sticky scroll of a grid column and I can't find anything about it. Let's see if this helps me. Greetings
Oh man. CSS is so incredibly frustrating and annoying for beginners. It seems like you are setting 15 different parameters to "center" and is still not centered. Debugging videos are greatly appreciated. I'm stuck with debugging all the time.
The way I style nowadays is basically create html, load it in browser and then just style all of it right in browser. When I'm done, I just paste it all into css ;-)
For some reason, Cmd+Shift+I doesn’t work on my Mac. Instead, I use Cmd+Option+C. It’s also a plus because the keys are so close together, and you don’t have to reach all over the keyboard to open “inspect element”
I clicked on this video but it was not what I was looking for. So… perhaps this is a suggestion for a future video. Today, I had page that I was working on. I’m very novice at CSS. And there was a “thing” (turns out it was padding) that was causing an icon to be moved over to the right. Where is it? Who is doing that? It took me “a long time” (seemed like) to figure out where that padding was coming from. And while it all seems “Dah!” obvious after you figure it out… it isn’t obvious before you figure it out. So… the suggestion for a video would be how do you figure out why your CSS isn’t doing what you expect it to do? What I ended up doing is getting into dev tools and turning things off until it finally jumped back left … but there’s gotta be a better way… I would hope.
Thanks a ton!! You're awesome as always. Can you do a short video on how to make a basic html css javascript website GDPR compliant? I made a website for a client in UK and have Google analytics tracking turned on. How do I apply a cookie consent system on the website?
Hey Kevin, myself prasanna from India 🇮🇳 and i am a junior front end developer I have an doubt on Impleting fonts in our web pages. How I actually do is by using font face with font extensions like TTf, otf, woff, woff2 font files Is it right way to do? Or is there any something more effective than this way
5:14 I find that there are some pseudo classes (like :hover and such) that exist now, that aren't listed on the dev tools and as a result, it's impossible to get them to stay displayed so I can style them. I can't recall the ones I've seen before off the top of my head, but I've run into them while working on a MediaWiki dark mode project. If memory serves, one of them was a pseudo-class related to checkboxes. I was trying to restyle the various checkboxes. Some of the checkbox had some weird styling in some of their new-ish pseudo-classes that I found hard to locate in the dev tools
For some, like say @media for dark mode or light mode, or high-contrast, you can use your dev tools to emulate one or the other, which would activate the media query and you'd see it in the dev tools then.
@@KevinPowell my dark mode skin (TF2CutContentWiki/TCRFDark repo on GH) was for The Cutting Room Floor Wiki (video game cut content wiki) and it was a "Bespoke" creation where I didn't take what I'd call "shortcuts" like inverting the colors on everything. I literally went through every page I could think of and recolored elements by hand. As for the unlisted pseudoclasses, I think the pseudoclasses I had trouble with were related to checkboxes. There's some new-ish pseudoclasses for inputs that aren't listed alongside hover, active, visited, etc in the dev tools. Makes it hard to single those pseudoclasses out like you can with hover/active/visited.
@@KevinPowell aha, I remember which pseudoclass it was now. ":checked" was one I had trouble restyling. There's a whole slew of pseudoclasses that aren't represented on the dev tools window. Is there any way to modify that list and add new pseudoclasses to be able to force-display?
@@-_._._- we’re you not able to click the checkbox? If it was inaccessible you could also have tried to manually check it either by adding ‘checked’ in the HTML tag or in JavaScript
Hey, thanks for the video. (apart from video's topic) I am in a little bit of confusion in CSS CONFUSION : can we edit/modify the input box blinking cursor I want to change the input box cursor blinking animation style from blink to expand (like VS code) is this possible? if yes then please make a video or at least tell me how can I achieve this??, if not then why??
@7:46 Edge DevTools extension for VS Code has this cool thing where you can link the CSS changes back to the source and actually save them. ua-cam.com/video/HRpG_LLx0fI/v-deo.html it's pretty slick.
if we dont know color code of the certain part of website , chrome devtools color picker , we can find any color code of the website ( without any extension download )
firefox has this too, several years before chrome added it. And it's on by default. ff's dev tools are generally far better than chrome except in some niche cases
hi kevin. thank you very much for the video. quick question. how do you make devtools tab zoom in with 1 click? i can only find how to increase font size. thank you
How can we see @print? I have dynamic page where print co tent changes based on selection, I wanted to see @print query results but could not find a way.
Open the dev tools, then use `ctrl + shift + p` to open the command pallet, and type in "print" there, and it should show you an "emulate print" or something like that, that you can then enable. (would be cmd instead of ctrl on a mac)
You are truly a treasure to the web dev community! I am learning CSS and this just blew my mind!
I was literally thinking about the same topic today 😅 i didn’t realize till now how much more Firefox can give when it comes debugging, thanks a lot!
I am also discussed with my team and here is the video about css overview 😬
You can also adjust values in devtools by using arrow keys . So for example a style has px values you can click on it and increase or decrease . Handy when you want to see real-time what a value will do
Even better is using scroll wheels instead of arrow keys. It can help a lot to quickly style something.
I came here for the learning, realised I already learneded all this stuff by myself, stayed because its awesome information, and commenting for the algorithms! Every web dev or aspiring web dev needs to know how easy it is to debug their css. Thanks again for making such useful content!
In the dev tool, you can enable some features for better debugging CSS in the settings ( the gear icon on the top right of the dev tool). For example, in the preferences, scroll down a little bit to the section Elements, you can enable the "Show rulers on hover" feature to line up your elements without extension. Or, you can add some presets to your preferred responsive devices when debugging in responsive mode.
I use all of these tools every day, but I learned a bunch of little tricks I've somehow overlooked over the years. Very informative, thanks for the great tips!
Chrome now has the greyed out align-self [this element is not a grid or flex child]. Just happened to see that exactly this morning when I thought I had grid on its parent. Very helpful. I ❤ dev tools! The animation tab is extremely extremely useful. As is the ability to mess with your timing functions! I had no clue there is a clip-path tool too? What else don’t I know that I don’t know??!
Worth sticking around for the Firefox tips at the end.
So much cool stuff! Thank you! I knew about the style tab years ago. I worked at a daily newspapersnd would "change" the home page on my machine and call my co-workers over in a panic just to see their reactions.
That FF tip at the end will be super useful; everything else I knew already.
Oh, wow, I didn't know these things even exist. Thank you for so many treasures in just one video! God bless you
I mentioned on discord but I'll mention it here again, I was just watching this video and just by looking at your screen at 4:37 made me realize what was wrong with the responsive part of a project I was working on for a week! Thank you so much for that!!!
Didn't know about the breakpoint visualisation option or the information box in Firefox. But I usually spend maybe 60 - 80 % in the DEV tool than in my editor when styling.
Right now I'm even testing prototypes for my works live Shopify page, where I edit the HTML and enter my CSS to see how it integrates with Shopify's div and CSS hell 🤣🥰
I don't remember if Kevin demoed it in another video already but... when editing a numerical value in the dev tools you can scroll the mouse wheel to increment and decrement. If you hold shift and scroll, it increases/decreases by 10's; alt and scroll for 0.1's
Thank you for another helpful video sir! I appreciate your efforts to bring us quality tutorials 😊
Firefox devtools seems amazing, thanks a lot!
Hey Kevin!
Hope you find this. I did the free scrimba course you did for HTML and CSS. I then used what I learnt in my university assessment and got a High Distinction.
Been a fan for a while 😃
thanks kev, i do use the dev tools everytime i am coding for some reason or another, but this video was great for reminding me to maybe us them before i have an issue and for testing, one thing i hate s making a change or two and after deciding it wasn't what i wanted, i wlil undo everything and for some reason things are out of whack, that's when the dev tools can be very handing if i can't find the error in the code myself, if you are using chatGPT, you need dev tools, don't know about anyone out there, but i don't think chatGPT could code a button without an error.
I use both Chrome and Firefox's dev tools. I particularly like that Firefox shows JS event handlers; very helpful..
A few more useful details I didn't know yet.
Thank you master Kevin.
Thanks Kevin! Your content Is always top notch, you are my main reference and inspiration! :)
Thanks for the Firefox tip, Kevin.
Love your videos. Coding my first project right now in vscode and struggling with things not working when i think they should. I've been using chrome and am immediately switching to firefox!!
Great inform for all developers
I did not think of using browser as a debugger, thank you it really help me so much
This is fabulous, thanks!
Thanks Kevin. I love you every day.
If someone say CSS is frustrated i recommend your channel
Great video. Thanks for this.
Your videos are amazing!
Great video Kevin! You are helping me a lot to learn, thank you! I'm glad I found the grid and Flex stuff because I'm stuck doing a sticky scroll of a grid column and I can't find anything about it. Let's see if this helps me. Greetings
Hi Kevin. Thanks for this awesome video. Would be helpful if u made a similar one for the css animations using dev tools
Oh man. CSS is so incredibly frustrating and annoying for beginners. It seems like you are setting 15 different parameters to "center" and is still not centered. Debugging videos are greatly appreciated. I'm stuck with debugging all the time.
11:53 this is also added in Chrome, and it helps a lot
RESPECT, A helpful video, it saves alot of time while working with css. 😊
The way I style nowadays is basically create html, load it in browser and then just style all of it right in browser. When I'm done, I just paste it all into css ;-)
Thank you so much!
Thank you so much for sharing this!!
Thanks Kevin for your valuable content. by the way which font are you using ? it looks awasome.
For some reason, Cmd+Shift+I doesn’t work on my Mac. Instead, I use Cmd+Option+C. It’s also a plus because the keys are so close together, and you don’t have to reach all over the keyboard to open “inspect element”
try option + cmd + i
The subtitles finally got it right "front end friends". I think this is the first time lol
KEVIN IS THE FRONTEND G O A T!!!!
OMG great shirt!
thank you bro thank you
I clicked on this video but it was not what I was looking for. So… perhaps this is a suggestion for a future video.
Today, I had page that I was working on. I’m very novice at CSS. And there was a “thing” (turns out it was padding) that was causing an icon to be moved over to the right. Where is it? Who is doing that? It took me “a long time” (seemed like) to figure out where that padding was coming from. And while it all seems “Dah!” obvious after you figure it out… it isn’t obvious before you figure it out.
So… the suggestion for a video would be how do you figure out why your CSS isn’t doing what you expect it to do?
What I ended up doing is getting into dev tools and turning things off until it finally jumped back left … but there’s gotta be a better way… I would hope.
I would also be intrested in seeing you set up.
it work on my pc thx bro vеry much
You should do a video about the new dev feature, CSS Overview!
I didn't think I knew all of this already, Great video like always
Thanks a ton!! You're awesome as always.
Can you do a short video on how to make a basic html css javascript website GDPR compliant? I made a website for a client in UK and have Google analytics tracking turned on. How do I apply a cookie consent system on the website?
i am always use that for debugging css
ty master
Thanks Kevin for sharing this with everyone. All good except that you used few bad practices while presenting debugging.
I'm your first 🥇 viewer today 😉👍
Could you also make a video about animations tab?
Hey Kevin, myself prasanna from India 🇮🇳 and i am a junior front end developer
I have an doubt on Impleting fonts in our web pages. How I actually do is by using font face with font extensions like TTf, otf, woff, woff2 font files
Is it right way to do? Or is there any something more effective than this way
Good old days of Firebug... the web development was never the same after it.
Hello Kevin, thanks for this video... I would to know if you know of any open source projects front end devs can contribute to
Thumbs up.
5:14 I find that there are some pseudo classes (like :hover and such) that exist now, that aren't listed on the dev tools and as a result, it's impossible to get them to stay displayed so I can style them. I can't recall the ones I've seen before off the top of my head, but I've run into them while working on a MediaWiki dark mode project. If memory serves, one of them was a pseudo-class related to checkboxes. I was trying to restyle the various checkboxes. Some of the checkbox had some weird styling in some of their new-ish pseudo-classes that I found hard to locate in the dev tools
For some, like say @media for dark mode or light mode, or high-contrast, you can use your dev tools to emulate one or the other, which would activate the media query and you'd see it in the dev tools then.
@@KevinPowell my dark mode skin (TF2CutContentWiki/TCRFDark repo on GH) was for The Cutting Room Floor Wiki (video game cut content wiki) and it was a "Bespoke" creation where I didn't take what I'd call "shortcuts" like inverting the colors on everything. I literally went through every page I could think of and recolored elements by hand.
As for the unlisted pseudoclasses, I think the pseudoclasses I had trouble with were related to checkboxes. There's some new-ish pseudoclasses for inputs that aren't listed alongside hover, active, visited, etc in the dev tools. Makes it hard to single those pseudoclasses out like you can with hover/active/visited.
@@KevinPowell aha, I remember which pseudoclass it was now. ":checked" was one I had trouble restyling. There's a whole slew of pseudoclasses that aren't represented on the dev tools window. Is there any way to modify that list and add new pseudoclasses to be able to force-display?
@@-_._._- we’re you not able to click the checkbox? If it was inaccessible you could also have tried to manually check it either by adding ‘checked’ in the HTML tag or in JavaScript
Watching Kevin for years now but I finally realized it's "Hello my front end friends", not "Hello my friend and friends"
Hey,
thanks for the video.
(apart from video's topic) I am in a little bit of confusion in CSS
CONFUSION : can we edit/modify the input box blinking cursor
I want to change the input box cursor blinking animation style from blink to expand (like VS code)
is this possible? if yes then please make a video or at least tell me how can I achieve this??,
if not then why??
@7:46 Edge DevTools extension for VS Code has this cool thing where you can link the CSS changes back to the source and actually save them. ua-cam.com/video/HRpG_LLx0fI/v-deo.html it's pretty slick.
I dont know if can compete with our 1px solid red.
if we dont know color code of the certain part of website ,
chrome devtools color picker , we can find any color code of the website ( without any extension download )
firefox has this too, several years before chrome added it. And it's on by default. ff's dev tools are generally far better than chrome except in some niche cases
@@gg-gn3re yeah man
hi kevin. thank you very much for the video. quick question. how do you make devtools tab zoom in with 1 click? i can only find how to increase font size. thank you
Click inside the dev tools, and then ctrl + or ctrl - zooms in and out (guessing it's cmd on a mac)
@@KevinPowell thank you.
How can we see @print?
I have dynamic page where print co tent changes based on selection, I wanted to see @print query results but could not find a way.
Open the dev tools, then use `ctrl + shift + p` to open the command pallet, and type in "print" there, and it should show you an "emulate print" or something like that, that you can then enable. (would be cmd instead of ctrl on a mac)
I'm so early!
Urgh. I dont think FireFox has quick grid/flex controls like chrome does lol. Would save me a lot of time X_X
Can you debug the video title?
haha, surprised you're the first to mention that! Thanks, fixing it now!
@Kevin Powell, ( ua-cam.com/video/ndeClnyHSo8/v-deo.html ) the three dots are called an ellipsis.
Also known in the UI design world as a 'kebab icon'.
@@PaulMcCannWebBuilder Haha. True! Hamburger and Kebab... mmmmm... food! 🤤
I am😁 the first
3rd