In the first module, you learnt about some of the fundamental building blocks of a webpage using HTML. Now, it is time to move onto ways to style your pages. You will do this using CSS.

Now, we’re really into the swing of things and starting to get a feel for creating responsive and dynamic web pages. For the next couple of modules, we’ll be focusing on client-side JavaScript (JS). In this module, we’ll talk about why we would want JS in our webpages, and how to include it. We’ll then go over basic concepts—variables, strings, and console debugging. Finally, we’ll jump right into how we can actually interact with our HTML from JavaScript, to bend the page to our will.

As we’ve seen in Module Three, JavaScript allows us to build really rich, expressive user interfaces (UIs). However, creating large interactive websites in JavaScript can become quite difficult, especially when we need to add, remove, and modify lots of HTML elements on our pages, and – more importantly – keep our UI in sync with our application’s data (state).

Enter Svelte, and other UI frameworks! Modern UI frameworks allow us to build much richer websites more easily than we can do with just “vanilla” JavaScript code. In this course, we learn Svelte – one of the most loved new UI frameworks by developers, steadily increasing in popularity. Knowledge of, and experience, with, this framework is very transferrable to others (such as the ever-popular React), as core concepts such as components, state management and reactivity apply to all such frameworks.

So far, we’ve focused on client-side code – the stuff which runs in the web browser. Now, we’ll switch our focus to server-side code, getting us closer to true full-stack development. We’ll start with Node.js, which is an environment allowing us to write and run server-side code written in JavaScript, leveraging the skills we’ve already gained in modules 3 and 4. Then, we’ll introduce Express, which is a framework allowing for the easy creation of web services and APIs.

This module represents the last of the client-side JavaScript-focused topics. In particular, we will be looking at one of the most useful functions in JavaScript—fetch(). We’ll also be discussing asynchronous programming, as fetch() is an asynchronous function. The module will introduce what this means, and why it’s necessary, and focus on the easiest way to use asynchronous functions in your code.

For the remainder of the course, we’re going to be looking at the backend infrastructure of a web app. Often, servers will need to contain some logic and data storage, beyond simply serving up HTML, CSS, JS files, images, etc. There are many ways in which we can write this logic and provide data storage.
In this module, we’ll be looking at Node.js, coupled with several convenient libraries and frameworks such as Express, to provide this logic. Later on we’ll also be looking at SQLite databases to provide the data storage for us.

We’ve looked at both client-side (frontend) and server-side (backend) code so far. Now, let’s look at how we can connect them together! In this module, we’ll look at the JavaScript fetch() function, which lets us call (communicate with) our backend APIs from our frontend code, and exchange data between them. We’ll also look at cookies, which are little “bits” of information that can be created on the server, and then passed back to an individual user’s web browser to store application state specific to that user.

Databases are an important and ubiquitous part of modern software development. They allow users to store and query vast amounts of data very efficiently. Relational, SQL-based databases are the most commonly used databases to date, and modern database management systems leverage decades of research & development experience to deliver their functionality.

In this module, you’ll learn about SQL and how to create and query SQLite databases. The knowledge you gain here is directly transferable to any other SQL-based database, such as MySQL, OracleDB, or Microsoft’s SQL Server.

In addition, you’ll learn about how to design databases, from real-world descriptions given by clients. In doing so, you’ll gain experience with the Entity-Relational (ER) model and will learn how to draw ER diagrams to visualise database structure.

In the final module for the course, we’ll look at the one remaining link in our tech stack – how can we communicate with SQL databases from our Node.js server-side code? To do this, we introduce the sqlite and sqlite3 packages, allowing us to run any kind of SQL statements (CREATE, SELECT, INSERT, UPDATE, DELETE…) from our JavaScript code, and retrieve their results. We also look at query parameters, which are a security measure allowing us to write queries based on dynamic data – such as a SELECT statement which finds products matching a search string entered by the user – without exposing ourselves to problematic SQL injection attacks.