Coding for Beginners – Best Way to Learn HTML & CSS Codes to Build a Website

Last updated on January 1, 2017

confusion-about-codes-minBack in 2010 when we built our first website, we had a budget of $200.

Because we didn’t have the money to hire a website designer, we decided to use a drag & drop website builder and started to learn basic HTML and CSS codes.

Coding for beginners can be daunting, but we don’t regret spending (or investing) the time on learning basic code because we were able to make very minor alterations to our website design quickly and instantly, that we otherwise would have had to pay a designer a couple hundred dollars to do.

Not to mention we’d have to wait for the work to be completed and the turnaround time could be a couple of days on average.

At the time we were no master coders by any measure. Even though we were just beginner coders, this skill did give us some freedom and control over our website design.

It was very empowering and liberating to know we were not subjected to the mercy of a website designer or coder.

Now, I am not saying you need to become a coding whiz.

Let’s be honest, you might have a full-time job already and your website might just be a side hobby or a business website to help boost your company’s online presence.

You just need to know enough to add a text box with a custom background color and font styling.  You might just want to make some basic changes edits that won’t take too much time, but still enough to allow you to have some design flexibility.

Since a lot of people asked us where to find good, reliable resources to learn the basics of coding, we decided to put together this Coding for Beginners guide, which is a collection of all the coding resources we’ve used in the past that have helped us when we were first starting out.

If you want to learn some basic coding to give you more control over your website even when you are using a drag & drop website builder, these HTML/CSS beginners resources can definitely help.

 

What Coding Language Do You Need To Build a Website?

The basic building blocks of a website are HTML and CSS codes.

The more advanced coding languages used in websites are jQuery, JavaScript and PHP.

Honestly, if you are using a drag & drop website builder, you really only need HTML and CSS to start.

For WordPress users, you may want to add PHP to your list since WordPress is a much more complex website builder than any drag & drop website builders. It takes more coding chops to make alterations to WordPress websites.

In our view, HTML and CSS codes are what any beginners should start with.

If you just happen to develop an interest in website coding, you can always learn the advanced coding languages later.

 

What Type of Resources are Available?

There are two types of resources you can use: free or paid.

There are pros and cons for both and we recommend that you try both free and paid resources to find what works for you.

Of course, start with the free ones first, as you just might find them sufficient for your needs.

Why Use Free Resources?

Pros

  • The obvious advantage is that it is free.
  • Tons of selection and information about different solutions. If you have a very specific question or problem, free resources are great. This is because there are a lot of people writing about very specific problems that are just too specific to cover in a paid course. So when we have a unique problem that a typical guide can’t answer, we usually search for tips and answers in forums and free resources.

Cons

  • There is too much information available online, it can get confusing and you will not know where to start.
  • Content and discussion threads in forums are not organized in an easy to digest way like in paid courses. If you are good at piecing together scattered information, this may not be a problem for you. But for the vast majority of people, this can slow down your learning process since you’ll need to dig through a mountain of information to find the one that is useful to you.
  • Anyone can post tutorials online and the person might not be credible. A newbie who is over-confident might decide to post a tutorial that could well be inaccurate. There are a hundred ways to cut a pie, but what is the right way? As a beginner, you will have no way to know if the information you are reading is indeed a best practice.

Why Use Paid Resources?

Pros

  • Paid courses are generally well organized and separated into easily digestible courses that are specifically designed for beginners. No need to dig through thousands of posts by different “experts” or figure out where to start.  You just need to follow the curriculum and you are on your way.
  • You will be learning the best practices of coding from accredited professionals. Bad habits are hard to change. When learning a new skill, it’s always a good idea to avoid bad coding standards from people who may not be qualified to be teaching code in the first place.

Cons

  • Typical courses go through all aspect of website coding. For instance, if you just want to find a quick solution on how to add a text box with a custom background, then you might be out of luck. You may need to go through a good chunk of the course before you can learn the specific thing you need.

Both free and paid resources can help you in different ways, so it’s good to have access to both types of coding tutorials.

Now, let’s go through our recommended list of online coding tutorials that we find very helpful.

 

Best Way to Learn to Coding for Beginners

#1 Lynda

COST: Free Trial / $19.99 – $29.99 per month 

best coding resources for beginners lynda

Lynda delivers their lessons in video formats so they are very easy to follow.

We really like their video tutorials as they make learning code easier.

