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 thoughts on “TECHnically Speaking: How to Use Chrome to Learn CSS

  • June 14, 2013 at 1:07 pm
    Permalink

    I prefer Firefox and Firebug, but that might be a bit much

    Reply
  • June 15, 2013 at 12:53 am
    Permalink

    This just stresses me out, lol! I’m SO happy that my husband is my tech guy (by trade) and takes care of all this for me! I do the cooking…he does the tech stuff 😉

    Reply
  • June 17, 2013 at 9:26 am
    Permalink

    This is a dumb question: What do you mean “thesis theme”?

    –Liz

    Reply
      • June 17, 2013 at 4:44 pm
        Permalink

        Well I know *that*. But who makes it? Does it cost? Where can I find it? Or is this some stupidly easy thing I should already know the answer to?

        ALL THINGS I COULD PROBABLY GOOGLE, BUT I’M NOT GOING TO. DANCE FOR ME, MONKEY.

        Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


Warning: Unknown: open(/home/content/64/2068764/tmp/sess_5qabp4q33bfa5b1j3uut70qe63, O_RDWR) failed: No such file or directory (2) in Unknown on line 0

Warning: Unknown: Failed to write session data (files). Please verify that the current setting of session.save_path is correct () in Unknown on line 0