Humans of StarterHacks

Hello! These are the project instructions for StarterHacks 2020 Web Development 101 Workshop.

We're building a website called Humans of StarterHacks, where you can keep track of the people you meet during the hackathon.

Demo the website

Add gif

Technologies

• HTML
• CSS
• Bootstrap
• Material Icons
• Javascript
• Handlebars
• Airtable Database & API

First, we use HTML, CSS and Bootstrap create a simple static website. Then, we augment it with some Javascript for interactivity. We use Handlebars as a templating language. Finally, we use Airtable as our database and API to save and update our data.

This project should give you a good starting point to hack together your StarterHacks project in a weekend!

Pre-workshop Setup

1. Download a text editor like VS Code, Atom or Sublime. I'll be using VS Code.

2. Download Prettier for your text editor so that it can auto-format your code on save. You don't need to worry about fixing indentations on nesting!

How to use these files

This project is split up into steps. Each step has its own folder for the code for each step and instructions. If you get lost during the workshop code-alongs, you can take a look at the relevant folder.

Feel free to also use the code as a jumping off point for your own project!

Links

• Bootstrap for a front-end component library
• undraw.co for illustrations
• css.cool for CSS styles
• Bootstrap Starter Templates for quick page layouts
• CSS Tricks - Flexbox as a cheat sheet for how flexbox works
• Flex Zombies - Game as a fun way to learn flexbox
• Bootstrap - Card Component
• Avataaars for an avatar representation
• Badge Bootstrap Component
• Material Icons
• Bootstrap - Grid Cards Layout
• Bootstrap - Utilities (Spacing)
• Robohash.org for placeholder avatars
• Handlebars Installation - <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>