Internet Self Improvement

Learn HTML and CSS with These Step by Step Tutorials

Nancy Messieh 21-08-2015

When you are itching to try your hand at code, there is simply no limit to the number of tutorials, videos, and online courses out there for you to try. But sometimes, the best way to learn something is by diving in and trying it firsthand. Web development is no different.


If you’re curious about HTML, CSS, and JavaScript, or think that you might have a knack for learning how to create websites from scratch — there are a few great step-by-step tutorials worth trying.

The following list of tutorials will walk you through the basics of HTML and CSS, and will even give you an introduction to the complex world that is JavaScript What is JavaScript, And Can the Internet Exist Without It? JavaScript is one of those things many take for granted. Everybody uses it. Read More — at least as far as beginners are concerned. But what they won’t do is prepare you for a life as a developer right out of the box. Most of these services are simply an easy place to start.

It will take much more than this to start developing websites professionally. These tools, most of which are free, give you the basic building blocks to web development, and will make it much easier to dive into the more complicated courses.

General Assembly’s Dash

The folks over at General Assembly have a free tool that teaches you the basics of HTML, CSS, and JavaScript, and it’s the perfect place for complete beginners to start. Through a series of five projects, you will learn the terminology and basic coding skills allowing you to build a website that resembles an page, how to build a responsive blog, and a restaurant website.



The Dash tutorials go beyond learning how to create simple websites, you can also harness the power of HTML, CSS, and JavaScript to create a robot using shapes and lines or even a Mad Libs game.

The Dash tutorials move at a reasonable pace, taking you through each step a few lines of code at a time. As with any tutorial, I would recommend taking notes as you work. This will help you memorize the various tools you’re learning, and with the General Assembly tutorials, once you’ve completed a phase, there doesn’t seem to be a way to repeat it.


Conclusion: Using Dash will set you up with all the knowledge you need to put together a basic modern website –from navigation, to responsive design. You are even introduced to the basics of how to create a custom Tumblr theme. That said, there are only a total of four lessons on Dash. While you can take the concepts you’ve learned and try to apply them in different ways, you need to supplement your knowledge with other courses included in this list.



Codecademy has been around quite a lot longer than Dash, and is often adding new lessons to its offerings. With the same step-by-step all-encompassing lessons you’ll find on Dash, Codecademy goes one step further by giving users a general overview of creating a website with HTML and CSS, but also provides in-depth tutorials on the individual languages, HTML, CSS, and JavaScript.

Like other services, Codecademy shows you how to create a navigation menu, add background images, make a gallery of images, or even a signup page. (To add functionality to your signup page, be sure to go through the Ruby on Rails tutorial.)


There are also dedicated lessons on jQuery Making The Web Interactive: An Introduction To jQuery jQuery is a client-side scripting library that nearly every modern website uses - it makes websites interactive. It's not the only Javascript library, but it is the most developed, most supported, and most widely used.... Read More , a key language that makes JavaScript much easier to learn. If you’re curious about backend development, there are also in-depth lessons for Ruby, Python, PHP, and more.


In addition to learning how to design a website, and diving into the intricacies of programming languages 7 Useful Tricks for Mastering a New Programming Language It's okay to be overwhelmed when you are learning to code. You'll probably forget things as quickly as you learn them. These tips can help you to better retain all that new information. Read More , you can also use Codecademy to get the basics on how to create web apps, and how to add signup, login, and logout functionality to your website.


Conclusion: Like Dash, the interactivity of Codecademy is invaluable. Being able to see how each step materializes in your website is encouraging, and the setup also makes it easy to spot mistakes. If you’re a complete beginner, Codecademy is a great place to get your toes wet and decide whether coding and web design is the right fit for you. With that experience, you can take that knowledge to a paid course or class.

