When you start out, you don't want to bog yourself down with unnecessary complexity. Instead, you want there to be as little between your code and the browser as possible. You want to focus on only the fundamentals. You want to KISS—Keep It Simple, Stupid. Following this principle allows you to make changes quickly, see their effect, and actually understand them.

I'll focus on how to achieve that simplicity. I also recommend our guide to avoiding the common pitfalls of learning to code.

Forget Frameworks, Because They Just Add Complexity

The easiest way to get bogged down is to install the often recommended tools and frameworks (NPM, Yarn, PNPM, NodeJS, React, etc.). People recommend them because they're popular and more desirable professionally than plain-old JavaScript (JS). These recommendations suit their requirements, not yours.

Complex tools add additional layers to your code, which obscure how the magic happens. Resist those layers. Stay focused on the fundamentals: what things are, what they're for, and how you can use them. Test everything that you learn, and keep simple notes.

In short, stay away from tools and frameworks for now. You can learn NPM in a couple of weeks. Perhaps in a couple of months, you can learn React or Svelte.

Readable Code Reduces Cognitive Burden

Simplicity (aka readability) is one of the guiding principles of clean code. I often rewrite fancy parts of my code to make it dumber and easier to read. Your code should express its meaning through variable names and its structure.

Use Names as Signposts

For example, begin function names with short, simple action words:

        function fetchUserAccount() {...}
    

You may not fully understand this code yet, but you can understand its intent: it fetches a user account. If that's clear to you, then it's a good name.

Have a look at the following. Even if you do understand code, it's not immediately clear what it does.

        function evaluateDimensions(b) {
  return b.x > 10 && b.z > 5 && b.y > 7
}

    

Now look at this code, which does the same thing but has much clearer intent:

        function boxWillFit(box) {
  const isDeepEnough = box.depth > 5
  const isWideEnough = box.width > 10
  const isLongEnough = box.length > 7

  return isDeepEnough && isWideEnough && isLongEnough
}
    

Again, you may not understand code, but its intent is clear to see at a glance. You will glance over your code hundreds of times, so do yourself a favor, make it stupidly simple to quickly process, and use names for signposts.

Group Related Things Together Using Newlines as Boundaries

When we group things together, they form natural associations in our minds. You should use blank lines as boundaries to group related blocks of code together. Using whitespace this way is common practice in user experience design (UX).

Comments also help draw those boundaries. Comments are not your notes; they're labels and information for future programmers (which includes you). Use them to help others, but also KISS. The less you write, the better. Hone the art of conciseness. Only include useful comments and clear labels.

In the following example, comments begin with a forward slash (/):

        function boxWillFit(box) {
  // VALIDATE BOX.
  // Sometimes we receive things that look like boxes but are not.
  if (!isBox(box)) return false

  // EVALUATE FITNESS.
  // This is readable; don't change it.
  const isDeepEnough = box.depth > 5
  const isWideEnough = box.width > 10
  const isLongEnough = box.length > 7

  return isDeepEnough && isWideEnough && isLongEnough
}
    

Notice the consistency. Consistency makes your code readable and easier to process. You should provide just enough context in your comments to be helpful.

Code Gets Complicated, So Make It Easy on Yourself

One of the biggest wins for readability is consistency. Consistency with layout, naming, and grouping relieves you of the stressful burden of processing every line, over and over. The goal is to look at a block of code and know what it does without thinking.

Following sensible readability practices will help you understand your code as you're learning. Things will get complex, and you need clear signposts. It will save you a lot of stress and mental effort.

Serve the Content Locally With a Simple HTTP Server

To adhere to the KISS principle, keep your tooling simple. It's not difficult to serve web content, and in fact you can do it with a single command.

Create a directory, and in it place an index.html file with the following contents:

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World!</title>
  <link rel="stylesheet" href="/style.css">
</head>

<body>
  <main>
    <p>Hello From HTML!</p>
  </main>
  <script type="module" src="/index.js"></script>
