This workshop is targeted at people who are new to code and web development. At the end of the workshop, you will have a better understanding of how the web works and how you can create a simple website of your own.

Topics covered include:

• Setting up a coding environment on your computer
• Basic introduction to version control
• What is the command line interface?
• How the web works from the source to your screen
• Understanding HTML (Hypertext Markup Language)
• Basics of CSS (Cascading Style Sheets)
• How to get a website from your computer onto the web
• Importance of accessibility

Although this has been scheduled to fit into the span of a full-day workshop, depending on the pace of the group as a whole, content covered will be tweaked to suit the audience.

1. Sign up for a GitHub account.
2. Download the starter files in this repository. Click on the green Clone or download button and select Download zip.
3. [Optional] Install Visual Studio Code. Visual Studio Code is text editor optimised for coding. You do not have to download it because any text editor on your computer will do (Notepad, Textedit etc.) but Visual Studio Code has numerous helpful features that could make your life a little easier.

• Introduction to HTTP

• Introduction to the Command Line

• A Guide to Git and GitHub

• HTML & CSS Is Hard (But it doesn’t have to be)

• Guess the Number repository (used for part 2 of the workshop)

This guide assumes you have a basic understanding of Git, as well as what GitHub is for.

1. Go to the repository for your project on GitHub.

2. Check that the index.html is not in any folders (like the image below). If there are any links to images in your index.html file, check that you are referring to their file path correctly. (Please ask in the TechLadies facebook group if this step confuses you)

   

3. Click on Settings.

   

4. Scroll down to the section called GitHub Pages, and select the branch you want to deploy.

   

5. Click Save.

   

6. You should see a notification across the top of the page.

   

7. Scroll back down to the GitHub Pages section to see the URL that allows you to access your website.