Whether you’re focusing on React, TypeScript, or Fullstack Next.js or Go, we’ve got your learning path covered. Here’s what we have scheduled in 2025 so far:

Frontend:

• Master Chrome DevTools – improve debugging & performance
• Intermediate React – Build bulletproof React architectures
• Web Accessibility – Make your website for everyone
• Web Auth APIs – Implement secure auth flows from the ground up
• CSS Basics – Create a portfolio with modern CSS
• Scale React state management – build large applications
• Model complex domains with TypeScript
• TypeScript monorepos – Architect maintainable projects

Backend & Fullstack

• Next.js Fundamentals – Build production-grade Next.js systems
• Fullstack TypeScript – Build end-to-end TypeScript applications
• Build a Fullstack App with Vanilla JS and Go
• Complete Go – From Day one of Go to Full Backends
• Create enterprise Java Spring Boot apps
• Modern Fullstack Deployment – Deploy like a DevOps pro
• Fullstack System Design – Design scalable full-stack architectures

Other Great Topics: 

• Become a VS Code power user
• C Fundamentals: Get pumped for int main(void)
• Building a Static Type-Inferring Compiler

The best part? We live stream the workshops for free on the Frontend Master homepage on the day of the event.

More workshops will be added throughout 2025, so let us know what you’d like to learn by commenting below.

Fundamentals are always smart.

Let’s not be old-man-shakes-fist-at-kids.gif about this, but learning the fundamentals of tech is demonstrateably useful. It’s true in basketball, it’s true for the piano, and it’s true in making websites. If you’re aiming at a long career in websites, the fundamentals are what powers it.

For a web developer, those are HTML, CSS, JavaScript, accessibility, image formats (e.g. PNG, SVG, JPG, etc.), data storage, API design and usage, HTTP, servers and backend languages, and lets throw version control in there. Do you need to have complete mastery over all of them? Nope. But you need a working knowledge of them.

The point of the fundamentals is how long-lasting and transferrable the knowledge is. It will serve you well no matter what other technologies a job might have you using, or when the abstractions over them change, as they are want to do.

Understand the Browser

This is literally what the term “front end” means. It means the browser.

“Back end” work revolves around servers. Servers that are exactly known and produce identical and reliable results each time they are used.

Browsers are much less known — that is — one browser will produce identical and reliable results when used, but users visit your website from thousands of different permutations of browsers, versions of those browsers, devices they run on, screen sizes they are looking at, with different features enabled, and more. The browser space is pretty complex and unpredictable.

Learning what the browser is doing and how to work with it is immensely useful. Your main tool in this endeavor is that browsers DevTools. DevTools are very worth learning. DevTools allow you to do all sorts of inspection and analysis on a website like:

• Understand all the network requests that were made to produce the website you’re looking at
• Inspect any particular element on the page, see where it sits in the DOM tree, and see all associated styling information on it.
• See the original HTML that came down in the initial request for the page (e.g. “View Source”)
• Dig into the animations present on the page, slowing them down, reversing them, and generally controlling them to understand what is happening.
• Look at the storage (e.g. cookies, sessionStorage, etc) that apply to the current page
• And… no joke… easily hundreds more things, most of which will be useful at some point to you. (Try pressing Command-Shift-P within DevTools to see a menu of some of the things it can do.)

Again, anything you learn on top of what browsers are natively doing is a purposeful abstraction. Learning what browsers are doing means that as higher-level technology changes (e.g. a new framework!) you’ll still have the underlying knowledge of how it all works.

The Basics of HTML

Literally every website is HTML. It’s absolutely unavoidable, not that you’d want to avoid it, because it’s powerful and useful. Here are the basics to know first:

Use the semantic (meaning appropriate and meaningful) block tags of HTML. Using a <div> or <span> is a perfectly fine choice for a block or line of content (respectively) that you need to apply a class to to style, but use a <section>, <article>, <header>, <footer>, <search>, or <aside> if that is what the element contains.

Use <a href=""> for links to pages and <button> for actions that aren’t navigating to pages.

Use <h1> … <h6> for headings, knowing that each level down is like marking a subsection, so an <h3> is like a header under a subsection of the nearest above <h2>.

Use semantic and functional forms that properly pair labels with inputs, like this:

<form action="/login" method="post">
  <label>
    Email
    <input type="email" name="email" required>
  </label>
  <label>
    Password
    <input type="password" name="password" required>
  </label>
  <button>Log In</button>
</form>

Use the id attribute on elements in order to more easily select it in JavaScript, for accessibility associations, or to allow links to jump down to that element, and generally not for styling. Use the class attribute for CSS to select and style things. Use data-* attributes for arbitrary information from your own app you need to access via JavaScript later or select in CSS against, rather than making up your own attributes.

There is actually quite a lot to know about HTML, but this will bring you far. Do not push HTML away as some kind of toy language. It is absolutely fundamental to to the web and powerful in it’s own right. Every website uses and needs it.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Semantic Page</title>
</head>

