Frontend Masters Boost RSS Feed https://frontendmasters.com/blog Helping Your Journey to Senior Developer Fri, 17 Oct 2025 18:19:15 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.3 225069128 50 Reasons to Build a Website https://frontendmasters.com/blog/50-reasons-to-build-a-website/ https://frontendmasters.com/blog/50-reasons-to-build-a-website/#comments Fri, 17 Oct 2025 15:37:00 +0000 https://frontendmasters.com/blog/?p=7416 There’s been a little chatter circling the question “Why would I build a website in 2025?” I was on a panel about it in the last year and it has popped up on various podcasts and such. It’s a fair question, but it’s one that, I think, requires both a very wide lens into what people are doing, and a very narrow lens into a specific situation in order to answer.

It’s easy to say “new restaurants do really well just having an Instagram alone” then conclude the web is doomed. But that’s the narrow look. Maybe just-Instagram really does work for that one restaurant in one place at this exact time. Or you could say “the web is for apps and e-commerce” (because other holotypes are better suited by native apps, allegedly) which is a very wide look without using a narrow lens to look at any one particular situation.

Money is the unavoidable topic. Many people become web designers and developers because of the potentially strong career path. And then work for companies using the web for, naturally, making money. I don’t think any of that is in any particular risk. It’s also not a requirement for the web to exist and thrive. You can (and likely will) make websites that don’t make any money and you won’t be paid to build them. I, for one, think that’s awesome. Not everything has to be a hustle.

