diff --git a/.eslintrc.json b/.eslintrc.json index 84453b5..36a6c42 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -38,5 +38,13 @@ } ] }, - "ignorePatterns": "src/**/*.d.ts" + "ignorePatterns": "src/**/*.d.ts", + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "no-undef": "off" + } + } + ] } diff --git a/README.md b/README.md index baa6b3a..73fc749 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,18 @@ -# Nextra Docs +# ACM Hack Website -This is a template for creating documentation with [Nextra](https://nextra.site). +**Check it out @ [hack.acmucsd.com](https://hack.acmucsd.com)!** +Welcome to ACM Hack's main website! This website serves as an introduction to the Hack community, and provides information about our upcoming events and resources. It's also the primary host of our Hack School curriculum, which is a series of workshops designed to teach students the fundamentals of full-stack development and software engineering. -[**Live Demo (https://hack-website-acmucsd.vercel.app/)**](https://hack-website-acmucsd.vercel.app/) +The content on this website is accessible to anyone, regardless of acceptance to Hack School. Feel free to use this for ACM Projects, personal projects, or just to learn something new! -## Local Development +This project was bootstrapped with [Nextra](https://nextra.site) and deployed with [Vercel](https://vercel.com). -Prerequisites +## Contributing + +We welcome any contributions from the ACM community! If you have ideas for new content to add, feel free to contact us in the [ACM Discord](https://acmurl.com/discord) or [ACM Hack Discord](https://acmurl.com/hack-discord) by pinging the `@Hack` role, or directly opening up a pull request. If you notice any content errors or have suggestions for improvements, feel free to raise an issue on our repository. Make sure to follow the instructions below to set up your local environment for development. + +Prerequisites: - Node v16.14.0 or higher - Yarn diff --git a/components/counters.module.css b/components/counters.module.css deleted file mode 100644 index 4a5d0c8..0000000 --- a/components/counters.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.counter { - border: 1px solid #ccc; - border-radius: 5px; - padding: 2px 6px; - margin: 12px 0 0; -} diff --git a/components/counters.tsx b/components/counters.tsx deleted file mode 100644 index 09af151..0000000 --- a/components/counters.tsx +++ /dev/null @@ -1,24 +0,0 @@ -// Example from https://beta.reactjs.org/learn - -import { useState } from 'react'; -import styles from './counters.module.css'; - -function MyButton() { - const [count, setCount] = useState(0); - - function handleClick() { - setCount(count + 1); - } - - return ( -
- -
- ); -} - -export default function MyApp() { - return ; -} diff --git a/package.json b/package.json index 808bcd4..6027de0 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,8 @@ "nextra": "latest", "nextra-theme-docs": "latest", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-icons": "^4.11.0" }, "devDependencies": { "@types/node": "18.11.10", @@ -40,4 +41,4 @@ "prettier": "^3.0.0", "typescript": "^4.9.3" } -} \ No newline at end of file +} diff --git a/pages/_meta.json b/pages/_meta.json index 33d582f..14a4f57 100644 --- a/pages/_meta.json +++ b/pages/_meta.json @@ -1,4 +1,13 @@ { - "index": "ACM Hack", - "hack-school": "Hack School" + "index": { + "title": "ACM Hack", + "type": "page", + "theme": { + "layout": "raw" + } + }, + "hack-school": { + "title": "Hack School", + "type": "page" + } } \ No newline at end of file diff --git a/pages/hack-school/HTML_images/dropdown-menu-closed.png b/pages/hack-school/HTML_images/dropdown-menu-closed.png new file mode 100644 index 0000000..5d54c3d Binary files /dev/null and b/pages/hack-school/HTML_images/dropdown-menu-closed.png differ diff --git a/pages/hack-school/HTML_images/dropdown-menu-opened.png b/pages/hack-school/HTML_images/dropdown-menu-opened.png new file mode 100644 index 0000000..b9a13b4 Binary files /dev/null and b/pages/hack-school/HTML_images/dropdown-menu-opened.png differ diff --git a/pages/hack-school/HTML_images/footer.png b/pages/hack-school/HTML_images/footer.png new file mode 100644 index 0000000..d0109ff Binary files /dev/null and b/pages/hack-school/HTML_images/footer.png differ diff --git a/pages/hack-school/HTML_images/in-line-style.png b/pages/hack-school/HTML_images/in-line-style.png new file mode 100644 index 0000000..bdb4e66 Binary files /dev/null and b/pages/hack-school/HTML_images/in-line-style.png differ diff --git a/pages/hack-school/HTML_images/latex.png b/pages/hack-school/HTML_images/latex.png new file mode 100644 index 0000000..e3833f4 Binary files /dev/null and b/pages/hack-school/HTML_images/latex.png differ diff --git a/pages/hack-school/HTML_images/ojew.jpg b/pages/hack-school/HTML_images/ojew.jpg new file mode 100644 index 0000000..2c4a94c Binary files /dev/null and b/pages/hack-school/HTML_images/ojew.jpg differ diff --git a/pages/hack-school/HTML_images/ordered-list.png b/pages/hack-school/HTML_images/ordered-list.png new file mode 100644 index 0000000..9cbe66a Binary files /dev/null and b/pages/hack-school/HTML_images/ordered-list.png differ diff --git a/pages/hack-school/HTML_images/tables_example1.png b/pages/hack-school/HTML_images/tables_example1.png new file mode 100644 index 0000000..7523c53 Binary files /dev/null and b/pages/hack-school/HTML_images/tables_example1.png differ diff --git a/pages/hack-school/HTML_images/tables_example2.png b/pages/hack-school/HTML_images/tables_example2.png new file mode 100644 index 0000000..d18d94a Binary files /dev/null and b/pages/hack-school/HTML_images/tables_example2.png differ diff --git a/pages/hack-school/HTML_images/text-formatting-example.png b/pages/hack-school/HTML_images/text-formatting-example.png new file mode 100644 index 0000000..8cbbcb8 Binary files /dev/null and b/pages/hack-school/HTML_images/text-formatting-example.png differ diff --git a/pages/hack-school/HTML_images/unordered-list.png b/pages/hack-school/HTML_images/unordered-list.png new file mode 100644 index 0000000..a3817a0 Binary files /dev/null and b/pages/hack-school/HTML_images/unordered-list.png differ diff --git a/pages/hack-school/_meta.json b/pages/hack-school/_meta.json index 4716f43..877c238 100644 --- a/pages/hack-school/_meta.json +++ b/pages/hack-school/_meta.json @@ -1,7 +1,9 @@ { "index": "Welcome to ACM Hack School!", "logistics": "Hack School Logistics", - "css": "Week 1: HTML & CSS", - "js": "Week 2: JavaScript", + "git-github": "Git/GitHub", + "html": "Week 1: HTML", + "css": "Week 1: CSS", + "js": "Week 2: JavaScript" "react": "Week 3: React" } diff --git a/pages/hack-school/flex.png b/pages/hack-school/flex.png deleted file mode 100644 index fd9671d..0000000 Binary files a/pages/hack-school/flex.png and /dev/null differ diff --git a/pages/hack-school/git-github.mdx b/pages/hack-school/git-github.mdx new file mode 100644 index 0000000..172d1a9 --- /dev/null +++ b/pages/hack-school/git-github.mdx @@ -0,0 +1,345 @@ +# Git/GitHub + +## What is Git? + +Git is a distributed version control system that enables developers to manage code changes, collaborate on projects, and maintain a history of revisions. It allows multiple developers to work on a project simultaneously and provides tools for tracking changes over time. + +### Why do we need Git? (What is Version Control?) + +Version control is essential in software development to track changes, manage collaborative work, and maintain a history of revisions. Without version control, managing code changes becomes complex, error-prone, and challenging to collaborate on. Git offers a structured approach to version control, making it easier to work in teams, track changes, and revert to previous versions if needed. + + +### Git Installation + +You can follow this [guide](https://github.com/git-guides/install-git) or follow the instructions below. + +#### [Windows](https://github.com/git-guides/install-git#install-git-on-windows) + +1. Go to this [link](https://git-scm.com/download/win) and click on the blue `Click here to download` at the top of the page. This should download an executable file. +2. Run the executable file. +3. It will ask for permission to make changes to your device; select `YES`. +4. Click `Next`, then choose installation location (leave as default unless you have a reason not to). Again, press `Next`. +5. You will be able to choose many options, but leave all the defaults unless you have a reason not to. Click `Next` until you get the `Install` button, then click it. +6. Then wait for installation and hit `Finish`. +7. Verify that it was correctly installed by opening any command prompt and typing: +```sh copy +git version +``` +If everything worked correctly it should print something like +`git version 2.41.0.windows.3` + +You now have Git installed on your Windows machine!! + +#### [Mac](https://github.com/git-guides/install-git#install-git-on-mac) + +Most versions of MacOS will already have Git installed with XCode, and you can activate it through the terminal with `git version`. If you don't have Git installed, you can install the latest version of Git through this [link](https://git-scm.com/download/mac). + +* Verify that it was correctly installed by opening the command prompt "terminal" and typing: +```sh copy +git version +``` + + +### Key Concepts in Git + +#### Repositories + +A Git repository is a centralized location where your codebase and its complete history of changes are stored. It contains all versions of your files, branches, and commits. + +#### Commits + +Commits in Git are snapshots of your code at a specific point in time. Each commit has a unique identifier, a timestamp, and a message describing the changes made. Commits provide a detailed history of the project's development. + +#### Branching + +Branching allows developers to create separate lines of development within a repository. The main branch (often 'master' or 'main') serves as the foundation. Feature branches are created for specific changes, enabling developers to work on features without affecting the main branch. + +![branching](pages/hack-school/images/branching.png) + + +1. The main or master branch, should always be the **stable version** of your project. + +2. You decide to add a new feature, so you create a feature branch named `your-name/feature-x`. + +3. While you're working on 'feature-x,' your colleague starts working on another feature, 'feature-y,' on a separate branch `colleague-name/feature-y`. Each of you can make changes to your respective branches without affecting the main branch. + +4. Now you and your colleague can keep making **parallel progress** independently. You can commit and push your progess without making any changes to the main branch. + +5. Once you or your colleauge completed and tested their feature, you create a pull request to merge your feature into the main branch. Git automatically manages the merging process and resolves any conflicts that might arise in the main branch. + + +#### Merging + +Merging is the process of integrating changes from one branch into another. After changes are complete in a feature branch, they are merged back into the main branch. Conflicts may arise during merging, requiring resolution. + +### Common Git Commands +1. `git init`: Initializes a new Git repository. +2. `git clone `: Creates a local copy of a remote repository. +3. `git add `: Stages changes for commit. +4. `git add --all`: Stages all modified files. +5. `git commit -m "message"`: Commits staged changes with a message. +6. `git pull`: Fetches and merges changes from a remote repository. +7. `git push`: Pushes local commits to a remote repository. +8. `git branch`: Lists existing branches. +9. `git checkout `: Switches into a different branch. +10. `git merge `: Merges changes from one branch into the current branch. + +For full documentation of all Git commands, check this [link](https://git-scm.com/docs/git#_high_level_commands_porcelain) out. + + +## What is [Github](https://github.com)? + +GitHub is a web-based platform built on top of Git. It provides an interface for hosting and collaborating on Git repositories. GitHub offers additional features, such as issue tracking, project management, and social interaction among developers. + +### Forking and Cloning + +GitHub allows users to fork repositories, creating their own copy. Forks are often used to experiment with changes without affecting the original project. Cloning a repository means copying it from GitHub to your local machine, enabling you to work on code locally. + +### Pull Requests + +Pull requests are a core feature of GitHub's collaborative workflow. They allow developers to propose changes and improvements to a repository. After creating a pull request, other team members review the changes, provide feedback, and approve the merge if everything looks good. + +### Merging Options on GitHub + +When it comes to merging changes in GitHub, you have several options: + +![merge explanation](pages/hack-school/images/merge.png) + +#### Merge + +- The "Merge" option combines the changes from a pull request into the target branch. It creates a new merge commit that records the integration of the changes. +- Use "Merge" when you want to maintain a detailed commit history and preserve individual commits from the pull request. + +#### Squash and Merge + +- "Squash and Merge" combines all the commits from a pull request into a single, new commit. This can help keep your commit history clean and concise. +- Use "Squash and Merge" when you want to condense multiple commits into one before merging. + +#### Rebase and Merge + +- "Rebase and Merge" rewrites the commit history of the target branch to incorporate the changes from the pull request. It replays the commits on top of the target branch, creating a linear history. +- Use "Rebase and Merge" when you want a linear, cleaner commit history and you want to incorporate the changes without creating merge commits. + + +### Creating a GitHub Account + +1. Go to [github.com](https://github.com). +2. Click on the `Sign Up` button at the top right. +3. Add your email address. +4. Create a password. +5. Choose your username. +6. Choose if you want updates and announcements. +7. Play the game to verify that you are human. +8. Hit the `Create Account` button. +9. Verify email with the code sent to your inbox and input it. +10. You now have your own GitHub Account!! + + +### GitHub Actions + +GitHub Actions is an automation tool provided by GitHub that allows you to define and automate your software development workflows. With GitHub Actions, you can automate tasks like building, testing, and deploying your code directly from your GitHub repository. + +#### Setting Up a Basic Workflow + +To set up a basic GitHub Actions workflow: + +1. On your repository's GitHub page, navigate to the 'Actions' tab. +2. Click the 'New workflow' button or select an existing workflow template. +3. Choose a workflow template or start with a blank file. +4. Define the workflow using YAML syntax. This includes specifying triggers, jobs, steps, and more ([see example below](http://localhost:3000/hack-school/git-github#example-workflow-yaml)). +5. Commit the workflow file to your repository. +6. GitHub Actions will automatically execute the defined workflow when the specified triggers are met. + +#### Example Workflow YAML: + + +```yaml copy +name: CI/CD Pipeline + +on: + push: + branches: + - main + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v2 + + - name: Set up Node.js + uses: actions/setup-node@v2 + with: + node-version: '14' + + - name: Install dependencies + run: npm install + + - name: Run tests + run: npm test +``` + +* `name:` This is the name of your GitHub Actions workflow, in this case, it's named "CI/CD Pipeline." This name is displayed on your GitHub repository's Actions page for clarity. + +* `on:` Specifies the events that trigger this workflow. In this example, the workflow is triggered whenever there is a push event (a commit is pushed) to the 'main' branch. You can customize the branch name or add more events as needed. + +* `jobs:` Defines one or more jobs that will be executed as part of this workflow. In this case, there's a single job named "build." + +* `runs-on:` Specifies the runner for this job. This job runs on an "ubuntu-latest" virtual machine. GitHub provides various runner types for different environments (Windows, macOS, Linux) and allows you to specify versions as needed. + +* `steps:` Describes the sequence of steps to be executed within the job. Each step performs a specific task. + +* `- name:` Provides a name or description for each step, making it easier to understand the purpose of each step. + +* `uses:` Specifies an action that should be used for the step. Actions are reusable units of code that perform specific tasks. In this workflow, actions are used to checkout code, set up Node.js, etc. + +* `with:` Specifies inputs or parameters for an action. For example, it sets the Node.js version to '14' for the "Set up Node.js" step. + +* `run:` Executes a shell command as part of the step. In this workflow, it's used to run npm commands for checking out code, installing dependencies, and running tests. + +### GitHub Desktop + +GitHub Desktop is a user-friendly graphical interface for managing Git repositories and collaborating on GitHub projects. It simplifies many of the Git commands and operations, making version control more accessible. + +#### Installing GitHub Desktop + +1. Visit the GitHub Desktop website (https://desktop.github.com/) and download the installer for your operating system. +2. Run the installer and follow the on-screen instructions to install GitHub Desktop. +3. After installation, launch GitHub Desktop. + +#### Authenticating with Your GitHub Account + +1. When you first launch GitHub Desktop, you'll be prompted to sign in with your GitHub account. If you don't have one, you can create one for free by following [these instructions](http://localhost:3000/hack-school/git-github#creating-a-github-account). +2. After signing in, GitHub Desktop will link to your GitHub account, allowing you to access and manage your repositories. + +## Git/GitHub Workflow + +![git/github flow](pages/hack-school/images/github_flow.png) + +In Git, you manage two versions of your project: the local and remote repositories. + +**Pushing Commits to Remote** +- Make changes in your working directory. +- Use `git add` to bring changes to staging area. +- Commit changes with `git commit` to bring it to local repository. +- Push commits to the remote repository using `git push`. + +**Fetching and Pulling Changes** +- Use `git fetch` to upadate local repository. +- Use `git pull` to fetch and merge remote changes into your working directory. + +**Updating Working Directory with Branches** +- Switch branches with `git checkout` for an updated working directory aligned with the branch. + +#### Creating a Repository + +**Using GitHub:** + +1. On GitHub, log in to your account. +2. Click the '+' sign in the top right corner and select 'New Repository'. +3. Provide a repository name, description, and other settings as needed. +4. Click 'Create repository'. + +![git/github flow](pages/hack-school/images/new_repo.PNG) + +**Using Git:** + +1. Open your command line or terminal. +2. Navigate to the directory where you want to create the repository. +3. Use the following commands: + + * Initialize a new Git repository in the current directory by typing + ```sh copy + git init + ``` + * Add a remote repository named 'origin' and associate it with the provided ``. The `` should be the URL of the remote repository on GitHub where you want to push your code. + ```sh copy + git remote add origin + ``` + * Pull any existing content from the 'main' branch of the remote repository into your local repository. This ensures that your local repository is synced with the version on GitHub. + ```sh copy + git pull origin main + ``` + + +#### Making Changes and Updating Git + +**Using GitHub:** + +1. On your repository's GitHub page, navigate to the file you want to change. +2. Click the pencil icon to edit the file. +3. Make your changes directly in the editor. +4. Scroll down and provide a commit message. +5. Click 'Commit changes'. +6. After committing changes on GitHub, they will be automatically pushed to the repository. + +![git/github flow](pages/hack-school/images/edit.png) + +**Using Git:** + +1. Make changes to your code. +2. Use the following command to stage changes for commit: +```sh copy +git add +``` +Or use `git add --all` to stage all changed files: +```sh copy +git add --all +``` +3. Use the following command to commit changes with a message: +```sh copy +git commit -m "Commit message" +``` +4. After committing your changes, use the following command to push them to a remote repository on GitHub: +```sh copy +git push origin main +``` + +#### Creating a Branch + +**Using GitHub:** + +1. On your repository's GitHub page, click the `Branch: main` button. +2. Enter a name for your new branch and click `Create branch`. + +![git/github flow](pages/hack-school/images/branch_image.PNG) + +**Using Git:** + +To create a new branch and switch to it, use the following commands: +```sh copy +git checkout -b new-feature +``` +This command creates a new branch called new-feature and switches to it. + +#### Merging New Branch with Main + +**Using GitHub:** + +1. On your repository's GitHub page, navigate to the 'Pull requests' tab. +![git/github flow](pages/hack-school/images/pr.PNG) +2. Click the green 'New pull request' button on the top right. +3. Set the base and compare branches for the pull request. +4. Click 'Create pull request'. +5. Review the changes and click 'Merge pull request'. + +![git/github flow](pages/hack-school/images/compare.png) + +**Using Git:** + +1. Switch to the main branch: +```sh copy +git checkout main +``` +2. Merge the new branch into the main branch: +```sh copy +git merge new-feature +``` +3. Resolve any merge conflicts if they occur. +4. Push the changes to the remote repository: +```sh copy +git push origin main +``` + diff --git a/pages/hack-school/html.mdx b/pages/hack-school/html.mdx new file mode 100644 index 0000000..decd77d --- /dev/null +++ b/pages/hack-school/html.mdx @@ -0,0 +1,589 @@ +# Week 1: HTML + +## What is HTML? + +Before we start, we would like to mention that this section is indeed long, and contains a lot of information. However, +we hope that the example + +**HTML** or **Hyper Text Markup Language**, is the standard "language" used for creating websites (note: it +is not actually a programming language, it is a markup language). It is the foundation of web +development, and allows you to include text, and media such as images, videos, links, etc to your +website. It is often paired up with CSS and JavaScript to add styles and functionality respectively. +The job of your HTML code is to describe the appearance of your web page. + +To achieve this, HTML code comprises of "html elements". These denote the structural semantics for +your text such as headings, paragraphs, lists, images and more. Tags are enclosed in angle brackets +(`< >`) and come in pairs: an opening tag and a closing tag. The content between the opening and +closing tags defines the element. + +--- + +## Text formatting and Hyperlinks in HTML + +### Fundamentals of HTML Text + +Maintaining the structural hierarchy of the content is essential when creating an HTML website. +Different HTML tags tell the browser how to distinguish between various elements such as +paragraphs and headings. +More interestingly, search engines take into account the headings as keywords, when indexing pages! +In addition, for easily styling content using CSS and/or to add functionality using JavaScript, + structuring things properly is essential -- this is because your content must +be wrapped around the correct HTML tag to apply the appropriate property of interest. + +| Code | Description | +| ----------------- | ---------------------------------------------- | +| `

