A good place, in my opinion, to start would be something like https://roadmap.sh/frontend. It lays out a good tree of knowledge that you may start following. Really, at the start, your looking to dive deep into topics such as HTML, CSS, and JavaScript. Also you'll want to start getting a good foundation of how the internet works in general (stuff like HTTP, SSL, etc.). This stuff becomes your bedrock that all your other Frontend skills will build upon.
You can also look to some guided courses that may help if you just need some direction. Odin Project is a good one and free. Colt Steele has a good one (my nephew worked through it and liked it) on Udemy called the "Web Developer Bootcamp". Don't pay full price though for that one, clear your browser cache, go into incognito mode, etc and you should see it discounted to like $20... if a sale isn't already running.
I can't emphasize enough... learn HTML, CSS, and JavaScript deeply. They are the foundation before things like React, Angular, etc. Don't fall for the "get rich quick" promise of frameworks. Nothing makes a senior developer more insane than when you come in as a "React whiz" but don't understand the fundamentals at all.
And finally... BUILD BUILD BUILD. Build and abandon a thousand projects. See something on a website or in an app you like? Try to recreate it. Learn to pull it apart and see how it works.
If you have never done anything like this, your going to hit rough patches. The pain you feel is "learning". I'm the lead dev on my team and they act like I'm some genius. Truth is, I'm a slow learner but I'm not afraid of being uncomfortable and experimenting all the time. Best of luck!
The basics are important (HTML/CSS/Internet/basic JS), but after that, I think it's generally more helpful to "BUILD BUILD BUILD", as the parent said, than to expand your breadth across multiple similar libs/frameworks/concerns.
In the detailed roadmap, for example, there's a lot of similar tooling with purple checks (recommended) and green checks (alternatives that do the same thing). It isn't necessary to know all of them, and may not be helpful to explore so many options to begin with. As a junior, chances are that those decisions will be made by someone else anyway, and you'll just have to implement working code in whatever tech stack they've already chosen.
Instead, just pick one (honestly, probably React + Next, not because it's the best but because it's the most popular right now, and many of those skills will transfer to other frameworks anyway) and try to build a semi-realistic project.
The hard part of frontend dev (as a specialization), IMO, has to do with state management and async stuff, because that's where the actual "programming" comes in, vs the "declaring" of HTML/CSS/basic UI components & screens. By that I mean: How do you sync up your frontend UI with the backend data store, both from and to the user, in a way that balances good UX with backend constraints, security concerns, accessibility, maintainability and debuggability, performance, cost, etc.
If you're just building mostly static pages (like blog posts, marketing landing pages), you won't have to do most of that, but companies don't generally hire frontend specialists for sites that simple. Any full-stack programmer or IT person can generally do that these days, and so can many non-coders who use no-code/low-code tools. That's not where frontend-specific work is.
If you have an interest specifically in the frontend, I think it would be more helpful to try to build a realistic frontend "app" (as opposed to a bunch of static informational pages) and learn to solve the real-world problems that you'll face along the way, like routing, state management, internationalization, authentication, race conditions, UI states, optimistic updates, image and video optimizations, etc.
For example, take a look at this list of MUI templates: https://mui.com/store/#populars (MUI is a UI kit with powerful components that you can use with React, and people can "compose" apps out of those components). You'll see mostly dashboards and ecommerce apps.
Try to build one of those if you can (either using MUI and those same templates, or whatever framework you choose, including writing it from scratch), and hook it up to either mock APIs (like simple endpoints that will always return the same data, or automatically auth you, or whatever -- you don't have to write a real backend if you don't want to work on that in the future) or you can connect them to real-world cloud services and their free plans.
But at the end of the day, having a complete project that can deal with client-server state, work across different device sizes, be reasonably performant, etc. is a big enough "final project" that will closely mirror real day-to-day frontend work and teach you useful skills. I think that would be a better use of your time than learning every last JS framework out there.
Doing so teaches you to reason about what is actually happening on the client and the server and how to manage the HTML accordingly, whether you mutate the DOM directly or use a framework like React + MUI.
-----------------
Now for a more controversial take: IMO (in disagreement with the parent), for most employers, I think frameworks are actually more important these days than in-depth Javascript know-how. Most apps you'll end up building are bog-standard business apps and probably not anything super fancy (unless you specifically want to go down that path, working for companies with heavy and truly complex frontends like Figma, FAANG, etc.).
Keep in mind this is my opinion, only, as someone who's never worked for FAANG but did work for many smaller businesses. If you're just one of the endless frontend devs for generic small or medium companies, there's not really a need to learn JS in depth, like data structures and algorithms, because those are generally just optimizations that you can learn on a case-by-case, as-needed basis. AI can generally provide good-enough guides for those when you come across them (like how do I optimize this search, what sort of data structure do I need for this kind of user input).
The rest of the time, you'll generally be working in frameworks, writing very simple and (and hopefully maintainable) code, tying new components and pages into existing state management and routing solutions. Those are generally not part of the vanilla JS/Ecmascript spec, but proprietary, framework-specific solutions. This is the overwhelming bulk of the work, and it's really about reading docs and adhering to their recommended practices rather than trying to out-smart the framework and building something better. Because whatever you build will have to be maintained by someone else, eventually, and they generally hate it when you diverge from established practices for no good reason, or if you did it just to prove you are very smart.
That's one of the distinctions between academic computer science (with its emphasis on "proper" coding) and real-world business apps (how can I deliver business value with lowest cost and frustration, working with other devs and teams of various skill levels). Your employer generally won't care about the "quality" of your code per se (and many managers won't be able to even evaluate it effectively), but simply your output (does this page work, does it have good UX) and your relationships (can you work with the designer and take their Figma file and implement it as close to pixel-perfect as possible, can you survive under an Agile management system and reliably deliver story points), things like accessibility, performance, responsiveness, etc.
That's a long-winded way of saying that many frontend devs make a living working in someone else's framework, where knowing the nuances of that framework is far more important than being able to create the world's fastest JS sorting algorithm or whatever. Most of our jobs is just copypasta and shimming together NPM libs.
On the other hand, if you look down on that kind of basic work (and I wouldn't blame you if you did!), then yes, it could be helpful to be an expert Javascript developer -- the kind of person who not merely uses frameworks to build standard apps, but might be involved in the creation of those frameworks themselves (i.e. you'd be in Meta working on React or Google working on Angular, or contributing to the various open-source/open-core frameworks). But for every superstar dev like that, there's probably hundreds (thousands? millions?) of us just doing the basic stuff to get by and get a paycheck.
Anyway, sorry for the rant. You can figure all that out later. For now, just BUILD BUILD BUILD! :)
1. *Learn the Basics of HTML, CSS, and JavaScript*:
- Start with HTML to understand the structure and content of web pages.
- Move on to CSS to learn how to style and design the visual aspects of web pages.
- Dive into JavaScript to add interactivity and dynamic behavior to your web applications.
2. *Understand Web Development Fundamentals*:
- Learn about the client-server architecture of the web.
- Familiarize yourself with the Document Object Model (DOM) and how it allows you to manipulate web pages.
- Study web protocols like HTTP, HTTPS, and the role they play in web development.
3. *Explore Front-End Frameworks and Libraries*:
- Become familiar with popular front-end frameworks like React, Angular, Vue.js, and others.
- Learn how these frameworks can help you build complex and scalable web applications more efficiently.
- Understand the benefits and trade-offs of using different front-end frameworks.
4. *Develop Responsive and Mobile-Friendly Designs*:
- Learn about responsive web design principles and techniques.
- Understand the importance of creating mobile-friendly user interfaces.
- Explore CSS frameworks like Bootstrap, Foundation, or Bulma to simplify responsive design.
5. *Dive into Web Performance Optimization*:
- Study techniques to optimize the loading speed and performance of web pages.
- Learn about web optimization metrics like Lighthouse, PageSpeed Insights, and Core Web Vitals.
- Implement best practices for optimizing images, scripts, and other assets.
6. *Explore Web Accessibility*:
- Understand the importance of making web applications accessible to users with disabilities.
- Learn about WCAG (Web Content Accessibility Guidelines) and how to implement them.
- Familiarize yourself with tools and techniques for testing and improving accessibility.
7. *Practice and Build Projects*:
- Create simple web pages and gradually build more complex projects.
- Participate in coding challenges, hackathons, or personal projects to apply your skills.
- Contribute to open-source front-end projects to gain real-world experience.
8. *Stay Up-to-Date with the Front-End Ecosystem*:
- Follow industry blogs, podcasts, and social media channels to stay informed about the latest trends and best practices.
- Attend local meetups, conferences, or online webinars to network and learn from the front-end community.
- Continuously improve your skills by learning new technologies, frameworks, and libraries as they emerge.
Remember, the key to becoming a proficient front-end developer is to practice consistently, build projects, and stay curious about the ever-evolving front-end landscape. Good luck with your journey!
You can also look to some guided courses that may help if you just need some direction. Odin Project is a good one and free. Colt Steele has a good one (my nephew worked through it and liked it) on Udemy called the "Web Developer Bootcamp". Don't pay full price though for that one, clear your browser cache, go into incognito mode, etc and you should see it discounted to like $20... if a sale isn't already running.
I can't emphasize enough... learn HTML, CSS, and JavaScript deeply. They are the foundation before things like React, Angular, etc. Don't fall for the "get rich quick" promise of frameworks. Nothing makes a senior developer more insane than when you come in as a "React whiz" but don't understand the fundamentals at all.
And finally... BUILD BUILD BUILD. Build and abandon a thousand projects. See something on a website or in an app you like? Try to recreate it. Learn to pull it apart and see how it works.
If you have never done anything like this, your going to hit rough patches. The pain you feel is "learning". I'm the lead dev on my team and they act like I'm some genius. Truth is, I'm a slow learner but I'm not afraid of being uncomfortable and experimenting all the time. Best of luck!