Best Paid Courses To Teach Yourself HTML & CSS From Scratch
With so many resources online you can easily teach yourself web design without any official classes. It may take extra time and effort but in the end you’ll truly understand the concepts behind coding a website.
The only question is what type of learner you are and how you learn best. Some people prefer books since they’re more direct and packed with readable step-by-step projects.
But some people are more visual learners and they prefer video courses. That’s why I’ve curated this huge list of the absolute best online courses to study frontend HTML/CSS development.
If you follow a few of these courses and really put in the effort I guarantee you’ll be coding websites like a pro in no time.
One of the most frequently mentioned resources for web development is Codecademy. It’s an excellent site for learning pretty much anything about coding and building websites.
They have a brand new HTML/CSS course that’s become their “official” intro course starting in late 2017. This course is frequently updated for modern standards and it’s the best introduction for a complete beginner.
Never used an IDE in your life? Have no idea what a “tag” is or what an HTML element means?
By joining this course you’ll learn all the fundamentals of frontend development along with general website building tips. And you can even take the fast-track course which teaches through live example over a three month period.
This series guides you through the process and teaches you how to build 16 different websites in a short 10-week period. Really awesome stuff!
So many people love Codecademy for its ease of use and variety of instruction. If you’ve never done any online learning before then Codecademy is a fantastic place to start regardless of your technical knowledge or skill level.
30 Days to Learn HTML & CSS
I’m also a huge fan of the TutsPlus courses because they’re so detailed and easy to follow. The video quality is fantastic and most of the courses get into really specific subjects.
One of the best courses for a beginner is 30 Days to Learn HTML & CSS. It comes bundled with a TutsPlus premium account so if you pay to access this course you can watch every other course in their entire library.
But there’s a reason I specifically recommend this one for beginners. It offers a comprehensive look at the HTML/CSS language and how you can build projects from scratch.
In total the course measures 5 hours long which is lengthy considering everything you get. Premium subscribers get full access to all videos + downloadable source files for each lesson.
The teaching style breaks down into a four-week series where each week you’re learning new concepts. Then at the end you compile this all together and use your newfound knowledge to code a website from scratch.
You can push through these videos a lot faster than four weeks. But it ultimately depends on your ability to work fast and retain knowledge over time. That’s one of the best things about self-teaching is that you can go at your own pace whether it’s slower or faster than other students.
Here’s another TutsPlus course that I highly recommend for frontend work. CSS3 Essentials comes with the TutsPlus premium subscription so you can check this out along with the prior course on HTML/CSS over 30 days.
But with CSS3 essentials you’re going beyond the fundamentals of CSS for structuring HTML. Instead this course teaches the newest features in CSS3 and how they apply to modern web development.
Luckily it’s not an overly complex language so if you understand the basic syntax you should be fine. This means anyone can pick up CSS3 Essentials and follow along with ease.
Each video lesson talks about a different CSS3 property like drop shadows, gradients, and box sizing. Later you’ll get into more complex CSS selectors and even some lessons on custom web animation with CSS.
It’s recommended that you already know HTML before following this course. It assumes some knowledge of CSS but certainly not mastery, although the more you know the easier it’ll be.
Web Design Workflow with Sass and Compass
Here’s the last in my trilogy of TutsPlus courses that I think are must-view resources for frontend developers. Web Design Workflow with Sass and Compass teaches the foundations of Sass which is a CSS preprocessor.
This topic can get really complex and it’s definitely an intermediate-to-advanced course. But don’t let this scare you away!
Almost every professional web developer uses Sass or some type of preprocessor. So understanding how this works is paramount to building your skills as a developer in the long run.
Not to mention this comes as part of the TutsPlus subscription so you can sign up for one account to get access to all their lessons at once. Pretty cool!
Before starting with Sass/Compass it helps to have a few skills down pat:
- Basic HTML layout design
- CSS positioning and structure
- Most basic CSS syntax memorized
Sass expands on top of CSS so a lot of the syntax will look familiar. But it also adds variables, loops, and more complex items into CSS so you really need to know your stuff before moving forward.
Front End Web Development: Get Started
Getting back towards beginner material is Front End Web Development: Get Started through the Pluralsight library.
Again they offer a single subscription service where you pay monthly for access to their entire library. The cool thing about Pluralsight is, much like TutsPlus, they cover more than just web development.
But for anyone looking to get started this course is well worth the time. It spans about 3.5 hours which is shorter than the TutsPlus intro course, yet it’s also a little more detailed in certain areas surrounding HTML.
I find this to be a little better for anyone who wants a broader grasp on HTML as a whole. You still get practice projects and need to put in the work but it’ll hold your hand a little more.
Introduction to CSS
Similarly check out the Introduction to CSS also on Pluralsight. It’s got similar content but focuses more on styling websites and getting down the basics of positioning.
One of the toughest features in a layout is getting it to look right for all browsers. In fact web designers have struggled for years to work with browser compatibility.
This course won’t make you an expert but it’ll certainly teach you how to think about your websites from start to finish. You’ll learn how to define proper CSS rules, selectors, and how to use the “cascading” part of Cascading Style Sheets.
My only gripe is the date on this course. It was first released in 2011 and hasn’t been updated much since, so there isn’t a lot of new material.
However if you’re brand new to CSS rest assured the fundamentals do not change so you’ll be learning techniques that still work now & should work 10 years from now.
Responsive In-Browser Web Design with HTML & CSS
The concept of responsive design is much newer and a much more welcome topic for developers. If you’re getting into web design nowadays you should really start with responsive sites because they’re the way of the future.
Responsive In-Browser Web Design with HTML & CSS teaches you how to create website layouts that are built to last and fully responsive from the start. This way you’re planning layouts with the idea of making them responsive right away, not shoehorning it in later.
Note this is somewhat of an advanced course with HTML/CSS so you should already know your way around both languages.
It helps if you can already build a few simple layouts from scratch because this dives right into the responsive side of things. But if you’re comfortable structuring floats or two-col layouts then you’ll have no trouble working responsive stuff into the mix.
And if you want to learn more you can check out our free guide to convert website layouts into responsive layouts.
SMACSS: Scalable Modular Architecture for CSS
When you start building large-scale websites you’ll inevitably end up with huge complex CSS stylesheets. This is when you’ll want to organize your code and find systems that work for you.
The SMACSS system is fantastic and one of the best for developers looking for structure. The rules are somewhat confusing at first but once you start following them in project work you’ll never turn back.
If you want to get started on this topic check out SMACSS: Scalable Modular Architecture for CSS from Pluralsight.
It’s a detailed five hour video course teaching everything about proper SMACSS settings and naming standards.
You’ll learn how to properly organize your CSS and how to build modular CSS stylesheets that are easy to expand.
Building Stronger Front-end Practices
Whether you want to work in a team or just on your own personal web projects, it’s crucial to have a systematic coding process.
The course Building Stronger Front-end Practices touches on how you should look at coding and where you should be spending your time.
It also talks about modular CSS and how you can use naming conventions like SMACSS to split up your code. But it offers other related solutions and even touches upon frontend frameworks you can test.
I do not think this is a “must watch” course on its own. But if you subscribe to Pluralsight and work through some of the previous courses then this is definitely worth consuming.
Creating a First Website in Dreamweaver CC
One of the most popular coding IDEs is Adobe’s Dreamweaver. This works like both a visual editor and a live code editor.
The vast majority of professional developers move away from Dreamweaver once they understand the fundamentals of coding. But if you’re just getting started then Dreamweaver is awesome and you can learn a lot through Lynda’s Creating a First Website in Dreamweaver CC.
It’s a course geared towards beginners who have no idea where to start with websites or with the software.
Over 2.5 hours you’ll learn how to work with websites and how to edit HTML/CSS code for any site. This is very much a newbie-centric guide so it’s best for people who have zero prior knowledge of coding or web development.
Creating CSS-Only Navigation Menus
Here’s a slightly more advanced course talking about pure CSS navigation.
This has become a hot topic in recent years since CSS3 lets you design pretty much anything with just HTML/CSS. Creating CSS-Only Navigation Menus is a very short yet detailed course following live examples of CSS navigation.
You’ll learn how to organize your own menus and how to write code that’s standards compliant.
It does target beginners but you can learn a lot even if you’re somewhere near the intermediate stage. Either way it’s a great resource to bookmark if you sign up for a Lynda account.
Building a Responsive Single-Page Design with Sass
I mentioned Sass earlier and it’s one of the best CSS preprocessing languages you can use. There aren’t too many video courses on the specifics of Sass in the real world but this one takes the cake.
In Building a Responsive Single-Page Design with Sass you’ll follow a lengthy 5-hour video tutorial covering all the fundamentals of responsive web design.
Each lesson gets into a different subject and through live coding examples you’ll pick up the best trends, tricks, and techniques for building responsive websites using the Sass preprocessor.
This is not an easy course and even semi-experienced developers may struggle with the material.
But if you work through it one step at a time you’ll come out the other side a much more well-educated developer.
Bootstrap 4 Essential Training
Twitter’s Bootstrap framework is no doubt the most popular choice for quick frontend development. This course was published just around the time that Twitter mentioned Bootstrap 4 beta which is a huge milestone.
If you’ve wanted to learn Bootstrap but just haven’t made the time Bootstrap 4 Essential Training is perhaps the best definitive guide.
It covers absolutely everything about the Bootstrap environment with the basics of HTML/CSS for layout structures, plus jQuery scripts for adding BS components.
BS4 also runs on Sass so it helps if you’re already familiar with that.
Build Responsive Real-World Websites with HTML5 & CSS3
Wading through Udemy can be tough since there are so many courses on basic coding. But the best courses really are fantastic and they’re usually on sale so you can get them at a real discount.
One of my top picks is Build Responsive Real-World Websites with HTML5 & CSS3 by Jonas Schmedtmann. It has almost 50k enrolled students and people who have purchased the course, mostly a 5-star rating and tons of great feedback.
The goal of this course is to bring you from a generic developer into a modern web developer.
You’ll learn about responsive design in the real world and how to create websites that follow responsive techniques. This includes a huge series of lessons on CSS3 breakpoints which are essential to understand.
If you’re looking for a course on responsive design this is one of the best to start with.
Learn To Build Beautiful HTML5 And CSS3 Websites In 1 Month
Now if you’re starting on a lower level of knowledge you may want a course that’s easier to follow along. That’s why absolute beginners who want a Udemy course should check out Learn To Build Beautiful HTML5 And CSS3 Websites In 1 Month.
It feels very much like the TutsPlus course I mentioned earlier following the 30-day teaching guide. However this one is much longer with a total of 11 hours of video and plenty of code snippets too.
This is one of the best places to start learning web development without any experience. You can usually find the course on sale so it’s a nice budget choice as well.
But either way this list is full of valuable self-teaching courses and you can’t go wrong with any of them.