Core HTML and CSS

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 web techniques HTML and CSS. You will also learn to work with CSS frameworks that save development time and CSS preprocessors that make it easier to maintain CSS stylesheets.

This course is the core part of a five-day HTML/CSS development course that also covers more advanced subjects.

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