In my previous post, I went on about why I decided to become a web developer, leaving aside the fact that I had already started learning JavaScript, HTML and CSS. In this new post, I want to dive into the resources and learning material I used for that purpose, starting with no prior knowledge and eventually becoming able to create fullstack projects.

About the structure of this post

You’ll notice that the following sections are written in chronological order, which allows me to describe the successive steps I went through during my learning process and how I went from one step to the next. Unfortunately, I didn’t really follow the typical order in which you would usually do these things, so it might be difficult for any aspiring developer reading this post to actually know where to start. I’m actually glad I did it in this precise order, but if you really want to do it in the right order, please know you should:

• First start understanding HTML and CSS, and know how to create simple web pages using them.

• Then learn how to add user interaction in simple web pages using JavaScript.

• Next, learn using a frontend framework such as React, which will allow to code much faster and make it reusable. While doing so, you’ll probably also start using TypeScript, thanks to which your code will be more robust and readable.

• After that you can start learning about the backend side using fullstack project tutorials.

First things first, for those really new to programming

As I’ve written before, I already had some basics in programming before trying to learn JavaScript, and the rest of this post is going to assume that you too have some background in programming.

If that is not your case, please allow me to provide a few resources that you can use to learn the basics of algorithmics and programming at your own pace, if you feel like the content in this post is too complex:

• exercism.io: A great website to learn coding using any programming language. You just have to download one of the many assignments, read the instructions and try implementing a code that does what is expected. You are even provided with tests that allow you to locally test your solution!

• freecodecamp.org: A really great resource that provides free detailed tutorials of several hours to learn pretty much anything related with programming. There you’ll be able to find all the resource you need to learn JavaScript, HMTL, CSS, or even NodeJS, docker, and plenty more.

• and mostly just Youtube: I am always amazed at how much content can be found on YouTube… Whatever it is that you are trying to learn, chances are you’ll find a great channel explaining how to use that precise language, library or framework. This is especially true when it comes to programming.

Start with React… Obviously!

I know this is going to sound quite unusual and earn me a fair share of criticism, but I actually learned React before knowing anything about JavaScript, CSS or HTML. I had never learned anything about web development and was still working in my previous job. As such I was under the habit of working while listening to some music via YouTube at the time, but my job being intellectually unfulfilling, it didn’t take me long to actually listen to programming content instead of music.

That’s how I first stumbled upon a React video showing how to bootstrap a React app and create the well known Todo app. Nothing extraordinary, really, but what I saw this day really made an impression on me. The only programming language I’d been taught at school was Java, and I still remembered it this experience as a nightmare:

• Eclipse, our code editor (also called Integrated Development Environment - IDE) was slow and heavy, required to install several extensions and precise versions. It was frequent for us to be unable to make a project work on a computer that was not our own.

• Our projects did not run in the browser. We often had to create our own user interfaces, or just rely on our terminal to know what was happening in our program.

• It took a lot of time to be able to visualise the changes we had made in our code. Java had given me an image of programming which was slow, abstract and theoretical.

In contrast, React showed me a brand new world through that first video:

• It now looked frighteningly easy to install any project’s dependencies and have it run on any machine…

• It was actually possible to instantly visualise the changes made in the code using the browser, and even with a live refresh feature!

• It looked so easy (and fun, actually) to build a user interface, and to customise it according one’s sense of aesthetics.

A glimpse into the developer mindset

Fun. That was the most important thing of all. That’s when I actually started to understand that work should be fun, in addition to allowing me to learn and evolve as a human being. That realisation alone was enough for me to start watching React tutorials and trying to reproduce them at home.

I really want to stress one thing here. No, I dit NOT understand everything at first. I even didn’t get much at first, but after a while I was able to understand some things. A few videos later and I knew how to build components either using the functional or the class approaches (before hooks became the recommended method).

That was the really great thing about these tutorials. I could simply reproduce the steps shown in the video, although I did not understand everything, and I would still get to the final result. Some things I didn’t get, sure, but after a while they started to become clear. Every once in a while I would suddenly understand one of React’s many mysteries on my own and feel proud!

That’s the feeling I never stopped looking for as a developer. Not knowing, asking questions, and being able to finally answer them. That’s all part of one single process. That’s learning, my friend!

I now feel like any new programmer should be comfortable with the idea that it’s okay not to understand everything (or anything, actually). Not understanding is okay. It’s quite normal, really, in any discipline you start to feel interested in but know nothing about. It’s a necessary and temporary step that leads to you being actually good at whatever it is that you aim at. As a developer, but perhaps even as a human being, you should not feel afraid of walking that path, but rather quite excited because you trying means you will inevitably learn, evolve towards your goal and become a fuller version of yourself.

HTML, CSS and JavaScript, at last!

While coding components in React, I obviously started hearing about HTML, CSS and JavaScript, and it didn’t take long before I realised how much knowledge I lacked in these two fundamental languages of the web:

• HTML is the cornerstone of any webpage. It defines its structure and semantics. HTML code tells you which parts of a page are text, buttons, titles, links, images, and how they are all intertwined in one single page.

• CSS, on the other hand, is here to style your pages. Unstyled HTML code is always ugly, and it is through CSS that you can make your page look pretty much any way you want.

• JavaScript is the native programming language of your browser. It allows any website to react to the actions of its users, when they move their mouses, click, type stuff, etc. We call that user interaction.

So here I was, building React components but knowing about these languages only the things I had guessed or understood from the React tutorials I had watched. That’s when I decided to specifically learn and practice HTML, CSS and JavaScript.

