7 Approaches I Took While Learning Web Dev From Scratch
Tags: beginners, career, webdev
Published: 2021-05-04 18:24:20

> _This article was originally published on [11sigma.com/blog](https://11sigma.com/blog/2020/11/30/7-approaches-i-took-while-learning-web-dev-from-scratch/)_

**What this article is**: a starting point for people that seek knowledge in a digestible fashion + my personal summary of the best ways to learn.

**What this article is not**: a guide on how to plan your self-development path.

## Let's code!

Do you want to start programming but are not sure how to do it? Or maybe you already know some things but feel stuck?

A little over a year ago, I switched my career path from biotechnology and became a manual QA. It was a huge unknown for me at that time - a year passed, though, and I'm now programming alongside super-talented engineers as a full-fledged member of a Team Undefined (awesome name, I know) in [Stoplight's](stoplight.io) [11Sigma](11sigma.com) crew.

During that time, I was (and still am) simultaneously working and learning. It was never easy, I had my ups and downs, but now I can confidently say I improved a lot. If only I knew at the beginning what I know now, it would save me a lot of time and stress.

Along the way, I used various learning materials of different kinds. Not all of them might fit you, but it's good to know about their pros and cons - which is why I prepared this summary.

### Theory

This part of learning resources is pretty straightforward - it makes you sit and do a lot of reading. No shortcuts, just learning everything by yourself. It can give you a lot of satisfaction, but sometimes an equal amount of frustration.

* Documentation & handbooks - per task, when you need to understand complex stuff quickly: [TypeScript](https://www.typescriptlang.org/docs), [vis.js - network](https://visjs.github.io/vis-network/docs/network/) + its [examples](https://visjs.github.io/vis-network/examples/), [Cypress](https://docs.cypress.io/api/api/table-of-contents.html), [Yarn](https://yarnpkg.com/), [Blueprint](https://blueprintjs.com/docs/), [Tailwind CSS](https://tailwindcss.com/docs).
* [MDN](https://developer.mozilla.org/) for the win - a ton of useful information on multiple topics for both beginners and advanced.
* Online courses w/o progress verification ([Interneting is Hard](https://www.internetingishard.com/)) - they can give a sense of direction and structured material.
* Books: [Eloquent Javascript](https://eloquentjavascript.net/), _"Clean Code: A Handbook of Agile Software Craftsmanship"_ by Robert C. Martin.
* Websites / guides - like [Getting Git Right](https://www.atlassian.com/git) by Atlassian or [CSS-tricks](https://css-tricks.com/).

**Pros**
* Reliable sources of knowledge.
* Allows us to understand both core concepts and dig deeper into specific details.

**Cons**
* You can get bored very easily if you don't use the gained knowledge parallel to reading.

### Real-life problems

Let's say you understand the basics of the topic you have chosen. You are either working in a real team or doing some coding on your own. In both scenarios, at some point, you will face a blocker. That's when you should reach for these:

* Dev.to, Medium, StackOverflow - tips & tricks for specific cases.
* Read somebody else's code / understand the product you are working on - because it's not necessary to reinvent the wheel, but good to understand how it works.
* Write something simple and let people judge it - good criticism is one of the best teachers.

**Pros**
* Quick progress.
* Working with code that is used somewhere will give you a real-life experience.
* Access to great ideas and solutions that you could potentially spend hours on when doing them by yourself.

**Cons**
* Requires a basic understanding of the topic.
* Easy to forget what you've learned if you only copy-paste.

### Practice makes perfect

You don't like spending hours reading books or documentation? Then learn by doing!

* Interactive tutorials - [Flexbox Froggy](https://flexboxfroggy.com/) by [Codepip](https://codepip.com/).
* Courses that involve practical tasks ([Codecademy](https://www.codecademy.com)) - you can use your knowledge/skills in real-life problems. Also [Udemy](https://www.udemy.com/) and [Coursera](https://www.coursera.org/).
* Review code.

**Pros**
* Difficulty level increases with each lesson (suitable for complete beginners).
* It's easier to remember new concepts when you use them.
* Good courses provide you with quizzes and pet projects.

**Cons**
* Hard to find any cons, actually.

### Verify progress

Because it's good to know how far you have come.

* Online tests verifying your skills and knowledge.
* [Answer interview questions](https://www.fullstack.cafe/) for the desired role (online tests).
* Work journal - recap on what you've learned so far. I strongly recommend starting one.

**Pros**
* You can evaluate your progress.
* Knowledge and skills that are used repeatedly stick better.
* If you don't feel like you make good progress, it's a perfect way to check if that's true. A lot of times, it turns out that you've learned more than you thought you did.

**Cons**
* Focusing too much on quiz points and external expectations can decrease your internal motivation and remove the fun.

### Collaborate / teach

* Pair programming / mentoring - for when you get stuck or are very unfamiliar with a topic. A good mentor will point you in the right direction, not only in a matter of specific task but also unblock you if you feel unproductive or that your progress is too slow.
* Asking coworkers or friends that are programming/programming communities for solutions (async a lot of times).
* Do a webinar, teach somebody else - that will force you to learn as well. You will also understand the topic better and more in-depth (Lunch & learn style). I did one on best practices for e2e in Cypress.

**Pros**
* Working with more experienced people will allow you to avoid common mistakes.
* A ton of great ideas emerge during discussions.

**Cons**
* Requires a big-time commitment.
* Huge impostor syndrome might happen at the beginning when you expose your ideas to other people.

### Other

* Challenges/problems to solve - [HackerRank](https://www.hackerrank.com/), [Codepen](https://codepen.io), variety of coding games.
* YT videos - for motivation, fun & interesting stuff that stimulate your curiosity (Coding Train).

**Pros**
* It keeps learning fun!

**Cons**
* Getting distracted from the actual learning ;)

## Conclusions

1. Choose the learning method that feels best at the moment. You may have some underlying preferences that are based on your character, but changing context will also add freshness to the entire learning process.
1. Consolidate your knowledge.
1. Keep learning. If you don't grow as a programmer, you risk using the same solutions all the time (which will probably work but may not be the best possible).
1. Don't try to be perfect, nobody is.
1. Don't over-engineer stuff, do the best you can at the moment.
1. Don't approach learning as another chore, do what is fun.

---

If you liked the article, consider following me on [Twitter](https://twitter.com/m_miaskowski)

Photo by [Ishan @seefromthesky](https://unsplash.com/@seefromthesky?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/Jt9syHEhrPE?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)