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 0de600b..ab8095b 100644
--- a/pages/hack-school/_meta.json
+++ b/pages/hack-school/_meta.json
@@ -2,6 +2,7 @@
"index": "Welcome to ACM Hack School!",
"logistics": "Hack School Logistics",
"git-github": "Git/GitHub",
- "css": "Week 1: HTML & CSS",
+ "html": "Week 1: HTML",
+ "css": "Week 1: CSS",
"js": "Week 2: JavaScript"
}
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. |
+| `
` | 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
+
+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
+
+
+
+```
+
+### 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:
+
+
+
+**Ordered List**
+
+```javascript copy showLineNumbers
+
+
American Pitbull Terrier
+
Great Dane
+
Rottweiler
+
Dobermann
+
+```
+
+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:
+
+
+
+### 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
+
+```
+
+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
+
+```
+
+
+
+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:
+
+
+
+
+**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
+
+
+
Region
+
Cat Breed
+
Location of origin
+
+
+
Europe
+
British Shorthair
+
the United Kingdom
+
+
+
Chartreux
+
France
+
+
+
Africa
+
Sokoke
+
Kenya
+
+
+```
+This is what it would render as:
+
+
+---
+
+## 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 `` 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. | ``, ``, `
+
+```
+
+### 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
+
+```
+
+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
+
+```
+
+
+
+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.
+
+- `