The courses are comprehensive that cover not just the basics. So as you get better at coding, you will have access to more advanced tutorials. So their tutorials can “grow with you” as you become better at coding.

Lynda has more than just HTML & CSS courses. They pretty much cover everything from programming to graphic design, and you have access to all their courses under one membership that you can cancel at any time.

My experiences with Lynda:

I’ve used Lynda to learn HTML, CSS, and PHP. Overall it did a good job in teaching us the basics.

I like how the courses are structured in a way that gave me full views of the steps I need to take to learn these new coding languages.

Learning how to code is very visual. The videos really help make complex ideas easier to understand. I would recommend to pausing the videos from time to time so you can try out the codes for yourself.

One thing I didn’t like about Lynda is that there is no built-in code editor. This meant I had to download a code editor on my laptop before I could write any codes.

So expect some setup time at the beginning. Once you have the programs install, there are no more maintenance or setup to do.

Who should use Lynda?

  • If you don’t know how or where to start learning HTML and CSS codes.
  • If you prefer learning with videos than reading text.
  • If you prefer learning in a structured environment, similar to a traditional curriculum such as the ones taught in school.

#2 Codecademy

COST: Free Basic Courses/ $19.99 per month for Premium Courses

best coding resources for beginners codecademy

Codecademy takes an interactive approach to teaching code to beginners – which makes learning a lot more fun.

You simply follow instructions in an interactive code editor. The editor will automatically translate your codes into a visual display.

This way, you can see what the codes you wrote actually look like on a web browser — very cool!!

This instant feedback allows you to see your progression immediately.  This helps create a fun learning environment and makes the idea of learning how to code more attractive.

You can take all of their beginner coding courses for free. If you want to progress to more advanced courses, you can sign up for their premium courses.

My experiences with Codecademy:

I’ve used Codecademy to learn a more advanced coding language like JavaScript.  It was fun and the instructions were easy to follow.

It did a good job at teaching me the basics, and I was able to write very simple JavaScript after a couple of hours.

I loved the built-in code editor which meant I don’t need to download any programs to get started.

The instructions were also very impressive. I felt like I have a guide showing me what do at every step of the way.

One thing I would like is a text version of the course. There is a lot to remember when learning how to code. I have to keep a notepad on the side to write down all the codes I’ve learned and what they should be used for.  It would be nice to have a downloadable code index so I don’t have to create my own.

Who should use Codecademy?

  • If you learn better by trial and error and by watching live examples.
  • If you need instant feedback on whether you are writing the codes correctly.

Try Codecademy – Try Their Free Lesson Here

#3 TutsPlus

COST: Free Basic Courses/ $15 per month for Premium Courses

best coding resources for beginners tutsplus

What makes TutsPlus standout from Lynda and Codecademy is that it gives you different ways to learn how to code.

TutsPlus doesn’t only give you coding for beginners guides to get you started on the right path, it also has a full library of short and simple tutorials when you need quick fixes for unique problems when it comes to website design.

TutsPlus’ massive library of short tutorials gives you more control over what you want to learn. This works especially well if you already know what designs you are trying to achieve.  You can easily bypass all the extra information and go straight to the solutions.

My experience with TutsPlus:

I used their beginner’s guide to jQuery, CSS3, and HTML5.  At the time I already have some knowledge of coding so the beginner’s guide was a good refresher course for me. It was easy to follow and well written.

Some beginner’s guides also come with videos, which were helpful.

If you join their premium membership plan, you can download all the files and images they use in their guides and tutorials. This was great because it saved me a lot of time from having to write my own notes and code index.

What I love about TutsPlus is their huge library of short coding and design tutorials.

What codes you need when building a website is largely driven by what website design you are trying to achieve.  Since there is almost an unlimited number of design possibilities, in theory, you can have a wide variety of design problems to solve.

This is why TutsPlus’ beginner’s guide can only cover the basics and you really rely on their short tutorials to supplement more specific design solutions.

Because TutsPlus offers you a massive tutorials library, you have a better chance at finding a solution to your specific problem than any other resources we’ve covered so far.

Who should use this?

  • If you respond better to self-direct learning where you learn the basics using the beginner’s guide, then pick and choose what advanced tips and tricks you want to learn using their library of short tutorials.

Try TutsPlus – Try Website Design Courses Now

#4 W3Schools

COST: Free Reference Guide

best coding resources for beginners w3schools

This is the ultimate reference guide to HTML and CSS coding.