<body>
  <header>
    <h1>Website</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
    <search>
      <form action="#" method="get">
        <label>
          Search
          <input type="search">
        </label>
      </form>
    </search>
  </header>

  <main>
    <article>
      <h2>Welcome to Our Website</h2>
      <p>This is an example of an article within a main element. Here you can include any content relevant to your main topic.</p>
    </article>
  </main>
  
  <aside>
    <h2>News</h2>
    <p>Latest updates and news can be found here.</p>
  </aside>

  <footer id="contact">
    <p>Contact us at <a href="mailto:info@example.com">info@example.com</a>.</p>
    <form action="#" method="post">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>

      <label for="message">Message:</label>
      <textarea id="message" name="message" required></textarea>

      <button type="submit">Send</button>
    </form>
  </footer>
  
</body>

</html>

Complete Intro to Web Development is free and covers all of this in one course.

The Basics of CSS

CSS is what styles the web. Some web developers end up embracing or even focusing on CSS, and some do not. That’s OK, but you have to respect it. Like HTML, all websites use it. CSS is so solid and powerful these days you can learn enough to be effective pretty quickly.

Layout might be the most important single thing you can learn in CSS, and thanks to grid layout, you’ve got a great tool for it at your fingertips. As Miriam Suzanne says, more advanced CSS features can wait, learn grid now. Setting up a basic page layout is honestly quite satisfying:

<div class="page">
  <main>
  </main>

  <aside>
  </aside>
</div>

.page {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 150px;

  @media (width < 400px) {
    grid-template-columns: 1fr;
  }
}

Setting up custom properties (variables) is also a good practice, and colors is the perfect use. Giving yourself a set of colors to pick from will help keep your design consistent and easier to work with:

html {
  --brand: red;
  --accent: yellow;

  --gray-extra-light: #f8f9fa;
  --gray-light: #dee2e6;
  --gray: #adb5bd;
  --gray-dark: #495057;
  --gray-extra-dark: #212529;
}

.box {
  background: var(--gray);
  border: 2px solid var(--gray-extra-dark);

  &.accent {
    border-color: var(--accent);
  }

  h2 {
    color: var(--brand);
  }
}

Oliver Reichenstein once famously wrote that Web Design is 95% Typography. He’s not wrong. There is awful lot of words on the web trying to communicate with us, and they can be objectively well presented… or not.

Even if you learn and use a framework that abstracts aways CSS into HTML like Tailwind (which is probably a smart choice particularly if you’re job hunting — here’s a course), the styles are ultimately applied with CSS and so knowing it behooves you.

There is a lot to know about CSS alone, but between a good foundation of layout, colors, and typography, you’ll be in good shape.

The Basics of JavaScript

JavaScript is arguably the biggest and most important language in web development. It is all-powerful in the browser, dealing with interactivity, events, network requests, manipulating the DOM, and more. If you end up having a long career in web development, you’ll end up reading and writing a lot of JavaScript.

If you’re into web design, we’d recommend still being somewhat familiar with JavaScript, and here’s our recommendations on what to learn that will serve you sell.

If you find yourself clicking with JavaScript, focusing on it isn’t a bad idea. We have lots of great courses on JavaScript, like a free course on getting started with JavaScript.

But… only fundamentals isn’t enough.

It’s a tough job market out there. Employers are often looking for skills in a specific technology, especially in lieu of a lot of experience. If you find yourself clicking with some aspect of web design and development, you’d do well do go deep on it, as it will likely feel fulfilling to you while being easier to stick with. Plus, that helps turn you into someone T-shaped (deep experience in one area, wide experience with other areas) which is a common and desirable thing for web developers.

• If working with data clicks with you, lean into that.
• If you’re attracted to building systems, design systems are a big thing these days with companies have dedicated design system teams.
• If you enjoy illustration or animation, the web is a great place for that.
• If managing servers and processes sounds like something you’d be interested in, DevOps is a whole career path.

In back-end web development land, it’s not uncommon at all to find job postings for specific languages and technologies. Companies hire for things like a “Go Developer” or a “Python Developer”.

It’s a bit less common to hire for specific languages on the front-end, but it’s very common for companies to use the title “Full-Stack Developer” to describe what is likely mostly a front-end job. If you need to put full-stack on your resume to get you past the robot resume checkers, you should go for it (to get on the road, here’s our full-stack learning path). Aspects of full-stack development that touch the back end are likely rooted in data fetching and API development, and commonly in Node JavaScript, which nicely pairs with front-end knowledge.

If you’re more comfortable with saying “Front-End Developer”, in some poking around job boards and general job postings, that’s still a pretty common term used for hiring.

The job can be a more than half learning conventions

Say you’re a new web developer on the job, and you’re given a ticket to have a button open an informational popup for users to read for extra information. You have a solid grasp of the fundamentals, so you make a Pull Request where you implement this as a popover (e.g. <div id="extra-information" popover>Extra information.</div>).

Then the feedback arrives: … but that’s not how it’s done here …

At this job, with this current code base, you:

1. Use the existing <Popup /> element from the Design System.
2. Keep the content in the Copy package as HTML strings, so it can be translated.
3. Make an enum for it (e.g. export const POPOVER_EXTRA_INFORMATION = "POPOVER_EXTRA_INFORMATION") so that anywhere that refers to this component or copy has a consistent name.
4. Has a component test ensuring it functions correctly.
5. Use special classes from the design system in order to create variations, rather than it’s own bespoke styles.

