The tech industry is booming worldwide; it’s creating jobs, new billionaires and changing the world as we know it. Programming/coding is the core of the tech industry, so if you want to change the world, find a well-paid job or you want to be one of the new billionaires you’ve to know how to code. If you’re in doubt, search (indeed, freelancer, odesk, elance, guru, etc.) and see how many jobs are there for developers/programmers whether these jobs are full or part time.
According to the USA official Social Security Office, the national average wage index for 2012 was 44,321.67 $. For a web developer in the USA the average annual income is 88,000 $ (according to a survey made by indeed.com) which is nearly double the average wage index.
Programming is a very wide field; there are many programming languages that vary in their application and learning curve. In this and coming posts I shall list many outlets where you can learn to code for free or for a very small fee (I shall try to provide promo codes to allow you to try it for free or for a discount), A comparison between these outlets (according to my personal experience) will be presented.
If you haven’t written any code before and you want to start with an easy language then HTML and CSS is your way to go. HTML stands for (Hyper Text Markup Language) while CSS stands for (Cascade Style Sheet). First, don’t let these terms hold you back, after all they’re just names, and HTML/CSS are just very easy and fun to learn, actually you can finish a beginner’s course in less than a week. HTML/CSS are the corner stone for building any website. Learning HTML/CSS will be your first fast step towards becoming a web developer. HTML5 (which is the new iteration of HTML) can also be used to build apps “yes, you can create your own temple run using it” of course to build mobile app using HTML5 you’d need some extra tools.
The aim of this post is to provide a road map for beginners to learn HTML/CSS, so you won’t find millions of links leading to a million website that has just an article about HTML/CSS. All of the sources stated here are structured courses that you can follow along as a beginner.
How to Learn HTML/CSS for Free
Codecademy
Codecademy will be the first free source to learn HTML/CSS. It’s an online outlet where you can learn many programming languages and HTML/CSS is among them. Joining Codecademy is pretty simple; just register using your email and you’re ready to go.
Structure: The course on Codecademy is divided into sections and each section is divided into lessons. At the end of each lesson there’s a small quiz that you’ve to solve in order to proceed to the next lesson “don’t worry; there are helpful tips that’ll guide you”.
Interface: The user interface on Codecademy is quite simple; the course page is divided into 4 sections:
- Lesson body section (explanation).
- Quiz section, you shall find the tips just under it.
- Body section; where you type your code.
- Your code output section (how your code would appear in the browser in real life).
You’re awarded with badges for the lessons you finish, which is really encouraging “not only for kids”. Now to the pros and cons:
Pros
- Free.
- The course is well structured and the explanation is straight forward which is very helpful for beginners.
- Badges are really encouraging.
Cons
- The course is only suitable for beginners. There are no courses for advanced or intermediate users.
- They don’t provide any reference material that you might use to advance in your studies.
Verdict: It’s the go to place for a beginner; you should definitely start your HTML/CSS training there.
Code Avengers
Code Avengers is the second outlet, they’ve a freemium (free/premium) model where the first level is free while the higher levels are paid. Joining the course is pretty easy, you just register with your email and you’re ready to go.
Structure: The course is divided into three levels. The first level is free while the other two are paid “actually after finishing the first level you’ll be provided with an offer that would allow you to start level 2 if you like Code Avengers on Facebook”. Each level is divided into lessons. After each lesson you’ll have a quiz that you need to pass before proceeding to the next level. What’s different in Code Avengers is that in each lesson you get a grade “0-10/10” so after finishing the course you’d know which topics require more rereading.
Interface: The user interface on Code Avengers is quite simple; the course page is divided into 4 regions:
- Lesson body section (explanation).
- Quiz section, you shall find the tips just under it.
- Body section; where you type your code.
- Your code output section (how your code would appear in the browser in real life).
You’re awarded with badges for the lessons you finish, and that’s again very encouraging. Now to the pros and cons:
Pros
- Free (only level one).
- The course is well structured.
- Badges are really encouraging.
- Grades in the quizzes are really helpful.
Cons
- Advanced courses are paid (not very expensive ~ 15 $ for the level).
- They’ve the same problem of Codecademy of not providing any reference material that you might use to advance in your studies.
Verdict: You should start it after finishing your Codecademy course as a training/exercise for you before proceeding with your learning journey.
HTML.net
HTML.net is an excellent online outlet to learn HTML/CSS; it doesn’t require registering to have access to the course. The course isn’t interactive as Codecademy and Code Avengers. The site is structured in an excellent way that makes it very easy for a beginner to start and follow along. It’s also an excellent reference.
Structure: The course is divided into lessons; and each lesson covers a certain topic in HTML/CSS, the course is written in a simple language that makes it both easy and fun to learn.
Interface: The interface is very simple as seen below. The list of available lessons is to the left of the page, you click on the lesson and you’re ready to go.
Pros
- Free.
- Very suitable for beginners.
- The language used in the explanation makes it both easy and fun to learn.
- Good source to revisit certain topics, and can be used as a future reference.
- The course covers the majority of the topics of HTML/CSS; it covers more ground than Codecademy.
Cons
- Not interactive as Codecademy and Code Avengers.
Verdict: HTML.net is a valuable source for any one learning HTML/CSS.
W3Schools
W3Schools is one of the online outlets where you can learn HTML/CSS for free. W3Schools is similar to HTML.net as you don’t need to register to start, just open the web site and you’re ready to go. The difference between HTML.net and W3Schools is that the language and the material on HTML.net are more suitable for a beginner. W3Schools on the other hand is more suitable to see examples or revise something but not very suitable to learn from it.
Structure: The course is divided into lessons; and each lesson covers a certain topic in HTML/CSS.
Interface: The interface is simple as seen below. The list of available lessons is to the left of the page, you click on the lesson and you’re ready to go.
Pros
- Free.
- It covers the majority of the topics in HTML/CSS.
- Good source to revisit certain topics, and can be used as a future reference.
Cons
- Not interactive as Codecademy and Code Avengers.
- Not as simple as HTML.net.
- You should note that at the footer of the W3Schools website the following is written “W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content”.
Verdict: W3Schools is suitable for someone who has previous experience in programming. You can’t start learning from it if you don’t have any prior programming experience.
Shay Howe
Shay Howe blog offers a beginners tutorial for HTML/CSS, it’s created by Shay Howe, you don’t have to register to start the course. The course is well-structured for a beginner.
Structure: The course is divided into 10 lessons; each lesson covers a certain topic in HTML.
Interface: The interface is simple as seen below. The list of available lessons is to the left of the page, you click on the lesson and you’re ready to go.
Pros
- Free.
- The course is well-structured for beginners.
- Good source to revisit certain topics, and can be used as a future reference.
Cons
- Not interactive as Codecademy and Code Avengers.
Verdict: It’s a valuable source to know, you’ll need it when you want to revisit certain commands or find examples.
Tuts+
tuts+ is one of the outlets where you can learn HTML/CSS, some of the courses on tuts+ are free and others are paid. Joining tuts+ is easy; you just register using your email and you’re ready to start. After you finish the registration process, you go to the search bar and type what you want to learn HTML/CSS in our case and the available courses will appear to you as shown below.
As you can see you shall find thousands of courses, I’d recommend one entitled “30 Days to Learn HTML & CSS“. The course is well structured for beginners.
Structure: The course is divided into weeks (sections), each week is divided into lessons that you should learn in that week.
Interface: The interface is very simple, you click on the lesson and the explanatory video will start.
Now, to the pros and cons:
- Pros
- Free.
- The course’s well structured.
- Suitable for anyone who prefers video tutorials.
Cons
- They’ve the same problem of Codecademy and code Avengers of not providing any reference material that you might use to advance in your studies.
Verdict: It’s a valuable source for someone who prefers video tutorials.
Udemy
Udemy is one of the outlets where you can learn HTML/CSS through video tutorials; you can learn literally anything on Udemy for free or for a fee (depending on the course provider). To join Udemy just register using your email. Go to the search bar and type what you want to learn (HTML/CSS in our case); of course you should choose the free courses and at the time of writing this post the following were present:
You can choose one of these courses and start it. Each course is divided into lessons (depending on the instructor); I’ve tried the 02Geek course and the instructor was good. Of course if you want to proceed with more levels in HTML/CSS for instance you’ll have to pay or just search for another course that’s free, but after all it’ll be inconvenient as there would be no consistency in your learning curve. The following are the pros and cons of Udemy.
Pros
- There are some good materials for beginners.
- Many of the free courses are more suitable for someone who wants to get a general idea about HTML/CSS.
- Some instructors provide great discounts for their paid courses after finishing the free course.
Cons
- You’ll have to pay per course to proceed with your studies.
- It’s a trial and error process for both the free and paid courses as it depends on the instructor (stars aren’t that convenient as the instructor might be new that’s why he/she has no stars).
Verdict: It’s a trial and error experience; so it’s better to try another free outlet from the sources stated in this post.
Paid only Sources
Lynda: Lynda is somehow similar to Udemy as you can nearly learn anything there through videos made by professional instructors. Lynda is a monthly subscription service (I shall provide a promo code that will make you eligible for a free 7 days trial). The difference between Udemy and Lynda is that Lynda is a monthly subscription service so overall it’ll be cheaper (25$/month is better than 25-100$/course on Udemy). Lynda promo code is: Lynda.com/gizwiz (courtesy of the GizWiz show on TWiT.TV network, just click on “Lynda” stated at the beginning and you’ll be directed to it).
After registering (I’ve to warn you that even with the above promo code you’re required to input your credit card info) you can search for the topic you’re interested in, which is HTML in our case then you’ve to select the level (e.g. Beginner, intermediate, Expert). If you want to be more specific you can type (e.g. HTML5 Canvas) and you shall see courses about it.
Verdict: You can learn HTML/CSS for free from the other sources stated here in this post, so save the promo code for other programming languages with limited free outlets.
Learn Now Express: It’s very similar to Lynda; the only difference is that, they offer courses that prepare you to certification not just to learn. They offer a 7 days trial but you need credit card information to register.
Tip: You can always create a virtual credit card to register if you don’t wish to give them your credit card information.
Bottom Line
- Start with Codecademy.
- Exercise at Code Avengers.
- Proceed with HTML.net.
- If you’re one of those people who can’t study except from a book, then the book “Brilliant HTML and CSS” is an excellent free book for you.
- There are other sources to learn HTML/CSS like P2PU, the code player, code School, etc. but I’ve not included them in the post as I couldn’t find a well-structured course suitable for beginners at the time of writing this post.
Remember that the first step is always the toughest step, and the aim of this post is to provide you with resources that will help you take your first step in HTML/CSS.