Frontend Development

HTML and CSS

|  JavaScript

|   JavaScript Projects

Fundamentals of JavaScript

Folders and Files
Adding JavaScript to web pages

Efficiently adding JavaScript code to a web page, and working with the JavaScript Console in your browser’s DevTools.

Take the quiz

View Tutorial  ➜
Web Hosting on GitHub
Variables and literals

Working with string, numeric and boolean variables, assigning values to variables, and using template literals.

Take the quiz

View Tutorial  ➜
Working with Props
Variable operations

Performing basic operations on variables in JavaScript, including string manipulation, arithmetic, and more.

Take the quiz

View Tutorial  ➜

Functions, conditionals, and weirdness

Working with CSS
Function declarations

Creating a function declaration, passing arguments to its parameters, and returning values.

Take the quiz

View Tutorial  ➜
Folders and Files
Making decisions with if

Create conditional decision-making structures in JavaScript with if, else if and else code blocks.

Take the quiz

View Tutorial  ➜
Folders and Files
Testing for weird values

Understanding type coercion, working with undefined, null and NaN, and truthy and falsy values.

Take the quiz

View Tutorial  ➜

Working with the DOM

Responsive Design
Generating HTML

Using JavaScript to create new HTML elements, add content and attributes to them, and append them to a web page.

Take the quiz

View Tutorial  ➜
Responsive Design
Modifying HTML

Using JavaScript to select existing HTML elements and modify their content, styles, and CSS classes.

Take the quiz

View Tutorial  ➜
Responsive Design
Interacting with the DOM

Handling user events with buttons, reading data from form inputs, and validating user data.

Take the quiz

View Tutorial  ➜

Structured datasets - objects and arrays

Responsive Design
Introduction to objects

Understanding objects, creating and accessing object properties, and working with object methods.

Take the quiz

View Tutorial  ➜
Responsive Design
Introduction to arrays

Creating and populating arrays, counting array elements, and destructuring elements to variables.

Take the quiz

View Tutorial  ➜
Responsive Design
Arrays of objects

Working with arrays of objects, and outputting structured data in the browser console.

Take the quiz

View Tutorial  ➜
Responsive Design
Listing records

Outputting structured data to a web page, and generating listview and gridview layouts with TailwindCSS.

Take the quiz

View Tutorial  ➜

Arrow functions, callbacks, and the event object

Responsive Design
Anonymous and arrow functions

Creating unnamed functions, storing them in a variable, passing them as arguments, and invoking them immediately.

Take the quiz

View Tutorial  ➜
Custom Properties and Text
Callback functions

Making code more modular by passing callbacks to higher-order functions, in anonymous, arrow and inline function syntax.

Take the quiz

View Tutorial  ➜
Custom Properties and Text
Introduction to events

Understanding the event object and its properties, event capture and bubbling, event listeners, and event delegation.

Take the quiz

View Tutorial  ➜

Asychronous JavaScript

Installing and customising Visual Studio Code for web designers
Introduction to the Fetch API

Using the Promise and Response objects of the Fetch API and get plain-text and JSON formatted data from web servers.

View Tutorial
Installing and customising Visual Studio Code for web designers
Installing Node.js

Installing Node.js and the Node Package Manager (npm) on your local machine.

View Tutorial
Installing and customising Visual Studio Code for web designers
Introduction to Express

Building a basic Express app runnng on a Node.js server that can serve a response to a GET request from a web browser.

View Tutorial