None of those things are really “fundamentals”, they are conventions that this particular code base has grown into over time to make it manageable. You might even bristle against them at first because they seem overzealous, overcomplicated, or antiquated. But give it time. Typically conventions like this are put in place to solve previous problems, and you may not have been around to feel those problems.

As the title of this section said, the actual work of a job might be more than half learning, using, and evolving these conventions.

Learn a framework

Pick one!

It’s actually probably better to pick one (and a relatively popular one at that) and build something real/significant on it. Right now, the big front-end frameworks are:

1. Next.js (React) — React Learning Path
2. Nuxt (Vue) — Vue Learning Path
3. Astro (Multi-framework capable) — Astro Course

And if you’re intentionally not wanting to use a site where you’re writing JavaScript to build it:

1. Hugo (Go)
2. Jekyll (Ruby)
3. Eleventy (Node)

If what you’re building is a pure content site a classic Content Management System (CMS) is good choice, and here are some of the big ones:

• WordPress (PHP)
• CraftCMS (PHP)
• Strapi (Node)

If you’re interested in more of a full stack framework that helps with back-end needs as well:

1. Ruby on Rails (Ruby)
2. Django (Python)
3. Laravel (PHP)

You may hear advice that you should learn fundamentals and understand what a framework is doing before you leap into using the framework. That’s an understandable opinion, but frameworks are so common and come up in job descriptions enough that learning them early is not going to hurt you. Many people learn and framework and the underlaying technology together and over time.

The point of picking a framework is partially because they help you build websites faster by helping with a whole variety of things, including things that aren’t really a part of the web platform itself. For instance, websites are often built from data. Sure, a blog post is ultimately served as HTML, but the content, the title, the author, the tags, etc. are not stored as a big chunk of HTML, it is stored as data, and later templated into HTML. This gives you a practical level of control over what you’re building. A framework can help you retrieve that data and do the templating, and potentially even store and edit that data. That’s just to name one thing a framework can do that is awfully important.

A framework will likely also help you with URLs, otherwise known as routing. A framework like Next.js has “folder-based” routing, meaning you’re building the URLs your site will use based on the names of folders and files in the project itself. A framework like WordPress gives you control over the URLs through settings and the way you structure content, and much less so through files and folders. Learning these different conventions is interesting, as they are full of trade-offs. Evaluating trade-offs are a big part of leveling up as a developer.

Frameworks will also likely provide a way to build a site by combining together smaller pieces. JavaScript frameworks typically call them “components”, but any framework will have some abstraction for this idea. “Partials” and “includes” are similar ideas. Building websites from smaller parts is now well-established as the way that digital products are best-built. They can evolve into a design system, a way to systematize and bring consistency to otherwise large and unwieldily products. Components can be opinionated, in a good way, about what data they require. They can encapsulate logic, styles, and behavior. They can sometimes be loaded as needed to help with performance.

General Tooling

It’s useful to understand how some tools help you with the fundamental languages. For, consider these tools that we’d generically refer to as processors:

• TypeScript augments JavaScript — TypeScript Learning Path
• SCSS augments CSS
• JSX augments HTML

You don’t always need them, but it’s good to know when laying them on is a good idea. Most code bases, particularly at a job where you have a team and are working on a long-term project, are going to use a bunch of tools.

There are tools that… help run tools! If you’re using a framework, it’s common that a variety of tooling is already built in. For example Nuxt and Astro run Vite under the hood, which does all sorts of things like running a server, processing TypeScript, and bundling. Vite is great and worth learning.

There is great benefit to tools in the formatting and linting world as well. A formatting like Prettier automatically formats your code in your code editor. Linting tools like ESLint for JavaScript and Stylelint for CSS are helpful in warning you about problems in your code. These types of tools you typically make dependencies of your project, but express themselves mostly in your code editor. And let’s face it, VS Code is the dominant code editor right now.

Making a Complete Website

There is one thing you can do that might just light a spark inside you about this whole building websites thing. It’s build a website. For real though:

1. Buy a domain for something real
2. Figure out web hosting
3. Build the real website
4. Deploy it to the world

For example, buy your own name as a domain name. There are so many TLDs these days, you’ll find something that works. Now you’ve got real skin in the game. This is your website. It represents you. You’ll probably send people here on purpose, maybe for the rest of your life. You own this bit of digital real estate, and paid money to have it.

Getting a project like this done can be truly exhilarating, knowing that anyone in the world can see and interact with it. Now do it again!

You could build a personal portfolio website for this. Hosting doesn’t have to be hard or expensive, we have a simple guide. Leveling up, Jem’s course can walk you through setting up your own server from scratch

The Most Important of All: Being Someone People Want to Work With

Be friendly. Nobody wants to work with a jerk.

I understand that you can’t snap your fingers and change your personality, but you can work on it. And just in case you have an idea that this industry prefers the lone genius type that you have to tiptoe around or get snapped at, please wipe that out of your mind because it isn’t true and it’s going to hurt you more than help. People hire other people. People give other people promotions. People are going to do that for people they like.

Be interesting. It’s a big world out there.

