HTML and CSS: Front-End Development

Developing web applications with HTML and CSS

Description

The web is growing considerably in popularity. More and more functionality is shifting towards the client and small revolutions are happening. Think of the advent of SPAs and PWAs, the dying out of Flash/Silverlight, realising server-side solutions with Node.js/Deno and building desktop applications with Electron.

This course builds a solid foundation for working with HTML and CSS. You will learn how CSS frameworks and preprocessors aid in maintaining your stylesheets. You will also learn to work according to the latest features that modern browsers provide with HTML5 and CSS3. Finally, you will learn about the JavaScript APIs that come with HTML5, such as storage, geolocation and web sockets.

This course is a combination of two other courses. The first 3 days correspond to the course Core HTML/CSS. The last 2 days correspond to the course Advanced HTML/CSS.

Subjects

In this module, you will learn to apply HTML.

Lessons

• Concepts of web development
• Refresher of syntax and basic elements
• Being aware of audiences
• Forms

Lab: Create a webpage

After completing this module, students will be able to:

• Read and write the HTML of a webpage
• Reason about the choice of HTML elements
• Setup a form
• Determine what should be implemented where

In this module, you will learn to style a webpage through CSS.

Lessons

• Define and use CSS stylesheets
• Selectors and specificity
• Styling options
• Basics of positioning

Lab: Style the webpage of the previous lab

After completing this module, students will be able to:

• Create and use CSS stylesheets
• Select elements and define styles for them

In this module, you will learn to make a webpage interactive through JavaScript.

Lessons

• Essentials of the language
• DOM manipulation
• DOM events

Lab: Make a webpage interactive

After completing this module, students will be able to:

• Read and write basic JavaScript
• Add and remove DOM elements
• Respond to DOM events

In this module, you will learn different techniques for setting up a webpage's layout.

Lessons

• Fixed layout
• Fluid/elastic layout
• Responsive layout / responsive design

Lab: Apply layout techniques

After completing this module, students will be able to:

• Setup a webpage with different layout techniques
• Determine which technique works best given a situation

In this module, you will learn how CSS frameworks aid in styling webpages.

Lessons

• Why and when to use CSS frameworks
• Using a CSS framework, including grid system, typography and component styling

Lab: Use a CSS framework

After completing this module, students will be able to:

• Determine whether and which CSS framework to use
• Use CSS frameworks

In this module, you will learn how a CSS preprocessor aids in maintaining stylesheets.

Lessons

• Why and when to use a CSS preprocessor
• Using a CSS preprocessor
• Integrate a CSS preprocessor with a build pipeline

Lab: Use a CSS preprocessor when defining a stylesheet

After completing this module, students will be able to:

• Make stylesheets more maintainable by the richer language of a preprocessor
• Include a CSS preprocessor with their projects

In this module, we will cover semantic HTML elements and attributes.

Lessons

• Section elements, such as navigation and content
• Elements for embedded content, e.g., canvas and video
• Forms
• Additional elements like meter, time and progress

Lab: Define an overview page with semantic elements Lab: Define a webpage with a form

After completing this module, students will be able to:

• Understand semantics more thorough
• Use semantic elements to express content

In this module, you will learn CSS techniques for i.a. selecting elements, applying styles and positioning.

Lessons

• Selectors for targeting specific states of elements
• Pseudo-classes and pseudo-elements
• Custom fonts
• Opacity
• Animations and transitions
• Positioning techniques like flexible boxes and grid

Lab: Use advanced techniques to style a webpage

After completing this module, students will be able to:

• Use a wide assortment of techniques for selecting elements
• Weigh and use different positioning techniques
• Apply a wide range of general styling options

In this module, you will be introduced to a number of browser API that are often used with developing web applications.

Lessons

• DOM API updates
• Storage (Web Storage and IndexedDB)
• Determining location
• Web workers
• Realtime communication
• Drag and drop
• Introduction to PWAs
• Overview other common APIs

Lab: Use Storage options to write and read data Lab: Use the Geolocation API

After completing this module, students will be able to:

• Build richer web applications using the covered browser APIs
• Take into account the capabilities of a browser when considering technology choices