back

Writing HTML & CSS offline

There may be times when children in your club will need to write HTML & CSS code offline. The following is a short guide to writing, editing and viewing HTML & CSS offline.

Writing

Each project’s downloadable resources includes the following files:

  • Example.html
  • style.css

Make sure that these files (as well as any images) are in the same folder. (If you want to write your own HTML, you can download the template webpage documents in the ‘Project Resources’ for each HTML project.)

Open both of these files in a text editor. We recommend Sublime Text 3, but there are loads of other good editors available. The easiest way to open both the .html and .css files for your webpage is to highlight both files and right-click to open them in a text editor.

Opening
Opening

Saving

After writing your HTML & CSS, save your files - making sure that the files have .html and .css file extensions.

Saving
Saving

 Viewing

To view a webpage, double-click the Example.html file to open it in a browser.

Viewing
Viewing

If your HTML file opens in a text editor, make sure that it has a .html file extension.

The easiest way to view changes is to open your files in a browser and a text editor. You can then make changes in the text editor, save your changes and then click ‘refresh’ in the browser to see your updated webpage.

Editing
Editing