People want to work with people they like, respect, and think are worth getting to know. Are you super into building model ships? Did you recently become a more dedicated runner? Can you play the sitar? Are you a bit of a foodie? You don’t have to constantly prattle on about it, but you can bring all of yourself to professional situations. Intrigue people and remember that interesting solutions come from diverse places.

Be valuable. People don’t forget it when you help them.

Make sure you do your own work, but help other people with theirs, too. The most valuable people on any team are typically the force multipliers. A 10× developer isn’t a developer that is ten times better than an average developer, it’s a developer that multiplies the whole teams output by being helpful. That’s what will make you senior someday.

Be smart. You can become smart, particularly in niche areas, by putting in the time and learning them deeply. That’s what Frontend Masters is here for! Being smart is part of being valuable. Your expertise makes you that way, when you use it to solve problems and help people.

Build a network. You’re going to need to ask questions. A lot. Like, everyday. A network is just a way of saying you’ve got places to ask questions. Here are some Discords we like:

• The Spicy Web Discord
• Lit Framework Discord
• Next.js Discord
• Astro Discord
• Tailwind CSS Discord
• JavaScript.info Discord

And if you have a Frontend Masters membership, we have a Discord (look under the Apps section of your account for access)

A Practical Step

Do something every day. Couple months of that and you’ve got yourself a awfully productive habit. For those of you with a job, you’re already doing this, so good job. This is more for the people who are trying to level up and get that job. An hour a day of learning and practicing is better than seven hours in one day.

Know this:

It’s always going to be a little uncomfortable. And by “always” we mean pretty much every day. You’ll sit down, have something you need to do, and not really understand how you’re going to do it. It can be frustrating and demoralizing. But computers are logical machines. Check out Julia Evan’s Debugging Manifesto poster, it has a great line on it: “computers are always logical, even when it doesn’t feel that way.” There is a way through, and you’ll be able to find it. Take a walk, sleep it off, come back and try it again. This daily struggle is part of this career path.

Things *not* to learn

We’d be hesitant to stop you from learning anything, particularly if your natural course of working and creating anything leads you there. If you’re trying to learn something that feels a bit like pulling teeth and you’re just learning it for the sake of learning it, that might be a good time to change course, just because there are no shortage of other things to learn that might click with you better.

Good luck!

Feel free to comment below if you have your own thoughts on what a junior web developer these days should be focusing on, or to share your own journey.

We’ve been pointing to Frontend Masters courses here a lot, but can you blame us? It’s part of the journey. Our Beginner Learning Path is nearly 40 hours, so that’ll keep you busy. It’s literally designed to make you career-ready. And beyond technical skills, we also have a completely free course on Getting a Developer Job, v3 when you feel like it’s time to hunt for a job!

Frontend Masters Boost (From this Blog)

This month, Boost welcomed new writers sharing essential tools, technology, and modern browser features:

• Sacha Greif, co-creator of the first-annual HTML survey stopped by to share interesting findings from the results of the survey.
• CSS just might be the fastest-moving web technology right now. We’ve covered scroll-driven animations a few times, and this month Preethi Sam gets deeper into it showing off making reading progress indicators not for the whole page but for sections of a page. The Popover API is also now available across browsers. You can use it via HTML alone, but it’s likely CSS will help make it fit your design. It’s the perfect thing for tooltips, but unfortunately we don’t have the anchor positioning API to go with it yet. Still, we can use popovers for tooltips with a smidge of extra JavaScript. Lastly, here’s a CSS property I’ll be you’ve never heard of: overflow-clip-margin and it’s got a cool trick up it’s sleeve.
• When you are building with a framework, it’s often not only that framework that concerns you. There might be a meta framework on top of it. There might be additional needs the framework intentially doesn’t handle for you. For instance, if you’re building with React, you might use Next.js on top of it, and a styling library like Styled Components as those other tools have no particular opinion about styles. Over in Vue land, Ben Hong shared with us the whole Vue ecosystem. That includes routing libraries, state management, meta frameworks, testing libraries, and much more. Ben is a Vue core team member so this is gold!
• There is a very simple way to “prefetch” a web request: use HTML. The <link rel="prefetch" href="…"> tag will do just that, caching the results. You should be relatively sure a user needs this data, but if you are, it can be a performance improvement. Adam Rackis shares how it can leveraged when a frameworks server-side data fetching can’t be used.

For beginners:

• Putting your very first website online (we call that deploying) is a big moment. It might just hook you on this whole web thing. To take any guesswork out of it, we have a step-by-step instructions for one way to deploy a website. If you’ve never written a line of JavaScript, but perhaps have a bit of experience in design or HTML/CSS, you may get something out of our Five Basic Things About JavaScript That Will Help Non JavaScript-Focused Web Designers. You also might feel overwhelmed sometimes trying to figure out how to spend the learning time you have. Members of our Discord weighed in on that recently with some sage advice.

Frontend Masters Courses

We launched four new courses:

• A revamp of our most popular CSS course: Ultimate CSS Grid & Layout Techniques, v3
• Three courses centered around user feedback: UX Research & User Testing, The Product Design Process, and Guide for Launching Your Next Big Idea.

We have recorded a ton of courses recently and will be releasing at least four more courses this month!

Industry news & updates

