DEV Community: Frontend Masters

What Skills Should You Focus on as Junior Web Developer headed into 2025?

Marc Grabanski 🏙💻 — Mon, 07 Oct 2024 14:30:42 +0000

Let’s say Junior Web Developer means you’re either just starting out learning, you’ve got a job but are early in your career, or somewhere between those. Our goal with this guide is to give you things to learn that we believe will serve you well. That is, they will make you a better developer and ideally a more employable and promotable employee.

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.

Here’s an example regarding images on the web

All frameworks will handle images differently. They’ll all have their reasons for that.

For instance, Rails has a helper method like this: image_tag(). This helps you generate an <img /> with a src that points to the image correctly, and helpfully generates browser-cache busting URL parameters. You’re on your own for optimization. If you want to try to use the responsive images syntax, only recently do they have rudimentary support.

The Next.js <Image /> component is quite different in that it wants to optimize the image for you and output the image with the srcset syntax in order to serve right-size images to different devices, as well as provide a blur-up loading style. This is much fancier and helpful, but if you are trying to do something custom, like any <picture> element usage, you’ve gotta keep going down a proprietary rabbit hole.

The Eleventy Image utility helps provide optimized image output for you to use however you want to construct your image HTML. It’s quite powerful in how many options it offers and features and formats it supports. But it’s intentionally unopinionated leaving much of a final implementation on your shoulders.

Those are all very different approaches.

A developer skilled in the fundamentals will understand how the <img> tag (and related elements and attributes) works in HTML and then layers on tools to help get there. That knowledge will translate from approach to approach and framework to framework. If you just use whatever a framework gives you and don’t dig into the fundamentals, you not only aren’t doing as good of a job as you could, but you lose knowledge between projects.

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.)

Seeing and being able to manipulate the DOM, as well as the active styles on any element, is incredibly useful alone.

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.

Here’s a semantic HTML document

<!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;
  }
}

Putting elements side by side is no small part of the job.

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.

We have a fantastic learning path covering all the essentials of web development or even a full path to become a JavaScript master if video courses are your thing!

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:

Use the existing <Popup /> element from the Design System.
Keep the content in the Copy package as HTML strings, so it can be translated.
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.
Has a component test ensuring it functions correctly.
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:

Next.js (React) — React Learning Path
Nuxt (Vue) — Vue Learning Path
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:

Hugo (Go)
Jekyll (Ruby)
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:

Ruby on Rails (Ruby)
Django (Python)
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:

Buy a domain for something real
Figure out web hosting
Build the real website
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:

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!

What Front-End Developer Skills Should You Focus on Leading Into 2020?

Marc Grabanski 🏙💻 — Mon, 19 Aug 2019 16:45:12 +0000

Hey there, Marc here. CEO of Frontend Masters, and we're super happy to be sponsoring the dev.to community! 😀

JavaScript and Front-End Engineering

We are in one of the fastest changing, evolving, most lively communities on earth.

JavaScript has evolved a lot starting from ES6, to new editions happening every year. And since the creation of Node.js, many companies have adopted JavaScript running their servers and APIs. And front-end web development changes and evolves as the tools, build processes, and frameworks evolve – some of the newest things being Web Assembly and React Hooks – it's a blast to see what we can all build!

...so, what skills should we be focused on learning now in 2019?

I'll break this into three categories:

Begin Coding Now
Becoming a Professional Front-End Developer
Becoming a Well-Rounded Engineer

1. Begin Coding Now

I'll keep this short, because in the early days of your journey, the most important thing is to get a positive feedback loop going – changing something and seeing the effects of your changes as soon as possible!

Get Started: Scratch, HTML/CSS/JS or Python

I'm a believer that it doesn't matter what language or tool gets you started! ... whether it's Scratch, HTML, CSS & JavaScript, Python, or even a framework that gets you into programming...the main thing is to get that feedback loop going and start building your ideas to get excited about programming!

If you know someone starting programming, we have a completely free, self-paced bootcamp where you build projects like websites and games.

2. Becoming a Professional Front-End Developer

Mastering the Fundamentals of JavaScript

At Frontend Masters, we believe the deep, core fundamentals of JavaScript and programming paradigms are timeless. Putting effort into learning how the core mechanics of scope and closure, the prototype system, and type system pay off over and over again throughout your career.

Know Your Paradigm: Functional and Object Oriented Programming

JavaScript is a "multi-paradigm" programming language, so learning Object Oriented and Functional Programming paradigms will pay off in getting you to the next level. Object Oriented programming is a popular way to structure larger applications. Then add skills to your toolbox from functional programming such as using map, reduce, filter, pure functions and composition.

Ultimately, you'll want to learn when to use concepts from both Functional and Object Oriented paradigms.

React or Vue?

If you'd like to get going writing professional code quickly, the most straight-forward way is to dive into a framework like React or Vue, since most jobs require knowing one of these top frameworks deeply.

Many people will be upset if I didn't mention Angular, but I don't think it's the best framework to start on. You'll know when you have a big enough project to leverage its "battery's included" philosophy.

Developer Tools

It's also important to master your development tools to learn to debug your code and the performance of your application.

TypeScript

More and more companies are adopting TypeScript for better developer experience as well.

CSS Grid and Flexbox

Both CSS Grids & Flexbox are essential to layout modern, responsive websites that work on any device.

Webpack

Tools like Create React App and Parcel are making getting started easier and easier, but if you want to go deeper, learn Webpack to create a custom build pipelines to ship your code in an optimized way.

3. Becoming More Well-Rounded

Design Skills

Having basic design skills can make you a more desirable and well-rounded engineer.

Node.js & Full-Stack Deployment.

Learning Node.js and how to build APIs in Node can make you more of a full stack engineer.

Better yet, being able to set up and deploy your own apps makes you even more self-sufficient.

AWS is currently the most popular platform to deploy apps at scale, but Azure is gaining steam.

SVG

One of the most flexible and underused graphics formats is SVG. It's incredible since it scales infinitely, from a mobile device to a billboard.

Testing

Want to make sure you're not shipping broken code? Leveraging testing with a popular test runner like Jest can go a long way in preventing broken deploys.

Git

Who hasn't lost code? Well, if you're a git master, you'll never lose your code and will be able to recover from when there are issues merging code. Everyone loves someone who really knows git on their team.

Computer Science

Knowing how to measure time complexity and use the correct algorithms and data structures can lead towards more efficient solutions and better engineering-thinking in general.

Accessibility

Making sure to understand accessibility is important to making sure your websites and web applications are open to everyone, plus you also help power users who prefer to navigate using the keyboard.

Newer Skills

Gatsby has been gaining a lot of steam for building performant websites.
Creative Coding is now possible in the browser with widespread Canvas and WebGL support for 3D in the browser!
GraphQL makes your APIs more flexible since you can grab exactly the data you need on the client, instead of breaking it up into multiple REST endpoints. We have courses for both Server GraphQL in Node.js and Client GraphQL in React.
Service Workers, the new API behind Progressive Web Apps, enables your websites and web apps to work offline in the plane or train!

Which skills do you think developers should be learning in 2019 – what have I missed?