So in that spirit, over the last month or so, I jotted down little ideas I randomly saw or thought of why a website exists. Why would anybody build a website in 2025? Here’s some reasons.

  1. You’re just getting into birding and you want a site to publish cool birds you’ve seen.
  2. You’re running a charity event and you made a “Facebook Event” at first to spread the word, but a bunch of people told you they don’t have Facebook (on purpose) so they can’t RSVP or ask questions, and aren’t sure if they are seeing the complete information. So you make a website for the event that everyone can see.
  3. There is a wildfire nearby your house and you’re getting inundated with text messages and phone calls from your friends and family wanting to know what’s going on, so you make a quick blog and post daily updates to help keep people updated.
  4. You’re thinking of moving to a new city and want to convince your partner that it’s a good idea. So you build a website with a bunch of photos and captions showcasing all the good reasons to do it (and a few of the reasons against it, to be fair).
  5. You read a lot of books and want to keep a log of them, especially the very interesting and recommendable ones. This is both to help you remember and to share with the world (but mostly your friends).
  6. You bought a book about programming mazes and you’ve used this new knowledge to build some interesting programmatic mazes and you make a little website to show them off. Which doubles as a nice little website for your young one to play with, which they think is cool that you made it for them.
  7. You own the world’s largest mustard museum and you want to make sure to have a website so that people search for it find your website and it’s got all the important information on it like where it is, when it’s open, and what it has to offer.
  8. Your company archives and makes available the history of the entire internet.
  9. You offer your customers a simple bookmarkable URL that says what the soup of the day is at your corner cafe.
  10. You need to provide an API that does something cool and useful. APIs and URLs and URLs are websites.
  11. You’re very sick of the current year so for a little catharsis you make a website that counts the remaining seconds until this year is over.
  12. You know that everybody has different social networks they have and prefer. You tend to be pretty active on a variety of them, more than most, anyway. You make a simple personal website that has prominent links to all the other social sites you are active on, so people know where you’re at and can choose the ones that match for them.
  13. You’re getting married and you want to have website that all your guests can reference that includes information about the wedding, the RSVP forms, the gift registries, photo galleries, and all that.
  14. You’re trying to document every genre of music ever with examples.
  15. You just want a basic personal blog, like this one, because you just wanna write about whatever the heck you want to and redesign it once and a while and you just like it. Plus it’s got a timeline to help you remember when things happened in your life.
  16. You work at a historical society that helps people connect to the past of a geographical region by documenting and sharing stories of the past.
  17. You’re trying to eat all the breakfast burritos in town so you know which ones are the best.
  18. You’re already a famous actor but you just need a little website still to share your doodles and stuff.
  19. You plan to walk across Japan and write about it and then turn it into a book and a website can be the home base for all that.
  20. You made up a cool new party game and you want to make a website for it so you can share with people how to play and the rules and stuff.
  21. You have basic morals that you follow, and your journalism job fired you because of them, so you start your own website and do your own journalism there where nobody can take it away from you because the wind blew the other way one day.
  22. You think that web technologies can be the tools of an artist like oil paints and canvas can be. You make websites like a painter paints.
  23. Your city doesn’t have a very good place to see all upcoming social activities, so you take it upon yourself to build one, combining scrapers, your own hunting, and submissions.
  24. You need a website for your band, duh.
  25. Your starting out as a magician and a website is an excellent place to show the world who you are and what you do and maybe get in touch with you if you want. And tell them that, ya know, you do birthday parties and stuff sometimes.
  26. You want to build the next hugely successful app, and you look around and realize all hugely successful apps have strong web apps so you should probably do that. You’re going to want URLs, after all.
  27. You’ve got what you are pretty sure is the world’s best chocolate chip cookie recipe and it really needs a web site all to itself.
  28. You need a website for your other band, duh.
  29. You want to tell a story about a massive avalanche that occurred in the Pacific Northwest. How it happened, who was involved, everything with great detail. The multimedia environment of the web is perfect. Words! Photos! Video! Interactive diagrams! Links! Scrolling effects! Hard to beat.
  30. You’ve always wanted to make your own video game and the web has everything you need to do that, including massive reach.
  31. You want to build a private little chat app just for your family that won’t change unless you change it.
  32. You make typefaces for a living and you need a place to show them to people and for people to buy them.
  33. You just like making websites.
  34. Because you got an idea in your head and just had to do it.
  35. Your kid is having a birthday party and you want to send people a URL that has all the information on it that nobody will have any trouble accessing.
  36. You need to document all the smashburgers in town.
  37. Because you’re starting a podcast and podcasts are RSS feeds and RSS feeds need a URL and URLs are websites.
  38. Because you need somewhere to post a video because YouTube keeps marking the video you’re trying to put there as a copyright violation even though it isn’t and you just can’t figure out any recourse.
  39. The brewery you work at just started serving cocktails this fall. Obviously you already have a website so this means just updating it with a nice banner letting your existing customers know.
  40. You just think about email a lot and want to write it down.
  41. You’ve just written a book and you need one place to send people to about it.
  42. You work for the government of your city and there is a desire to make all the data the city collects available to the public. A website is the obvious output.
  43. You’re trying to get a job so having a resume on a personal website seems like a good idea.
  44. You’re trying to get a job, but instead of just making a typical resume and portfolio, you make a website where the entire purpose is about why you would be a good fit for one particular role at one particular company. You use the entire website to explain why. Moonshot.
  45. You want an entirely secret place on the internet for you and your buds so you make a website with tight security that only y’all know how to get into.
  46. You need a bucket to put all your favorite GIFs.
  47. You’re running for office and need a URL to put on your signs.
  48. You’re really like cultivating online communities. There is a new big MMORPG coming out and you make a forums website to bring all the interested people together to talk about out, outside the influence of the company making the game itself.
  49. You are into making custom cross-stitch designs, so you build a little tool to help you design and plan them. You put just enough features in to make it useful without being a distraction. Ya know, a home-cooked app.
  50. You just finished a course on Frontend Masters and want to try out some stuff you’ve learned.

]]>
https://frontendmasters.com/blog/50-reasons-to-build-a-website/feed/ 1 7416
What Software Developer Skills Should You Focus on Leading Into 2025? https://frontendmasters.com/blog/what-software-developer-skills-should-you-focus-on-leading-into-2025/ https://frontendmasters.com/blog/what-software-developer-skills-should-you-focus-on-leading-into-2025/#comments Wed, 25 Sep 2024 15:27:08 +0000 https://frontendmasters.com/blog/?p=3266 You want to take your career to the next level – either through a raise, a promotion, or both! This guide is for mid-level developers who want to progress.

