In the past two weeks, I've shared my personal experiences of rapidly learning the basics of HTML, CSS, and JavaScript, without any prior knowledge, experience, or guidance. However, if your goal, like mine, is to become a full-stack web developer or an independent developer capable of creating your own products, mastering these three basic tech stacks is not enough. So, this week, I'll be sharing a complete beginner's guide to quickly learning the basics of a frontend framework and creating simple products. All the learning resources involved in this post are free!
After finishing my learning, I made a web app like this web app. Please forgive me for not deploying my own project but using the project example in the related tutorial instead. Here is my own repository. In fact, I've replicated over 90% of all the effects in the sample project. The reasons for not deploying will be discussed later. As you can see, this is a relatively complete project, involving many aspects such as frontend and backend communication, frontend animation design, lifecycle hook design, backend data structure design, state management, route management, and so on. I even integrated a rich text editor and tailwindcss into this project, making the frontend look very professional. If even I can quickly master the basics of a frontend framework, why can't you?
As usual, let's first talk about the detours I took during my frontend framework learning process.
With so many frontend frameworks, which one should a beginner choose?
This is one of the most confusing questions for beginners, especially self-taught beginners. It's a highly personalized question that involves your basic skills, learning path choice, learning ability, short and long term goals, and even the country and region you live in. Therefore, it is difficult to give a standard answer. Beginners often lack knowledge and industry experience to evaluate the best option among all these factors.
This is a crucial issue because the frontend framework is closely related to the main programming language you use when building a web app. Also, if you choose a less popular framework, you may find it hard to find relevant community resources, and even feel constrained when taking courses and collaborating with others. I've been confused about this for a long time and even tried learning Flask and Django, but eventually gave up for various reasons.
I could write a 10,000-word article about this issue, but that's not the point of today's post. So here's my short answer: If you're looking for a job, it's best to learn React and make it your main framework. If you're a beginner like me with little prior knowledge and want to learn quickly, build quickly, and develop products independently in the future, then you can choose Vue3. Its learning curve is relatively smoother and easier for beginners to get started.
Is it enough for a beginner to just learn one framework?
I once thought that choosing one frontend framework in the ecosystem of my main programming language would solve all problems because mainstream frameworks have very rich ecosystems that can handle all kinds of scenarios in development. However, as I gradually learned other courses and built products, I realized this idea was naive.
For example, I'm currently learning Alchemy University's Solidity bootcamp. The official prerequisite for this course is a basic knowledge of JavaScript. I thought I could handle this course easily since I had not only learned HTML, CSS, JavaScript, but also Vue3. However, in the third week, I suddenly found out the week project was built with React's frontend. I was dumbfounded. Fortunately, the week project was straightforward and only required the basics of React. Still, even so, it took me half a day to quickly learn the basics of React, and I finally completed the week project successfully. So, as a beginner, never pin your hopes on a single tech stack. Quick learning and adaptability are essential skills for us.
My Front-end Framework Learning Strategy
Simplicity, Practicality, and Goal-Orientation
I'm not expecting to become an expert in a front-end framework in just 2 weeks. Despite Vue3 being more beginner-friendly than React, it's ecosystem is rich and full of content, including numerous documents such as Vue3's own, Vite, Vue Router, Pinia, and more. If you want to build a quality frontend UI, you also need to study UI libraries like Element Plus. Plus, if our product has some special features, we need to learn some libraries specifically for that feature, such as the rich text editor, wangEditor, that I integrated into my web app.
It's impossible to learn all of this in 2 weeks, so I've set my goal to grasp the core functions of Vue3 and initially build a professional-looking frontend.
Centering Around Vue3 Documentation and Gradually Increasing Practice Complexity
I've reviewed many documents since I started self-study programming, and I must admit Vue3 is one of the most beginner-friendly ones. The excellent writing of the documentation made it possible for me to learn front-end frameworks. Therefore, instead of recommending any third-party tutorials, I strongly suggest those who want to learn Vue to make Vue3's own documentation their core study material.
Having good study materials alone is not enough to master a framework; the best way to grasp a framework is to use it to build projects. However, trying to build the web app I demonstrated at the beginning of this article might not be a good idea. I actually built two projects during my study, the first one being very simple, mainly to get a feel for using the framework, understanding the general process and the core parts. The second project is an extension of the first, learning how to find the resources needed to build a real web app within a framework's ecosystem.
Study Time and Schedule
-
I spent half a day sorting out the possible learning resources, mainly some documents and two carefully selected project tutorials. The documents include the following: Vue3 documentation, Vite documentation, Vue Router documentation, Axios documentation, Element+ documentation, and Pinia documentation. Vue3 documentation is the most crucial among these.
-
Then, I spent about 3 and a half days reading most of the Vue documentation. The focus is on the basics, and even as a beginner, I guarantee you can get through this part without difficulty. However, as I got to the later parts, some content gradually became less clear. That's normal for beginners, and it's okay. The parts I couldn't understand for now, I noted them down and moved on. Some parts, like Best Practices, TypeScript, and Advanced Topics, I decided to skip entirely. In short, if you just focus on the most essential and basic parts, 3 and a half days is ample time. I'm not a quick learner and my basics were weak, maybe you won't need as much time.
-
In the next day and a half, I followed a classic free tutorial from Traversy Media and did a small project - a task tracker. I particularly want to talk about Brad's teaching style here. He is certainly a legendary figure, considered the godfather of programming by many self-learners. Every time I watch his courses, I learn a lot. He is very good at using a small project to fully demonstrate all the aspects one needs to learn within a technology stack. ** But as a newcomer, you have to pay attention to one thing, do not listen to his classes without any foundation. ** Because Brad's teaching style is very concise and elegant. If you don't have any basics, you may not be able to keep up with his pace. Therefore, I deliberately scheduled this small project tutorial in the second stage of my learning, not the first.
-
If you have seriously followed his tutorial, I believe you have found the feeling of building a front-end with a framework, but at the same time, you have more questions. That's how I was, I couldn't wait to quickly browse the documents of vite, vue Router, Axios, and pinia. This time I only spent a day and a half. Because I already roughly know what basic knowledge of the above technology stack is needed to build a vue3 project, I focus on these contents. And other relatively complicated but not so commonly used contents, I just quickly browsed. If you don't understand it all at once, just skip it.
-
By the second week, I was confident enough to consolidate the basic knowledge I learned in the first week by building a relatively complex project. And according to the needs of building a real web app, expand the content learned earlier. This time I still chose a popular vue tutorial - FireBlog from Traversy Media. This tutorial is explained by John Komarnicki, let me explain why I chose this tutorial.
- The advantage of this project is that it is very complete, with a professional front-end user interface and a backend api implemented with the help of firebase. The entire project involves many aspects such as front-end and back-end communication, front-end animation design, lifecycle hook design, back-end data structure design, state management, route management, and so on. I even learned a lot of content that I didn't understand when reading the documentation during the construction process. If we want to develop web apps in the future, this is a great opportunity for practical experience.
-
Its main disadvantage is that this is a tutorial from two years ago, so inevitably some technology stacks have been upgraded. For example, the vue-cli used in the tutorial is now in maintenance status, I used vite when building. Another example is the rich text editor used in the tutorial has not been updated for a long time, I used wangEditor which is also lightweight but has more recent maintenance and integrates better with vue3 when building.
-
The backend of this tutorial uses firebase to build, although not complicated, it may not meet our own practice needs. For example, my ideal backend is a restful API built with node.js+express+mongodb+mongoose. Therefore, I did not follow the tutorial to build a firebase backend, but temporarily built a virtual backend with json-server to simulate the behavior of a restful API. This is also why I did not deploy my project online. Because both github page and vercel can only deploy static web pages, and the terminal of json-server can only run locally, it cannot be deployed on them. You can choose according to your own needs when following this tutorial, or you can build a firebase backend like it.
-
This tutorial lasts for six and a half hours. Normally, if you study one hour's content every day, six days should be more than enough. As I'm older, my learning speed is slower. You may be able to complete the build in less than six days. On the last day, I still reviewed the previous content as usual, the most important thing is to organize the notes I made during the two weeks of learning and make a good cheat sheet. Because I found this action to be crucial. Often, a month after I finish learning, when I open my code again, there are many parts that I don't understand or remember. At this point, if you want to build a new project, notes and cheat sheets can often come in handy.
Some final advice:
-
Before, I was always obsessed with finding the "perfect tutorial". But later I found that there is actually no perfect tutorial. Take the FireBlog tutorial we learned in the second week as an example, it has many shortcomings and even some parts do not meet our requirements. But so what? It is still an excellent tutorial and a rare practical project. We only need to upgrade or modify the parts that do not meet the requirements.
-
Learning a front-end framework is somewhat similar to learning javascript that we talked about last week, don't expect to accomplish everything in two weeks. There is a lot of content in its ecosystem, and it is constantly being upgraded. Not to mention, as we discussed earlier, it's unrealistic to expect to conquer all aspects with just learning one framework, so this is destined to be a continuous learning process. What we need to do is enjoy all this and not see it as a burden.
-
If you plan to learn react instead of vue, or even angular, the content I mentioned above still applies. That's how it is with front-end frameworks, the methods of learning and the direction of choosing learning resources are actually quite similar.
#WebDevelopment #FrontendDevelopment #VueJS #JavaScript #LearningToCode #CodeNewbie #TraversyMedia #SelfImprovement #SelfTaught #CodingResources #React