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, Bootstrap, and Python Flask! We will be creating a simple Expense Tracker website where a user can add items and view them by category.

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

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/

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/

Python Flask

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

Jinja2

Documentation: https://jinja.palletsprojects.com/en/2.11.x/ Template Design Examples: https://jinja.palletsprojects.com/en/2.11.x/templates/