Stuck inside? Here are sixteen (free) steps to get started in web development.

View the original article on Codeburst

This is the roadmap I wish I had when I first started coding: a sequential list of free, quality resources designed to help beginners get started in front-end web development. There are tons of great free resources out there, but it’s hard to know where to start, what to learn, and how to use those skills in the real world. These study guides cover the basics of JavaScript, HTML, and CSS using what I’ve found to be the most effective online learning platforms.

Beginning JavaScript

1. Why Study JavaScript?

Read this article to gain a better understanding of the power of JavaScript.

2. Watch and Code

Gordon Zhu’s Watch and Code will allow you to get your hands dirty with some real JavaScript code. Remember that you need to actively code along with the videos. Using Gordon’s instructions, try out the code from the videos on your own. Experimenting with breaking the code is an excellent way to gain a better understanding of the relationship between what you’re writing and how it manifests on the front/back end. Sign up for Watch and Code and complete versions 1-2 of the example application and the functions and variables interlude.

3. How does JavaScript work in the browser?

Watch this video.

4. More Watch and Code

Build upon the JavaScript basics you already practiced with more Watch and Code. Remember to code along with the video, experiment, and break things. Return to Watch and Code and complete versions 3-6 of the example application.

Troubleshooting Strategies

5. When you get stuck…

Troubleshooting is a huge part of the development process. All developers, regardless of skill level, spend a ton of time debugging their code. Having strategies to turn to when you encounter a bug can save time, help you better learn from your mistakes, and keep frustration at bay. Take a look at this set of troubleshooting strategies and try them out next time you hit a snag.

6. Using Stack Overflow

Stack Overflow is the industry standard for getting help online. The platform allows you to ask and answer questions regarding any development topic imaginable. I highly encourage you to sign up for an account. For more information view the Stack Overflow Tour.

Add Some HTML

7. What is HTML?

HyperText Markup Language’s job is to format information in a way that makes sense when viewed in a web browser. HTML describes the structure and purpose of web content. Read Mozilla’s introduction to HTML.

8. Practice some plain HTML

Complete the Codecademy HTML course.

9. Introduction to the DOM

JavaScript enhances webpages by providing all sorts of extra features that can’t be achieved with plain HTML. The technology that allows JavaScript to interact with an HTML document is called The Document Object Model. Read this introduction to the DOM and this more detailed description.

10. Integrating JS + HTML

Use HTML and JavaScript together to create an interactive webpage by finishing the remaining sections on Watch and Code. Complete the remaining lessons on Watch and Code.

Add Some CSS

11. What is CSS?

Read This introduction to CSS.

12. Practice CSS

You will find a great interactive CSS tutorial on Free Code Camp. Complete parts 1-17 of Free Code Camp’s CSS course.

13. CSS Zen Garden

Visit CSS Zen Garden’s website and click the “View all Designs” button to see examples of different CSS styles applied to the same HTML document. Additionally, you can download the source code of each example to view its CSS code. View the CSS code on CSS Zen Garden’s website.

14. More CSS Practice

Complete the remaining sections of Free Code Camp’s CSS course.

15. CSS Approaches

When writing CSS, using a consistent and organized approach is extremely important. Take a look at a couple of CSS methodologies that might help prevent spaghetti code. Take a look at the following CSS methodologies and consider making use of them in your CSS files:

16. Build and deploy a website

Using the skills you learned above:

  • Build a website of your choice, such as…
    • A portfolio
    • A shopping list app
    • An interactive resume
    • Anything else!
  • Follow these directions to deploy your website using Netlify Drop.

Conclusion

The resources above are meant kick-start your experience as a developer. Stay tuned for part two, where I will cover more advanced topics.