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.
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.
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.
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.)
In addition to learning how to design a website, and diving into the intricacies of programming languages , 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.
Tutsplus.com is a website packed with tutorials (free and paid) on a wide variety of topics including everything from mobile and game development to color theory and how to use Adobe Illustrator . 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.
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.
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: hackNY.org