tritonhacks · OrigamiStarz · May 2, 2025 · May 2, 2025 · May 9, 2025 · May 9, 2025
diff --git a/source/Tutorials/CSS.md b/source/Tutorials/CSS.md
@@ -0,0 +1,204 @@
+---
+layout: default
+title: CSS
+nav_order: 3
+permalink: Tutorials/CSS
+parent: Tutorials
+has_toc: true
+---
+
+# Cascading Style Sheets Introduction
+{: .no_toc }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+### CSS
+Every house has an architecture style, or a color scheme. All the rooms would follow that scheme according to the what the house should look like. Wouldn't it be nice to define that in once place? If we have the scheme defined in some place, all the pages we create with HTML would have that style without  specifying them repeteadly. This is where CSS comes in. It adds colors, fonts, spacing and styles of the elements used in HTML.
+
+Here is an overview of what we are covering:
+
+- **Linking CSS to HTML**: Where to put your CSS code.
+- **Selectors**: CSS selectors target HTML elements for styling. They can be simple (like element selectors), class-based (using `.class`), or ID-based (using `#id`).
+- **Styling Properties**: CSS properties like `color`, `font-size`, `background`, `margin`, and `padding` offer control over appearance.
+- **Box Model**: CSS box model comprises content, padding, border, and margin, influencing element layout.
+
+### Linking CSS to HTML
+There are three main ways to attach styles:
+
+| Method | Where it lives | When it’s handy | Specificity weight* |
+|--------|---------------|-----------------|--------------------|
+| **Inline** | Inside an element’s `style=""` attribute | One‑off tweaks  | **Highest** |
+| **Internal** | `<style>` block in the document `<head>` | Single‑file demos, small docs | Medium |
+| **External** | Separate `.css` file referenced with `<link>` | Multi‑page projects | Lowest |
+
+\*If multiple rules target the same element, the browser uses this order (inline > internal > external), then cascades by rule specificity and source order.
+
+Here is an example of each:
+
+#### 1. Inline
+```html
+<h1 style="color: tomato;">Hello</h1>
+```
+
+#### 2. Internal
+```html
+<!-- inside the <head> -->
+<style>
+  h1 { color: tomato; }
+</style>
+
+```
+
+#### 3. External
+```html
+<!-- inside the <head> -->
+<link rel="stylesheet" href="/styles.css">
+```
+We recommend using external for most cases. 
+
+### Selectors
+Selectors are used to select the HTML element we want to style. There are three main types of selectors we can use: element, id, and class.
+
+#### Element Selectors
+
+Element selectors are the most basic type of CSS selector. To use an element selector, we just get the tag that we want to apply our CSS to. 
+
+For example, say we want to style the tag below:
+
+`<h1>Hello World!</h1>`
+
+To use an element selector, we just get the tag `h1` and apply our CSS styles!
+
+```
+h1 {
+    (insert styles here)
+}
+```
+
+#### ID Selectors
+
+You would use id selectors if you only want to apply CSS styling to one HTML element.
+
+To use an id selector, in your HTML, you use the id attribute:
+
+`<h1 id="any_id">Hello World!</h1>`
+
+In your CSS, you would use the `#` tag to select the element with a certain id:
+
+```
+#any_id {
+    (insert styles here)
+}
+```
+
+Only one element can have a certain id, you cannot have two elements with the same id.
+
+#### Class Selectors
+
+Class selectors allow you to apply the same style attributes to multiple elements.
+
+In your HTML, you would assign the class attribute to the tags you want to have the same style.
+
+From the below example, we see that there are multiple `<p>` tags.
+
+Say we want to style the first two `<p>` tags and not the third one. We can assign them the same class, in this case, "paragraph":
+
+```html
+<h1>Hello, my name is Deadpool!</h1>
+<p class="paragraph">I am an antihero, I have done good but have also done bad</p>
+<p class="paragraph">I am played by Ryan Reynolds!</p>
+<p>The end!</p>
+```
+
+To add style attributes to a class, we use the `.` tag instead:
+
+```
+.paragraph {
+    (insert styles here)
+}
+```
+
+### Basic Styling Properties
+
+There are many different types of style attributes, but we'll lay out some basic ones.
+
+When writing any CSS code, you have to write it like this:
+
+![CSS basic style example](https://res.cloudinary.com/practicaldev/image/fetch/s--Uvc4p-Vs--/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edojfcbz6sr7j0b2l6v1.jpg)
+
+The ones below are properties you would use for **text**.
+
+**font-size**: changes the size of the text (font size is usually based on pixels, or px)
+
+`font-size: 16px;`
+
+**color**: changes the color of the text
+
+`color: blue;`
+
+**font-family**: give a specific font to selected text, there are many different font styles out there (the default is sans-serif)
+
+`font-family: sans-serif;`
+
+**text-align**: controls how text is aligned on a page, can be aligned left, right, or center
+
+`text-align: center;`
+
+For a full list of CSS properties, visit the link below:
+
+[All CSS properties](https://www.dofactory.com/css/properties)
+
+### The Box Model
+
+Every HTML element is rendered as a **box‑within‑boxes**. Understanding these layers is key to controlling spacing, sizing, and layout.
+
+![CSS Box Model](https://www.simplilearn.com/ice9/free_resources_article_thumb/CSS-Box-Model.png)
+
+
+#### 1. Content
+
+The actual text, image, or other media inside the element.
+
+#### 2. Padding
+
+Space **inside** the element, surrounding the content.
+
+#### 3. Border
+
+A line (solid, dashed, etc.) that wraps padding and content.
+
+#### 4. Margin
+
+Space **outside** the element, separating it from its neighbors. Always transparent.
+
+
+You can see the box model for yourself whenever you inspect an element!
+
+---
+
+#### Practical Example
+
+```css
+.card {
+  width: 300px;     /* total width: 300px incl. padding & border (with border-box) */
+  margin: 12px;     /* space outside */
+  padding: 12px;    /* space inside */
+  border: 2px solid #444;
+  background: #fafafa;
+}
+```
+
+```html
+<div class="card">
+  <h2>Box Model Demo</h2>
+  <p>Try running this somewhere!</p>
+</div>
+```
+_______________________________________________________________
+
+[Previous: HTML](HTML){: .float-left .v-align-text-top}
+[Next: JavaScript](JS){: .float-right .v-align-text-top}
diff --git a/source/Tutorials/Getting Started.md b/source/Tutorials/Getting Started.md
@@ -56,4 +56,4 @@ Once these are installed, you are all set up to start creating your website.
 There is an extension on visual studio code that allows you to code in real-time with your team members. In order to do so, follow [this](https://learn.microsoft.com/en-us/visualstudio/liveshare/quickstart/share) tutorial.
 
 [Previous: Tutorials](../Tutorials){: .float-left .v-align-text-top}
-[Next: Figma](Figma){: .float-right .v-align-text-top}
+[Next: HTML](HTML){: .float-right .v-align-text-top}
diff --git a/source/Tutorials/HTML.md b/source/Tutorials/HTML.md
@@ -0,0 +1,168 @@
+---
+layout: default
+title: HTML
+nav_order: 2
+permalink: Tutorials/HTML
+parent: Tutorials
+has_toc: true
+---
+
+# Hyper Text Markup Language Introduction
+{: .no_toc }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+### HTML
+If we imagine the web as a house, HTML lays the foundation and blueprint of the house. Essentially its just text It consists of "tags" enclosed in angle brackets, like ``<tag> content here! </tag>``. Tags define structure and content. There are so many different types of tags, from defining lines and headings, links, forms, images and videos down to a simple text as the ones you are reading right now. These tags create a layout of the webpage.
+
+- **Basic Structure**: An HTML document consists of elements enclosed in tags. Key elements include `<html>`, `<head>`, and `<body>`.
+- **Content Elements**: HTML offers various elements for content like headings (`<h1>` to `<h6>`), paragraphs (`<p>`), lists (`<ul>`, `<ol>`, `<li>`), links (`<a>`), images (`<img>`), and more.
+- **Semantic HTML**: Semantic HTML elements add meaning to your content, improving accessibility and SEO. These elements help browsers and assistive technologies understand and navigate different parts of your website. Don\'t worry too much about these for now!
+
+If you inspect your browser (right click + click `Inspect`), you can see what elements were used to create this website!
+
+### Basic Structure
+
+#### **The `<html>` tag**
+
+The `<html>` tag **wraps everything inside your HTML document.** It serves as the root element of the page.
+
+It also includes a `lang` attribute, which specifies the language of the document. For our purposes, we’ll set it to English (`en`). It looks like this:
+
+```html
+<html lang="en">
+  <!-- everything else here! -->
+</html>
+```
+
+#### **The `<head>` tag**
+
+The `<head>` tag represents the set up for our HTML page.
+
+The two main components included in most `<head>` tags are the `<title>` and `<link>` tags.
+
+We use the `<title>` tag when we include a title for our webpage. The content of the `<title>` tag can be seen in your tab at the top! See image below:
+
+![Title Location](../source/assets/images/HTML_title_location.png)
+
+We use the `<link>` tag for when we want to link a CSS stylesheet to our page, making our HTML look pretty!
+
+We will outline the multiple components that every HTML website has:
+
+#### **The `<body>` tag**
+The <body> tag contains **everything that will be visible on the webpage**—all the content users will see and interact with, such as headings, paragraphs, images, buttons, etc.
+
+#### HTML Boilerplate
+Here’s a simple HTML boilerplate—the starting template for any webpage:
+```
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>My First Webpage</title>
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+
+### Content Elements
+
+#### **The header tags**
+
+Header tags represent the titles of our HTML.
+
+There are 6 different types of header tags, each varying by size: `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, and `<h6>`. `<h1>` is the largest, while `<h6>` is the smallest.
+
+To use a header tag, you would do:
+
+```<h + "number">(content here)</h + "number">``` (where number is from 1 to 6)
+
+See relative sizes of the headers below: 
+![Headers](../source/assets/images/HTML_heading_example.jpeg)
+
+#### **The `<p>` tag**
+
+The `<p>` tag is used for big blocks of text, or paragraphs. We use it when we want to include big blocks of text on our website, like for a blog or article.
+
+```<p>(insert some text here)</p>```
+
+![p tag](https://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration/Using%20the%20%3Cp%3E%20Tag%20in%20HTML-1.png?width=657&name=Using%20the%20%3Cp%3E%20Tag%20in%20HTML-1.png)
+
+#### **The `<a>` tag**
+
+The `<a>` tag is a tag is used to link other webpages or websites. 
+
+To use an `<a>` tag, you have to specify the href attribute, which is the url that the tag links to.
+
+```<a href="some url">(content here)</a>```
+
+In between the opening and closing `<a>` tags, you insert some text that serves as the link (don\'t keep the parentheses though!). The default blue color text with the underline shows that the text is a link.
+
+#### **The list tags**
+
+There are two types of lists in HTML:
+
+1. ordered lists (aka numbered)
+2. unordered lists (aka bullet points)
+
+#### **Ordered Lists**
+
+With ordered lists, your list items would be in a certain order, going from 1, 2, 3, 4, and so forth.
+
+Ordered lists would look like this:
+
+![ordered list](https://th.bing.com/th/id/OIP.Cpx_G8zpj83y636HSsMcrgHaFj?rs=1&pid=ImgDetMain)
+
+To specify an ordered list, you use the `<ol>` tag. Then, for each list element, you use the `<li>` tag. The format should look something like: 
+
+```
+<ol>
+    <li>element 1!</li>
+    <li>element 2!</li>
+</ol>
+```
+
+#### **Unordered Lists**
+
+Unlike ordered lists, there would be a bullet point or some form of separator at the front of each list item.
+
+Unordered lists would look like this:
+
+![unordered list](https://th.bing.com/th/id/OIP.HfkBXgQPgATQswMMF43-bwHaEJ?rs=1&pid=ImgDetMain)
+
+To specify an unordered list, you use the `<ul>` tag. Same as ordered lists, to add items to your unordered list you use the `<li>` tag. The format should look something like: 
+
+```
+<ul>
+    <li>element 1!</li>
+    <li>element 2!</li>
+</ul>
+```
+
+#### **The `<img>` tag**
+
+The `<img>` tag is used to add images to our website.
+
+Unlike the other tags, the image tag does not have a self-closing tag, so instead of ending with ```</img>``` we just end with ```/>```
+
+```<img src="image link" alt="describe image here" />```
+
+![](https://www.codewithfaraz.com/img/image%20tag%20in%20html%20how%20to%20add%20images%20in%20html%20-%20a%20beginners%20guide.jpg)
+
+For more HTML tags, visit the link below:
+
+[More HTML Tags](https://www.w3schools.com/tags/)
+
+
+_______________________________________________________________
+
+[Previous: Getting Started](Getting Started){: .float-left .v-align-text-top}
+[Next: CSS](CSS){: .float-right .v-align-text-top}
+