feat: week 1 content

Week 2: HTML CSS JS (Frontend)/CSS.md

@@ -0,0 +1,2 @@
+Tutorial for Basic CSS features + selectors + How to copy paste CSS tutorial :)
+Maybe bootstrap css basics after JS tutorial

Week 2: HTML CSS JS (Frontend)/HTML.md

@@ -0,0 +1 @@
+Tutorial for Basic HTML tags

Week 2: HTML CSS JS (Frontend)/JS.md

@@ -0,0 +1 @@
+Tutorial for basic JS programming

Week 2: HTML CSS JS (Frontend)/README.md

@@ -0,0 +1 @@
+# Session Overview

Week 3: Final Project Development/README.md

@@ -0,0 +1 @@
+# Session Overview

Week 4: Deployment on PythonAnywhere/GITHUB.md

@@ -0,0 +1,37 @@
+# Git and GitHub: Version Control System
+
+![Git and Github](../assets/git-github.jpg)
+Git is a super powerful version control system. 
+
+It's essential for managing and tracking changes in code or files, especially when collaborating with a team. 
+
+With Git, developers can work on multiple features simultaneously, track changes, and avoid conflicts.
+
+## What’s the Point?
+
+In our case, git provides an easy and organized way to access and manage our code for deployment.
+
+It ensures that we have the latest version of the code across all devices and environments.
+
+## Key Benefits:
+1. **Collaboration:** Multiple developers can work on the same project without overwriting each other's work.
+
+2. **Version History:** Every change is tracked, making it easy to roll back to previous versions if needed.
+
+3. **Branching:** Create different versions of your project for features, testing, or bug fixes.
+
+4. **Deployment:** Easily pull the latest version of your code for deploying to production.
+
+## How to Install Git?
+
+Windows / Mac / Linux: [Click here to download Git.](https://git-scm.com/downloads)
+
+
+## Want to Know More?
+
+If you're new to Git and GitHub, or want to dive deeper, here's an amazing resource that will guide you through everything you need to know to get started with Git.
+
+Introducing...
+
+> ### [The Git Guide, by ACM BPDC](https://gitguide.acmbpdc.org)
+

Week 4: Deployment on PythonAnywhere/HOSTING.md

@@ -0,0 +1,60 @@
+# Hosting Your Web Application
+
+**Great!** You've built your web app and have it running locally on 127.0.0.1 (your machine).
+
+But what if you want to share your creation with the world?
+
+That’s where deployment comes in.
+
+![Web Hosting](../assets/webhosting-general.png)
+
+There are methods to host your app locally, and allow people to connect to your server (your machine) directly to access your web application. There are broadly two methods for hosting your app on the internet:
+
+## Self hosting
+
+This is what a few companies actually do, they have a dedicated machine to act as the server for their application, and requires quite a bit of setup and resources for it to work decently.
+
+## Cloud hosting
+
+You know how in self hosting you had to dedicate your machine just for running as the application server? 
+
+Well, what if someone gives one to you, so you don't have to dedicate your own resources, for a small price of course. Maybe over the internet, so you are not really getting a physical machine so to speak, but an access to use a physical machine that is connected to the internet.
+
+Well, that's the entire concept of a `Virtual Machine`, and Cloud Hosting in a nutshell.
+
+And this is also the entire business concept of AWS, Microsoft Azure, GCP, and many others. These are called `Web Hosting Services`
+
+Much simper to host static websites rather than dynamic websites using servers.
+
+
+## A little bit about the internet
+
+![How the Internet Works](../assets/how-dns-works.png.avif)
+
+You'll need to have an idea of the following terms, just to get the overall picture:
+
+* IP Address
+
+* Domain
+
+* Sub Domain
+
+* DNS
+
+There's a whole bunch of other 100+ things involved, but to get you started, just the concept of these 4 should be enough.
+
+Now, a few web hosting services actually have a free tier, where they usually give you access to their resources to use as a web server, and a domain for you to access your web app, so you don't have to painfully type out the server ip address to access it.
+
+## A few free hosting services (with free tier):**
+
+1. [Python Anywhere](https://www.pythonanywhere.com)
+
+2. [Railway.app](https://railway.app)
+
+3. [Render.com](https://render.com)
+
+3. [Streamlit](https://streamlit.io)
+
+4. [GitHub Pages](https://pages.github.com)
+
+We'll be using [PythonAnywhere: A free to use web hosting service](https://www.pythonanywhere.com) to host our web app.

Week 4: Deployment on PythonAnywhere/PYTHONANYWHERE.md

@@ -0,0 +1,54 @@
+# Getting Started with PythonAnywhere
+
+<img src="../../assets/pythonanywhere.jpeg" alt="Python Anywhere Logo" height="250"/> <br />
+
+One popular and beginner-friendly platform for deploying Python applications is PythonAnywhere.
+
+Deploying your Python web app with PythonAnywhere is a simple and beginner-friendly process, which makes it pretty popular for deploying python based applications.
+
+Whether you’re building a small project for fun, a portfolio, or something more complex, PythonAnywhere is a fantastic option for getting your Python app online quickly and effortlessly.
+
+> “If you have a Python app, PythonAnywhere makes deployment as simple as a few clicks.”
+
+We’ll walk you through what PythonAnywhere is and how you can use it to host your Python web applications online.
+
+## What is PythonAnywhere?
+
+PythonAnywhere is a cloud hosting service specifically designed for running Python applications.
+
+It allows you to deploy web apps without needing to worry about server management or configuration. Plus, it has a free tier, which is perfect for beginners and small projects.
+
+## Why Use PythonAnywhere?
+
+* **Easy to use:** You don’t need to manage servers or install software manually.
+* **Accessible:** It provides a browser-based interface for working with your code.
+* **Free tier:** Perfect for hobby projects or simple web apps to get you started.
+
+### Key Features:
+1. **Web hosting:** PythonAnywhere allows you to run web apps using frameworks like Flask, Django, or even simple WSGI applications.
+2. **Python environment:** You get a complete Python environment with access to libraries, frameworks, and virtual environments.
+3. **Shell access:** PythonAnywhere provides an online shell, so you can run terminal commands directly from your browser.
+4. **Database hosting:** You can also create and manage databases (MySQL, PostgreSQL) for your web apps.
+
+
+## How Does It Work?
+
+PythonAnywhere provides you with access to a virtual machine running on the cloud. You can use this machine to host your Python apps, run scripts, and manage your databases.
+
+## Deploying your Python Web App on PythonAnywhere
+
+1. **Sign up**: First, go to PythonAnywhere and create a free account.
+
+2. **Upload your code**: After signing in, you can upload your Python app files directly via the web interface, or you can pull them from a version control system like GitHub. We'll be taking the second approach.
+
+3. **Set up a web app:**
+* Go to the Web tab in PythonAnywhere’s dashboard.
+* Select Add a new web app.
+* Choose your Python version and framework (Flask, Django, etc.).
+* Set the path to your app files.
+
+4. **Configure the WSGI file**:
+* PythonAnywhere uses WSGI (Web Server Gateway Interface) to serve Python apps.
+* You’ll need to edit the WSGI configuration file to point to your Python app’s entry point (usually the file where app = Flask(__name__) is defined in Flask, or wsgi.py in Django).
+
+5. **Run your app:** Once everything is set up, you can click Reload to deploy your app. It will be accessible via a web link provided by PythonAnywhere, something like {{yourusername}}.pythonanywhere.com

Week 4: Deployment on PythonAnywhere/README.md

@@ -0,0 +1,66 @@
+# Session Overview
+
+These are the topics that we'll broadly be covering in this session:
+
+## [Hosting Your Web Application](HOSTING.md)
+
+<img src="../assets/webhosting-general.png" alt="drawing" width="400"/> <br />
+
+- **Purpose**: Overview of web hosting and its importance.
+
+- **Content**: The concept of web hosting, domain names, and the general process of deploying a website.
+
+- **Overview**:
+    * [Hosting Your Web Application](HOSTING.md#hosting-your-web-application)
+    * [Self hosting](HOSTING.md#self-hosting)
+    * [Cloud hosting](HOSTING.md#cloud-hosting)
+    * [A little bit about the internet](HOSTING.md#a-little-bit-about-the-internet)
+    * [A few free hosting services (with free tier):](HOSTING.md#a-few-free-hosting-services-with-free-tier)
+
+
+## [Intro to Git and GitHub](GITHUB.md)
+
+<img src="../assets/git-github.jpg" alt="git-github-img" height="250"/> <br />
+
+- **Purpose**: Introduction to Git and GitHub for version control.
+
+- **Content**: Installing Git, setting up a GitHub repository, clone a repo, commit changes, and push to GitHub.
+
+- **Overview**:
+    * [Git and GitHub: Version Control System](GITHUB.md#git-and-github-version-control-system)
+    * [What’s the Point?](GITHUB.md#whats-the-point)
+    * [Key Benefits](GITHUB.md#key-benefits)
+    * [How to Install Git?](GITHUB.md#how-to-install-git)
+    * [Want to Know More?](GITHUB.md#want-to-know-more)
+
+## [Working with Secrets](SECRETS.md)
+
+<img src="../assets/secrets.png" alt="secret img" height="250" /> <br />
+
+- **Purpose**: Learn how to secure sensitive information in your code.
+
+- **Content**: Best practices for managing secrets using `.env` files
+
+- **Overview**:
+    * [What's a secret?](SECRETS.md#whats-a-secret)
+    * [The Danger](SECRETS.md#the-danger)
+    * [Environment Variables](SECRETS.md#environment-variables)
+    * [Accessing the environment](SECRETS.md#accessing-the-environment)
+
+
+## [Getting Started with PythonAnywhere](PYTHONANYWHERE.md)
+
+<img src="../assets/pythonanywhere.jpeg" alt="Python Anywhere Logo" height="250"/> <br />
+
+- **Purpose**: Guide to hosting your Python application on PythonAnywhere.
+
+- **Content**: Step-by-step instructions for deploying a Flask or Django app on PythonAnywhere. Includes setting up an account, configuring the web app, and linking to GitHub for automated deployment.
+
+- **Overview**:
+    * [Getting Started with PythonAnywhere](PYTHONANYWHERE.md#getting-started-with-pythonanywhere)
+    * [What is PythonAnywhere?](PYTHONANYWHERE.md#what-is-pythonanywhere)
+    * [Why Use PythonAnywhere?](PYTHONANYWHERE.md#why-use-pythonanywhere)
+    * [Key Features](PYTHONANYWHERE.md#key-features)
+    * [How Does It Work?](PYTHONANYWHERE.md#how-does-it-work)
+    * [Deploying your Python Web App on PythonAnywhere](PYTHONANYWHERE.md#deploying-your-python-web-app-on-pythonanywhere)
+

Week 4: Deployment on PythonAnywhere/SECRETS.md

@@ -0,0 +1,87 @@
+# Working with Secrets in Python
+
+## What's a secret?
+
+First off, what is a secret in the context of developing web applications?
+
+A secret is just some kind of string value that you use in your app for some external service.
+
+<img src="../../assets/secret2.jpg" alt="drawing" height="350"/>
+
+### Examples
+1. Accessing a Databases :
+You want to connect to a database, which needs your code to have access to your db details
+
+2. Calling an API:
+You need your code to have acces to an `API key` for calling an API that requires one
+
+3. Project identification
+You may have to register your project with Google Cloud console or other similar platforms to use their services such as `OAuth`. Here they provide a `client ID` and `client secret`, which should not be revealed to anyone
+
+Basically any kind of value which you do not want to reveal to anyone, but need your code to have access to, is a `Secret`, and it's super important to handle secrets with care. They must be managed appropriately to avoid any breach.
+
+### The Danger
+Secrets can be leaked in many ways. The most common place secrets are leaked are in version control systems like Github.
+
+If secrets are leaked, it can lead to a loss of trust, credibility, and even business. In some cases, leaked secrets can also lead to legal action. 
+
+And noow you know, that's why it's so important to have a plan for managing secrets.
+
+In summary, **Never hardcode any secrets in your code!**
+
+
+## .env files: A method to managing secrets
+
+The `.env` file is used to store `environment variables` in Python. 
+
+### Environment variables?
+It's exactly what you think. Think of your python code as Monty Python. He is standing in a circus environment, a lot of things all over the place, but he can interact with them all.
+
+Point to be taken is:
+* Instead of carrying all his things on himself, he has an environment to keep his important things
+* He has access to the environment, and so he can interact with these things easily
+
+This is exactly the kind of thing we want to achieve, but with secrets. Create an environment and store all your secrets, then give access to this environment to your python code.
+
+Here, we use a `.env` file to act as an environment file.
+
+### Accessing the environment
+We will use Python's `python-dotenv` package for accessing the content of the `.env` file. 
+To get started, open up your Powershell/Terminal first, and install the package using the following command:
+```bash
+pip install python-dotenv
+```
+
+Create a .env file and paste your secrets as key-value pairs, for example:
+```env
+// Secrets for Google OAuth
+CLIENT_ID = xxxxxx
+CLIENT_SECRET=xxxxxx
+```
+
+And now an important disclaimer,
+
+**This file should not be committed to your git repo**
+
+To avoid this dangerous mistake, add a line into your `.gitignore`:
+```bash
+.env
+```
+We're now ready to roll!
+Use the following functions to load our secret values from the .env:
+
+```python
+from dotenv import load_dotenv
+import os
+
+load_dotenv()
+
+client_id = os.getenv("CLIENT_ID")
+client_secret = os.getenv("CLIENT_SECRET")
+
+print("CLIENT_ID: ", client_id )
+print("CLIENT_SECRET: ", client_secret)
+```
+
+And now you're all set to push to production!
+

docs/CNAME

@@ -1 +1 @@
-template_site.acmbpdc.org
+dev-foundations.acmbpdc.org