Hackathon 101 Workshop

A brief introduction to web development

What we'll learn

• How to use Git and GitHub
• Core web technologies (HTML5, CSS3)
• Responsive design
• Accessibility

Getting started

• Install Visual Studio Code
• If on Windows, install Git for Windows
• Log in or sign up for GitHub
• Once logged in to GitHub, fork this repository (top right)
• Create a new folder for your website (on your Desktop for example)
• Open the folder in Visual Studio Code
• Enter "ctrl + `" to open the terminal
• If on Windows, enter bash
• Go to your browser and click "Clone or download" on the top right of your forked repository and copy the URL
• In Visual Studio Code's terminal, type git clone URL .
  • where URL is replaced by the URL you just copied
• Right click index.html and select "copy path"
• Paste that path in your browser URL bar and press enter
• Make a change to index.html and reload the page!

Validating your code

• General structure: npm run validate
• Accessibility: npm run accessibility

Resources

• Colour scheme generator
• CSS Properties
• HTML Elements

Areas for further exploration (on your own)

• CSS Preprocessors (e.g. SASS)
• Javascript ES6
• Using Node.js
• Better JavaScript compatibility with Babel