- Published
How to Become a Frontend Developer: A Complete Guide in 2023
- Authors
- Name
- Jing-Huang Su
- @Jing19794341
Brief
When I first started learning programming, I was always able to find many selfless shares in the community. These shares, like guiding lights, gave me the courage to continue forward when I was lost. I hope this article can act as such a guiding light, illuminating the path ahead for those on the same journey.
This article will share the sources of knowledge I've obtained from when I started learning programming until now, divided into two parts. The first part pertains to front-end related learning resources, while the second part deals with the basic knowledge of information engineering. The learning platforms that I will share next offer very high-quality courses, most of which are free. Hence, I'm sharing them here!
Additionally, for those who are just entering the world of front-end and don't know where to start, I suggest you first check out this roadmap, Once you have a general idea of what you need to learn, utilizing the resources mentioned in this article will be more effective.
Frontend Related
Udemy
For those who are just starting to learn programming, taking a few Udemy courses and seriously completing all the examples in the course is enough to make you competitive in the job market. After completing many courses, here are a few that I believe I learned the most from:
This course is essentially a general education course on web development, from the most basic JavaScript, CSS to NodeJS and deployment, you will learn it all in this course. I highly recommend this course for beginners.
If you want to learn React and Redux, this course is a great starting point. The instructor explains concepts in an easy-to-understand manner and provides many small projects, allowing beginners to learn from the basics.
To learn CSS, this course is sufficient. It also follows a deep to shallow learning approach. The course contains three projects, and if you study diligently, your CSS skills will reach a certain level after the course.
Those who want to gain a deeper understanding of JS concepts might want to try this course!
This course is somewhat similar to an advanced version of the first course, using MongoDB, Express, React, and NodeJS to implement a Web App. It's well worth a look.
Youtube
If you've used React, you've definitely heard of Dan Abramov. Recently, he started his own YouTube channel, where he uploads videos on coding exercises and React-related topics. Watching his videos can help you learn his thought processes and problem-solving logic. Furthermore, sometimes watching his videos is surprisingly satisfying. For example, whenever I see him writing UI, I feel that my CSS skill level is on par with the core maintainer of React!
Brad Traversy generously provides many high-quality courses for free, which is great for beginners to follow along and learn.
This speaker always manages to explain the overall operation of React in a simple and easy-to-understand manner. Highly recommended.
If you're stuck on a problem in Leetcode and still can't understand it even after seeing someone else's solution, NeetCode is always able to explain the problem in a gradual manner. Often, after listening to their explanations, you'll have an "aha" moment.
Book & Website
Suitable for both beginners and veterans. The new version of React's official website, where all the code examples are implemented with React Hook. After browsing, you can basically master the general operation of the React Hook API.
A high-quality learning platform. They updated the website layout in March this year. There are many deep technical articles in it. I occasionally learn something from this website.
No need for more introduction here. You can basically consider it as the Wiki for front-end. Any syntax or JS concept problems can be solved by checking it!
This book explains things from simple to complex. Compared to YDKJS, I prefer the explanations in this book. The author uses very simple words to explain JS concepts. If you have any misunderstandings, you can find the correct information here!
The book consists of three chapters:
Chapter 1: Introduces basic commonly used Design Patterns.
Chapter 2: Introduces Rendering Patterns.
This chapter is the most exciting part, and also the part most often asked in interviews. Especially now, with the prevalence of NextJS, the pros and cons from the era of JQuery and Backbone to CSR to the present SSG/SSR can all be found here.
The last chapter: Introduces performance optimization.
Functional Light JS & Mostly Adequate Guide
If you're interested in Functional Programming, reading the above two books will definitely be of great benefit. The former covers all the basic techniques of FP that are easy to use at work, while the latter delves into the world of Monads, exploring the mysteries of FP.
Blogs
Dan Abramov often publishes impressive React articles on his blog. Super awesome!
Kent C.Dodds is one of the most active people in the front-end community. His teachings can often be seen in the community, and his blog articles can explain React concepts in an easy-to-understand way.
If you want to know about the evolution of Redux, its advantages and disadvantages, or other Redux-related topics, Mark's blog can definitely answer your questions.
Platforms
- Subscription Fee: $39/month
- Quality: The quality of Frontend Master goes without saying, it is generally very good. It often features courses taught by core contributors to open-source projects, with medium to long course durations that are solid in content.
- Breadth: It mostly offers courses related to front-end development.
- Review: I've been subscribing for over a year, and overall, Frontend Master has many good courses. For example, courses like the The author of YDKJS or the Functional Programming course offered by Brian Lonsdorf are worth praising. However, the subscription fee is a bit expensive, and the course update frequency is somewhat slow, so it's more suitable for intermediate to advanced developers who want to enhance a certain skill in a short time, but not quite suitable for long-term subscriptions.
- Subscription Fee: $12.5/month
- Quality: The quality varies. Some courses are impressive, while some make you want to close after watching only one section, and the short content is very suitable for after-work study.
- Breadth: It mostly offers courses related to front-end development.
- Review: I've been subscribing for over a year, but the courses I've fully watched are few. Most of the time, I close them before finishing one section.
- Subscription Fee: $12.99/month
- Quality: There are many quality books available, and my recent after-work study materials are found here.
- Breadth: From front-end to database, it has everything you need, and they are quite updated.
- Review: I've been subscribing since January of this year, and I'm currently still subscribing. After using it, I'd say it's a platform worth a five-star review.
CS Related
Mindset
Below are the basic CS courses that I think are essential to learn. Although these courses don't let you quickly produce results like internships or the bootcamps mentioned above, these are the most fundamental CS disciplines. Basically, all applications are variations built on these foundations. Knowing these concepts can help you speed up your understanding of new applications. Even though you may not see tangible help in the short term, it's definitely beneficial to spend time learning them in the long run. I haven't finished learning them all yet, but I will accelerate my pace in the future to strengthen my knowledge!
Because I personally prefer videos recorded by professors in class, I mainly look for them from the professors' personal web pages, rather than from Coursera or edX.
How to Find Courses
Back in university when I had the most time and practically nothing else, I often spent my free time treasure hunting on the internet, which gave me a Standard Operating Procedure (SOP) for finding OpenCourseWare (OCW).
- During my free time, I would search for webpages of professors from famous CS schools.
- Check if they have public course materials (Video/Lab/HW).
- Look up the professor's rating on Rate My Professors
- Try listening to a lecture, and if I like it, I would add it to my to-learn list.
Note
If you don't want to go through this trouble, both MIT and UCSD also provide complete CS courses from their universities.
MIT is a pioneer of OCW, offering the most comprehensive and rich content of courses. However, I'm not used to MIT's teaching style. Perhaps due to my limitations, I can't quite keep up with the pace of the professors' lectures. Also, the course assignments are mostly essay questions.
UCSD also provides a complete set of CS courses. Although this website only provides class recordings, you can basically find the course website by searching "[Course Term] UCSD [Course Code]" Google Sites, (e.g., winter 2022 UCSD CSE 110 Google Sites) on Google.
If you want to take a series of courses offered by the same university, these two are already great choices!
Foundations
Discrete Mathematics & Probability
Actually, good resources for discrete mathematics and probability are not easy to find online, and even when you do find them, the reviews are often not that good. But so far, I have found two pretty good ones.
Discrete Math - Clemson - Math4190
This professor has released many math-related courses on his website and received excellent scores on ratemyprofessors.com, I highly recommend it!
Probability - Stanford - CS109 / UCB - Prob140
This course, taught by Stanford Professor Chris Piech, is very lively and overall a great course. I suggest pairing it with the UC Berkeley Prob 140 Textbook for a complete understanding of both theory and practice. Thumbs up!
Programming Basics
CS61 Series - UCB - CS61A(John DeNero) / UCB - CS61B(Josh Hug)
Both courses are offered by UC Berkeley, with the former teaching basic programming concepts and the latter teaching data structures and a bit of software engineering. The professors of both courses are excellent teachers and very inspiring, making me fall in love with programming unconsciously. If time permits, I strongly recommend going through all the teaching materials provided in the courses. Highly recommended!
Other Popular Ones - Harvard - CS50 / Stanford - CS106A / Stanford - CS106B
Although the CS61 series is good enough, some people might not find it to their taste, so I've listed these three courses which are as popular as CS61 for you to try!
Algorithms
Theoretical Algorithms - UCB - CS170 / Stanford - Tim Roughgarden / Harvard - Jelani Nelson
After finishing CS61B, if you are still interested and want to have a deeper understanding of algorithms, you can continue with these courses.
Advanced
The following recommended courses are ones that I haven't seen yet but plan to in the future.
Database
Computer System
This is reportedly one of CMU's legendary courses. Both the textbook CSAPP and its LAB are highly praised.
This course also has great reviews, but the professor's accent is a bit heavy. It's something for you to consider.
The author of Operating Systems: Three Easy Pieces. This textbook is said to be legendary, and the professor's reviews are also very good. I believe it must be a very good course.
Others
Internet Overview - UMass - CS453
I've completed the first two chapters so far. The professor is fantastic and teaches very carefully. The reference book is Computer Networking: A Top-Down Approach, written by the professor himself.
Network Security - Stanford - CS253
This is a must-take course for front-end engineers. It covers classic hacking techniques common to the front-end and back-end. It was my favorite course in 2021.
Programming Language - U of Utah - CS3520
This professor also receives very high reviews. As the author has a strong interest in Functional Programming, this may be one of the courses I most want to complete in 2022.
Conclusion
The sea of learning has no boundaries, let's keep going!
If there are any questions or errors in the content, you can contact me through Email. I will reply or correct as soon as possible. If you feel this article has helped you, you can sponsor me through the "Buy Me a Coffee" link below!