diff --git a/Makefile b/Makefile
index 0a403a4..6c3c018 100644
--- a/Makefile
+++ b/Makefile
@@ -1,6 +1,6 @@
 # Configuration, override port with usage: make PORT=4300
 PORT ?= 4200
-REPO_NAME ?= student
+REPO_NAME ?= EthanH3
 LOG_FILE = /tmp/jekyll$(PORT).log
 # Exceptions will stop make
 SHELL = /bin/bash
diff --git a/_data/compsci.yml b/_data/compsci.yml
index 624c41d..53f9cd9 100644
--- a/_data/compsci.yml
+++ b/_data/compsci.yml
@@ -9,3 +9,8 @@ Unit2:
   description: Learn (JavaScript|Python|Java).  Start Agile development process.
   start: 4
   end: 7
+Unit 3:
+  title: Lessons
+  description: Learn from Other Students
+  start: 8
+  end: 20
diff --git a/_notebooks/2024-01-17-User_Database_Intro.ipynb b/_notebooks/2024-01-17-User_Database_Intro.ipynb
new file mode 100644
index 0000000..f458d8f
--- /dev/null
+++ b/_notebooks/2024-01-17-User_Database_Intro.ipynb
@@ -0,0 +1,429 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "---\n",
+    "toc: true\n",
+    "comments: true\n",
+    "layout: notebook\n",
+    "title: Python/Flask User Database Introduction \n",
+    "description: Team Teach #2 \n",
+    "courses: { csp: {week: 6} }\n",
+    "type: hacks\n",
+    "---"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Database and SQLAlchemy\n",
+    "\n",
+    "This lesson is to help you build your database for your group passion project and set up a data table to store the log-in information of your users. \n",
+    "\n",
+    "Databases, Iterative/OOP\n",
+    "- Iterative: Refers to a sequence of instructions or code being repeated until a specific end result is achieved\n",
+    "- OOP: A computer programming model that organizes software design around data, or objects, rather than functions and logic\n",
+    "- SQL: Structured Query Language, abbreviated as SQL, is a language used in programming, managing, and structuring data\n",
+    "\n",
+    "**In order to build your log-in system using the following code, you will need to first download an extension: \"sqlite viewer\"**"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Imports and Flask Objects\n",
+    "\n",
+    "- definitions and key object creations\n",
+    "\n",
+    "This is how you set up your Flask server and create a database to connect to your backend repository. You should follow the code below step by step. This will create the Flask app object and the actual database object. \n",
+    "\n",
+    "Mr. Lopez might want you to put this code in a specific area on your backend."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "\"\"\"\n",
+    "These imports define the key objects\n",
+    "\"\"\"\n",
+    "\n",
+    "from flask import Flask\n",
+    "from flask_sqlalchemy import SQLAlchemy\n",
+    "\n",
+    "\"\"\"\n",
+    "These object and definitions are used throughout the Jupyter Notebook.\n",
+    "\"\"\"\n",
+    "\n",
+    "# Setup of key Flask object (app)\n",
+    "app = Flask(__name__)\n",
+    "# Setup SQLAlchemy object and properties for the database (db)\n",
+    "database = 'sqlite:///sqlite.db'  # path and filename of database\n",
+    "app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False\n",
+    "app.config['SQLALCHEMY_DATABASE_URI'] = database\n",
+    "app.config['SECRET_KEY'] = 'SECRET_KEY'\n",
+    "db = SQLAlchemy()\n",
+    "\n",
+    "\n",
+    "# This belongs in place where it runs once per project\n",
+    "db.init_app(app)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Model Definition\n",
+    "\n",
+    "- Define columns, initialization, and CRUD methods for users table in sqlite.db\n",
+    "\n",
+    "This is the model code, or the actual code that will initialize your data table and assign properties to your columns. This table will store the data users input when building thier log-ins to your site. "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "\"\"\" database dependencies to support sqlite examples \"\"\"\n",
+    "import datetime\n",
+    "from datetime import datetime\n",
+    "import json\n",
+    "\n",
+    "from sqlalchemy.exc import IntegrityError\n",
+    "from werkzeug.security import generate_password_hash, check_password_hash\n",
+    "\n",
+    "\n",
+    "''' Tutorial: https://www.sqlalchemy.org/library.html#tutorials, try to get into a Python shell and follow along '''\n",
+    "\n",
+    "# Define the User class to manage actions in the 'users' table\n",
+    "# -- Object Relational Mapping (ORM) is the key concept of SQLAlchemy\n",
+    "# -- a.) db.Model is like an inner layer of the onion in ORM\n",
+    "# -- b.) User represents data we want to store, something that is built on db.Model\n",
+    "# -- c.) SQLAlchemy ORM is layer on top of SQLAlchemy Core, then SQLAlchemy engine, SQL\n",
+    "class User(db.Model):\n",
+    "    __tablename__ = 'users'  # table name is plural, class name is singular\n",
+    "\n",
+    "    # Define the User schema with \"vars\" from object\n",
+    "    id = db.Column(db.Integer, primary_key=True)\n",
+    "    _name = db.Column(db.String(255), unique=False, nullable=False)\n",
+    "    _uid = db.Column(db.String(255), unique=True, nullable=False)\n",
+    "    _password = db.Column(db.String(255), unique=False, nullable=False)\n",
+    "    _dob = db.Column(db.Date)\n",
+    "\n",
+    "    # constructor of a User object, initializes the instance variables within object (self)\n",
+    "    def __init__(self, name, uid, password=\"123qwerty\", dob=datetime.today()):\n",
+    "        self._name = name    # variables with self prefix become part of the object, \n",
+    "        self._uid = uid\n",
+    "        self.set_password(password)\n",
+    "        if isinstance(dob, str):  # not a date type     \n",
+    "            dob = date=datetime.today()\n",
+    "        self._dob = dob\n",
+    "\n",
+    "    # a name getter method, extracts name from object\n",
+    "    @property\n",
+    "    def name(self):\n",
+    "        return self._name\n",
+    "    \n",
+    "    # a setter function, allows name to be updated after initial object creation\n",
+    "    @name.setter\n",
+    "    def name(self, name):\n",
+    "        self._name = name\n",
+    "    \n",
+    "    # a getter method, extracts uid from object\n",
+    "    @property\n",
+    "    def uid(self):\n",
+    "        return self._uid\n",
+    "    \n",
+    "    # a setter function, allows uid to be updated after initial object creation\n",
+    "    @uid.setter\n",
+    "    def uid(self, uid):\n",
+    "        self._uid = uid\n",
+    "        \n",
+    "    # check if uid parameter matches user id in object, return boolean\n",
+    "    def is_uid(self, uid):\n",
+    "        return self._uid == uid\n",
+    "    \n",
+    "    @property\n",
+    "    def password(self):\n",
+    "        return self._password[0:10] + \"...\" # because of security only show 1st characters\n",
+    "\n",
+    "    # update password, this is conventional method used for setter\n",
+    "    def set_password(self, password):\n",
+    "        \"\"\"Create a hashed password.\"\"\"\n",
+    "        self._password = generate_password_hash(password, method='sha256')\n",
+    "\n",
+    "    # check password parameter against stored/encrypted password\n",
+    "    def is_password(self, password):\n",
+    "        \"\"\"Check against hashed password.\"\"\"\n",
+    "        result = check_password_hash(self._password, password)\n",
+    "        return result\n",
+    "    \n",
+    "    # dob property is returned as string, a string represents date outside object\n",
+    "    @property\n",
+    "    def dob(self):\n",
+    "        dob_string = self._dob.strftime('%m-%d-%Y')\n",
+    "        return dob_string\n",
+    "    \n",
+    "    # dob setter, verifies date type before it is set or default to today\n",
+    "    @dob.setter\n",
+    "    def dob(self, dob):\n",
+    "        if isinstance(dob, str):  # not a date type     \n",
+    "            dob = date=datetime.today()\n",
+    "        self._dob = dob\n",
+    "    \n",
+    "    # age is calculated field, age is returned according to date of birth\n",
+    "    @property\n",
+    "    def age(self):\n",
+    "        today = datetime.today()\n",
+    "        return today.year - self._dob.year - ((today.month, today.day) < (self._dob.month, self._dob.day))\n",
+    "    \n",
+    "    # output content using str(object) is in human readable form\n",
+    "    # output content using json dumps, this is ready for API response\n",
+    "    def __str__(self):\n",
+    "        return json.dumps(self.read())\n",
+    "\n",
+    "    # CRUD create/add a new record to the table\n",
+    "    # returns self or None on error\n",
+    "    def create(self):\n",
+    "        try:\n",
+    "            # creates a person object from User(db.Model) class, passes initializers\n",
+    "            db.session.add(self)  # add prepares to persist person object to Users table\n",
+    "            db.session.commit()  # SqlAlchemy \"unit of work pattern\" requires a manual commit\n",
+    "            return self\n",
+    "        except IntegrityError:\n",
+    "            db.session.remove()\n",
+    "            return None\n",
+    "\n",
+    "    # CRUD read converts self to dictionary\n",
+    "    # returns dictionary\n",
+    "    def read(self):\n",
+    "        return {\n",
+    "            \"id\": self.id,\n",
+    "            \"name\": self.name,\n",
+    "            \"uid\": self.uid,\n",
+    "            \"dob\": self.dob,\n",
+    "            \"age\": self.age,\n",
+    "        }\n",
+    "\n",
+    "    # CRUD update: updates user name, password, phone\n",
+    "    # returns self\n",
+    "    def update(self, name=\"\", uid=\"\", password=\"\"):\n",
+    "        \"\"\"only updates values with length\"\"\"\n",
+    "        if len(name) > 0:\n",
+    "            self.name = name\n",
+    "        if len(uid) > 0:\n",
+    "            self.uid = uid\n",
+    "        if len(password) > 0:\n",
+    "            self.set_password(password)\n",
+    "        db.session.add(self) # performs update when id exists\n",
+    "        db.session.commit()\n",
+    "        return self\n",
+    "\n",
+    "    # CRUD delete: remove self\n",
+    "    # None\n",
+    "    def delete(self):\n",
+    "        db.session.delete(self)\n",
+    "        db.session.commit()\n",
+    "        return None"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Initial Data \n",
+    "\n",
+    "- Uses SQLALchemy db.create_all() to initialize rows into sqlite.db\n",
+    "\n",
+    "This is for when you start running your flask server. It creates initial data in your database for testing. "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "\"\"\"Database Creation and Testing \"\"\"\n",
+    "\n",
+    "\n",
+    "# Builds working data for testing\n",
+    "def initUsers():\n",
+    "    with app.app_context():\n",
+    "        \"\"\"Create database and tables\"\"\"\n",
+    "        db.create_all()\n",
+    "        \"\"\"Tester data for table\"\"\"\n",
+    "        u1 = User(name='Thomas Edison', uid='toby', password='123toby', dob=datetime(1847, 2, 11))\n",
+    "        u2 = User(name='Nikola Tesla', uid='niko', password='123niko')\n",
+    "        u3 = User(name='Alexander Graham Bell', uid='lex', password='123lex')\n",
+    "        u4 = User(name='Eli Whitney', uid='whit', password='123whit')\n",
+    "        u5 = User(name='Indiana Jones', uid='indi', dob=datetime(1920, 10, 21))\n",
+    "        u6 = User(name='Marion Ravenwood', uid='raven', dob=datetime(1921, 10, 21))\n",
+    "\n",
+    "\n",
+    "        users = [u1, u2, u3, u4, u5, u6]\n",
+    "\n",
+    "        \"\"\"Builds sample user/note(s) data\"\"\"\n",
+    "        for user in users:\n",
+    "            try:\n",
+    "                '''add user to table'''\n",
+    "                object = user.create()\n",
+    "                print(f\"Created new uid {object.uid}\")\n",
+    "            except:  # error raised if object nit created\n",
+    "                '''fails with bad or duplicate data'''\n",
+    "                print(f\"Records exist uid {user.uid}, or error.\")\n",
+    "                \n",
+    "initUsers()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Check for given Credentials in users table in sqlite.db\n",
+    "\n",
+    "- Use of ORM Query object and custom methods to identify user to credentials uid and password\n",
+    "\n",
+    "This code allows you to search through your database to find individual users. This can be used to check if the username and password matches what the user inputted in the database. \n",
+    "\n",
+    "The first block of code uses SQRAlchemy's ORM capabilities to filter and retrieve a user based on their UID. The UID serves as the primary key for the 'users' table in the database.\n",
+    "\n",
+    "The second block of code is focused on user authentication. It first checks if a user matching the given UID exists, then verifies if the password entered matches the stored password for that user. \n",
+    "\n",
+    "\"sqlite.db\" is the name of your file"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# SQLAlchemy extracts single user from database matching User ID\n",
+    "def find_by_uid(uid):\n",
+    "    with app.app_context():\n",
+    "        user = User.query.filter_by(_uid=uid).first()\n",
+    "    return user # returns user object\n",
+    "\n",
+    "# Check credentials by finding user and verify password\n",
+    "def check_credentials(uid, password):\n",
+    "    # query email and return user record\n",
+    "    user = find_by_uid(uid)\n",
+    "    if user == None:\n",
+    "        return False\n",
+    "    if (user.is_password(password)):\n",
+    "        return True\n",
+    "    return False\n",
+    "        \n",
+    "#check_credentials(\"indi\", \"123qwerty\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Create a new User in table in Sqlite.db\n",
+    "\n",
+    "- Uses SQLALchemy and custom user.create() method to add row.\n",
+    "\n",
+    "This is to allow a user to register an account on your site and make it so that their information goes straight to your data table when they do so. "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Inputs, Try/Except, and SQLAlchemy work together to build a valid database object\n",
+    "def create():\n",
+    "    # optimize user time to see if uid exists\n",
+    "    uid = input(\"Enter your user id:\")\n",
+    "    user = find_by_uid(uid)\n",
+    "    try:\n",
+    "        print(\"Found\\n\", user.read())\n",
+    "        return\n",
+    "    except:\n",
+    "        pass # keep going\n",
+    "    \n",
+    "    # request value that ensure creating valid object\n",
+    "    name = input(\"Enter your name:\")\n",
+    "    password = input(\"Enter your password\")\n",
+    "    \n",
+    "    # Initialize User object before date\n",
+    "    user = User(name=name, \n",
+    "                uid=uid, \n",
+    "                password=password\n",
+    "                )\n",
+    "    \n",
+    "    # create user.dob, fail with today as dob\n",
+    "    dob = input(\"Enter your date of birth 'YYYY-MM-DD'\")\n",
+    "    try:\n",
+    "        user.dob = datetime.strptime(dob, '%Y-%m-%d').date()\n",
+    "    except ValueError:\n",
+    "        user.dob = datetime.today()\n",
+    "        print(f\"Invalid date {dob} require YYYY-mm-dd, date defaulted to {user.dob}\")\n",
+    "           \n",
+    "    # write object to database\n",
+    "    with app.app_context():\n",
+    "        try:\n",
+    "            object = user.create()\n",
+    "            print(\"Created\\n\", object.read())\n",
+    "        except:  # error raised if object not created\n",
+    "            print(\"Unknown error uid {uid}\")\n",
+    "        \n",
+    "create()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Reading users table in sqlite.db\n",
+    "\n",
+    "- Uses SQLALchemy query.all method to read data\n",
+    "\n",
+    "This allows the computer to read all the data in your data table at once. You could use this function if you needed to print out all your data information, for example. It is also more efficient to upload all your data from the backend to frontend at once versus uploading each user's information individually, and this function allows you to do that.\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# SQLAlchemy extracts all users from database, turns each user into JSON\n",
+    "def read():\n",
+    "    with app.app_context():\n",
+    "        table = User.query.all()\n",
+    "    json_ready = [user.read() for user in table] # \"List Comprehensions\", for each user add user.read() to list\n",
+    "    return json_ready\n",
+    "\n",
+    "read()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "IMPORTANT NOTE: Note, as people look for Python databases on the web they will often run into imperative style implementation versus OOP style. This is provided for reference, but it is not recommended as the primary implementation for this class."
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python"
+  },
+  "orig_nbformat": 4
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/_notebooks/2024-1-15-SASS_Student_Lesson.ipynb b/_notebooks/2024-1-15-SASS_Student_Lesson.ipynb
new file mode 100644
index 0000000..6949a1c
--- /dev/null
+++ b/_notebooks/2024-1-15-SASS_Student_Lesson.ipynb
@@ -0,0 +1,773 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "---\n",
+    "toc: true\n",
+    "comments: false\n",
+    "layout: post\n",
+    "title: Introduction to SASS\n",
+    "description: SASS Student Lesson\n",
+    "type: tangibles \n",
+    "courses: { compsci: {week: 19} }\n",
+    "image: images/1024px-Sass_Logo_Color.svg.png\n",
+    "---"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<h2> SASS: Syntactically Awesome Stylesheets</h2><br>"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<center><img src= \"https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Sass_Logo_Color.svg/1024px-Sass_Logo_Color.svg.png\" width =\"200\" height = \"100\"></center>"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<br>\n",
+    "\n",
+    "<h2>What is SASS?</h2>\n",
+    "\n",
+    "SASS is a preprocessor scripting language that is interpreted or compiled into CSS. Any preprocessor language takes input data and converts it to an output that’s used as input by another program. In other words when you run a SASS code you are actually converting your code into CSS which is then used by the browser. "
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<h2>Understanding differences: CSS V/S SASS</h2>\n",
+    "\n",
+    "- CSS: Cascading style sheets or CSS is the standard styling language for the web which provides a simple and direct syntax for styling HTML elements.\n",
+    "\n",
+    "- However , it lacks certain features found in preprocessors like Sass, making it less understandable and difficult to work with."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "html"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "// Basic CSS Code\n",
+    "\n",
+    "body {\n",
+    "  font-family: Arial, sans-serif;\n",
+    "  background-color: #f0f0f0;\n",
+    "}\n",
+    "\n",
+    "header {\n",
+    "  background-color: #333;\n",
+    "  color: white;\n",
+    "  padding: 10px;\n",
+    "}"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "- SASS: SASS is a powerful preprocessor scripting language that enhances CSS with advanced features. Sass enhances the capabilities of CSS by introducing variables, nesting, and mixins. \n",
+    "- Sass code needs to be compiled into standard CSS for browsers to interpret and this provides a more efficient way to style pages.\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "html"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "// Basic SASS Code\n",
+    "\n",
+    "$font-family: Arial, sans-serif;\n",
+    "$background-color: #f0f0f0;\n",
+    "$main-color: #333;\n",
+    "$link-color: #444;\n",
+    "$border-color: #ddd;\n",
+    "\n",
+    "body {\n",
+    "  font-family: $font-family;\n",
+    "  background-color: $background-color;\n",
+    "}\n",
+    "\n",
+    "header {\n",
+    "  background-color: $main-color;\n",
+    "  color: white;\n",
+    "  padding: 10px;\n",
+    "}"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### <font color = \"Green\">Popcorn Hack 1:</font> \n",
+    "\n",
+    "Write a line of code to compare CSS and SASS. Must be similar is both languages. Show how SASS and CSS are similar but different.\n",
+    "\n",
+    "<mark>// Your code here</mark>\n",
+    "\n",
+    "body {\n",
+    "  font-family: Comic-Sans, sans-serif;\n",
+    "  background-color: #f000000;\n",
+    "}\n",
+    "\n",
+    "header {\n",
+    "  background-color: #777;\n",
+    "  color: Black;\n",
+    "}\n",
+    "\n",
+    "----------------------------------------------------\n",
+    "\n",
+    "$font-family: Comic-Sans, sans-serif;\n",
+    "$background-color: #000000;\n",
+    "$main-color: #777;\n",
+    "$link-color: #444;\n",
+    "\n",
+    "body  {\n",
+    "  font-family: $font-family;\n",
+    "  background-color: $background-color;\n",
+    "}\n",
+    "\n",
+    "\n",
+    "header {\n",
+    "  background-color: $main-color;\n",
+    "  color: Black;\n",
+    "}"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<h2>Benifits of SASS over CSS</h2>\n",
+    "\n",
+    "1. Improved Code Organization\n",
+    "\n",
+    "     - Nesting Capabilities:  Sass organizes styles like a neat notebook, mirroring HTML structure for clarity.\n",
+    "     - Modular Approach: Break styles into smaller files, like building blocks, for a cleaner and more organized project.\n",
+    "\n",
+    "2. Maintainability\n",
+    "\n",
+    "     - Use of Variables: Easily update colors and fonts with name-tag-like variables.\n",
+    "     - Mixins for Reusable Code: Create styles once, reuse them everywhere.\n",
+    "     - Extend/Inheritance: Share styles among elements to avoid repetition.\n",
+    "\n",
+    "3. Advanced Features\n",
+    "\n",
+    "     - Control Directives: Add conditions to styles for more flexibility.\n",
+    "     - Built-in Functions: Use Sass tools for colors and math in styles.    \n",
+    "     - Compatibility: Sass handles browser differences, ensuring a consistent look across all browsers.\n",
+    "\n",
+    "4. Preprocessing:\n",
+    "\n",
+    "     - Compilation: Translate Sass to standard CSS for browsers.\n",
+    "     - Usage: Command Sass to compile styles effortlessly.\n",
+    "     - Watching Files: Sass auto-updates styles as you make changes, simplifying the process."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<h2>Nesting</h2>"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<center><img src = \"https://www.lyricbirdfood.com/media/1059/gettyimages-502665425.jpg?crop=0.43408360128617363,0.23585711414790997,0.083601286173633438,0.38690356568672479&cropmode=percentage&width=700&height=365&rnd=132084484540000000\" width =\"300\" height= \"150\"></center>"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "No, not that type of nesting\n",
+    "\n",
+    "-<mark> Nesting:</mark> Nesting in coding, especially in stylesheets like SASS, is a way of organizing code by putting one selector inside another. Sort of a hirarchy in structure."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "html"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "// Nesting example\n",
+    "\n",
+    "article {\n",
+    "  border: 1px solid #ccc;\n",
+    "\n",
+    "  h2 {\n",
+    "    font-size: 20px;\n",
+    "    color: #555;\n",
+    "  }\n",
+    "\n",
+    "  p {\n",
+    "    font-size: 16px;\n",
+    "    color: #333;\n",
+    "    margin-bottom: 10px;\n",
+    "  }\n",
+    "\n",
+    "  a {\n",
+    "    text-decoration: underline;\n",
+    "    color: #007bff;\n",
+    "  }\n",
+    "}"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<h2>Advanced SASS</h2>"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "1. Operators\n",
+    "    - Operators act as powerful tools in Python and SASS, allowing you to perform operations like checking equality, basic arithmetic (addition, subtraction, multiplication, and division), and in SASS, combining and rearranging values. They're like the building blocks that help you manipulate and transform data in your code, making it flexible and dynamic. "
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "**Operators Reference Table**\n",
+    "\n",
+    "<center>\n",
+    "\n",
+    "<table>\n",
+    "  <tr>\n",
+    "    <th>Operator</th>\n",
+    "    <th>Definition</th>\n",
+    "  </tr>\n",
+    "  <tr>\n",
+    "    <td>==</td>\n",
+    "    <td>Check if two values are equal</td>\n",
+    "  </tr>\n",
+    "  <tr>\n",
+    "    <td>!=</td>\n",
+    "    <td>Check if two values are not equal</td>\n",
+    "  </tr>\n",
+    "  <tr>\n",
+    "    <td>+</td>\n",
+    "    <td>Add two values together</td>\n",
+    "  </tr>\n",
+    "  <tr>\n",
+    "    <td>-</td>\n",
+    "    <td>Subtract two values</td>\n",
+    "  </tr>\n",
+    "  <tr>\n",
+    "    <td>*</td>\n",
+    "    <td>Multiply two values</td>\n",
+    "  </tr>\n",
+    "  <tr>\n",
+    "    <td>/</td>\n",
+    "    <td>Divide two values</td>\n",
+    "  </tr>\n",
+    "  <tr>\n",
+    "    <td>%</td>\n",
+    "    <td>Find the remainder of two values</td>\n",
+    "  </tr>\n",
+    "  <tr>\n",
+    "    <td>&lt;</td>\n",
+    "    <td>Check if one value is less than another</td>\n",
+    "  </tr>\n",
+    "  <tr>\n",
+    "    <td>&gt;</td>\n",
+    "    <td>Check if one value is greater than another</td>\n",
+    "  </tr>\n",
+    "  <tr>\n",
+    "    <td>&lt;=</td>\n",
+    "    <td>Check if one value is less than or equal to another</td>\n",
+    "  </tr>\n",
+    "  <tr>\n",
+    "    <td>&gt;=</td>\n",
+    "    <td>Check if one value is greater than or equal to another</td>\n",
+    "  </tr>\n",
+    "</table>\n",
+    "\n",
+    "</center>\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "html"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "// Variables\n",
+    "$firstName: \"John\";\n",
+    "$lastName: \"Doe\";\n",
+    "\n",
+    "// String concatenation using whitespace\n",
+    "$fullName: $firstName + \" \" + $lastName;\n",
+    "\n",
+    "#testing {\n",
+    "  content: $fullName;\n",
+    "}"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "**Intended Answer:**\n",
+    "content: John Doe\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "2. Conditional Statments:\n",
+    "    - Conditional statements in SASS work and function the same way they do in Python and Javascript. Conditional statements are used to perform different actions based on different conditions."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "html"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "// example code\n",
+    "\n",
+    "$grade: 85;\n",
+    "\n",
+    ".button {\n",
+    "  @if $grade >= 90 {\n",
+    "    background-color: green;\n",
+    "    color: white;\n",
+    "    border: 2px solid darkgreen;\n",
+    "  } @else if $grade >= 80 {\n",
+    "    background-color: yellow;\n",
+    "    color: darkgray;\n",
+    "    border: 2px solid goldenrod;\n",
+    "  } @else {\n",
+    "    background-color: red;\n",
+    "    color: white;\n",
+    "    border: 2px solid darkred;\n",
+    "  }\n",
+    "}"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### <font color = \"Green\">Popcorn Hack 2:</font> \n",
+    "\n",
+    "Write a simple SASS code to highlight a message box according to it's result, green for success, yellow for warning and red for an error. Use the variable \"$message-type\". Make sure to use @if, @else and @else if statements.\n",
+    "\n",
+    "<mark>.message-box {\n",
+    "  padding: 10px;\n",
+    "  border: 1px solid #ccc;\n",
+    "  \n",
+    "  @if $message-type == \"success\" {\n",
+    "    background-color: green;\n",
+    "    color: white;\n",
+    "  } @else if $message-type == \"warning\" {\n",
+    "    background-color: yellow;\n",
+    "    color: #333;\n",
+    "  } @else if $message-type == \"error\" {\n",
+    "    background-color: red;\n",
+    "    color: white;\n",
+    "  } @else \n",
+    "  $message-type: \"success\"; {\n",
+    "    \n",
+    "}</mark>\n",
+    "\n",
+    "\n",
+    "\n",
+    "\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "3. Loops in SASS\n",
+    "    - In SASS, loops are facilitated by the <mark>@for, @while, and @each decorators</mark>. Similar to other programming languages, loops enable the repetition of a code block either for a specified number of iterations or until a particular condition is satisfied. \n",
+    "        - For loops are iterate through a given value, like a list or a range of numbers.\n",
+    "        - While loops iterate through a block of code until a specific condition is met"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "html"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "// Example code\n",
+    "\n",
+    "$alignments: left, center, right;\n",
+    "\n",
+    "@each $alignment in $alignments {\n",
+    "  .text-#{$alignment} {\n",
+    "    text-align: $alignment;\n",
+    "  }\n",
+    "}"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "html"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "// Expected output\n",
+    "\n",
+    ".text-left {\n",
+    "    text-align: left;\n",
+    "  }\n",
+    "  \n",
+    "  .text-center {\n",
+    "    text-align: center;\n",
+    "  }\n",
+    "  \n",
+    "  .text-right {\n",
+    "    text-align: right;\n",
+    "  }"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### <font color = \"Green\">Popcorn Hack 3:</font> \n",
+    "\n",
+    "Write a simple SASS code that defines three different font sizes, which iterates over the same line distance of 1.5.\n",
+    "\n",
+    "<mark>\n",
+    "$base-font-size: 16px;\n",
+    "\n",
+    "\n",
+    "$font-size-1: $base-font-size;\n",
+    "$font-size-2: $font-size-1 * 1.5;\n",
+    "$font-size-3: $font-size-2 * 1.5;\n",
+    "\n",
+    "body {\n",
+    "  font-size: $font-size-1;\n",
+    "}\n",
+    "\n",
+    "h1 {\n",
+    "  font-size: $font-size-2;\n",
+    "}\n",
+    "\n",
+    "p {\n",
+    "  font-size: $font-size-3;\n",
+    "}\n",
+    "</mark>"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<h2>SASS Functions</h2>"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Last but not the least SASS functions. \n",
+    "\n",
+    "- SASS functions are invalvuable tools in stylesheets. They help perform complex calcualtions and manipulate data as well as generate content dynamically. Some functions are built in but there are also a few that you can make on your own. \n",
+    "- They can be used to perform arithmetic operations, manipulate colors, work with strings, and more.\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "**Built in Functions**"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "1. Math Functions\n",
+    "    - SASS has a range of functions that help perform complex math problems in code\n",
+    "\n",
+    "2. Color Functions\n",
+    "    - Functions allow you to manipulate colors in different ways\n",
+    "\n",
+    "3. String Functions\n",
+    "    - SASS provides a variety of string functions that allow you to manipulate strings."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "**Creating Custom Functions**\n",
+    "\n",
+    "In addition to built in functions one can also create custom functions with pre exisiting operators and the @return function.\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "html"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "// Example of a complete SASS Code from CSS of Previous CPT Project\n",
+    "\n",
+    "$main-bg-color: #8ec1da;\n",
+    "$card-bg-color: rgba(128, 128, 128, 0.5);\n",
+    "$button-bg-color: rgba(38, 152, 255, 0.5);\n",
+    "$button-hover-bg-color: rgba(38, 152, 255, 0.3) !important;\n",
+    "$font-family: Verdana, sans-serif;\n",
+    "$button-size: 10%;\n",
+    "$box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n",
+    "\n",
+    "body {\n",
+    "  width: 100%;\n",
+    "  height: 100%;\n",
+    "  margin: 0em 0%;\n",
+    "  background-color: $main-bg-color;\n",
+    "  background-image: url(\"https://static.vecteezy.com/system/resources/previews/016/124/733/non_2x/poker-and-casino-playing-card-black-background-vector.jpg\");\n",
+    "  background-position: center bottom;\n",
+    "}\n",
+    "\n",
+    ".title, .playercardsbox, .dealercardsbox, .result, .hitbutton, .standbutton, .resetbutton, .playersumbox, .dealersumbox {\n",
+    "  position: fixed;\n",
+    "  transform: translate(-50%, -50%);\n",
+    "  font-family: $font-family;\n",
+    "}\n",
+    "\n",
+    ".playercardsbox, .dealercardsbox, .playersumbox, .dealersumbox {\n",
+    "  background-color: $card-bg-color;\n",
+    "  padding: 20px;\n",
+    "  border-radius: 10px;\n",
+    "  box-shadow: $box-shadow;\n",
+    "  font-size: 30px;\n",
+    "}\n",
+    "\n",
+    ".result {\n",
+    "  top: 34%;\n",
+    "  font-size: 150px;\n",
+    "  color: red;\n",
+    "  display: none;\n",
+    "}\n",
+    "\n",
+    ".hitbutton, .standbutton, .resetbutton {\n",
+    "  left: 50%;\n",
+    "  background-color: $button-bg-color;\n",
+    "  border: none;\n",
+    "  width: $button-size;\n",
+    "  height: $button-size;\n",
+    "  border-radius: 10px;\n",
+    "  font-size: 30px;\n",
+    "}\n",
+    "\n",
+    ".hitbutton:hover, .standbutton:hover, .resetbutton:hover {\n",
+    "  background-color: $button-hover-bg-color;\n",
+    "}\n",
+    "\n",
+    ".standbutton { top: 72%; }\n",
+    ".hitbutton { top: 60%; }\n",
+    ".resetbutton { top: 84%; display: block; }"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<h2>How does HTML code use SASS??</h2>"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "In HTML, you don't directly use Sass; instead, you use the compiled CSS generated from Sass. "
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<h4>Steps to use predefined SASS</h4>"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "1. Intall SASS: Before you use SASS you need to install it."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "html"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "npm install -g sass"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "2. Create SASS file: write you SASS file code and be sure to give it the extension of \".scss\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "html"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "// Example sass\n",
+    "\n",
+    "$primary-color: #3498db;\n",
+    "\n",
+    "body {\n",
+    "  background-color: $primary-color;\n",
+    "}\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "3. Compile SASS into CSS: Use installed SASS compiled to convert the .scss file into a .css file."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "html"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "sass input.scss output.css"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "4. Linked compiled CSS into the HTML/JS project code"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "html"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "<html>\n",
+    "<head>\n",
+    "  <!--Meta data here -->\n",
+    "\n",
+    "  <link rel=\"stylesheet\" href=\"output.css\">\n",
+    "\n",
+    "  <title>Project Page</title>\n",
+    "</head>\n",
+    "<body>\n",
+    " <!--HTML stuff-->\n",
+    "</body>\n",
+    "</html>"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### <font color = \"Green\">Pop Corn Hack: 4</font> \n",
+    "\n",
+    "1. Using the steps above, create am SCSS file with SASS code for a simple button, convert the file to a .css and link it into a new HTML file. The final output needs to be a button with a color of your choice.\n",
+    "\n",
+    "<mark>// Your code here</mark>"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.6"
+  },
+  "orig_nbformat": 4
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/assets/css/NEWSTYLE.scss b/assets/css/NEWSTYLE.scss
new file mode 100644
index 0000000..29ef6af
--- /dev/null
+++ b/assets/css/NEWSTYLE.scss
@@ -0,0 +1,21 @@
+
+$primary-color: #3498db;
+
+body {
+  background-color: $primary-color;
+}
+sass input.scss output.css
+
+<html>
+
+<head>
+  <!--Meta data here -->
+
+  <link rel="stylesheet" href="output.css">
+
+  <title>Project Page</title>
+</head>
+<body>
+ <!--HTML stuff-->
+</body>
+</html>
\ No newline at end of file
diff --git a/compsci.md b/compsci.md
index a8e2fce..c64f2c5 100644
--- a/compsci.md
+++ b/compsci.md
@@ -1,6 +1,6 @@
 ---
 layout: schedule
 title: Computer Science Lab Notebook
-units: "1,2"
+units: "1,2,3,4,5"
 course: compsci
 ---