Learn To Code: Teach Yourself HTML & CSS

Learn to code teach yourself html css

Is one of your goals to learn to code, or to teach yourself HMTL and CSS programming? If so, you’re in luck because that’s the topic of today’s video and article.

Before we dive into the specifics of learning to program for the web, let’s address the most important ingredient for teaching yourself to do anything: your mindset.

I love the book by Carol Dweck called Mindset: The New Psychology of Success, where she outlines that there are two types of people in the world. Those who believe they can learn and grow (growth mindset), and those feel like they’re “done” and can’t acquire new skills.

In order to learn to code, whether it’s HTML, CSS, PHP, or any other web language out there, you need to have that growth mindset.

Learn To Code – Teach Yourself HTML and CSS

Learn To Code By Looking Under The Hood Of Other Websites

When I was first starting to code websites back when I was 12 years old, there weren’t a ton of how-to resources like there are today.

Luckily, I had a friend of a friend who taught me how to look under the hood of other websites at the code they were using.

Being able to reverse engineer how someone created something is awesome.

It’s allowed me to teach myself HTML and CSS, and today you can take a look at how other people code and then research to learn what the code means.

Often times, we don’t know what we should Google, but when you take a peek at existing code you get key words to type into the search engines, which will shortcut your learning curve like crazy!

Firebug: If you use the Firefox browser, then this is the extension to install. It’s easy to set up, and once you’ve got it onto Firefox you can take a peek at the code of any website. I also used this one extensively when debugging more advanced code, where code gets generated on the fly, and you can walk through the site as you click things, using jQuery or Javacript.

Chrome Developer Tools: If you don’t use Firefox, then I recommend Chrome and their developer tools. Very similar to Firebug, you can click on elements on a website and find out what code was used to make it happen! Curiosity, sated.

Teach Yourself HTML & CSS With These Tutorial Websites

Codecademy: This is a great site with tutorials on a number of different web programming languages, and it’s easy to get started!

Girl Develop It: This is more of a local classes directory for girls who want to learn how to code. I love the idea of learning to code in person with a teacher on hand, since sometimes you just need someone looking over your shoulder while you’re trying to figure stuff out.

Code School: This resource isn’t free but it does offer a ton of in-depth know-how that’s useful for web development and even app development on Apple devices, too.

Are You Learning To Code?