</body>

</html>
    

Place your JS and CSS files into the same directory, change to it, and then run the server with the following command:

        python -m http.server 8080
    

I assumed that you have Python 3 installed. Now simply visit localhost:8080 in your browser, and you will see your page.

If you want your page to look exactly like mine, set the following in your JS file:

        const main = document.querySelector("main");
const p = document.createElement("p");
p.textContent = "..and from JS.."
main.appendChild(p);
    

And put the following into your CSS file:

        p {
  font-weight: bold;
  color: rgba(5, 5, 5, 0.75);
  font-size: 4em;
  font-family: sans;
  margin: 0px;
}

p:nth-child(2) {
  font-size: 1em;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
    

Excluding you, editor, this is your entire technology stack. As you can see, it's simple, and nothing obscures your code. It's the perfect scratchpad to begin your craft.

To see any changes, refresh the browser page after you make them.

Beware of the Different Ways to Import JS Files

The JS ecosystem is a mess. In fact, the entire front-end web development ecosystem is a mess. As a beginner, I was often confused by the multiple ways to achieve the same goal. One particular area of confusion is the import syntax. To spare you the details, there are 4 different approaches, but the newest one (ESM) is the easiest to use.

To use the new method, set type equal to module in all of your script tags:

        <script type="module" src="/index.js"></script>
    

Inside the index.js, import another JS file by placing an import statement at the top of the file:

        // Top of the file.
import { something } from "/bar.js"
// Other code here.
    

The forward slash in "/bar.js" refers to the path on localhost:8080/, and it points to the directory that we serve; importing "/bar.js" will import a file called bar.js from that directory. Also, it imports "something," which is a function or variable name, from bar.js.

On that note, beware that you're not mixing up CommonJS with regular JS either. NodeJS uses CommonJS, which requires special build tools to make it work in the browser. They look the same, with slight differences. If you see a statement like the following, then it works only for NodeJS and not directly for the browser:

        const foo = require("bar");
    

This is the (older) way that NodeJS imports files.

Choose an Editor That at Least Has Syntax Highlighting

Syntax highlighting is essentially colors for your code. If I could choose only one tech for my editor, it would be syntax highlighting. Again, it's a visual thing; our brains have evolved to visually process information over millions of years, and I believe that leveraging our visual senses is one of our most powerful tools to comprehend code quickly. Colors are the best way to tap into that power.

Choose an editor that does syntax highlighting. If you have problems choosing one, you may be interested in the reasons why I chose Neovim as my text editor. However, popular choices are VSCode, Emacs, Notepad++, and even Nano.

Find a Suite of Good Resources Because These Are Your Bible

You need answers, guidance, reference materials, tutorials, ideas, and, most of all, patience. I didn't reel these off for no reason; each of them is crucial.

• Reference material: The Mozilla Developer Website (MDN), which is the go-to resource.
• Tutorials: You can find them anywhere, but use these only as training wheels.
• Answers: It's best to set an AI into brief, conversational mode and interrogate it critically—do not copy and paste generated code. Stack Overflow is reliable for when AI derails from reality.
• Guidance: Real people are the best resource. IRC and Discord have active communities, although admittedly I do not use either.
• Ideas: Use books and YouTube. Books will introduce the fundamentals, and YouTube is full of new ideas.
• Patience: Refer to your inner zen.

If you're using AI correctly, they shouldn't generate code for you. You should be asking the right questions and getting brief answers in plain English. When AI writes all the code for you, it only harms your development.

---

The prevailing idea is to keep it simple. This means avoiding complex tools, laying out your code consistently, and using sensible names to make it readable at a glance.

To serve the content, create a directory, place the source files into it, and run the server. From there, you can edit the code files and refresh the browser.

The resources that you gather are up to you. However, MDN is the best on the web, and the MDN tutorial series looks great for absolute beginners. You can also follow our tutorial to build your first web app.