Last month we shared news that the WebKit and Chrome teams were somewhat at odds on how best to implement ‘masonry-style’ layouts in CSS. The conversation has continued at pace, with lots of thoughts on the best way forward, and why certain approaches are favored.

Google I/O took place a couple of weeks back and beyond the banging of the AI drum, there’s now a full YouTube playlist of all the session videos — plenty worth watching here, including Una Kravets taking a look over the latest in web UI.

✨ Key releases you may want on your radar: Astro 4.9, Storybook 8.1, Angular 18, Ionic 8.1, Next.js 15 RC.

Tutorials and articles

With anchor positioning built into the browser, you’ll now be able to build layered user interfaces without relying on third-party libraries. The CSS Anchor Positioning API is in Chrome as of version 125.

Jiayi Hu shares a thorough walkthrough of the practicalities of using Chrome DevTools for digging into performance issues.

Chris Coyier notes that container query adoption isn’t particularly high, and shares some reasons as to why that may be the case (beyond it just being new, and any potential browser support concerns).

WordPress just turned 21… but not everyone is celebrating — David Bushell is frustrated with the current ‘code-within-code’ approach to WP development.

Jen warns when testing the responsiveness of our sites, we need to stop just resizing the browser and should instead use device emulation.

Adam Argyle and Kevin Powell ▶ chat about under the radar CSS features in this video, highlighting 23 that you should know, and be using. A good refresher on what’s possible.

Preethi Sam runs through making a timer with CSS.

Useful projects

webstatus.dev is a new dashboard, from Google, highlighting web platform features.

CSS Pattern is a growing collection of nice background patterns from Temani Afif. It’s now 144 strong, and, as you’d expect, all made with just CSS.

This browser-based tool attempts to quickly convert jQuery-based scripts into efficient modern JavaScript.

Fontsource has over 1,500 open-source fonts to browse and integrate into your project via npm packages. Handy.

If you’re looking for design inspiration, Design Spells is a nice resource.

Thanks for reading – see you in the next issue!

Given CSS’s ever-evolving capabilities, having a robust understanding allows you to build better-looking, higher-performing, and more accessible websites. And Jen Kramer’s new course Ultimate CSS Grid & Layout Techniques will level-up your layout skills and take you beyond the basics with Grid, Flexbox, Subgrid & Container Queries.

Ultimate CSS Grid & Layout Techniques

Go from zero to layout hero! CSS Grid is the most important tool in a modern web developer’s toolkit for laying out web pages. With its two-dimensional structure, precise positioning, and overlapping elements, you’ll learn to achieve complex layouts with minimal code. You’ll also explore advanced techniques like container queries for adaptive components and subgrids for nested layouts. Through hands-on CodePen exercises, you’ll apply these techniques to real-world projects.

Highlights from the course:

• Learn the fundamentals of CSS Grid and when to use it versus Flexbox.
• Layout complex design by spanning rows, columns, and areas.
• Practice mobile and desktop-first approaches to CSS layout.
• Explore responsive image techniques with the srcset and sizes attributes and art-direct your images with the picture element.
• Use the latest layout features of CSS including Subgrid and Container Queries.

Enjoy the new Ultimate CSS Grid & Layout Techniques course!

Podcast Episode with Jen Kramer

We also recorded a podcast episode with Marcy and put it up on YouTube: Jen Kramer: CSS evolution, teaching @ Harvard extension, no code | The Frontend Masters Podcast Ep.3

The episode is up on Spotify and Apple Podcasts as well!

Deep JavaScript fundamentals, React, and TypeScript continue to be incredibly popular. We’re proud that our community values learning the deep fundamentals—investing in core skills pays off for your entire career. As new tools and techniques evolve, it is much easier to stay up-to-date when your fundamentals are strong.

Next are core topics like Git, algorithms, Node.js, and full stack (setting up your own servers). We’ve also seen a rise in the popularity of courses on Go, so we are planning an extensive Go course this fall! We’ve used Go internally as a team since 2017 and have been happy with it. Lastly, Next.js framework fundamentals are popular, and Tailwind made the list with its utility-first approach to CSS!

	Course	Course Author
	Complete Intro to React, v8	Brian Holt
	JavaScript: From First Steps to Professional	Anjana Vakil
	JavaScript: The Hard Parts, v2	Will Sentance
	Everything You’ll Need to Know About Git	ThePrimeagen
	Complete Intro to Web Development, v3	Brian Holt
	The Last Algorithms Course You’ll Need	ThePrimeagen
	Build Go Apps That Scale on AWS	Melkey
	TypeScript 5+ Fundamentals, v4	Mike North
	Introduction to Next.js 13+, v3	Scott Moss
	Deep JavaScript Foundations, v3	Kyle Simpson
	Full Stack for Front-End Engineers, v3	Jem Young
	Basics of Go	Max Firtman
	API Design in Node.js, v4	Scott Moss
	Intermediate React, v5	Brian Holt
	Introduction to Node.js, v3	Scott Moss
	Vanilla JS: You Might Not Need a Framework	Max Firtman
	The Hard Parts of Ul Development	Will Sentance
	Web App Testing & Tools	Misko Hevery
	Tailwind CSS	Steve Kinney

Whether you’re newer to the industry and learning these core skills for the first time, or an experienced developer looking to brush up your skills, this list is a great reference for courses you’ll want to take!

