A tech stack is a combination of tools/frameworks/technologies used to build a web applications.

One of the most difficult parts of learning web development is choosing a tech stack. This can be quite a challenge for beginners since there are a lot of options to choose from.

Choosing a tech stack is a crucial part of learning web development, since this decision will have a great impact on your career and salary expectations.

Because of the structure of web applications, a tech stack normally consists of:

• A front end framework (Such as React, Vue, Angular, Svelte)
• A back end language (Such as C#, Java, NodeJS)
• A database (Such as PostgreSQL, Microsoft SQL Server, Redis, MongoDB)
• A back end framework (Such as ASP.NET, Express, Spring)

As many other things in software development, which tech stack to choose is a debate topic and different developers will have different opinions on which one is right for the job.

For this course, we'll choose a modern and easy to use tech stack that optimizes our salary expectations, quantity and quality of job oportunities.

We'll chose the PERN stack since it's really popular, used by many companies and composed from well documented technologies.

PERN stands for:

• PostgreSQL - An open source, relational SQL database
• ExpressJS - A NodeJS framework for creating web servers
• ReactJS - A modern front end framework for web applications
• NodeJS - A runtime for executing javascript on the server

For now we'll focus on React and the front end side, since it's possible to write small but functional applications solely using this technology

In a following article we'll talk about the structure of a web application, for now let's talk about the front end

The front end is the part of the application that is visible to the user. The front end runs on the client, the client in the context of web applications refers to the browser that the user is using to view the application.

The front end is limited since all the communication with the user computer is done through the browser.

A front end application can't directly access user files or databases, it can be closed at any time since it lives in the context of a browser tab and can't have any long running processes in the background

The tooling is the software needed to develop your application. We'll use only free, open source and profesionally used software so that you get real world experience.

For a simple front end application, we'll need:

• VSCode A code editor used for many purposes, including developing and debugging web applications.
  To verify the installation, open VSCode from your start menu.

• NodeJS/NPM A multiplatform javascript runtime and package manager, a lot of developer tools are built on top of this framework.
  To verify the installation, open the terminal (Windows + R, cmd in windows) and type

  node --version

  if correctly installed, you should see the version of NodeJS installed, in my case, it's

  v17.4.0

  but anything above 16 will work.
  To verify NPM installation, open the terminal and type

  npm --version

  , if correctly installed, you should see the installed NPM version number
• Git The most popular source code version control system, this is a fancy backup system, it allows you to keep track of your source code and make sure that you don't lose any work. A lot of open source projects use this tool.To verify the installation, open the terminal and type

  git --version

  , if correctly installed, you should see the version number, in my case I get

  git version 2.32.0 (Apple Git-132)

  .
• Chrome We'll use this browser over all the course but you can use anyone you like, still, if you are not familiar with more advanced features such as dev tools I recommend that you use Chrome for the sake of simplicity, since different browsers have different developer UIs. Firefox is also a good browser for web developing

As any professional, you should strive to master your tools. This is an extensive topic since each one has it's own unique set of features.

I recommend that you don't get stuck learning the full depth of each tool, instead, focus on learning the basics and then move onto more advanced topics as you need them.

Each tool have it's own official documentation, which is a great place to start.

For now this are the basics for our tools:

VSCode

VSCode is a code/text editor, so the basics are related to file managing and text manipulation.

You can open individual files with VSCode but normally we'll work with folders, to open a folder click File > Open folder

The Explorer shows all the files and folders inside the current folder.

• Click a file to edit it
• To the right of the folder name are buttons to create new files and folders.
• All modern web development work is done by editing text files instead of the more traditional GUI based development tools, so a text editor such as VSCode is more than enough to write full applications from scratch

A really powerfull feature is the Command palette, this shows a list of all VSCode commands, open it by tapping

F1

Shift + Command + P

All VSCode commands have a name and thus can be searched by name in the command palette, check the Focus on Terminal View command, a handy command to open an integrated terminal right on the editor. We can use this terminal to execute commands, such the the ones we used to verify the installation of other tools

NodeJS

Besides the runtime, Node also includes a REPL, a Node REPL is a simple tool to execute javascript commands, to test it, open the terminal and write

node

You'll see something like

Welcome to Node.js v17.4.0.
Type ".help" for more information.
>

This is a javascript console, you can write javascript commands and see the result, for example, add two numbers:

Welcome to Node.js v17.4.0.
Type ".help" for more information.
>2+3
5
>

Add an array of numbers:

> [1,2,3,4].reduce((a,b) => a + b)
> 10

Alphabetically sort a list of names:

> ["rafa", "naomi", "alex"].sort()
[ 'alex', 'naomi', 'rafa' ]

To learn more about this, check the official node and MDN javascript documentation.

Let's start with a simple static web page, a web page is a document that can be viewed in a web browser.

A static web page is one that always shows the same content, unlike a dynamic web page, which is one that changes content based on user interaction.

Web pages are made of:

• HTML, which is a markup language that defines the document structure and its elements
• CSS, a styling language that defines the looks of HTML elements such as color, font, size, positioning, etc...
• Javascript, a programming language that can dynamically manipulate the HTML elements, listen to user events such as mouse click, keyboard input, make requests to the server, etc...

A single HTML file can be a valid web page, so let's start by writing an index.html file with a minimal valid HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first web page</title>
  </head>
  <body>
    Hello there
  </body>
</html>

Right click the file in VSCode explorer and click on Copy path to copy the fullpath of the file in the clipboard

Then, we can see the webpage in our browser by pasting the path on the URL bar

Pasting a file path is not a normal way to navigate the web, and it will only work locally from your computer, since other computers can't access your disk drive externally.

To solve this problem, we can use a web server, a web server is a program that runs on a server (in this case your computer) and serves web page files to the browser.

The way that browsers work is by making requests, each request may be answered by a server with a response, this technique of sending and receiving requests/responses is a widely used form of communication called HTTP protocol

We could write our own web server, but it is easier to use a third party web server, such as http-server

This is an NPM package, meaning that is a program that runs on Node, and that can be installed using npm , or directly executed using npx

Run the server

To run the web server execute the following command on the terminal:

npx http-server

You should see something like

Starting up http-server, serving ./

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:8080
  http://192.168.1.69:8080
Hit CTRL-C to stop the server

Now you can open the same web packge by pasting the given URL on the browser

We see the same web page but now it's being served by a proper web server, depending on your router configuration you could even access this page from anywhere on the Internet (you'll need to configure port forwarding but this is another topic)

