Chrome DevTools Crash Course - using Chrome 'Inspector' for CSS Development

[@franceskarouzard3957]

Reverse engineering would be a dope tutorial!

[@alessandrorodrigues2060]

Hey Matt, thanks for doing this crash course video. I've been messing around with Chrome Dev Tools whenever I can't fix something through Elementor's widgets, for example. This gives me a better idea on how to go about it, as well as checking out what's behind some other designs from other websites. Cheers and would love to see more on this subject.

[@iUmarFarooqi]

Also, seeing other website's CSS and mimicking their design sounds interesting. Please do a tutorial on that as well when you get time.

[@iUmarFarooqi]

Thanks. Almost everyone has access to this tool, but almost no one knows how it works. 😅 So thanks for this quick crash course, and that person who suggested it.

[@marvintolentino4360]

You nailed it man! Such a useful and relevant content. Bunch of thanks! Just liked and subscribed.

[@user-sg9it7lt4w]

That is gonna save my tons of time. Thanks Bro.

[@eGalTube]

Hi Matt! Really great video. Want a crash course on DevTool for CSS. Better if you can cover that by 30 minutes. Wish you all the best. :)

[@ajwebhub]

Hello Matt, It was helpful. thanks for this video.

[@meshtarua]

you are best, please uplode more videos

[@melizalde4131]

Great vídeo as always :D I would love to watch the vídeo of reverse css from another website Thnx

[@ideasonline23]

This was very helpful. Thanks for making this video :)

[@BuildThatWebsite]

You're welcome. Please let me know if you have suggestions for future videos that would help you on your journey.

[@georgistanislavov6980]

can someone pls tell me what is the blue thing in the padding i need to chainge it but i dont know its name

[@NickBrown79]

This was super helpful!! Thanks!

[@miikoa]

Thank you.

[@mr.unknown5476]

Bro i need to know how to view website code of any website?...having troubling get save all resources to work? please Help

[@Techbizhustle]

Thank you

[@astrarai-thesobercoder]

Very helpful. Thank you.

[@Klaus53123]

Hi Matt! Great tutorial and exactly what I was looking for! Many thanks. Here is another proposal: I am using Wordpress with the GeneratPress Pro theme. If I want to do some additional CSS inside wordpress, I have tremendous problems identifiying the right classes in the inspector which I have to address. Also I find it difficult to understand when to use .classA.classB.classC versus .classA .classB .classC. So if this would be worth another video, that would really be great. Once Again: Many thanks for your video(s). Klaus

[@BuildThatWebsite]

I thought about adding some CSS selector basics to this video but decided it'd be better off in its own video. Choosing which class names to target is part art and part science. It gets easier with practice but probably hard to explain here. As to your other question, it's a quick answer: if you're targeting multiple selectors for the same element, don't put a space between them. If the selectors have a parent > child relationship then put a space. Example: Some text you'd would join them -- h4.big.tall (or just h4.tall, .big.tall etc) Some Text Because the h4 is the child element of the div, you'd put a space: .red h4 (or) .red .blue And of course you can combine both principles, so: div.red h4.blue (note the space between the nested elements) I hope that makes sense.

[@iUmarFarooqi]

One more thing. I saw a tablepress table design that I think I can't re-create. So is there a way I can make the exact design copying their CSS? 😅 I can't share the URL as KZbin blocks my comments if I do.

[@BuildThatWebsite]

The easiest way to find all the styles is to use the inspector. Find a css property you know is custom and view the rule in the style tab. In the top right corner of the style rule, click the name of the stylesheet which contains the rule. It'll take you to that exact position in the CSS file where you'll usually see all the styles for that table in one place. If the CSS file is minified, look for the little 'curly brackets' button. { } Click that to un-minify the file and copy the styles.

[@iUmarFarooqi]

@@BuildThatWebsite Thanks, I'll try this. ✅

[@chandlerzhu9735]

Please make a video about the Network tab in devtools

[@iamYasin22]

Brother! Please make tutorial on how to display popular posts based on view count using query loop.

[@BuildThatWebsite]

It depends what you mean by 'popular posts'. If you want to order by something like 'view count' you'd need an 3rd-party plugin to track that data. WordPress doesn't track it by default. Then you could access that custom field value in your query loop.

[@iamYasin22]

@@BuildThatWebsite Which plugin would recommend for this. Like order by view count and Thank for you Response ♥

[@BuildThatWebsite]

This one seems like a good option: wordpress.org/plugins/post-views-counter/

[@NatashaBass22]

Thank you