“A minimal workspace with a laptop, a potted plant and small sculptures” by Kari Shea on Unsplash

What this is

This is a comprehensive, learning-first post on how to get started on learning web development. All of the resources listed have been personally tested, and are dear to my heart.

I won’t be talking about text editors and the like, just to keep things clean.

I’m not going to recommend any paid courses either, simply due to the fact that not everybody can afford those courses. It’s entirely possible to launch your career in web development just by going through what’s available for free online.

1. Getting started

Consider CodeAcademy and FreeCodeCamp. Both of these are web-based courses that allow you to code directly in your web browser. This is so you don’t have to worry too much about setting up your environment. I’d recommend getting started with FreeCodeCamp, because they have a nice little learning “map” created for you. CodeAcademy has a lot of courses and not much of a learning structure, which can confuse a lot of newbies. Plus, FreeCodeCamp is less buggy. You’ll learn HTML, CSS, and JavaScript to begin with. Worry about frameworks and libraries later.

2. Even more learning

Instead of sticking with just one programming course/resource, jump around! Sometimes another course or tutorial will explain things better. While I was learning, I hopped around resources A LOT. It’s maybe because I’m easily distracted by new and shiny things, but this habit has accelerated my learning a lot by exposing me to different teaching techniques. Try it! Other programming learning resources

3. Practice

You’ll need to practice a lot. Actually making things is going to benefit you more than watching hours of lectures. Some of my favorite places to find tutorials are Scotch.io, FreeCodeCamp’s Medium Blog, and newsletters like FrontEnd Weekly. Use Codepen.io, an online coding sandbox/environment, to do your practice. It’s already got everything set up for you, plus you get to explore other people’s code and share your own. I’ve found that looking through people’s pens on Codepen can teach me new tricks!

Projects, Tutorials, Challenges

References

Code Sandboxes — Code online, without an IDE

Glitch.com — the friendly community where you’ll build the app of your dreams
Codepen.io — Experiment with Frontend technologies
JSFiddle .net — Experiment with JavaScript

4. Join a Community

Keep yourself inspired and motivated. Follow quality Instagram and Twitter accounts. And the most important of them all — get into a good, supportive community. CodeNewbie on Twitter and Facebook is my favorite. They’re the most supportive community for newbie developers. Having people to talk to and ask questions is SO important, and can be an unexpected source of motivation. Another huge, active community I’m in is Newbie Coder Warehouse.

A tip for being a good member: always Google/search the group before you ask, and be thoughtful. “How to xxx” is NOT a good question.

5. Set Goals

Set realistic goals for yourself and stick with them. For example, commit to 1 hour of coding every evening. Goals like this are tangible and quantifiable. Or, take up a challenge like Kallaway’s #100DaysofCode. You code 1 hour each day for 100 days, and as part of the challenge, you’ll have to encourage and cheer on 2 people in the community. You’ll have to keep yourself accountable by keeping a journal too!

6. Journal

Photo by Estée Janssens on Unsplash

In addition to taking notes, you should start keeping a developer journal. What you can do with your journal:

Record short snippets of what you learned that day
Document a challenge and how you overcame it
Note down workflows and processes
Set goals and track them
Ask yourself questions to reflect on your learning journey

I’ve found that keeping such a journal allows me to look back and see how far I’ve come. Imposter syndrome can hit at any moment, but a journal helps to remind me that I’m on a journey, I’m still learning, and I’m making progress. Tracking wins also help with writing my resume, too! More on that in a later post. You can journal on your favorite note taking app, a physical book, or even GitHub! See what suits you.

7. Listen to Podcasts

Listening to podcasts on a commute will help you learn during those mind numbing hours driving or on a bus. My favorite podcasts for development are CodeNewbie Podcast and StartHereFM. Some community favorites (that I admittedly have not checked out yet) are SyntaxFM and FreeCodeCamp’s new Podcast.

8. Read Books

If you prefer reading, I’ve gone through a few books that I’ve really loved and have benefited me greatly. I usually get the ebook versions, but these are available in print, too.

9. Learn from Other Resources

If that wasn’t dizzying enough for you, here are a bunch of links I’ve got bookmarked that help me decide what to learn next. Huge thanks to the people who curate them!

Bonus Tip

You’ll notice that learning web dev involves a lot of reading and browsing. Use a service like Pocket to save websites, tutorials, articles, or whatever for later!

Closing Notes

Learning a totally new skill yourself is going to suck. Learning web dev is hard, and don’t listen to anyone who tells you that it’s super easy. Knowing this going in, you’ll be prepared for lots of hiccups that will come your way. Programming is about getting your hands dirty, LOTS of Googling, and lots of wanting to throw your computer against the wall.

THAT’S NORMAL.

You’re going to sweat, cry, bleed — but you won’t have to do it alone! Lots of people out there are where you are — learning. Join a community, be nice, and be helpful. Lots of people are sharing their journey, their favorite resources, and all that kind of stuff online.

When you’re about to give up, remember that you’re learning a new skill, like riding a bike, or like learning to read. It’s going to hurt, but it’ll be worth it in the end. Web development is a magic power that allows you to create virtually anything that your heart desires, even the whole solar system.

Tech with Tris