Tuts+ is a website packed with tutorials (free and paid) on a wide variety of topics including everything from mobile Designing A Breakthrough App? 7 Mobile Development Blogs You Should Read The mobile space is so new that trends are constantly shifting and new insights are made every day. If you plan to develop mobile apps, how can you keep up without going mad? Read More and game development 4 Free Websites Where You Can Learn The Basics Of Game Development When looking for a good game development tutorial series, you want one that will teach you the practices and mentality of good coding because you can then transpose those practices in any language or platform. Read More to color theory How To Learn Color Theory In Less Than One Hour Basic knowledge of color theory can mean the difference between an "amateur" aesthetic and a "professional" one – and it really doesn't take long to learn. Read More and how to use Adobe Illustrator Teach Yourself Adobe Illustrator for Free Adobe Illustrator has long been the illustration tool of choice for graphic artists. Ready to bring your designs to life? Here's how you can learn Adobe Illustrator for free. Read More . While not all of the lessons taught on the website follow the step-by-step model, there are a few that take this approach and walk users through easy web development how-tos.



One particularly useful tutorial walks you through the steps to design and code your website. The tutorial admittedly dates back to 2009 so the design aesthetic may not appeal to you, but that said, the tutorial teaches you the skills necessary to design your website, and you can then apply those skills to a more updated design. Another caveat worth mentioning with this tutorial is that it requires the use of Adobe Photoshop. If you don’t have access to the software, you could always opt for the option of Adobe Creative Cloud for a fee of $50 per month.

The tutorial walks you through designing a basic two column website with a header and footer. The website includes content, a navigation bar, social media buttons, and more. Once you’ve designed the website in Photoshop, you can switch over to a code editor and the tutorial walks you through the code required to transform your design into an HTML page. The tutorial will require some basic knowledge of HTML so I’d recommend trying this tutorial out after you’ve gone through the first few General Assembly tutorials.

If you want to make a more elaborate website, check out another Tuts+ tutorial on how to design a beautiful website from scratch. Another PSD to HTMl tutorial makes life a little easier by providing the HTML, CSS and image files. Other tutorials on Tuts+ walk you through how to create a Tumblr photo diary theme — although this one is a simple Photoshop design, minus the code.


Conclusion: Compared to Codecademy and Dash, the Tuts+ tutorials take a little bit more effort since you have to walk yourself through the steps. With the other two sites, there is a lot more ‘hand holding’ so to speak. As you’re walked through each step, it is often easier to figure out what mistake you might have made. It also requires that you use your own software, whereas Dash and Codecademy have built-in systems. That said, with the variety of tutorials, you’re bound to find a set of lessons that cater exactly to what you want to learn.

Learn to Code with Shaye Howe

With a series of 12 lessons, Shaye Howe does a really great job of breaking down the basics of HTML introducing you to the terminology, and how to use the various elements of HTML and CSS. Various lessons include getting to know HTML, CSS, understanding the box model, positioning content, typography, and more.


When it comes to applying the lessons in the tutorial, the website does not provide a way to quickly see how your HTML and CSS looks in effect. To overcome this you can use an online tool that will provide the same features you’ll find in Codecademy and Dash.

Check out a CSS/HTML/JavaScript sandbox like CSSDeck or LiveWeave, which allow you to input HTML, CSS, and JavaScript and view the final result. Technically, you can also use the HTML, CSS, and JavaScript editors in Dash and Codecademy as well if you like the setup they provide.

As you work your way through the explanations, the site also provides examples of code for you to try out yourself. At the end of each lesson is a hands-on exercise that allows you to apply what you’ve learned.

After you’ve made it through the 12 lessons, you can switch over to the Advanced HTML and CSS Lesson, which includes responsive design, jQuery, and more.

Conclusion: This tutorial takes a slightly different approach to the other suggestions listed here. With a much more in-depth explanation, you’ll spend more time reading than you will applying what you’ve learned. While this might sound boring to some, there are some valuable lessons here that provide context and better understanding of how these languages operate.

What’s Your Take?

Now it’s time to hear from you. Are there any online web development tutorials that you would recommend? What do you think is the next step after trying out these online courses? Let us know in the comments.

Image Credit:

Related topics: Education Technology, HTML, HTML5, Web Design.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Anonymous
    July 22, 2016 at 10:44 am

    how to get free account in tute+

  2. Anonymous
    August 25, 2015 at 2:15 am

    Nancy Messieh,

    Your tutorials are excellent and many people wanting to learn HTML and CSS coding will find the tutorials very helpful.

    The detailed descriptions are clear and all the pros and cons are discussed for beginners to choose the best and easy to learn software.

    My recommendation is for beginners to try these sofwares that will create a good foundation for their future web designing.

    A. S. Bhasker Raj