{"id":3235,"date":"2024-08-26T13:30:42","date_gmt":"2024-08-26T18:30:42","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3235"},"modified":"2024-08-26T13:30:43","modified_gmt":"2024-08-26T18:30:43","slug":"what-skills-should-you-focus-on-as-junior-web-developer-in-2024","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/what-skills-should-you-focus-on-as-junior-web-developer-in-2024\/","title":{"rendered":"What Skills Should You Focus on as Junior Web Developer in 2024?"},"content":{"rendered":"\n

Let’s say Junior Web Developer<\/em> 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<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Fundamentals are always smart.<\/h2>\n\n\n\n

Let’s not be old-man-shakes-fist-at-kids.gif<\/code> 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. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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

Here’s an example regarding images on the web <\/summary>\n

All frameworks will handle images differently. They’ll all have their reasons for that. <\/p>\n\n\n\n

For instance, Rails has a helper method like this: image_tag()<\/code><\/a>. This helps you generate an <img \/><\/code> with a src<\/code> 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<\/a>. <\/p>\n\n\n\n

The Next.js <Image \/><\/code> component<\/a> is quite different in that it wants to optimize<\/em> the image for you and output the image with the srcset<\/code> 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><\/code> element usage, you’ve gotta keep going down a proprietary rabbit hole<\/a>. <\/p>\n\n\n\n

The Eleventy Image utility<\/a> 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.<\/p>\n\n\n\n

Those are all very<\/em> different approaches.<\/p>\n\n\n\n

A developer skilled in the fundamentals will understand how the <img><\/code> 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.<\/p>\n<\/details>\n\n\n\n

Understand the Browser<\/h3>\n\n\n\n

This is literally what the term “front end” means. It means the browser.<\/strong> <\/p>\n\n\n\n

“Back end” work revolves around servers. Servers that are exactly known<\/em> and produce identical and reliable results each time they are used. <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Browsers are much less known<\/em> \u2014 that is \u2014 one<\/em> 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<\/a>.<\/p>\n\n\n\n

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.<\/a> DevTools allow you to do all sorts of inspection and analysis on a website like:<\/p>\n\n\n\n