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.
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.
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.
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 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.
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.
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:
- 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.
- 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.
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!