` ... `

` | Headings with decreasing levels of importance. | +| `

` | Paragraphs of text. | +| `` | Inline code snippets. | +| `

`           | Preformatted text, maintaining whitespace.     |
+| `
`    | Block-level quotation from another source.     |
+| ``          | Citation of the title of a work.               |
+| ``          | Abbreviation or acronym with explanation.      |
+| ``          | Highlighted or marked text.                    |
+| ``             | Inline quotation.                              |
+| ``           | Variable or placeholder text.                  |
+| ``           | Keyboard input or user action.                 |
+| ``          | Sample output or data.                         |
+
+We reccomened you try these examples on your own!
+
+```javascript copy showLineNumbers
+   
Large Heading

+   
Not so large Heading

+   
Smaller Heading

+   
 Small Heading

+   
 Smaller Heading

+   
 Tiny Heading

+   
 Hi! I am a blockquote.

+   
+      I am the pre tag, and I maintain whitespaces! 
+      For instance, here is a binary search tree diagram! 
+
+      33
+      /    \  
+     16        57
+   /  \      /   \
+  8    21   42    66
+   

+    Look at me! I am highlighted!
+   
 Press Ctrl + C to copy this code!

+```
+
+These will be displayed as:
+
+![text-formatting-example](pages/hack-school/HTML_images/text-formatting-example.png)
+
+
+### Text Formatting
+
+There are various HTML tags that can be used to format text. Here are some of the important ones:
+
+| Code                                       | Description     |
+| -------------------------------------------| --------------- |
+| ` ... ` or ` ... ` |Bold Text        |
+| `...` or `...`             | Italic Text     |
+| `...`                               | Underlined Text |
+|` ...` or `...`           | Strikethrough   |
+| `...`                           |Superscript      |
+| `...`                           |Subscript        |
+
+### Hyperlinks
+
+Hyperlinks play a significant role in enabling users to move seamlessly between different web pages. To
+achieve this, we make use of a tool known as the "anchor tag." While this tag is commonly employed
+to create connections to external websites and resources, it also allows you to navigate within the
+same webpage. Here is how you can implement a hyperlink:
+
+```javascript copy showLineNumbers
+Cat Wiki
+```
+
+Here, `href` stands for Hypertext Reference or target, and contains the web address you wish to
+direct to. You can also make images "clickable". To do this, you will need:
+
+```javascript copy showLineNumbers
+
+   cat photo
+
+```
+
+### Lists
+
+You will often feel the need to list items. There are two kinds of lists you can make in HTML --
+ordered or unordered.
+
+**Unordered List**
+
+```javascript copy showLineNumbers
+
    
