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 disag...
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!
15 comments
[ 2.8 ms ] story [ 52.7 ms ] threadYou 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!
Opinion of one frontend dev:
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 disag...
I have a friend that did exactly this last year and he’s in an entry level position now :)
https://frontendmasters.com/trial/
https://developer.mozilla.org/en-US/docs/Learn
NextJs, TailwindCSS
Ignore everyone that tells you to learn the fundamentals. Ship your software on vercel
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!
Do not ignore the fundamentals: HTML, CSS, and JavaScript have been, and still are, the foundation of front-end development.
[0] https://developer.chrome.com/blog/round-up-of-web-browser-in...