If you’re earlier in your career, we just published What Front-End Developer Skills Should You Focus on as Junior Engineer in 2024? — and now we want to do something similar except targeted toward already established developers are on the road towards senior developer.

Here’s the skills we find are in-demand today. This article should serve as a roadmap to getting to the next level.

We also have The Front End Developer/Engineer Handbook 2024, a comprehensive guide to the entire front-end landscape.

Bone Up on Fundamentals & Go Deep

Putting effort into really nailing your understanding of scope, closures, and the event loop can pay off over and over again throughout your career.

JavaScript: The Hard Parts is famous for a reason. No matter where you are in your journey, having a clear mental model of the most popular language under the hood can help you clear up common misconceptions about how things work, and help you write more performant code. And if you want, you can even dive very, very deeply into JavaScript with a series of courses.

Will Sentance: Higher Order Functions Example

Learn Programming Paradigms: Functional and Object Oriented

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.

Make Sure You Can TypeScript all the Things

TypeScript has won for teams, so you might as well get great at TypeScript!

Master a Particular Framework

The longer and wider a framework is deployed, the more things like edge cases and performance issues crop up. You should be able to know exactly what your framework of choice helps you with, and where it’s weak points are and how to get around them.

We have a React learning path that dives into all of the idiosyncrasies of the framework. We are starting to do this with Next.js as well.

Design Patterns

Learning to apply common design patterns in your code will help you write more robust web applications. You’ll also develop a more critical eye for recognizing when frameworks and external libraries are useful, and when you might not need that framework.

Performance & Algorithms

Often times what separates a good engineer from a great engineer is being able to know when to make the right trade offs. This goes for choosing tools, as well as when to invest in performance. You can even go as far as diving into the JavaScript Virtual Machine Engine itself if you want to understand what makes code Blazingly Fast.

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

Testing, Code Quality, and Tooling

As codebases scale, you need to avoid making regressions when adding new features. You can do that through unit tests, integration, and end-to-end tests using tools like Jest and Playwright.

Learn to set up a suite of testing and code quality tools in the Enterprise UI Development: Testing & Code Quality course.

CSS & Design Tools: Figma, Tailwind, and Design Systems

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

Then on the CSS front, it’s critical to know CSS Grid. Right here on the Frontend Masters site, we are currently revamping several key interfaces like our video player, and I can tell you CSS Grid has helped us simplify complex layouts on several occasions. If you want to practice your CSS skills, you can do that through CSS Projects.

Once you know the fundamental layout techniques, TailwindCSS is becoming standard since it removes the need for naming elements and styling them in separate steps.

Figma for Developers, v2

Figma isn’t just for designers—developers can also leverage its powerful features. Learn to use constraints, layout grids, and auto layout to build responsive designs.

Tailwind CSS

Use Tailwind CSS’s utility-first approach to build out entire web designs without needing any custom CSS! You can even add responsive breakpoints and dark mode right into your HTML markup.

Design Systems with Storybook, v2

Build scalable component libraries and design systems with Storybook. Create reusable UI components with composable styles and variants using Tailwind CSS.

Accessibility

Understanding accessibility is important to making sure your websites are usable by everyone. One type of accessibility is ensuring the site can be navigated and used by keyboard, which is also helpful for some power users who prefer to work that way.

Bonus if you learn tips for making accessible web apps in your framework of choice.

Full Stack: Servers, Deployment, and Building APIs

Learning Node.js and how to build APIs in Node can help you journey towards full-stack development.

Speaking of “full stack” — it’s becoming a more and more common term that developers self-identify as and that shows up on job descriptions. Frontend Masters, despite our name, has content across the stack from front-end to back. You can learn it all here. If you’re doing any build process, API, or server side work, don’t be afraid to use that term for yourself.