+  
  • Siamese Cat
    • 
+  
  • Persian Cat
    • 
+  
  • American Shorthair
    • 
+  
  • Bongo cat
    • 
+

+```
+
+As you can see in the image below, we get bullet points with no specific ordering:
+
+![unordered-list](pages/hack-school/HTML_images/unordered-list.png)
+
+**Ordered List**
+
+```javascript copy showLineNumbers
+
    
+  
  1. American Pitbull Terrier
    2. 
+  
  2. Great Dane
    3. 
+  
  3. Rottweiler
    4. 
+  
  4. Dobermann
    5. 
+

+```
+
+However, often times an order is important. This is why HTML provides ordered lists as well. You can include an ordered list by 
+including the list elements in between the `
     <\ol>` tags:
+
+This is displayed as:
+
+![ordered-list](pages/hack-school/HTML_images/ordered-list.png)
+
+### Images
+
+You can embed your images in your webpage with a `` tag. Elements whose tags don't have a closing tag,
+are called *void elements*. An example is the `` tag. If your image is saved in the same directory as your HTML page, then you
+can include it as follows:
+
+```javascript copy showLineNumbers
+Pow Pow
+```
+
+However, if your image is not in the same directory as your HTML file, then you will have to include
+its path in the src field. Let's suppose I have a photo of a kitten in my cats folder. I can include
+it by:
+
+```javascript copy showLineNumbers
+Meow
+```
+
+![cat](pages/hack-school/HTML_images/ojew.jpg)
+
+The alt text is supposed to be a textual description of the image. It is used when the image cannot
+be properly rendered due to external problems. When including images in your HTML page, always make
+sure you own the image, or have permission to use it. Most images released under a permissive
+license, such as MIT, BSD, or a suitable Creative Commons (CC) license can be used freely.
+
+### Tables
+
+Tables are always a great way to organize content. Luckily, HTML allows one to arrange text, images, links etc. in 
+a tabular format. 
+
+- `...
    ` is wraps the entire table 
+- `...` is the table row. 
+- `...` is the table cell. 
+- `...` is the table header. 
+-  The `border = 1` attribute controls the width of your table's border
+
+HTML table row elements contain the cell elements. The table header tags are nested inside the first HTML table row element. 
+Here is a basic example:
+
+```javascript copy showLineNumbers
+
+        
+            
+            
+         
+         
+            
+            
+         
+         
+            
+             
+         
+         
+            
+             
+         
+
    Cat Breed Location of origin  
     British Shorthair   the United Kingdom  
    Chartreux France
    Siberian Russia, Ukraine
    
