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!
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 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!
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.
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.
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!!!
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!!
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.
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
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?
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??
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
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)
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
@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. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HRpG_LLx0fI.html it's pretty slick.