We’re back with Frontend to Fullstack Monthly – new courses, updates, and all the industry’s latest news!

From Boost this month

Boost has been busy this month bringing you articles on all sorts of web platform features and news. We’ve also shipped a freshened up design, leaning into GitHub’s open source Mona Sans, a variable font that certainly seems up to the task of typography on a tech blog.

The aspect-ratio property in CSS is super useful and has been supported in all browsers for quite a while now, but it doesn’t take much for it to not work as expected. If this is happening to you, here’s what might be going on. We prefer the fundamentals at Frontend Masters; vanilla HTML, CSS, and JavaScript will always serve you well. Here’s an easy grab-and-go search form using just the vanilla tech you need. The Popover API is now available across browsers and personally I’m most excited about using it for tooltips.

We’d also like to welcome some new guest authors, like Adam Rackis who introduces us to the versatile Auth.js library and in this case use it with Svelte. Ben Hong did an exemplary job showing us the landscape of tools around Vue right now. Preethi Sam gets awfully clever with Scroll-Driven Animations making section-based scroll progress indicators.

New Frontend Masters courses

We launched two new courses: Building Go Apps that Scale on AWS and Everything You Need to Know About Git. We have recorded a ton of courses recently and will be releasing at least four more this month.

And we’ve been in the studio cooking up tons of new courses! They are recorded as live workshops, and then edited into courses. Hope you can join us!

Industry news & updates

The first beta of React 19 landed at the end of April with, notably, full support for Custom Elements. It’s targeted at library and tool developers to get prepared for a final v19 release, but you can always upgrade if you want…

The WebKit and Chrome teams are at odds on how best to implement so-called masonry-style layouts in CSS. Chris Coyier gives his take on Boost.

Node.js 22 arrived as the new ‘current’ branch of Node.js and is due to become the active LTS version later this year. It now has a WebSocket client enabled by default, watch mode is considered stable, and you can now run npm scripts more quickly using its --run option. FYI if you want to get up to speed with Node, we have an entire learning path for Node.js.

Ryan Dahl is keen to stress that JSR is not a new package manager or replacement for npm, but part of a fundamental shift in how packages are distributed — tailored for the modern ES modules era.

Google has delayed the end of third-party cookies in Chrome yet again.

Here’s what work is being carried out to keep jQuery up to date across the web. jQuery UI got a small new release too – there’s plenty of life in jQuery yet.

✨ Key releases you may want on your radar: Astro 4.7, Svelte 5 RC, Next.js 14.2 Electron 30.0, and version 2.0 of text-editor Quill.

Handy tutorials and articles

⭐️ Cody Lindley is back with another updated edition of the Frontend Handbook for us. It’s a free, in-depth, guide to the current web development landscape. It covers everything from code editors, CSS, UX, UI, popular tools and frameworks, performance, accessibility, testing, AI, and much much more. Biased maybe, but well worth a bookmark we reckon.

Did you know you can detect JavaScript support just in CSS? It’s all thanks to the scripting media query.

Here’s a solid step-by-step instructional video (29 minutes) on ▶️ digging into responsiveness issues in Chrome’s Performance Panel.

Daine Mawer explains how we can create fluid typography with the CSS clamp() function.

Alexis Kypridemos shows us how we convert plain text to encoded HTML with vanilla JavaScript.

Useful projects

Extension is a new, easy way to get started with building your own browser extensions. One terminal command and you’re up and running.

Consent Banner JS is a zero-dependency, lightweight (~3KB) cookie banner.

TresJS can be used to create 3D scenes with Vue components and Three.js if you want to put together dynamic, striking visual experiences on the Web.

📊 Unovis is a flexible data visualization framework that’s happy working alongside React, Angular, Svelte, Vue or vanilla TypeScript/JavaScript. There are lots of examples, all with code.

Tagify is an elegant component for inputting tags.

This gallery has over 250 click-to-copy CSS gradients.

Naming things (functions, classes, properties, etc) can be hard, this site sets out to help.

Thanks for reading – see you in the next one!

But what if you didn’t need to rage-quit and start over with git reset –hard? Well, ThePrimeagen is here to teach you Everything You Need to Know About Git. This isn’t just about pushing, pulling, merging, and rebasing (although, that’s all covered). He’ll also show you how git works under the hood and help you understand commit history and solve complex conflicts. 

Everything You Need to Know About Git

Never run into an unsolvable Git problem again. Create and manage repos, branch for parallel development, and resolve conflicts with merge and rebase. Learn advanced git abilities like interactive rebasing for cleaning up commit history, bisecting to locate problematic commits, worktrees, and the reflog. By understanding Git’s architecture and inner workings, you’ll be able to handle any Git problem with confidence and become an indispensable asset to any large project.

Some highlights from the course:

• Understand Git’s architecture under the hood and configure Git settings
• Learn the most important strategies and commands for merging conflicts (merge, rebase, cherry-pick, and squash)
• Search and bisect commit history to identify issues
• Add advanced tools to your tool belt like stashing, interactive rebasing, and worktrees
• Use tags for versioning and contribute to open source projects

We hope you enjoy learning Everything You Need to Know About Git! 

Podcast Interview with ThePrimeagen