Everything you need to know about website coding can be found at W3Schools.com.

One thing to keep in mind is that W3Schools is not as effective as a tutorial resource when compared to Lynda, Codecademy or TutsPlus.

While their coverage of coding knowledge is very comprehensive, I feel their coding explanations are very limited and they don’t do a very good job in actually teaching you how to code.

Instead, think of W3Schools as a dictionary for HTML & CSS codes.

My experience with W3Schools:

W3Schools was the first resource I turned to when I first started to learning HTML and CSS codes. I quickly discovered that they are more a reference guide than a tutorial website.

While they may not be a good place to learn to code, they are the best reference guide online.

Whenever I am unsure about a code or what alternative codes I can use, I will use W3Schools to find the answer.

This is especially useful for codes that you don’t use regularly and are easily forgotten.

Who should use this?

  • If you already have some basic coding knowledge, they are a good reference resource for you.
  • Use it like a dictionary or an Encyclopedia for HTML/CSS coding where you can refer to if you forget specific codes.

Try W3Schools – See Reference Guide Now

#5 CSS-Tricks

COST: Free Tutorials

best coding resources for beginners css tricks

CSS codes control a website’s design, like the color of the text or placement of background image. So in a way, there is an unlimited number of ways to code up your design as there are virtually unlimited design possibilities.

This is when a free resource like CSS-Tricks comes in very handy.

CSS-Tricks has hundreds of short CSS tutorials so you can search to find the best solutions for your problems.

My experience with CSS-Tricks:

CSS-Tricks is one of the websites that I visit daily when I am designing a website. It is very easy to find what I need and there is a huge library of short solutions.

CSS-Tricks also have an active community so if a solution doesn’t work for you, you can most likely find a different solution in the comments.

Who should use this?

  • If you have a basic understanding of CSS codes and need quick solutions for very specific CSS coding problems.

Try CSS-Tricks – Go To CSS-Tricks Now

Conclusion – Guide to Coding for Beginners

Learning some basic codes can give you a lot of freedom and control over your website design.

Coding for beginners is not rocket science as it is a learned skill.  The key here is not to aim to be a master coder in a few weeks.

Just learn enough so you can make minor design alterations without the need to hire a designer / coder.

Keep in mind that hiring a designer / coder can add up in terms of costs, and it generally takes some time for them to turn around a project for you.  Imagine if the first round of results isn’t what you expected, and the work has to be updated which might take another day or two.

We found a lot of value when we learned to code and we know it can help you too.

Give the coding resources we’ve mentioned a try! There are always something for any skill level and any price point. You just need to get started!

Other Guides:

Found This Guide Helpful?

Question – Did this guide benefit you? Leave a comment below. 

Do you know anyone who can benefit from this guide? Send them this page or click on the share buttons on the left.

You’ll be helping us out by spreading the word about our website, and you’ll be helping them out!

 

Connie Wong

About Connie Wong

Designing and creating your website (especially your first one) is not a simple task. If you're a designer like me, then you're already way ahead of the game. But what if you're one of the 99% of business owners who are not technical or creative? I want to share my website design expertise with you to help you build a professional looking website to grow your business.

Subscribe

Connie Wong

About Connie Wong

Designing and creating your website (especially your first one) is not a simple task. If you're a designer like me, then you're already way ahead of the game. But what if you're one of the 99% of business owners who are not technical or creative? I want to share my website design expertise with you to help you build a professional looking website to grow your business.

,

Leave a Reply

7 Responses to Coding for Beginners – Best Way to Learn HTML & CSS Codes to Build a Website

  1. #

    Thank you for taking the time to provide such an informative and helpful post.

  2. #

    I’ve always wondered about coding! Great article. Thanks so much for sharing!

    Romana

  3. #

    I have a basic knowledge of html and CSS and this new ideas you share is very helpful. Thanks for sharing.

  4. #

    Where can a beginner get expert (live or emailed responses) answers for coding issues? Thank you for your time.

    • Jeremy Wong
      #

      Hi CC,

      If you want a personal response to coding questions, you’ll either need to participate in coding forums (ask questions and see if someone answers), or you can hire someone to help you.

      Usually if you search for questions in coding related forums, you’ll find your answers though it might take some effort. But you won’t have to pay.

      Jeremy

  5. #

    I love you guys, thanks!

    • Jeremy Wong
      #

      Thank you, Doreen! Hopefully you’re on your way to learning some basic code!

      Jeremy