Intro to Web Dev Workshop

By WICS Outreach

Want to get started on your hackathon project but not sure where to start?
Learn the basics of building a basic end to end web application using HTML/CSS, JavaScript, Bootstrap, Python Flask, and MongoDB!

Setup:

• Clone this repository. The main branch is a starter template we created with various TODO comments that we will be covering during the workshop.
• Install the following libraries in Python by using pip in the command line of the project's directory. If you do not have pip installed, please see the following link for more help (https://pip.pypa.io/en/stable/installing/):
  • Navigate to the hackuci2021-web-dev-workshop directory you just cloned, and run pip install -r requirements.txt to install all dependencies.
  • OR you can manually install each one:
    • Flask: pip install flask
    • PyMongo (for MongoDB): pip install pymongo
    • BSON Library: pip install python-bsonjs
    • DNS Mongo Helper: pip install dnspython
    • Python .env: pip install python-dotenv
• If you're having issues with imports or cloning, feel free to fork this Repl.it project which has the same starter template
  • It should automatically import everything you will need
  • You must create a Repl.it account with Google and fork the project
  • https://repl.it/@kaseychuang/Intro-To-Web-Dev-Starter-Template

Additional Resources

We will be covering a lot of material during the workshop and won't have time to go into depth on everything. So here are some links that will be helpful if you'd like to learn more and add to your web app.

HTML

• List of All HTML Tags: https://www.w3schools.com/tags/default.asp
  • Commonly used: Buttons, Forms, Inputs, Labels, Images, Lists (Ordered, Unordered), Links, Tables)
• List of All HTML Attributes: https://www.w3schools.com/tags/ref_attributes.asp
• Linking to other webpages: https://www.homeandlearn.co.uk/WD/wds5pA.html
• Embedding YouTube Videos: https://www.w3schools.com/html/html_youtube.asp

CSS

• List of All Properties: https://www.w3schools.com/cssref/default.asp
• CSS Box Model: https://www.w3schools.com/css/css_boxmodel.asp
• Types of Selectors: https://www.w3schools.com/cssref/css_selectors.asp
• Most Used CSS Properties: https://lucidar.me/en/web-dev-class/lesson-2-09-most-used-css-properties/
• Google Fonts: https://fonts.google.com/

JavaScript

• Intro to DOM Manipulation: https://www.w3schools.com/js/js_htmldom.asp
• https://www.tutorialrepublic.com/javascript-tutorial/javascript-dom-manipulation.php

Bootstrap

• Documentation: https://getbootstrap.com/docs/4.6/getting-started/introduction/
• Learn Bootstrap in 5 Minutes (Video): https://youtu.be/yalxT0PEx8c
• Bootstrap CDN: https://www.bootstrapcdn.com/
• Grid System: https://getbootstrap.com/docs/4.0/layout/grid/
• Cool Components
  • Forms: https://getbootstrap.com/docs/4.5/components/forms/
  • Navbar: https://getbootstrap.com/docs/4.5/components/navbar/
  • Carousel: https://getbootstrap.com/docs/4.5/components/carousel/
  • Jumbotron: https://getbootstrap.com/docs/4.0/components/jumbotron/

PyMongo

Documentation: https://pymongo.readthedocs.io/en/stable/tutorial.html

Python Flask

Quickstart: https://pymongo.readthedocs.io/en/stable/tutorial.html