6 Free HTML and CSS Online Learning Resources for Beginners

I learned HTML and CSS from several online resources. Some useful, others not. When deciding which online course to take or learning platform to use, I often thought, there should be a list for newbies like myself of the most useful resources to learn the fundamentals of HTML and CSS. Well, I never found that list. Now, with more experience under my belt and knowledge, I created the list I was once in search of.

If one follows this outline, in the order as listed, they will not become a master at HTML or CSS. However, they will be able to start learning JavaScript while deepening their understanding of HTML and CSS. In 2016, I decided to study languages used by Front-End Web Developers. I read the article Web Design 101: How HTML, CSS and JavaScript Work which states the role of HTML, CSS, and JavaScript in reference to web development:

• HTML provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript.
• CSS is used to control presentation, formatting, and layout.
• JavaScript is used to control the behavior of different elements.

I found JavaScript and jQuery exciting to learn, but knew I had to grasp the foundation of HTML and CSS first. So, I went to work. This list is a result of that work. Also, for each resources provided, there is a link to a review I wrote after using that resource. I didn't come up this list randomly.

Estimated completion time: 12 - 15 Hours. Enjoy!

Resource 1 | SoloLearn

Steps to Take:

• Create an account: https://www.sololearn.com/
• Go to the following link: https://www.sololearn.com/Courses/
• Scroll until you see HTML Fundamentals course. Start course.
• Go to the following link: https://www.sololearn.com/Courses/
• Scroll until you see CSS Fundamentals course. Start course.

Article of my review of Sololearn: A Review of Sololearn's Online Learning Platform

Resource 2 | freeCodeCamp

Steps to take:

• Create an Account with Free Code Camp at https://learn.freecodecamp.org/
• Click the grey arrow left of the text: Responsive Web Design Certification
• Under Basic HTML and HTML5 you’ll see Introduction to Basic HTML and HTML5
• Start by working through the Say Hello to HTML Elements exercise
• The last exercise for this section is Define the Head and Body of an HTML Document
•  Go to https://learn.freecodecamp.org/
•  Click the grey arrow left of the text: Responsive Wed Design Certificate
• Under Basic HTML and HTML5 you’ll see Basic CSS
• Click the grey arrow left of the text Basic CSS
• Start by working through the Change the Color of Text exercise
• The last exercise for this section is Use a media Query to Change a Variable

Article of my review on freeCodeCamp: 5 Reasons why Free Code Camp is an Excellent Learning Resource for Beginners

Article on why I almost quit learning using Free Code Camp's Platform: Why I Almost Quit Free Code Camp's Front-End Development Program

Resource 3 | General Assembly Dash

Steps to take:

• Create a Dash Account insert URL: https://dash.generalassemb.ly/
• Complete the following projects: Project's 1 and 2 (Build a Personal Website and Build a Responsive Blog Theme).

My article review of GA Dash: General Assembly Dash Project Review | Project 1: Build a Personal Website

Codepen for GA Dash Project 2 | Build a Responsive Web Design

Resource 4 | Flatiron Coding Bootcamp Prep Curriculum

Steps to take:

Go to the following link: https://flatironschool.com/free-courses/coding-bootcamp-prep/ to complete your profile and complete the sections listed below:

• The Web is Made of HTML
• Basics of HTML
• Using Images in HTML
• Understanding Links in HTML
• Styling with CSS Intro
• CSS Basics
• CSS Selectors

Article I wrote on Flatiron: How Beginners Can Benefit from Completing Flatiron's Bootcamp Prep Work

Resource 5 | Udemy Course: Learn Responsive Design in 30 Minutes

Steps to take:

• Sign up for course here: https://www.udemy.com/learn-to-create-responsive-layouts-in-30-minutes/
• Watch the course and take notes (make sure you know understand each line of code. If you don't, research online. Google is your friend)
• Watch course again and code along (type code in CodePen)

Article I wrote on course: HTML5 & CSS3 Learning Journey | Part 5: Media Queries and Responsive Design

CodePen to final project

Resource 6 | Traversy Media | YouTube Channel

• YouTube: Traversy Media: HTML Crash Course for Absolute Beginners
• YouTube: Traversy Media: CSS Crash for Absolute Beginners
• Youtube: Traversy Media: Build An HTML5 Website With a Responsive Layout

Article on my review on Traversy Media's Tutorials: Congratulations! You've Been Accepted to YouTube University.

As always, thanks for reading and happy coding.

Astra Rai