HTML / CSS

HTML

🏗️

HTML is the language we use to create the structure of a webpage

HTML stands for HyperText Markup Language

In HTML, we use different tags wrapped around content to build webpages

CSS

💅

CSS is the language we use to style an HTML document

CSS stands for Cascading Style Sheets

In CSS, we write selectors which target HTML elements and CSS properties to define how these elements should look

An Analogy

It’s like a house…

HTML is the building blocks, the structure of the house.

The structure of a house showing walls and windows but no colours

CSS is the decoration of the house.

The same house from the previous slide with some colour and bushes

freeCodeCamp

A free platform to learn to code

Take a look 👀

When faced with a problem, follow these steps:

  • Read the problem
  • Check the tests
  • Code between the comments
  • Check your outputs

Before completing your tribute page, complete:

  • Basic HTML & HTML5
  • Basic CSS

If you finish those sections, work on:

  • Responsive Web Design Principles
  • CSS Flexbox

The Tribute Page

The first project to complete in our pre-application stage is to build a small website in CodePen (https://codepen.io/) using HTML and CSS

This site can be about something you like or about someone (public figure) you admire. You are not required to make this about yourself or disclose anything personal.

This will give you the opportunity to practice with HTML and CSS as well as demonstrate your learnings from this stage

  1. The page has a title, or heading, at the top of the page
  2. There are at least three images on the page
  3. Elements have styles such as background colours, borders, margins and padding
  4. Some pieces of text have emphasis such as bold or italics
  5. A user can click on a link that takes them to another website
  6. The page has at least one list
  7. Everything on the page fits on any screen size, without content overflowing or being cut off

Let’s build a tribute page…