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!
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!
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
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.
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.
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??!
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!!!
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 😃
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
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!!
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 🤣🥰
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.
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.
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”
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, 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??
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
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
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
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)
@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. th-cam.com/video/HRpG_LLx0fI/w-d-xo.html it's pretty slick.
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 😬
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!
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!
Worth sticking around for the Firefox tips at the end.
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.
If someone say CSS is frustrated i recommend your channel
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.
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.
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??!
Oh, wow, I didn't know these things even exist. Thank you for so many treasures in just one video! God bless you
Firefox devtools seems amazing, thanks a lot!
That FF tip at the end will be super useful; everything else I knew already.
A few more useful details I didn't know yet.
Thank you master Kevin.
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!!!
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 😃
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
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.
Great inform for all developers
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!!
I use both Chrome and Firefox's dev tools. I particularly like that Firefox shows JS event handlers; very helpful..
Thank you so much for sharing this!!
Thank you for another helpful video sir! I appreciate your efforts to bring us quality tutorials 😊
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 🤣🥰
Thanks for the Firefox tip, Kevin.
This is fabulous, thanks!
Thanks Kevin! Your content Is always top notch, you are my main reference and inspiration! :)
RESPECT, A helpful video, it saves alot of time while working with css. 😊
Great video. Thanks for this.
Thanks Kevin. I love you every day.
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.
Hi Kevin. Thanks for this awesome video. Would be helpful if u made a similar one for the css animations using dev tools
You should do a video about the new dev feature, CSS Overview!
Thank you so much!
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.
Your videos are amazing!
Thanks Kevin for your valuable content. by the way which font are you using ? it looks awasome.
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 ;-)
I would also be intrested in seeing you set up.
I did not think of using browser as a debugger, thank you it really help me so much
11:53 this is also added in Chrome, and it helps a lot
KEVIN IS THE FRONTEND G O A T!!!!
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
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?
thank you bro thank you
The subtitles finally got it right "front end friends". I think this is the first time lol
Thanks Kevin for sharing this with everyone. All good except that you used few bad practices while presenting debugging.
it work on my pc thx bro vеry much
i am always use that for debugging css
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??
Could you also make a video about animations tab?
Hello Kevin, thanks for this video... I would to know if you know of any open source projects front end devs can contribute to
OMG great shirt!
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.
Thumbs up.
ty master
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.
Watching Kevin for years now but I finally realized it's "Hello my front end friends", not "Hello my friend and friends"
I didn't think I knew all of this already, Great video like always
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
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)
@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. th-cam.com/video/HRpG_LLx0fI/w-d-xo.html it's pretty slick.
Can you debug the video title?
haha, surprised you're the first to mention that! Thanks, fixing it now!
Urgh. I dont think FireFox has quick grid/flex controls like chrome does lol. Would save me a lot of time X_X
I'm your first 🥇 viewer today 😉👍
@Kevin Powell, ( th-cam.com/video/ndeClnyHSo8/w-d-xo.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'm so early!
I am😁 the first
3rd