This post covers the fundamental things web developers should start to get to grips with to build web apps using modern practices. We’ll cover why each topic is important, key areas and links to resources to get up to speed.

#1 Text editor

Our text editor is crucial to master because we spent the majority of our time in this tool. Investing time in mastering this tool will make us more productive.

Key features to learn are:

• Code navigation
• Code refactoring
• Shortcut keys for common tasks such as opening a file or opening a terminal window

Take the time to discover useful extensions such as auto-formatting and linting.

I recommend Visual Studio Code. It’s super popular and cross-platform. It’s also well supported by Microsoft, and we get updates most months.

The Visual Studio Code docs are a great place to learn about all the essential features.

#2 Browser DevTools

We spend lots of time understanding and debugging existing code. There’s no better place to debug code than where it is running in the browser. Like our text editor, mastering this tool will make us more productive.

Key features to learn are:

• Inspecting HTML & CSS
• Stepping through JavaScript code
• Console
• Inspecting HTTP requests

I recommend starting with Chrome DevTools. They powerful and feature-rich, and Chrome is the dominant browser at the moment. However, learning these key features in the other browser tools is essential when we are debugging browser specific issues - lots of products we develop still need to support IE!

The Chrome DevTools site is an excellent resource for learning all the features in Chrome DevTools.

#3 Source code control

Most sizeable software projects that multiple people work on will be in a source code control repository. So, it’s vital to understand how these systems work.

Git is dominant now, so, I recommend learning this system.

It’s essential to understand the diagram below. This is how you get code locally on your device, make code changes, and get those changes back into the master copy of the code.

Once you understand the basic flow, learn about branching, and pull requests.

There’s a helpful section in GitHub, which will teach us the basics of git.

#4 Basic HTML

We finally get to HTML!

Learn what the purpose of commonly used elements are:

• Text headers - <h1>, <h2>, …
• Text paragraphs - <p>
• Buttons - <button>
• Links - <a>
• Images - <img>
• Forms - <form>, <label>, <input>, <textarea>, <select>
• Tables - <table>
• Lists - <ul>, <ol>
• Layout - <header>, <content>, <nav>, <div>

Using the right element for the correct use case will help your app naturally be accessible.

freeCodeCamp helps us interactively learn all these topics.

#5 Basic CSS

Next up is CSS. Here are the key topics:

• Selectors
• Cascade and specificity rules
• Colours
• Units
• Box model and sizing
• Positioning
• Media queries
• Display modes - particularly flexbox

Again, freeCodeCamp helps us interactively learn all these topics.

This post helps us visualise all the flexbox features.

#6 Basic JavaScript

We have reached JavaScript!

Here are the key topics:

• Declaring variables with let and const

• Declaring functions including how arrow functions are different

• Condition branching:

  • if
  • switch
  • Ternary expressions - condition ? true-branch : false-branch
  • Nullish coalesing - data ?? data-if-null-or-undefined

• Loops:

  • for
  • Array.forEach

• Template literals - Hello, ${name}

• Structuring code with classes

• Interacting with a web API with fetch

• Basic DOM manipulation

  • Creating elements with createElement
  • Selecting elements with querySelector and querySelectorAll
  • Appending elements to a parent with appendChild

freeCodeCamp is the place to go!

#7 HTTP Basics

Our web frontend will likely need to interact with a web API, and it will probably do that over HTTPS.

Here are the key topics:

• Request / response flow
• Format for requests and responses
  • JSON body
  • Colon separated name-value pairs
• Common response status codes
  • 404 - The resource requested can not be found
  • 400 - The data in the request is invalid
  • 401 - The client isn’t authorized to make the request
  • 500 - Something unexpected has gone wrong on the server

There’s lots of useful information on HTTP in the MDN docs

#8 Debugging Skills

We spend lots of time debugging. So, this skill is critical for our productivity.

Most problems can be tackled with a 3 step process:

1. Understand the problem
2. Pinpoint the problem
3. Make small changes until the issue is resolved

We should avoid the temptation to skip steps and try fixing the issue before adequately understanding it and knowing the root cause.

Understanding the problem is where we make sure we can reproduce the issue. If the has thrown an error, we can read the stack trace and error message and start to build a picture of what has happened in the code to cause the problem.

Pinpointing the problem is where we try to isolate the issue to a single line of code. If we have a good idea of where the problem might be, we can put a breakpoint in that area and step through the code to confirm our suspicion. If we haven’t got a clue of where the problem is or the code is declarative (HTML or CSS), we can comment blocks of code out and check whether the problem still occurs. Littering code with console.log statements is also useful when the problem only happens in the deployed code.

Make small changes until the problem is resolved is what it says on the tin! Don’t be tempted to make too many changes before checking the impact of the change.

This is a great blog post that covers more tips for debugging code.

#9 Agile processes

Agile processes dominate the process in which we develop our software. We must embrace the process we are in to help our team’s efficiency.