If you haven’t seen it yet, we did a podcast with ThePrimeagen. It’s at over 100k views and tons of people said they enjoyed it in the comments! ThePrimeagen: VIM (btw), Streaming, & Content Creation | The Frontend Masters Podcast Ep.9

Episode 9 of the Frontend Masters Podcast features ThePrimeagen, Netflix engineer and NeoVim enthusiast (by the way). In this episode he discusses the challenges of developer productivity, his experience with various programming roles, and his passion for Vim, and tooling. ThePrimeagen also delves into balancing work with personal life, the intricacies of content creation, and his excitement for future projects, including live reacting to tech conferences. Additionally, ThePrimeagen reflects on his journey, offering a rare glimpse into the life lessons learned along the way.

The episode is up on Spotify and Apple Podcasts as well.

Here are all of ThePrimeagen’s courses on Frontend Masters, btw.

What’s not as simple is the AWS infrastructure behind the scenes. Sure, this diagram looks simple enough:

However, cloud hosts like AWS, Azure, and Google App Engine are notoriously complex. It turns out, we can avoid the interface and code our application and our infrastructure in Go! Melkey’s new course will help you understand the speed and simplicity of Go, adopt an infrastructure-as-code deployment strategy, and Build Go Apps that Scale on AWS!

Build Go Apps that Scale on AWS

Build Go applications from scratch and deploy infrastructure-as-code to AWS! Save and retrieve data in DynamoDB and secure your APIs with Amazon’s API Gateway. Gain practical experience and learn the fundamentals of Go while understanding the scalability of AWS as you create an end-to-end login and authentication experience.

Other highlights of the course include:

• Learn key Go fundamentals, including arrays, slices, structs, receivers, and when to use pointers or references.
• Scaffold a Go application from the ground up and use AWS CDK to craft an infrastructure as a code deployment strategy.
• Build a scalable authentication application that leverages serverless Lambda functions, DynamoDB, and an API Gateway.
• Use a JSON Web Token to authenticate users and protected routes in your application.

We hope you enjoy the new Building Go Apps that Scale on AWS course!

The course is already in our top 10 courses this month and early reviews have been great:

Podcast Interview with Go Twitch Streamer Melkey

We also did a podcast interview with Melkey and put it up on YouTube: From Robotics and ML to Twitch/YouTube: Melkey’s Tech Journey | Frontend Masters Podcast Ep. 14

In this episode, we talk with Melkey, a popular Twitch streamer (and Twitch employee) with a unique background in robotics, machine learning, and a wide range of sports. We talk about the technical challenges of machine learning, wrestling to rugby, his first job fixing go-karts, and eventually getting into software dev and landing at Twitch. Expect tech and career advice mixed with lighthearted banter as Melkey shares his experiences and insights, significantly impacting tech and streaming content.

The episode is up on Spotify and Apple Podcasts as well!

The handbook provides an in-depth overview of the skills, tools, and technologies necessary to excel as a front-end developer / engineer. With 38,000 words of practical knowledge and advice, it covers the core technologies—HTML, CSS, and JavaScript—and how they form the foundation of modern front-end development.

As Cody Lindley reflects on the current state of front-end development:

“Once upon a time, front-end development primarily focused on the user and the user interface, with programming/software playing a secondary role. […] We have to find our way back to the user, back to the user interface.”

Get an overview of popular tools, libraries, and frameworks that go beyond the front end, such as:

• React.js/Next.js
• Svelte/SveltKit
• Vue.js/Nuxt
• SolidJS/SolidStart
• Angular
• Astro
• Qwik
• Lit

These tools enable you to create full-stack web apps and websites that interact with databases and share templates across server and client.

You can also develop native applications using web technologies with frameworks like:

• Electron for desktop apps
• React Native and Capacitor for mobile apps
• Tauri for mobile and desktop operating systems

Additionally, we touch on Progressive Web Apps (PWAs) and their ability to create installable applications with native-like experiences from a single codebase.

Whether you’re a seasoned front-end developer looking to refresh your understanding of the industry or a beginner eager to embark on a career in this exciting field, the Frontend Handbook 2024 is an essential resource.

To access the Frontend Handbook 2024, read it for free here:

Should I go deeper into front end, or expand to learning full stack?

xSOu!3nder

Hey everyone! So, I’ve been working mostly with Angular as a front-end dev, but then I got to mess around with Lit for our company’s design system and totally loved it. It’s got me thinking about diving deeper into front end and design systems.

But, I see a lot of talk about full stack being the way to go for more job options. I’m trying to figure out what’s best for my career. Should I beef up my backend skills and aim for full stack, or just keep focusing on what I really like with front end and design systems?

Would love to hear your thoughts or any advice you’ve got. Thanks a bunch!

Discord Community Responses

Marc

I can’t say what’s right for you, but personally, it’s always led me to go deeper into my interests. Becoming a design systems/component expert is a valuable skill. We are also doubling down on courses in this area this year since we are currently revamping our UX and design system on FrontendMasters.com.

SQL and back-end skills might make you more marketable to the broadest number of jobs. But it’s always served me the best to find an area I love enough to get the deepest into.

xSOu!3nder

Thanks a bunch for the advice!

