Welcome!

Support circle 👩🏽‍💻

Week 2 - Hobby Page

Hobby Page

Requirements

  • The page has a title which informs the user what the site is about
  • The page has a logical layout and clear structure
  • There are images on the page, with alt-text where appropriate
  • The page is visually interesting, for example with borders or colours
  • A list is visible somewhere on the page
  • Everything on the page fits on any screen size, without content overflowing or being cut off
  • A user can click on a link that takes them to another website
  • The page has a header element, and a footer element
  • Somewhere on the page, the user can see today’s date. The date should always be correct. You’ll need to use JavaScript to generate the date, and DOM manipulation to display it.

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

<h1>Main heading</h1>
<p>Paragraph text</p>

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

We define rules, for particular elements:

h1 {
  color: red;
}

JavaScript

🤖

JavaScript is a coding language which allows us to write complicated functionality for our websites

For example, adding numbers together or calculating how long a string is

const num1 = 2;
const num2 = 5;

let result = num1 + num2;

DOM

DOM stands for Document Object Model

This is a representation of an HTML webpage in JavaScript

Manipulating the DOM allows us to add complex functionality to a site

For example, when a user clicks a button then the background colour changes

An analogy

Analogy shows a house: HTML is the building, CSS is the decoration, JavaScript is the functionality

README

A README is a piece of documentation which describes a project

The file can be included in a codebase, and GitHub will display the document on the repository page

READMEs are usually Markdown files

Markdown is a documentation language that uses syntax to define display of text

For example

A heading

# A heading

bold text

**bold text**

For each project, add a README to describe what you built and how you built it

We love to see readmes as they tell us more about how and what you learnt!

📝🤔

Coding time!