Beginners Shouldn't Learn React. Here Is How to Learn Web Programming Instead.

Web development is vast. Beginners should learn HTML, CSS, and JS instead of picking a framework right away. Here is how they could learn to develop.

There is a lot involved in a web application. Learning web development can be overwhelming. One should know a frontend framework, use a version control system, learn about package managers and terminal commands. On top of that, testing, deploying, and building some CI/CD pipelines are critical to ensure quality over time. It's a lot.

It's easy for someone new to the scene to be frightened by all those components.
"Where should I start?" "Is React better than Vue?" "What's the best testing framework?"
Are all questions frequently asked all around the web and stop many people from even starting learning.

To be fair, the web is a mess when compared to mobile development. Google and Apple provide officials SDKs, and some hybrid frameworks allow cross-platform development. The web isn't as organized; there is no standard way of building websites. Instead, there are plenty of technologies and potential stacks, all coming with their strengths and shortcomings.

How I Started My Developer Journey

Funnily enough, I learned web development in a way that I wouldn't recommend a beginner to.

I learned JavaScript during my bachelor's and mostly worked on building NodeJS APIs since I didn't like to work with HTML. It was also due to some sort of competition we had in my class. I remember considering frontend as not challenging enough (which is obviously wrong, I was a prick).

Working only on the backend made me have minimal skills in vanilla JavaScript and even less in CSS. I was sure that I wouldn't find a job as a web developer since JS and CSS are essentials, and I wasn't comfortable with them. Besides, I liked mobile development more at the time.

It turns out that I was wrong. I found an internship in a web agency (I still work there as a technical project manager) where I had to work on React without knowing anything about it. The company built its web project using React and Ant Design. Thanks to the Ant Design UI framework, I immediately loved the JSX and that there isn't much HTML to write.

Enjoying working with the frontend framework used in my company is great, but it comes with a downside: I didn't have the opportunity to learn vanilla JavaScript since it's wasn't required to do most of the job. The company grew, and projects started to get larger and more complicated. That's when I realized that having better JS skills would have been very useful and that I missed those.

Let me reassure my boss, I'm a capable developer. However, I know where my weaknesses are, and I'm trying to improve on those areas.

On a side note, now that I have more experience with web development, I don't hate HTML and CSS as much. UI frameworks such as Ant Design or MaterialUI are remarkable and can speed development time. It's essential to stick to their design philosophy since trying to make things custom might result in nasty style override all over the code.

While I still like React, I also find that I'm starting to see some of the project's decisions as questionable, and I don't like it as much as I used to. Have you ever tried to read React code that is two years old and didn't use hooks? I am drawn to other frameworks that offer a more comprehensive range of features. But that's a topic for another time.

Subscribe to the newsletter

Where Should a Beginner Start?

My first recommendation would be to avoid using a modern framework. Don't try to learn React, Vue, or any other as a first experience.

You'll be able to build robust applications with plain JS, HTML, and CSS. Of course, the travel won't be smooth sailing, but it will help build a strong foundation for the future. Besides, learning a framework will be easier once you have some JS understanding.

HTML

HTML is the easier of the three to understand. It's a markup language that helps developers structuring the data. Once a user knows about the different tags and some best practices, it's mostly done.

I would suggest a beginner learn to use Emmet since it allows for ultra-fast page construction, which is nice. That's something I regret not to have learned earlier and that I still don't use enough.

Emmet demonstration - Visual Studio Code Docs

CSS

The two other technologies will take a bit more time to learn. CSS principles are pretty simple. It's easy to style a specific component and give it the desired look.

However, things start to get a bit hairy when you want to assemble multiple components together. Creating beautiful responsive UI isn't an easy task and shouldn't be done with plain CSS. That's why once the basic foundations of CSS are mastered (especially layouts such as Flexbox or grid), users can start looking at toolkits.

