What we’re building

So we are going to learn HTML & CSS by creating a simple recipes website with a few pages.

Tiny Cakes!

Setup

Create a folder somewhere on your computer that makes sense for you and call it learn-html-workshop. Everything we create in this workshop will be created in that folder. It could be on your desktop, or your documents folder, or wherever.

Now open Atom. If this is the first time you have launched it it display the Welcome Guide. Close those two tabs for now.

Go to the File menu, select Add Project Folder, browse to your learn-html-workshop folder and click open.

Now you should see the Project view open on the left side with your folder visible.

Creating a project in Atom

Now we will create the three files that we will be working on. The file names are:

  • index.html
  • traditional-cupcakes.html
  • muffins.html

To create a new file in Atom, right-click on the folder in the Project view, select New File from the menu, and type in the filename in the popup-box.

As each file is created it will be automatically opened in a new editor tab by Atom.

Empty files in Atom

Once you have created all three new files, open each one by selecting it in the Project view (or clicking on its tab if it’s already open) and pasting in the following content below.

Each file has its own block of content to add.

Content added to files

Don’t forget to save each file as you make changes. You can save using the File menu, ctrl-s on Windows/Linux, or CMD-s on macOS.

Hint: When an file in Atom has unsaved content you will see a little blue dot on the right on it’s tab.

Our content

index.html

Tiny Cakes!
-----------

Welcome to my recipes web site all about Tiny Cakes!

Here are the recipes that we have:

* Traditional cupcakes
* Muffins

traditional-cupcakes.html

Traditional Cupcakes
--------------------

Traditional cupcakes are always a crowd-pleaser.

Ingredients:
 * 2 cups self-raising flour, sifted
 * 3/4 cup CSR Caster Sugar
 * 2 eggs, beaten
 * 3/4 cup milk
 * 125g butter, melted, cooled
 * 1 teaspoon vanilla essence
 * Sprinkles, to decorate
 * 1 1/2 cups CSR Pure Icing Sugar
 * 1-1 1/2 tablespoons water
 * food colouring, optional

Method:
1. Preheat oven to 200°C or 180°C fan-forced.
2. Grease a 12 x 1/3-cup capacity muffin pan. Alternatively, line holes with paper cases.
3. Combine flour and caster sugar in a bowl. Make a well in the centre.
4. Add milk, butter, eggs and vanilla to flour mixture. Using a large metal spoon, stir gently to combine.
5. Spoon mixture into prepared muffin pan. Bake for 12 to 15 minutes, or until a skewer inserted into the centre comes out clean.
6. Stand in pan for 5 minutes before transferring to a wire rack to cool.
7. Make icing:
  1. Sift icing sugar into a bowl.
  2. Add food colouring and water.
  3. Stir until smooth and well combined.
8. Spoon icing over cupcakes.
9. Decorate with sprinkles.

muffins.html

Muffins
-------

This recipe makes 12 plain muffins.  

Refer to directions at the bottom for how to modify the recipe for different types of muffins.

Ingredients:

 * 2 cups white flour
 * 1 tablespoon baking powder
 * 1/2 teaspoon salt
 * 2 tablespoons sugar
 * 1 egg, slightly beaten
 * 1 cup milk
 * 1/4 cup melted butter

Method:

1. Preheat the oven to 375°F.
2. Butter muffin pans.
3. Mix the flour, baking powder, salt, and sugar in a large bowl.
4. Add the egg, milk, and butter, stirring only enough to dampen the flour; the batter should not be smooth.
5. Spoon into the muffin pans, filling each cup about two-thirds full.
6. Bake for about 20 to 25 minutes each.

Variations:

Blueberry Muffins:
 * Use 1/2 cup sugar.
 * Reserve 1/4 cup of the flour, sprinkle it over 1 cup blueberries, and stir them into the batter last.

Pecan Muffins:
 * Use 1/4 cup sugar.
 * Add 1/2 cup chopped pecans to the batter.
 * After filling the cups, sprinkle with sugar, cinnamon, and more chopped nuts.

Whole-Wheat Muffins:
 * Use 3/4 cup whole-wheat flour and 1 cup white flour.

Date or Raisin Muffins:
 * Add 1/2 cup chopped pitted dates or 1/3 cup raisins to the batter.

Bacon Muffins:
 * Add 3 strips bacon, fried crisp and crumbled, to the batter.

Once you’ve added the content to each file continue to the next step.

Go to Step 3