I’m super into front-end stuff, like diving into how different frontend framework works bits and geeking out over CSS (CSS working group and Kevin Powell are both my idols lol). I’m all about making things accessible and looking good. But in Toronto, it seems like everyone’s looking for full stack devs. The few front-end job postings around are crazy competitive (200+, sometimes 500+ people fighting for 1 position), and they all want a ton of experience. Makes me wonder if I’m barking up the wrong tree wanting to be a front-end wizard.

Marc has a nice surprise

Marc

I just booked a workshop with Kevin Powell November 14th! Finally got him to come teach a workshop with us. 😀

xSOu!3nder

🐣 I’m beyond excited!

$ cd./villard

I wouldn’t wager that you’re alone in that experience. Lots of companies, offering either location-locked and remote roles, have been moving towards leveraging full-stack engineers. One could make an argument that this is because of “post-ZIRP” economics, but in speaking with others at my org, I believe it can also be attributed to applications trending away from big, bespoke front ends.

bagool

It depends on what you like/value. l’ve personally benefitted a lot more so far by being a generalist and going deeper into things only when I needed them rather than focusing on one particular thing. If you’re still at the beginning of your career it’s definitely worth it being nosey and trying as many things as possible imo.

$ cd./villard

That’s not to say there isn’t value in the front-end specialization, but there’s going to be a swing to generalization for many companies until new front-end concerns arise.

Nick Wattonville

I would work towards Full-Stack Dev. My understand is that being a Full-Stack Dev opens more doors, than just being one or the other. I like the frontend of JS and HTML, but far as design I can never get CSS to do what I want it to do lol. For backend PHP is one of my favorite languages other than JS to work with. But at the end of the day its up to you and what you like to do with your career.

Andrew

From my side will add that it’s the best feeling when you do what you like. So if you truly love the front end — go for it. Although, I’m curious what your answer would be about the back end.

Are you interested in tech powering the stuff as much?

For me, it always felt like that front end is for those who like to bring users easy and support, making sure the product is usable. And the backend is for individuals that are “optimizers/architecture runners”

hazelharbour

i’m currently a FE SWE and even at my work where we have had FE/BE split for forever, I’ve started to work a little on our APls. I used to be full stack so it was simple for me to learn a little bit and be able to help. Our BE team is just a lot busier due to some new features we are building. I think there’s value in being able to do some on the “other side” but specializing in what you like! I still heavily prefer the react/data flow portion of the frontend which is why I got hired in the first place. now l’m becoming more of a middle of the stack engineer. I don’t do a lot of CSS and I don’t do much database stuff.

danielvanc

It’s very difficult to be an expert in “true” full stack and I would say, less employable, because of that.

Full stack in the front-end world is being deemed as learning something like NextJS, but that’s simply is not the case. Look into the Full Stack by Jem on Frontend Masters for a good example of the term and what you need to learn.

You would go further being an expert in either the front end or back end.

Andrew

And, my second take: once an expert, always an expert. If you can master a tool, you have reasonable thinking and learning skills. At the end of the day, back end, front end, it won’t matter, you are just a master of everything and problem solver 🙂.

steveox152

Just some context: I have 11 years of experience and I have been leading multiple development teams. Mainly focused on front-end application development, and also the team responsible for the component library/design system. This is something that has come up with the people I have mentored in the past.

I have always told my team members that they need to focus on something that interests them, or else they will get burnt out. I can say that Design Systems and Component Libraries are something that there is a lot of desire for, but often its hard to find people that are interested in it, so it’s an awesome skill to have. I will say that most advice I have gotten from engineering managers at bigger tech companies is that have an area of expertise is really good.

Keep in mind that the best thing for you career is something that will change a lot over the course of a 30 year career, the most important thing is that you are focusing on something that you actually enjoy, or else you will be miserable. Any time I have a developer that is underperforming, the first thing I ask them is if they are unhappy with what they are working on and if they are, then I give them a different task, 9/10 times that solves their issues.

When it comes to going full stack, that is also great knowledge to have, you do not need to pick one way or the other, you can do both.

Focus on what you actually enjoy, but take some time to learn enough about backend/full stack so that you can contribute to conversations about it at work, who knows, 5 years from now you might want to switch and work on something different.

If you ever have questions or need some advice, feel free to DM me. I enjoy passing on my lessons learned to other people.

RedHoodJT

I would say to follow down the path with what makes you the happiest. Will full stack open more doors because of the possibilities that surround it? Yes. But if you aren’t happy then is it really worth it? You can stick with front end and Ul/UX design and, as someone mentioned earlier, learn what you need to backend-wise when the time comes for you to learn it. Maybe go through the basics of back end just so you have an understanding of it.

MacFoodly

Depends on what the person wants to do with their career IHMO. A specialist in a high-end tool is always a sought-after professional.

But one might think a full stack engineer can reach a broader job market. I do find this last point of view a bit misleading since you can tick a lot of boxes, but if you do not tick at least the core ones in terms of depth, your chances will be smaller.

Marc

I love this line:

I have always told my team members that they need to focus on something that interests them, or else they will get burnt out.

PURE GOLD!

steveox152

I see this all too often. Almost every developer I have had that was under performing was either burnt out or just completely uninterested in what they were working on.