There is plenty of choices, and it's a matter of personal preference which you choose. Bootstrap and Tailwind are two popular choices right now and are entirely different. Bootstrap provides a great set of predefined components that can be customized and extended. Tailwind has a different approach; it removes all default styling and offers total control over the look and feel of an application. I think that it's great to have some experience with both of them.

To this day, CSS is the technology I know the less and have the most issues with. Organizing layouts that are responsive is challenging and something I struggle with. That's why I started working on a side project using Tailwind. I have to get better at it.

I love to play Flexbox Froggy when I feel like I might need a refresher. It's a fantastic game that helps you understand how Flexbox works.

JavaScript

There aren't many things JavaScript can't do. It can run anywhere and is supported on a wide range of devices. Developers love to mock JavaScript for some of its strange behavior, but I don't know any other technologies that run on virtually every consumer device. Besides, TypeScript (which is also an important technology to know) can solve some of the issues raised by skeptical developers.

Since so many options are available, where should a beginner start? If you solely want to focus on web development, a good start would be to build some interactivity on a website. Implement some features that leverage the power of JavaScript, manipulate the DOM, listen to events… After some time, you might want to have a database to store your application data, and that's when you should get interested in frontend frameworks.

Don't get me wrong, it's possible to connect a database to a backend or to Firebase while using vanilla JavaScript, but that's not something I would recommend. What's important is to understand how JavaScript works before using a framework since they all have some behavior that could confuse a beginner.

How to Learn?

Web development is a vast world, and it's tempting to try different technologies. The first step is to have some web development bases. You should learn HTML, CSS, and JS before the next step. There is plenty of resources online that are free. For example, w3school has a broad range of quality tutorial and are a great way to start. They even have video tutorials now!

Once you have some basic understanding, I would suggest you pick a use case, a groceries list, for example, and developing it over and over (changing one parameter at a time). The project should be relatively simple and take less than a day to build. It will get faster the more experience you have.

Having a similar project built differently is excellent. You'll be able to compare how things differ from one technology to another. Besides, it can provide a base for more advanced features you might want to add later on.

Let's take a groceries list as an example. The application should offer a way to add, mark as purchased, and delete items in a list. Those are the most basic specifications. Users should be able to leave the page and come back and still see their list. Having multiple lists might be an interesting optional feature. Those are the basic features and act as some sort of minimal specifications.

Here are how you could try to iteratively build it:

Build this while using some plain HTML, CSS, and JavaScript. The database is the Local Storage of the browser.
Improve some styling with Bootstrap to have an easy and faster way to build UI.
Pick a framework and re-build the application with reusable components.
Connect the application to a Firebase Firestore database for live update and permanent storage solutions.
Try to do the same with another framework to see how you like it.
Switch from JavaScript to TypeScript to have safer objects
Add translation to the project and start using a version control system.
Deploy the project online, for example, on Netlfify or Vercel.
Create an automated deployment pipeline when you commit
Add testing to your application, unit test your methods, and test the components
…

There is still plenty of ways to improve this grocery list application, but I'll leave it like this for now. The first three steps are the most important since they serve as a knowledge foundation for every following step. Once you are comfortable with one framework (without knowing all its details), you can choose which direction to give to your project and learn new technologies as you please.

Conclusion

As discussed above, I don't have the most robust technical foundation for vanilla JavaScript and CSS (especially CSS). This is due to my refusing to work on the frontend during school projects and working with React as a web developer from day one.

I wish I did things differently, but that's how it is. I know where my weaknesses are, and I can improve my skills to be a better developer. However, following the roadmap I detailed in this article would have helped me when I had trouble.

Following the roadmap can be frustrated at the time. It's easy to add many complexity layers to the application and give up because of the amount of work required to make everything work. Focus each iteration on one complexity and mark your ideas down. I can guarantee that you'll stop working on the project if you try to implement React, Firebase, translation, and Tailwind all at one. Keep things simple, and you'll be fine.

Don't hesitate to contact me if you want some advice on starting working on your projects or need some resources to learn new technologies. I'll be happy to help you!