TECHnically Speaking: How to Use Chrome to Learn CSS

techcolumnbadgeIf you are new here, a little background. I am a web developer by day. I work on this product right hurr. Those margins? My handy work. That login? ::dust shoulders off:: So with those skills on mah resume, I get asked to help with html and css problems from a smattering of folk. I help figure out alignment issues, word press quirks and show how to diagnose errors. In doing so, I have opened some folks eyes to a handy little tool they can get for free.

Chrome Developer Tools

Wait wait wait…don’t glaze over. I know it sounds fancy but it is really quite simple at the core. A tool to help you learn basic HTML and CSS. And to show you, I even made a video!

How To Investigate HTML and CSS with Chrome

In part 1, we have the basics. How to investigaet your problem and quickly test the fix right there in teh browser without touching the real code. This is also helpful to learn some hands on CSS. You can change anything you want and see what happens…and no worries of breaking something!

How to Commit Your Changes in Thesis

So that gets you the basics but now what do you do if you want to change that actual thing? Well you can pass along to your designer/webmaster, you can edit the files through FTP or on your server if you have access OR if you have the Thesis theme, you can do it right in the dashboard. WHAT WHAT?! Yup. Thesis has a nice feature to allow you to add CSS and javascript in a custom file that will override all the theme styles. So I made part 2 to explain that

 

So there ya go. In a limited nutshell, this is what I do all day. I reverse engineer code all damn day with these tricks. The developer tools can do even more if you know what to do. I advise googling it and you can find all kinds of stuff. Go…be free…CARPE DIEM AND SHIT. -Signed, Resident web developer posing as a blogger

6 Comments

Leave a Reply

(*) Required, Your email will not be published