Rust and Go are both seeing big lifts in usage for server-side work. Rust a bit more on the tooling side and Go a bit more on the custom servers side.

Basics of Go

Get a quick introduction to Go. Learn basic syntax like variables, constants, data types, and creating and importing packages. You’ll get hands-on with functions, control structures, error handling, type definitions, structures, and interfaces.

The Rust Programming Language

Go from zero Rust knowledge to being able to build your own complete Rust programs! You’ll learn the foundations of Rust, what makes it so performant when to choose to use it for your projects. 

Git

Every major project is in Git and every organization has their own Git-based workflows, expectations, and customs. A senior developer will be expected to know Git well, to the point of helping their co-workers get unstuck with Git issues.

Everything You Need to Know About Git

Expand Your Horizons with Well-Rounded Fundamentals

Go deeper with surrounding topics to round out your knowledge of the fundamentals of full stack and security.

Complete Intro to Containers, v2

Containers are the industry standard for developing and deploying applications. Starting from scratch, you’ll build containers by hand to demystify how they work.

Complete Intro to Linux and the Command-Line

In this course, you will learn powerful commands, use Ubuntu, quit VIM, handle package management, and write your own shell scripts.

Web Security, v2

Gain hands-on experience with security tools and pick up best practices for writing more secure JavaScript in your web applications.

AWS For Front-End Engineers, v2

Learn to build an enterprise-grade deployment infrastructure on AWS. Host your assets on S3 and use CloudFront as a CDN to distribute those assets worldwide in seconds.

Front-End Systems Design

If you’re wanting to become a lead or principle developer with a front-end specialty, you’ll need to have a holistic understanding of what it takes to build scalable web apps.

Front-End System Design

Management

As your career progresses, you may be pushed toward management, or it may appeal to you naturally. First you need to consider if it’s right for you. There is a lot to learn and think about, and we have the perfect course for you here from one of the best in the business.

Engineering Management Fundamentals 101

Are you interested in becoming a team leader or engineering manager? Jem Young, Software Engineer Manager at Netflix, discusses motivations for transitioning into management and confronts hard truths about the position to discover what makes a good manager. 

What do you think?

Which skills do you think developers should be learning as we head into 2025 – what have we missed?

]]>
https://frontendmasters.com/blog/what-software-developer-skills-should-you-focus-on-leading-into-2025/feed/ 2 3266
What Skills Should You Focus on as Junior Web Developer in 2024? https://frontendmasters.com/blog/what-skills-should-you-focus-on-as-junior-web-developer-in-2024/ https://frontendmasters.com/blog/what-skills-should-you-focus-on-as-junior-web-developer-in-2024/#comments Mon, 26 Aug 2024 18:30:42 +0000 https://frontendmasters.com/blog/?p=3235 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:

  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:

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:

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:

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!

]]>
https://frontendmasters.com/blog/what-skills-should-you-focus-on-as-junior-web-developer-in-2024/feed/ 1 3235
Nerdrage https://frontendmasters.com/blog/nerdrage/ https://frontendmasters.com/blog/nerdrage/#comments Mon, 15 Jul 2024 18:08:41 +0000 https://frontendmasters.com/blog/?p=3009 First I read Nikhil Suresh’s angry rant about AI, then I read Frank M Taylor’s angry rant about front-end development. I agree and disagree with different points in each, like any good rant. Something that struck me is that, well, I don’t think either of them are actually particularly angry, it’s actually a schtick. I also watched Dan Olson’s I Don’t Know James Rolfe recently (aka “Angry Video Game Nerd”). I liked Dave Rupert’s take that “nerdrage” has turned into a genre of content. This genre has made it’s way all the way to technology writing. Heck, I do it myself sometimes, but I also agree with Chris Enns in that I wish we all generally wrote more about things we like.

]]>
https://frontendmasters.com/blog/nerdrage/feed/ 1 3009