Scrum and kanban are very popular at the moment. Here are some essential skills to focus on in those methodologies:

• Giving meaningful updates in the daily standup
• Contributing to retrospectives to help improvements happen
• Giving an engaging demo in a sprint review
• Giving constructive feedback in a code review
• Pair programming

Here’s a nice blog post from Trello on Scrum.

#10 Soft skills

Soft skills are just as essential as our technical skills! The great thing about soft skills is that they are transferable to other roles we might want to do in the future. So, it’s well worth focusing on these skills.

Here are some vital soft skills for web developers:

• Teamwork - Getting on with others, communicating and collaborating well
• Empathy - Put your self in your colleague’s shoes when giving/reacting to feedback. Put yourself in your user’s shoes while developing a feature
• Taking criticism - This will help us grow
• Adaptability - Technologies move fast - particularly in the frontend world! Roadmaps can change, team members can change. We should embrace change and be willing to adjust
• Perseverance - Having the energy to pin down and fix that tricky bug!

#11 npm

Sizeable web projects will reference 3rd party libraries. npm is the industry standard way of managing those dependencies. It also facilitates the automation of regular tasks that happen in your development process (e.g., bundling & minification of code before it is deployed).

Key topics are:

• Creating a new npm based project
• Installing and upgrading dependencies in a project
• The versioning syntax
• How to define and run scripts (tasks)

Flavio copes has a great blog post on getting started with npm.

#12 Clean and readable code

We spent lots of time reading existing code. Sometimes it’s difficult to understand our code a few months after we wrote it! It’s well worth the effort to make our code more readable. Many of these best practices are language agnostic.

Below are a few best practices:

• Meaningful variable and function names. It sounds so trivial, but it makes a massive difference, and it’s pretty hard to do well!
• Colocate code. Generally, we are reading code to understand a particular feature. This is difficult if the code is structured in layers because the code for a feature may be in lots of different files in folders far apart. Code for a feature is easier to read if it’s together, in the same folder if split across multiple files
• No more than two function parameters. This pattern helps us quickly change the function without breaking its callers when new requirements are needed
• Single responsibility. Structuring code into functions that are focused on doing one thing helps their reuse and the impact if the functions are changed

This GitHub repository is full of clean coding tips for JavaScript code.

#13 Functional JavaScript

The frontend world is trending from object-oriented code towards functional code. Although functional techniques can be harder to learn, and functional code can be harder to read and debug, it can reduce bugs, which is important. So, a modern codebase will likely be a mix of object-oriented and functional style code.

Here are some key topics:

• Immutability
• Immutable array methods such as map, filter and concat
• Destructure and spread
• Higher-order functions
• Currying

freeCodeCamp has a great module on functional JavaScript.

#14 Framework

We’ve made it all the way to number 14 before thinking about frameworks! This is because understanding web fundamentals will help you efficiently learn any framework. Frameworks are useful because they help us build larger apps quicker with lower maintenance costs.

I recommend learning React. It has been hugely popular for a while now, and developers love it!

Here are some key areas of React to get to grips with first:

• Components. In React, web pages are structured into components. So, it’s important to start thinking about UI in that way
• JSX. The stuff that is output to a page from a component is defined in JSX. It’s weird at first and then super cool when you get used to it!
• Props. Props help components become reusable and flexible
• Events. Events allow components to be interactive, but they are declared and handled differently to native DOM events
• State. These are specials variables that the output of a component depends on. Unlike normal variables, their values persist when a component is rerendered. When state changes, the component automatically rerenders.

There is great material at freeCodeCamp for learning React.

#15 Another 5!

Briefly, here are another five important areas to get to grips with:

• Bundlers. These tools are used as part of a build to optimise source code by bundling files together and minifying the contents. A popular bundler at the moment is Webpack
• Security. This itself is a broad set of topics such as authenticating users, checking that they have access to various features, making requests to an API in a different domain and cross-site scripting attacks
• TypeScript. This is a static type system on top of JavaScript which helps us catch more bugs during development and enables code editors to provide features such as code navigation and refactoring
• Automated testing. As the app we work on grows, making changes to features can require lots of testing to ensure the app stays robust. So, it makes sense to automate this task as much as possible. Jest is great for unit and component level testing. Cypress is great for end to end tests
• Continuous integration (CI) and continuous deployment (CD). CI is a process that will automatically test and build all the artifacts in the app every time code is checked in. CD takes this a step further by deploying the artifacts. These processes help us quickly ship quality updates to our users

Wrap up

Being a web developer is more than just mastering HTML, CSS, and JavaScript. Investing time in mastering the tools we use every day will make us more productive. Don’t forget your non-technical skills, and don’t jump straight into learning a framework before understanding the fundamentals of HTML, CSS, and JavaScript.

It’s okay to have gaps, though, and you don’t need to master everything! I hope this post helps you form a plan to bridge any gaps you want to fill.