HTML, CSS and JavaScript Fundamentals

Introduction to the Web

You can't start developing for the web without knowing the fundamentals of the web. In this module, we explore the details and intricacies of the HTTP protocol that makes client-server communication possible on the web. Furthermore, we take a look at the REST architectural since it is a fundamental concept to be aware of when transferring data over HTTP.

• Http Methods
• Headers
• Status Codes
• RESTful Architecture

HTML Fundamentals

The structure of a web page is created on HTML. We'll have a look at common elements like input fields, divs,... to make sure the content is structured in the way we want.

• Anatomy of a page
• How a page is parsed
• Styling and Behavior
• Some important HTML elements
• Semantic Elements
• What happens on the server?
• LAB - HTML Fundamentals

Forms

Working with forms is one of the most important aspects in HTML development. It makes it possible for the user to send data to the server

• Form Elements
• How Forms Work
• Useful Attributes and Functions
• Validation
• LAB - HTML Forms

CSS Fundamentals

A web page only looks nice when we start styling it. HTML is great to get all of our content on the page, but when we want to change the font, the colors, the location of everything we need some way to target these properties. CSS is the language we'll use to make sure the browser renders the page in the way we want to. We'll start with some basic selectors and learn how to use them efficiently.

• Styling websites using CSS
• CSS Selectors
• Understanding Inheritance & Cascading behavior
• Choosing the right unit
• LAB - CSS Fundamentals

CSS Positioning

One of the hardest parts of CSS is making sure that every element is located at the correct position. This chapter will explain the layout flow and basic options.

• Understanding the Box Model
• Flow
• Display
• Position
• LAB - CSS Positioning

Responsive Design

Your website needs to look fabulous on any device; meaning that you need to support a lot of screen sizes. This chapter will look at some more advanced ways to position elements while supporting different screen sizes and their limitations.

• Responsive Design
• Flex Box
• Grid
• Using Media Queries
• LAB - CSS Responsive Design

CSS Frameworks

Styling things yourself can be hard and frustrating. On top of that, keeping consistent styling when multiple people work on the project can be interesting. To help you out, a bunch of CSS frameworks exist. In this chapter we will look at two widely used CSS frameworks: Bootstrap and Tailwind.

• Building Responsive Sites with Bootstrap
• Making Modern Websites with Tailwind
• LAB - CSS Frameworks

Graphics and Animations

Modern web applications often use graphics and animations to enhance the user experience. In this chapter, we will explore how to create and manipulate graphics using SVG and Canvas, as well as how to implement animations using CSS and JavaScript.

• SVG and Canvas
• Animations

Principles of Web Design

Web design isn't just about knowing CSS, it's about creating good looking, easy to use applications. In this chapter, we'll take a look at some of the fundamental principles designers use to turn a good design into a great one.

• Layout and Composition
• Color
• Graphics
• Typography
• User Experience

JavaScript Fundamentals

This chapter introduces JavaScript as the programming language of the web. We focus on the core concepts you need to understand before interacting with the browser or external data. You'll learn how JavaScript executes, how data is stored and manipulated, and how to write clear, predictable code. These fundamentals form the basis for all frontend interactivity.

• What Is JavaScript and Where It Runs
• Adding JavaScript to a Web Page
• Variables and Data Types
• Operators and Expressions
• Control Flow (if, switch, loops)
• Functions and Parameters
• Arrays and Objects
• LAB - Writing Your First Interactive Script

Interacting with the Browser

In this chapter, you'll learn how JavaScript interacts with the browser environment. We explore the DOM (Document Object Model) and show how JavaScript can respond to user actions, update the page dynamically, and create rich interactive experiences without reloading the page.

• The Browser Environment and the Window Object
• Understanding the DOM
• DOM Selection and Manipulation Event Handling
• Other Browser APIs
• Debugging with Browser Developer Tools
• LAB - Building an Interactive UI Component

Talking to the Server

This chapter introduces communication between the browser and a server. You'll learn how JavaScript fetches data asynchronously and why promises are essential for modern web development. The focus is on understanding the concepts rather than backend implementation details.

• Why Browsers Talk to Servers
• Using the Fetch API
• Introducing Promises
• Handling JSON Data
• LAB - Fetching and Displaying Remote Data

The Bigger Picture: Modern JavaScript

In the final chapter, we zoom out and place everything you've learned into the broader JavaScript ecosystem. You'll get a conceptual overview of how modern frontend development works today, without diving deep into any specific framework. This prepares you for further learning beyond this course.

• JavaScript Evolution and ES Modules
• Organizing Code with Modules
• Introduction to npm and the Package Ecosystem
• Build Tools and Bundlers
• Introducing TypeScript
• What Frameworks Solve (React, Angular, Vue)
• LAB - Exploring a Small Modular JavaScript Project