SB Hacks Intro to Web Apps Workshop

Workshop date: November 5th, 2020
Hosted by: Jayleen Li and Bryan Terce from SB Hacks

Join SB Hacks for a introductory workshop on web application development where we will go over the fundamentals of HTML, CSS, and JavaScript! During the workshop we will also teach you how you can build and deploy your own web app! This workshop is intended for those with basic coding knowledge but no experience in web development.

This is the empty starter code for the workshop. For the final code please head over to this Github repo.

Link to Workshop Slides
Link to Workshop Recording

Other SB Hacks Events:

11/23      | 7:30-8:30pm PST | Game Development Workshop
1/7        | 7:30-8:30pm PST | Team Mixer
1/15-1/17  | TBA             | SB Hacks VII!! 🎉 Apply at sbhacks.com!

How to run your web app

1. Download the code

I don't know how to use git/GitHub!

No worries, you can download the code by clicking the "Download ZIP" button

I already know how to use git/Github!

Cool! Download the code to your computer with git clone.

2. Run the site

Open 'index.html' file in the browser of your choice. You can do this by right-clicking on the file and clicking "Open with"

You should see your code in the browser now.

To see any changes to the HTML, CSS, or JavaScript files, just save and refresh the page in the browser. (You may have to go in incognito mode for JavaScript changes.)

Alternatively, you can use an out-of-the-box server provided by python. In your terminal, type

python3 -m http.server

or if you are using python version 2.x, use

python -m SimpleHTTPServer

and visit http://0.0.0.0:8000/ to see your site.

3. Deploying your site on GitHub Pages (Optional)

Note you must have your code on GitHub for this step. If you forked the repo your code is already on GitHub. If you downloaded with "Download ZIP," you will need to create a repo and add the files to it. Here's an external tutorial on how to do that with using just the GitHub website.

Click the 'Settings' Tab on your repository.

Scroll down to the Section labeled 'GitHub Pages.' Then for the Source, click on the 'master' branch to deploy. GitHub reads code from that 'branch' to host your website from.

After clicking save, you should see the link that your app is now live on!

If you make changes to your code after deploying to GitHub pages, all you have to do is push your code to GitHub branch you deployed on and the site will be updated in a few minutes.