There is one specific resource that really helped me a lot for that purpose, called Frontend Mentor:

• The concept is quite simple. You just have to try some of the many available coding challenges. Once done you then submit your solution and have other people review it. Likewise, you can also see other people’s code and compare it to your own, or make comments to help them improve.

• You will find a wide range of difficulty in the challenges, so regardless of your experience as a developer, there’s always an adapted challenge you can try. The easiest ones do not require any JavaScript, while the most complex ones would take forever without a framework…

• If you have no prior knowledge in HTML or CSS, like I did, know that you can find many YouTube videos of people live coding these challenges (without AI, of course). I found this approach to be perfect for me (mainly because I this to be so time efficient), so I’d recommend that at first. But then, you should also try doing some on yourself, without any exterior help.

Youtube videos allowed me to quickly discover how to use things such as Flexbox in CSS or JavaScript array methods and event listeners. I had pretty much everything to learn at first, but it went surprisingly fast to acquire the basics of HTML and CSS. I also learned how to quickly deploy my solutions for free using Netlify.

After two or three tutorials done with the help of YouTube, I started to try easy challenges on my own, getting faster and better each time. Each new challenge that I completed felt like a small achievement, and I remember how proud I was every time I could display my solution in the browser, and spot all the little details I’d added!

Back to React but with a small twist

After roughly 10-15 completed Frontend Mentor challenges, I started feeling a bit bored, because I always had to write all my web pages by hand. It felt like I was rewriting the same portions of code over and over…

I started to actually miss React for that reason, and to think that I would be more productive if I went back to using it. That’s precisely what I did, but this time with enough knowledge in HTML, CSS and JavaScript to be able to tackle more complex projects.

Around that time I discovered another great resource that really allowed me to improve: devchallenges.io. Very much like Frontend Mentor, the idea was to choose among available challenges, submit your solution and ask for peer reviews. However, I specifically focused on the “fullstack“ learning path that was available in it, and I just told myself that if I was able to successfully do all six challenges of that path I’d have enough skills to find a job.

Until then, I had only created simple frontends using React, but these challenges added something new: the data that needed to be displayed had to be retrieved from a public API using HTTP requests. Luckily at the time, Thu Nghiem, the creator of this website, had a Youtube channel in which he shared CSS tips and, luckily, a really cool Next.js project which made use of a public REST API.

These resources help me to improve some more, and allowed me to start some of the fullstack challenges I mentioned earlier.

First attempts at fullstack projects

I say started, because this time I was not able to quickly clear any of these challenges. Not one of them, or perhaps just the very first one. I was starting to really struggle. Building a complete app was much more complex that making a simple web page, and it was also obviously much harder to do it alone than to copy someone live coding in a YouTube video.

Each challenge required a lot of time and effort, and contained several features that I had never implemented before, such as file transfer, state management or routing inside a React app. So I decided to put these challenges aside for a while, and to look for further learning material that would bring me to where I needed to be to be able to clear successfully finish them.

The method remained the same: to use YouTube to find great contents that would allow me to quickly learn whatever skills I needed to complete my challenges. Only this time I knew it would take me longer to acquire these skills. Every once in a while I would come back to my devchallenges.io assignments and be able to make some progress on one of them, sometimes even finish one of the simpler ones.

Going deeper as a developer

Finishing one of these challenges was a cool thing, sure. One checked box in a list of tasks I had written in my mind. But that was not the most important thing. There were a few things happening here, without me being even conscious of it:

• The Youtube contents I started watching at that time were no longer basic tutorials but actual web developer stuff. Even now, as a developer with years of experience, I would still find these contents useful and probably learn or remember a thing or two while watching them. I had now acquired enough knowledge to understand these contents and learn from them, like any regular web developer would.

• I was also unaware of how complex these videos were compared to those I had been watching a few months before. To me, it felt like I was struggling, slowing down in my progress, or even stagnating, but this was when my learning pace actually went to its highest, and my progress was actually significant.

• At some point during the process, I started to forget about the result I hoped to obtain from these videos (a.k.a. clearing my six fullstack challenges) and to care rather about my ability to use (and choose among) the latest technologies to build better apps in a quicker way, how to maintain and deploy my apps, or what skills would actually make me attractive in the eyes of hiring companies. I was no longer thinking of myself as someone in the process of becoming a developer. I already was one, and some part of me knew it now was but a matter of time before I could become one on paper.

Here are the main resources I was lucky enough to find during that period:

• CoderOne’s Youtube channel:

  • I was able to find absolutely stunning projects that helped me tremendously. These taught me how use many tools, libraries and frameworks now commonly used as standard technologies in our industry. The length and quality of some of the videos I found there are unrivaled anywhere else.

  • There’s a single 8-hour tutorial that will teach you how to use, in a single project, React, Tailwind CSS, styled components, GraphQL, NestJS, Docker and MySQL! Not only that, but even how to deploy the whole thing!

• FreeCodeCamp’s YouTube channel:

  • You’ll find great fullstack tutorials, like this one for instance, that will show you how to create a simple fullstack project using a PostgreSQL database. We haven’t talked about databases so far, they are absolutely central whenever you need to persist data and make sure it gets properly saved. This tutorial is pretty much how I started learning about that.

  • Again, whatever it is that you want to learn, you’ll find something relevant on this channel… Just go have a look!

What’s next

Okay, that was a long one! Congratulations to you if you reached that section! Now that I’ve told you so much about how I started learning web development on my own, I also want to explain the bootcamp I attended next, and how the latter eventually allowed me to secure a position as a backend developer.