Resources for the 'Code Your Own Website' Creative Computing Club.
During this workshop, you will design and code your own website using HTML and CSS.
This page recaps what we discussed as a group.
To skip to the examples and ideas, click here.
Getting started
We will use Trinket as our editor. You can run and edit the code snippets directly from these instructions, or open each file seperately.
Save your work by saving the link from the sharing menu, or by remixing the file into your own Trinket account.
Hints:
- Line 24 is a heading, line 25 is a paragraph. The parts in triangle brackets < > are called tags - leave these as they are and change the text inside.
- On the top left, you have three tabs - 'index.html', 'style.css' and 'page.html'. Click 'style.css' to switch the the stylesheet - this is where you decide what a heading and paragraph should look like! See what happens when you change the colours in different sections - for a list of colours click here.
- Click back to 'index.html', the find line 26 - this describes the picture including its source (location on the internet), description and size - change the number and see what it looks like.
- Switch tabs again to 'page.html' - line 13 is what creates the hyperlink to go to 'index.html'. Copy this line, and past it into 'index.html', then look at the line carefully to find what you need to change to make it link to 'page.html' instead.
- Now it's your turn! You have learnt some html and css - what do you want to create with it?
