├── .gitignore
├── README.md
├── config.py
├── index.html
├── main.css
├── my_app
├── __init__.py
├── static
│ └── main.css
├── templates
│ └── index.html
└── views.py
├── requirements.txt
└── run.py
/.gitignore:
--------------------------------------------------------------------------------
1 | venv/
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to the HackMIT 2020 Beginner Workshop!
2 |
3 |
4 |
5 | ## Important Notes
6 | * If you plan on attending the workshop, please make sure to complete [**Pre-Workshop Setup**](#pre-workshop-setup) before the event!
7 | * If you want to submit to the **Beginner** track at HackMIT, you must have attended at least one of the beginner workshops!
8 |
9 | ## Overview
10 | The HackMIT 2020 Beginner Workshop will be a crash course into the basics of creating a web app. In three 1 hour sessions, we will teach you the basics of creating a webpage, writing a backend, using databases, calling 3rd party APIs, and how to tie them all together.
11 |
12 | **Topics**
13 |
14 | The breakdown of topics for each workshop:
15 | 1. Friday, Midnight (aka Sat 12:00 AM): Workshop 1
16 | * Intro to using Git
17 | * Creating a frontend with HTML/CSS
18 | 2. Saturday, 10:00 AM: Workshop 2
19 | * Creating a backend with Flask
20 | * Connecting it all with Javascript
21 | 3. Saturday, 11:15 AM: Workshop 3
22 | * Using databases
23 | * Intro to APIs
24 |
25 | **Prerequisites**:
26 | * You should have some fundamental coding knowledge, on the level of AP Computer Science or a college introduction CS course is more than enough.
27 | * You should have some familiarity with Python. Python fundamentals will not be taught
28 | * Finish all the steps of **Pre-Workshop Setup** (below) before the event
29 |
30 |
31 | **Workshop Structure and Resources**
32 | * The slides for the workshop can be found at [go.hackmit.org/beginner-slides](https://go.hackmit.org/beginner-slides)
33 | * This repository will be used as your starting off point. You will build your app off of here
34 | * We will also provide a repository of the final code from each of the workshops for your future reference
35 |
36 | # Pre-Workshop Setup
37 | #### 1. Setup Github
38 | Make sure you have github installed on your computer.
39 |
40 | [Setup Instructions](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
41 |
42 | You can test this by opening your terminal (or git bash in the case of Windows) and typing:
43 | `git --version`
44 | You should see a printout similar to
45 | `$ git version 2.17.1`
46 |
47 | #### 2. Navigating the Terminal (or Command Prompt)
48 | If you are not familiar with using your Terminal (or Git Bash in the case of Windows), here are some good [starter instructions](https://www.macworld.com/article/2042378/master-the-command-line-navigating-files-and-folders.html).
49 | At the very minimum, you will need to know how to:
50 | * navigate your filesystem with `cd`
51 | * show current files in directory with `ls`
52 | * run basic commands like `python `
53 |
54 | #### 3. Setup SSH Key (optional)
55 | There are two ways to link to Github repositories: HTTP and SSH. Using HTTP requires no setup but will require you to enter your username and password each time you want to push changes online. SSH gets around this.
56 |
57 | [Setup an SSH Key](https://docs.github.com/en/enterprise/2.15/user/articles/adding-a-new-ssh-key-to-your-github-account) on your computer
58 |
59 | Adding an ssh key to your computer allows you to interface with git easier, but is not required. If you're stuck on this, move on!
60 |
61 | #### 4. Clone this Repo
62 |
63 | Click the big green "Clone" button on the right. Choose either "Clone with SSH" if you have it set up or "Clone with HTTPS" otherwise and copy the link
64 |
65 | Run `git clone ` in your terminal under a directory of your choice
66 |
67 | #### 5. Setup Python3
68 | [Setup Instructions](https://www.python.org/downloads/)
69 |
70 | You can test by running in your terminal
71 | `python --version`
72 |
73 | Make sure you have Python 3.x installed!
74 |
75 | **Note**: If you have python 3 installed but `python --version` gives you a Python 2.x version, make sure `python3 --version` gives you a Python 3.x version. Substitute all future calls to `python` with `python3`
76 |
77 | #### 6. Pip
78 | [Setup Instructions](https://pip.pypa.io/en/stable/installing/)
79 |
80 | In your terminal, run: `pip --version` or `pip3 --version` and make sure you get a printout. Make sure to use the pip version that corresponds to your python 3 version:
81 |
82 | Example output: `pip 19.2.3 from /home//python3.8/site-packages/pip (python 3.8)`
83 |
84 |
85 | #### 7. Install Requirements File
86 | In your terminal, navigate to the root directory of this repository, `cd beginner-workshop-2020`
87 |
88 | Run `pip install -r requirements.txt` in the command line to install all of the requirements contained in this file.
89 |
90 | #### 8. Install Postman
91 | Postman is an application that allows you to easily format requests to API endpoints. We will be using it to debug our backend endpoints, and it may be useful for any future backend development.
92 |
93 | [Setup Instructions](https://www.postman.com/downloads/)
94 |
95 | #### 9. Check that everything is installed
96 | In the root directory of the repo, run:
97 |
98 | `python run.py`
99 |
100 | It should run without errors. Navigate to `localhost:5000` in a web browser. You should see "Hello World" printed on the page. This means you have succesfully completed setup. See you at the workshop!
101 |
102 | ## Troubleshooting
103 |
104 | If you are having trouble setting up, or have any questions about the workshop, feel free to email **help@hackmit.org** or join our [Event Slack](https://join.slack.com/t/hackmit2020/shared_invite/zt-gjlojqk6-vwId_VUJpCS3ZcAmxr_3sQ) and use the *#beginner* channel.
105 |
106 |
107 | ## Resources
108 |
109 | #### From the workshop
110 | * Beginner Slides: https://go.hackmit.org/beginner-github
111 | * Code from the workshop are on branches **workshop1**, **workshop2**, **final** (commands to checkout branches are on the slides!)
112 |
113 | #### Git
114 | * Git basic commands overview: https://training.github.com/downloads/github-git-cheat-sheet/
115 | * Git detailed cheatsheet: https://education.github.com/git-cheat-sheet-education.pdf
116 | * Git documentation: https://git-scm.com/about
117 | * Git tutorial: https://www.freecodecamp.org/news/learn-the-basics-of-git-in-under-10-minutes-da548267cc91/
118 |
119 |
120 | #### HTML/CSS
121 | * Best go to website for HTML/CSS reference and tutorials: https://www.w3schools.com/
122 | * CSS Cheat Sheet: https://websitesetup.org/wp-content/uploads/2019/11/wsu-css-cheat-sheet-gdocs.pdf
123 | * My favorite CSS tutorial on Flexboxes (makes life with CSS easier): https://flexboxfroggy.com/
124 | * Semantic Ui: https://semantic-ui.com/
125 | CSS import tag: ``
126 | * JS import tag: ``
127 | * Bootstrap: https://getbootstrap.com/docs/4.5/getting-started/introduction/
128 |
129 |
130 | #### Flask:
131 | * My favorite flask tutorial: https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world
132 | * Flask Documentation + Official Tutorial: https://flask.palletsprojects.com/en/1.1.x/
133 |
134 |
135 | #### JS + Jquery
136 | * Jquery documentation:
137 | * Javascript tutorial: https://javascript.info/
138 | * Javascript functions cheat sheet: https://htmlcheatsheet.com/js/
139 | * Import link: ``
140 | ** note: "CDN" stands for "Content Delivery Network", CDNs host a lot of libraries you can import anytime. When you need the link, just google " CDN" and you should be able to find a link
141 |
142 |
143 | #### Databases:
144 | Tutorial of using databases with Flask: https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-iv-database
145 |
146 | #### APIs:
147 | * List of Public APIs you can play with: https://github.com/public-apis/public-apis
148 |
--------------------------------------------------------------------------------
/config.py:
--------------------------------------------------------------------------------
1 | DEBUG=True
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Hack Book
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techx/beginner-workshop-2020/57ec18a74d83ff0eec24712686f4eebfdca6545d/main.css
--------------------------------------------------------------------------------
/my_app/__init__.py:
--------------------------------------------------------------------------------
1 | import os
2 | from flask import Flask, session, request
3 |
4 | app = Flask(__name__)
5 |
6 | #load main config
7 | app.config.from_pyfile('../config.py')
8 |
9 |
10 | import my_app.views
--------------------------------------------------------------------------------
/my_app/static/main.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techx/beginner-workshop-2020/57ec18a74d83ff0eec24712686f4eebfdca6545d/my_app/static/main.css
--------------------------------------------------------------------------------
/my_app/templates/index.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techx/beginner-workshop-2020/57ec18a74d83ff0eec24712686f4eebfdca6545d/my_app/templates/index.html
--------------------------------------------------------------------------------
/my_app/views.py:
--------------------------------------------------------------------------------
1 | from my_app import app
2 | from flask import render_template, request, redirect
3 | import requests
4 |
5 | @app.route("/")
6 | def index():
7 | return "Hello world!"
--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | click==7.1.2
2 | Flask==1.1.2
3 | itsdangerous==1.1.0
4 | Jinja2==2.11.2
5 | MarkupSafe==1.1.1
6 | requests==2.22.0
7 | Werkzeug==1.0.1
8 |
--------------------------------------------------------------------------------
/run.py:
--------------------------------------------------------------------------------
1 | from my_app import app
2 |
3 | if __name__ == '__main__':
4 | app.run(host="0.0.0.0", port=5000, debug=True)
--------------------------------------------------------------------------------