+```
+
+This is what it would render as: 
+
+![table example 1](pages/hack-school/HTML_images/tables_example1.png)
+
+
+**Colspan and Rowspan**
+
+You can use the `colspan` attribute if you want to merge two or more columns into one. Furthermore, you can use 
+the `rowspan` attribute if you want to merge two or more rows into one. 
+
+**Cellpadding and Cellspacing**
+The `cellspacing` attribute defines space between table cells while 
+the `cellpadding` represents the distance between cell borders and the content within a cell. 
+
+Let's add some of these properties to our table! 
+
+```javascript copy showLineNumbers
+
+        
+             
+             
+             
+         
+         
+            
+              
+              
+         
+         
+             
+             
+         
+         
+            
+            
+             
+         
+
    RegionCat BreedLocation of origin 
     Europe British Shorthair the United Kingdom
    ChartreuxFrance
    AfricaSokoke Kenya
    
+```
+This is what it would render as:
+
+![table example 1](pages/hack-school/HTML_images/tables_example1.png)
+---
+
+## Attributes
+
+All HTML elements *can* have attributes. They dont need to, but attributes tend to give the elements some personality. 
+HTML attributes contain additional information about an element and appear inside the opening tag to control the element's behaviour.
+HTML attributes are a modifier of an HTML element type. In addition, they always appear as name value pairs. 
+
+For instance when using `Meow` to include an image on our webpage, we have that `src` is an attribute of the 
+image tag. Another example is when we made an HTML table using, ` ...
    `. Here, the `border`, `cellpadding` and `cellspacing` are all attributes of the HTML table element. 
+
+There are three main types of attributes -- required, standard and event attributes. There are a *lot* of HTML attributes, but we 
+will be going over the most important ones. 
+
+### Required Attributes
+
+Required attribues are essential for the element to have a valid and meaningful representation on a web page. Without these, 
+certain elements do not work. Here is a list of some of the important ones:
+
+| Attribute | Description                                         | Common Tags                 |
+|-----------|-----------------------------------------------------|--------------------------------|
+| `src`     | Specifies the source URL for media elements.       | ``, ``, `` |
+| `href`    | Specifies the URL for hyperlinks.                  | ``, ``, ``      |
+| `alt`     | Provides alternative text for media elements.      | ``, ``              |
+
+
+### Standard Attributes
+
+Standard Attributes are also sometimes refered to as "Global Attrbutes". These attribues should work with most HTML elements. Following is a table 
+of some common, useful HTML attributes and the HTML tags that they can be used with:
+
+
+| Attribute     | Description                                           | Common Tags                              |
+|---------------|-------------------------------------------------------|------------------------------------------|
+| `class`       | Used for classifying elements. Can have multiple classnames. Can match elements by class for styling purposes. | All HTML elements  |
+| `id`          | Specifies a document-wide unique identifier for an element. Can be used as a CSS selector.      | All HTML elements     |
+| `style`       | Applies inline CSS styles to an element.            | All HTML elements                       |
+| `width`       | Sets the width of an element (e.g., images).       | ``, ``, ``           |
+| `height`      | Sets the height of an element (e.g., images).      | ``, `
    `, ``           |
+| `colspan`     | Specifies the number of columns an element spans.  | `
    `, `` (table cells)            |
+| `rowspan`     | Specifies the number of rows an element spans.     | ``, `` (table cells)            |
+| `disabled`    | Disables user interaction with an element.         | ``, `