|

Web Development Taster

Introduction

Web Development Taster

Building Websites with HTML & CSS

tiny.cc/webtaster

Welcome to the Gather Workshops Web Development taster workshop.

A web page is made of three main languages

Venn diagram of HTML, CSS and JS all overlapping

Websites are made of many languages, but your most basic web page, what you see in your browser, is made up of three programming languages.

That’s three different types of code, each with their own rules.

They all work together to display what you see on the screen.

HTML is the markup language

Screenshot of Google with only HTML enabled

HTML is used to define the content of a web page: the words, the pictures, the links.

It does not define any sizes, colours or layout.

HTML stand for HyperText Markup Language.

This is a picture of what Google looks like when you see only the HTML - no CSS or Javascript.

CSS is the style sheet language

Screenshot of Google with both HTML and CSS enabled

CSS is used to define the appearance of a web page: the colours, the sizes, the layout.

It can be thought of as the design language.

It tells our web browser how to display the HTML.

CSS stands for Cascading Style Sheets.

This is a picture of what Google looks like when you combine the HTML and CSS.

JavaScript is the programming language

Screenshot of Google with all of HTML, CSS, JS enabled

JavaScript is used to define any interactivity on a web page: dropdowns, popups, anything that changes after the page is first loaded.

It can be thought of as the interaction language.

JavaScript is often known as JS for short, and is actually quite different from Java, which is another programming laguage with a similar name. Tricky!

This is a picture of what Google looks like when you see all the HTML, CSS and JS working together.

Workshop Mission:

HTML & CSS

In this workshop we are just going to be covering HTML and CSS.

We’re going to start by playing with some small pieces of code to get the hang of it.

After that we will get right on to building our own individual websites.

What We’re Making

We’ll use basic-level HTML and CSS to create this masterpiece!

Thumbs Up!

Intro: Complete!

Great, now it’s time to start coding…

Take me to the next chapter!

Great! Now that we know the basics, let’s get started on our own projects.

Welcome to the Gather Workshops Web Development taster workshop.

Gather Workshops Website
Follow us on Twitter Fork this project on GitHub Report a problem on GitHub

Digital Media by Gather Workshops is licensed
under a CC-BY-NC 4.0 International License.

Contact us to seek further usage permissions.