More or less since the inception of Web Development the mantra to learn it was to start with HTML, CSS and JavaScript. These technologies are thought to be the backbone of websites as eventually the browser can only interpret code written as either one of these three. The idea behind it is similar to what you learn in the academic discipline of programming called Computer Science. Educational institutions tell you to learn the timeless basics such as discrete mathematics, touring machines, algorithms and data structures. For educational institutions teaching and testing the basics makes sense as the tools used for everyday programming change all too often.

Is Computer Science Relevant for Programming?

The best algorithms and data structures taught in Computer Science class have already been implemented in any framework used for Web Development. Therefore, none of this knowledge will ever become relevant for day-to-day programming and if needed the necessary principles can be researched quickly. Theoretical performance of the algorithms used will never become an issue as the problem size inevitably stays small.

When the goal is to become productive as quickly as possible there are much better things to learn. Programming paradigms and frameworks come and go and unlike the basics of computer science the choices are much more subjective as there are many alternatives available.

Are HTML, CSS and JavaScript Relevant?

Using the basics one can surely build any website. However, there are many frameworks that output HTML and CSS while allowing you to write much simpler JavaScript then manipulating the DOM yourself.

What to learn instead of HTML, CSS and JavaScript

Unlike what you learn in Computer Science HTML, CSS and JavaScript at least allow you to get started creating websites immediately. Because these basics have been around for a very long time a set of abstractions has been developed on top of it. This has resulted in almost no developers directly using these technologies anymore. So, just like the basics you learn in Computer Science most of them aren't used anymore.

HTML + JavaScript → React JSX

Nowadays, HTML is written as JSX inside the JavaScript file. Before, JavaScript was only used to make some small changes to the HTML. Nowadays, all markup is rendered dynamically from JavaScript with a framework like React. When you start with React instead of HTML and JavaScript there is no need to learn a lot of DOM-Manipulation basics as React already abstracts them away in a much easier to learn and write format.

// HTML
<div>
  Count: <span class="count">0</span>
  <button class="increment">Increment</button>
</div>

// JavaScript
const initializeCounter = () => {
  const counter = document.querySelector('.count')
  counter.registerEventListener(() => {
    //
  })
  const nextValue = counter.innerHTML + 1
  counter.innerHTML = nextValue
}

initializeCounter()

const Counter = () => {
  const [count, setCount] = useState(0)
  return <div>
    Count {count}
    <button onClick={() => setCount(count + 1)}>Increment</button>
  </div>
}

CSS → Tailwind & Bootstrap

Styling with CSS is a whole topic of it's own and can take a long time to learn and practice. Websites usually contain many common elements that can be provided as reusable components in a UI library. So called CSS frameworks provide many components and regularly used layout elements. With such a framework one can quickly bootstrap a website mostly by copy-and-pasting examples from the documentation.

In a similar way Tailwind is a framework to write basically CSS by just adding classes to the HTML tags. For beginners this allows the code to be easier to read and adapt from examples. Once Tailwind if well known it's much easier to switch to CSS as all the basic properties are already known and now only need to be spelled out.

Setup to Get Started with Web Development

To create websites you need at least two applications. First install the JavaScript runtime node and an editor like VS Code. Once these are installed open a Terminal (Command Line) and run the following:

npx create-react-app my-app --template cra-template-learn

The above will setup a React project inside the /my-app folder. Now, enter cd my-app to move into this folder. To start the development build and server run npm start. This will open the website in the browser at the localhost:3000 URL.

Now you can open the same folder in VS Code and start to make changes in the src/index.js file. The build server is still watching for changes and will immediately apply the changes in the browser. With all the above configurations applied for Tailwind you can use Tailwind classes to apply styles.

The template is configured to work with Tailwind and only includes the basic elements required to create websites. Advanced best practices like testing and PWA have been removed to make it easier to get started.