If you’re taking the learn to code challenge, leave a comment below and let me know what resources you’ve used that have rocked your world for teaching yourself HTML, CSS, and other programming languages.


  1. Pam on March 27, 2013 at 8:33 am

    Skillcrush also has great intro classes! http://skillcrush.com

  2. Deborah Skye on March 27, 2013 at 3:50 pm

    I began coding in 99' and love it. When my daughter was 3 months, I enrolled into College for an intensive course to learn more about HTML and Dreamweaver, I was already using and doing them both, but wanted to expand my work and design capabilities, which coding does. Love your simple and powerful presentations Nathalie Lussier – always full of brilliance.

  3. Adrienne on March 27, 2013 at 8:59 am

    I just started learning how to code. I applied to Dev Bootcamp in San Francisco, one of the many intensive coding programs that claim to prepare you for an entry level web development position after graduating. I’m excited!

  4. Mary on March 27, 2013 at 10:32 am

    This so timely for me…you must have been reading my mind! I’m a coach/strategist with a background in social work/psychology and I spent most of my life believing the hype that “people people” and “tech people” are mutually exclusive. But I love graphic design and, when I started tinkering with my own website, I realized I love that, too. Problem is, I usually end up frustrated because my skill and knowledge can’t keep up with my vision and creativity. The voice inside my head that started out whispering, “Maybe you could learn a bit of code.” recently reached the point of shouting, “Just learn to code already, dammit!” So I’m starting to dip my toe in the pool. Thanks for this video!

  5. Nathalie Lussier on March 27, 2013 at 1:18 pm

    I love how techy you all are getting with it! Woohoo!

  6. Trinidad Pena on March 27, 2013 at 1:25 pm

    I’m learning to code, slowly but surely… It’s amazing what you can do with CSS.

  7. Katy on March 27, 2013 at 1:51 pm

    Another ah-mazing course to learn to code (and everything you need to create a website from design to launch) is The Girls Guide to Web Design, by Amanda Aiken. I took the course about 18months ago, and it helped me launch and love my own web design business. The Facebook community of Girls taking the course is also incredible and inspirational. Lots of jumping for joy over little CSS breakthroughs!

    Mary – Amanda teaches some graphic design too, but it might be a really good fit for what you are looking for.

  8. Karly on March 27, 2013 at 2:23 pm

    Great post as always, thank you!

    I am seriously struggling with trying to learn a little code for my Headway site. I’m grasping the whole “look under the hood” of other people’s sites thanks to this, but still not fully getting how to take what I see and translate it into my own.

    More specifically, like you mentioned in your video Nathalie, can you, or anyone else, guide me to where I can learn to make a horizontal bar email signup? {As in, it stretches across the whole page like a navigation bar, but just contains the text you want and sign up areas.} I’m sweatin’ over this!


  9. Jess on March 27, 2013 at 8:10 pm

    This was fascinating. I love the idea of “looking under the hood” — talk about taking the mystery out of website creation and taking back the power!

  10. Tania on March 27, 2013 at 8:23 pm

    Thank you for all your great tools!
    I’m wondering if there is a way to view the code in Safari? I swear someone once showed me… and I’ve forgotten.
    Thank you,

  11. Aimee's Simple Living for Busy People on April 2, 2013 at 9:14 am

    Thanks, Nath!

    Reason 125 Why Google is so awesome that I want to marry it :)

    Thanks for letting me know about this “Google Chrome Secret” — I don’t want to become a coder, but I love that I can just “get the jist” by looking under the hood. So simple.

    Have a simple day!

  12. Theresa Reed | The Tarot Lady on April 2, 2013 at 7:25 pm

    I am always very nervous about doing anything with html or my website – always afraid I will break the darn thing. This was a great video – and I’ve checked out the Codecademy and it’s awesome. Maybe I can learn some code after all! Thanks Nathalie!

  13. Ann Harris { Southern Social Marketing } on April 5, 2013 at 6:01 pm

    I just ADORE Codecademy! I’m teaching myself JavaScript and the Twitter API.

    Are you familiar with Team Treehouse or Ruby Monk? A code queen such as yourself would probably get a kick out of those!

    Next step for me is mastering Python… wish me luck!

  14. Nourishment.Us on April 10, 2013 at 3:52 pm

    As usual, this is so helpful. When I got started last year I hired someone on ODesk to make my vertical opt-in banner under my header. It was the right thing to do at the time, but it took away my control and ability to edit it going forward. With all I've learned now (thanks to your endless commitment to sharing useful tools and resources for learning just about anthing) I'm taking back control, learning all things code, design, and SEO. You rock sister. xxx

  15. Nikki Assalone on April 10, 2013 at 8:53 am

    As usual, this is so helpful. When I got started last year I hired someone on ODesk to make my vertical opt-in banner under my header. It was the right thing to do at the time, but it took away my control and ability to edit it going forward. With all I’ve learned now (thanks to your endless commitment to sharing useful tools and resources for learning just about anthing) I’m taking back control, learning all things code, design, and SEO. You rock sister. xxx

  16. Dotty Knightsbridge on October 17, 2013 at 12:53 pm

    Love the way you use Headway Theme in WordPress for easy "Click and Drag" Code Free Design.

  17. Junko on December 28, 2013 at 10:58 pm

    I know this if off topic but I’m looking into starting my own weblog and
    was curious what all is required to get set up? I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very internet smart so I’m not 100% positive.

    Any tips or advice would be greatly appreciated.
    Many thanks

  18. Lily Sahiful Bahari on August 7, 2014 at 5:38 am

    I am learning Ruby on Rails, HTML and CSS. I want to build a beautiful and useful web application. I personally urge every one learn how to code. Thank you for inspiring me. :)

  19. Joe on November 21, 2014 at 3:15 am

    I’m 23 years old and I started teaching myself coding a couple of months ago as I want to be a website developer/designer as a career change. I can’t afford to take any courses or go back into education but there are plenty of resources online to get me where I wan to be. It will take time but it will be worth it. I need to start using photoshop but again that costs money. Does anyone know of any other software similar to photoshop that is free?. Great work btw.