<!-- This is comment and has no effect in the final web page -->

<!-- Some tags may have child elements, such as <div /> -->
<div> 
  <p>
    This is a text paragraph
  </p>

  <!-- This is a line jump -->
  <br /> 

  <p>
    Another paragraph
  </p>

  <b>This text is in bold</b>
  <em>This text is in italics</em>

  Text can be also a direct child of the div tag
</div>


<!-- Self closing tags have no children elements, such as <input /> -->
<!-- Attributes define properties for the tag, 
in this case, value is the text of the input text box -->

<input value="hello" />

Common HTML tags

div

You can imagine a div as a transparent box that can contain other elements such as text, images, butons, etc...

The div is the basic building block of web applications since it easy to style and can be used to group elements,

Divs can contain other divs, so usually web applications consists of a lot of divs neasted one inside another

As any other element divs can be styled using CSS or the style attribute

In a following article we'll see how to use divs to create a full web app layout including headers, footers, side bars / menus and main content

Here is an example of a yellow div with a text inside:

<div style="background: yellow">
  Hello, this is a yellow div
</div>

input

An input is a text box that can be used to enter text, numbers, dates, etc...

An input by itself has little to no use, but you can use Javascript to interact with it, and then use the input value to do something such as save it to a database or send it to a server.

<div>
  <input value="You can write here" />
  <input placeholder="Your age" type="number" />
