Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools

Показать описание

Code, Debug and Troubleshoot CSS like a pro with Chrome DevTools! Whether you're a beginner at CSS development or a seasoned pro, Chrome Developer Tools will enhance your CSS development workflow greatly.

Inspecting elements gives you the ability to see any rules that apply to the element selected and to edit it in real-time.

In this CSS Tutorial, we'll be learning CSS coding, CSS Debugging and CSS Troubleshooting with Chrome Dev Tools. It will help you fix problems, discover CSS Cheats used by the best websites around, and overall have more fun programming your websites.

Other Videos:

-~-~~-~~~-~~-~-
Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device"
-~-~~-~~~-~~-~-

Рекомендации по теме

Комментарии

I have been studying CSS (along with HTML and JavaScript) for about a year now... No course, no instructor ever told me how to use the DevTools for CSS, before your 12 min video. It is amazing, I learned so much from it. Thank you!

PS. Got here from the The Odin Project.

aj_rad

Found this through The Odin Project. Thank you for the helpful tutorial! I have used browser devtools before but haven't yet watched an experienced developer walk through their thought process and workflow with the tools — watching this immediately confirmed what I was doing right and what I can change in my own process.

garrettmichaelgeorge

useful for beginners - coming from the Odin Project!

Veectory

Good summary. I used to use safari inspector back when it was the same as Chrome, but since blink the two have diverged a bit.

The best feature ever is to click into a number value and arrow up or down to change the value, awesome for placing things using positioning. Safri broke that feature so I moved exclusively to chrome.

Another cool thing is to find a color value in the css pane and shift+click the color. It will change the color value from whatever it was (e.g. keyword, hex, rgb) and cycle through to the other color formats. I find hsl to be really easy to use to pick hover colors, just knock the lightness up or down a bit with the arrow key. done.

Good video man! Can't wait to collab soon!

OfficialDevTips

Dude! This is great, glad I'm not the only one snooping at other people's tricks.

ACCardFilm

I've watched a fair few videos trying to effectively explain how important the dev tools can be and this is one of the few which managed it. Thanks.

EnormousKingCrab

This is the best, succinct instruction on the web tools and how to deconstruct what is happening and what is applied. Thanks for the information!

shoo-sho-sha

Very smart. You can go over sites and get ideas, easly copy on your site. Love it.

jacoba

When you're showing the Bootstrap minified file (4:10) you can click on the curly braces in the bottom left corner of the inspector to format that code! Same when you see that symbol with js files too.

PaulMcCannWebBuilder

How do you get the browser width size to come up, like at 7:52 yours is 1920px x 537px in top right hand corner?
Did you have to install a plugin because it is not showing on my google chrome?

ryana-

Wow I may have learned more from you in about a week or two of videos than 2 years of CS college (granted I didn't take any web dev courses). Great job, CSS-Tricks is one of my new favorite sites. Thanks for sharing

gothops

Thanks for the tutorial. I'm a bit confused though - why did the border-radius: 0 declaration in panel-body get overwritten by the value in its parent div?

droo

Never knew about the pseudo panel to check the hover states Thanks for sharing that

MrJontyJohn

I love Bootstrap. Helped me learn coding much easier than I would have with a more obscure editor.

doobiesoda

Sorry, a naive question, I I am new and trying to create Mockups, Can I change any element on the page? So that I can take screenshots? Forms, dropdown, etc

anandgudimanchi