Workshop Steps
- 0 - What is the Web?
- 1 - Tools of the Trade
- 2 - Get Setup
- 3 - Marking it up
- 4 - Formatting the Homepage
- 5 - Formatting Recipes
- 6 - Images
- 7 - Stylin' with CSS
- 8 - CSS Selectors
- 9 - Styling Links
- 10 - div and span
- 11 - And What Now?
Useful Links
Step 1 - Tools of the Trade
The best thing about making web pages is that you don’t really need very much to get started.
You need:
- A Web Browser to view & test your pages.
- A Text Editor to edit your pages
Any of the major browsers is fine (Firefox, Chrome, Internet Explorer, Edge, Safari). Use which ever one you prefer to use for browsing.
Text Editors, source code & plain text
You can’t use a word processor like Microsoft Word, Apple Pages, or Google Docs to edit the source code of web pages.
The reason you can’t use a word processor is because what those programs actually write into their files is more than just the text, it includes all sorts of extra formatting information those programs insert formatting information into the files. Some of them let you export a document as a webpage, but it is far from ideal.
You need to use type of program called a text editor to edit the code.
We recommend getting started with an editor called Atom.
You can download Atom from its website.
A text editor is a program that lets you write and edit plain text. Just the text. Nothing but the text. There is no formatting. There is no bold, no italics, nothing. Just the text.
This is important because source code for webpages and all other software is always in plain text.
You actually already have a text editor on your computer, Notepad on Windows and TextEdit on macOS. While those programs will work, we don’t recommend it except in an emergency because they lack features that make coding easier.
Many text editors like Atom are actually designed specifically for coding and include features to make it easier.
- A project or file explorer view so you don’t have to switch between your editor & file manager
- Multiple editor tabs so you can have multiple files open and switch between them easily.
- Syntax highlighting which colours different parts of your code depending on the type of code. This can make it easier to read your code.
Some editors can also detect when your code doesn’t make any sense and highlight this for you.
We assume you are using Atom for this workshop, but there are many other excellent editors available. They all have their pros and cons and users that swear by them.
Download Atom, install it and continue to the next step.