</div>

button

<!-- Note that we are using the alert function to show a message box -->
 
<button onclick="alert('Hello there')">
  Click me!
</button>

select

A select is a dropdown list that can be used to select a value from a list of options.

Similarly to other elements, you can use Javascript to interact with the selected value

<div>
  <label>Pick your favorite food:</label>
  <br />

  <select>
    <option value="1">Tacos</option>
    <option value="2">Lasagna</option>
  </select>
</div>

Chrome dev tools

The browser dev tools are your best friends for developing web apps, they allow you to inspect HTML elements, debug Javascript code, modify styling on the fly, inspect network traffic and much more.

Give it a try and inspect your own web page with the examples above, to open it use F12 on Windows or Option + Command + J on Mac

You can inspect any web page, not only your own

Javascript is the programming language of the web, it's the only language that web browsers can execute (besides WASM but that's another story)

Javascript is also the language of NodeJS, so you can learn a single language and use it both on the web and on server programming. Such a time saver!

First lets get familiar with the integrated javascript code editor, click Run to see the code in action.

This is actual executable Javascript code, try changing the message to something different and see what happens.

Basic syntax

This is a C-like language, meaning that:

• Lines should end with semicolons ;
• Blocks are enclosed in curly braces { }
• Whitespaces doesn't matter, but they're useful for making the code pretty and readable

Basic aritmetic operations:

Comparissions:

Try playing with the arithmetic and comparission examples and see what happens, try to predict what the alert message will be before running the code.

Accessing input values

Here we have an input named "input_name" in Javascript it's possible to access an input text using the value property

<input id="input_name" placeholder='Type your name here' />

Variables

In the previous example we introduced the concept of variables, they are used to store values. Use const for defining non-changing variables and let for changing variables.

Variables have a name and a value. Be careful with naming variables since they are case sensitive.

You can use any name you like but it's recommended to use meaningful names, also, by convention in Javascript we use the cammelCase casing for variables, meaning that they start with lower case and that each word is separated by a capital letter

Let add two more tags to our minimal HTML file to integrate both JS and CSS code.

The style tag goes inside the head tag and contains the CSS styling code for the web page.

The script tag goes inside the body tag after all other body child tags and contain the JS code for the page.

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

<head>
    <meta charset="utf-8">
    <title>My first web page</title>

    <style>
        /* CSS code goes here */
    </style>
</head>

<body>
    Hello there

    <script>
        // JS code goes here, note that this is tag is positioned at the
        // end of the body tag
    </script>
</body>

</html>

• We use different CSS selectors to target different elements on the page
• Setting CSS properties allow us to change the style of given elements
• Note that the font-family style applied to the body element changes the font of the whole page, this is because of style inheritance , this means that according to some rules, styles applied to parent elements get also applied to child elements.
• The input element has an id="name" attribute, making it referencable by the document.getElementById("name") method on our Javascript code
• The button has an onclick event handler referencing the sayHello function, so that this function gets executed when the user clicks the button

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

<head>
    <meta charset="utf-8">
    <title>My first web page</title>

    <style>
        /* Use a prettier font */
        body {
            font-family: sans-serif;
        }

        /* Makes the input taller */
        input {
            height: 30px;
        }

        /* Change the default button style for a prettier one */

        button {
            background-color: cornflowerblue;
            color: white;
            border-radius: 5px;
            border: 1px solid blue;

            height: 30px;
        }
    </style>
</head>

<body>
    Please write your name here:
    <input id="name" />

    <button onclick="sayHello()">
        Say hello
    </button>

    <script>
        // JS code goes here, note that this is tag is positioned at the
        // end of the body tag

        function sayHello() {
            const name = document.getElementById('name').value;
            alert('Hello ' + name);
        }
    </script>
</body>

</html>