diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..016efd8
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+v20.10.0
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 3eb1a98..de9319c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,8 @@
"nextra-theme-docs": "latest",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "react-icons": "^4.11.0"
+ "react-icons": "^4.11.0",
+ "yarn": "^1.22.22"
},
"devDependencies": {
"@types/node": "18.11.10",
@@ -9314,6 +9315,20 @@
"dev": true,
"license": "ISC"
},
+ "node_modules/yarn": {
+ "version": "1.22.22",
+ "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.22.tgz",
+ "integrity": "sha512-prL3kGtyG7o9Z9Sv8IPfBNrWTDmXB4Qbes8A9rEzt6wkJV8mUvoirjU0Mp3GGAU06Y0XQyA3/2/RQFVuK7MTfg==",
+ "hasInstallScript": true,
+ "license": "BSD-2-Clause",
+ "bin": {
+ "yarn": "bin/yarn.js",
+ "yarnpkg": "bin/yarn.js"
+ },
+ "engines": {
+ "node": ">=4.0.0"
+ }
+ },
"node_modules/yocto-queue": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -15518,6 +15533,11 @@
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"dev": true
},
+ "yarn": {
+ "version": "1.22.22",
+ "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.22.tgz",
+ "integrity": "sha512-prL3kGtyG7o9Z9Sv8IPfBNrWTDmXB4Qbes8A9rEzt6wkJV8mUvoirjU0Mp3GGAU06Y0XQyA3/2/RQFVuK7MTfg=="
+ },
"yocto-queue": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 8e6eee0..32c9cdf 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,8 @@
"nextra-theme-docs": "latest",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "react-icons": "^4.11.0"
+ "react-icons": "^4.11.0",
+ "yarn": "^1.22.22"
},
"devDependencies": {
"@types/node": "18.11.10",
@@ -41,4 +42,4 @@
"prettier": "^3.0.0",
"typescript": "^4.9.3"
}
-}
\ No newline at end of file
+}
diff --git a/pages/hack-school/_meta.json b/pages/hack-school/_meta.json
index 1c7b9ea..9d2f420 100644
--- a/pages/hack-school/_meta.json
+++ b/pages/hack-school/_meta.json
@@ -3,11 +3,9 @@
"logistics": "Hack School Logistics",
"tools": "Developer Tools",
"git-github": "Git/GitHub",
- "html": "Week 1: HTML",
- "css": "Week 1: CSS",
- "js": "Week 2: JavaScript",
- "react": "Week 3: React",
- "express": "Week 4: Express",
- "mongodb": "Week 5: MongoDB",
- "deployment": "Week 6: Deployment"
+ "week1": "Week 1: HTML, CSS, and JavaScript",
+ "react": "Week 2: React and Next.js",
+ "express": "Week 3: APIs with Express",
+ "deployment": "Week 4: Debugging and Deployment",
+ "mongodb": "Week 5: Databases with MongoDB"
}
\ No newline at end of file
diff --git a/pages/hack-school/css.mdx b/pages/hack-school/css.mdx
deleted file mode 100644
index d7dc352..0000000
--- a/pages/hack-school/css.mdx
+++ /dev/null
@@ -1,348 +0,0 @@
-# Week 1: CSS
-
-## What is CSS?
-
-CSS (Cascading Style Sheets) is a fundamental web technology used to control the presentation
-and layout of HTML documents. It provides a powerful set of rules and properties that allow
-developers to customize the appearance of HTML elements, making it an essential tool for building
-visually appealing and responsive web applications.
-
-## Applying CSS to HTML Components
-
-CSS can be applied to HTML components in various ways. Here are some common methods:
-
-### Inline CSS
-
-Inline CSS involves adding styles directly to an HTML element using the "style" attribute.
-This method is handy for making quick style changes to specific elements, but it's generally
-not recommended for extensive styling due to its lack of separation between content and presentation.
-
-```html copy showLineNumbers
-
Come to Hack School Next Week!
-```
-
-### Internal CSS
-
-Internal CSS is placed within the `
-
-
-
Come to Hack School Next Week!
-```
-
-### External CSS
-
-External CSS involves creating a separate CSS file with all the styles and linking it
-to the HTML document using the `` tag. This method promotes better code organization
-and maintainability, as you can reuse the same stylesheet across multiple HTML files.
-
-styles.css:
-```css copy showLineNumbers
-h2 {
- color: orange;
- text-align: center;
-}
-```
-
-index.html:
-```html copy showLineNumbers
-
-
-
-
-
Come to Hack School Next Week!
-```
-
-### Selectors
-
-* Universal Selector: Selects all HTML elements. The universal selector is represented by an asterisk `*`.
-* Element Selector: Selects HTML elements by their tag name. For example, the p selector targets all `
-```
-
-This is how it would look like:
-
-
-
-* Class Selector: Selects HTML elements by their class attribute. Class selectors start with a dot `.`,
-followed by the class name. For example, the .important selector targets all elements with the class "important."
-* ID Selector: Selects a single HTML element by its ID attribute. ID selectors start with a hash `#`,
-followed by the ID name. For example, the #special selector targets the element with the ID "special."
-
-styles.css:
-```css copy showLineNumbers
-#navbar {
- background-color: black;
- font-size: 16px;
-}
-
-.blue {
- color: blue;
-}
-```
-
-index.html:
-```html copy showLineNumbers
-
-```
-
-## Common Properties that CSS can Modify
-
-- **Color**: `color` - Changing the text color, background color, or border color of elements.
-```html copy showLineNumbers
-
Text with orange color
-```
-
-
-- **Font**: `font-family`, `font-size`, `font-weight`, `font-style`, etc. - Modifying the font family, size, weight, style, and other typography-related properties.
-```html copy showLineNumbers
-
Bold Arial 16px text
-```
-
-
-- **Margins**: `margin` - Adjusting the space around an element, controlling the gap between elements.
-```html copy showLineNumbers
-
Content with a 20px margin
-```
-
-
-- **Padding**: `padding` - Adding space inside an element's boundaries, creating space between content and borders.
-```html copy showLineNumbers
-
Content with 10px padding
-```
-
-
-- **Borders**: `border`, `border-width`, `border-style`, `border-color` - Styling borders around elements, controlling their width, style (solid, dashed, dotted, etc.), and color.
-```html copy showLineNumbers
-
Box with black 1px solid border
-```
-
-
-*This is how margins, padding, and borders all come together!*
-
-
-
-- **Width and Height**: `width`, `height` - Specifying the dimensions of an element, allowing control over its size.
-```html copy showLineNumbers
-
-```
-- **Background**: `background-image`, `background-color`, `background-position`, etc. - Setting background images, colors, and positioning for elements.
-```html copy showLineNumbers
-
-```
-
-
-- **Text**: `text-align`, `text-decoration`, `text-transform` - Controlling text alignment, text decoration (underline, overline, etc.), and text transformation (uppercase, lowercase, capitalize).
-```html copy showLineNumbers
-
Centered, underlined, uppercase text
-```
-
-
-- **Display**: `display` - Changing how elements are displayed (block, inline, flex, grid, etc.) and how they interact with other elements.
-```html copy showLineNumbers
-
-
Item 1
-
Item 2
-
-```
-
-
-- **Positioning**: `position`, `top`, `bottom`, `left`, `right` - Controlling the positioning of elements on the page using properties like position, top, bottom, left, right, etc.
-```html copy showLineNumbers
-
Positioned at 50px from top and 100px from left
-```
-
-
-- **Float**: `float` - Floating elements to either the left or right side of their container.
-```html copy showLineNumbers
-
-```
-
-
-- **Opacity**: `opacity` - Adjusting the transparency of elements and their content.
-```html copy showLineNumbers
-
Semi-transparent content
-```
-
-
-- **Shadows**: `box-shadow`, `text-shadow` - Adding box shadows or text shadows to elements for visual effects.
-```html copy showLineNumbers
-
Shadowed box and text
-```
-
-
-- **Flexbox and Grid**: `display: flex`, `display: grid`, etc. - Utilizing CSS layout systems like Flexbox and Grid to create responsive and flexible layouts (see section below).
-
-
-## Flexbox Layout
-
-### What is Flexbox?
-
-CSS Flexbox is a powerful layout system used to create flexible and responsive web designs.
-It provides an intuitive way to arrange elements within a container and control their alignment,
-distribution, and order.
-
-### Flex Container and Flex Items
-
-A Flex Container is an element to which you apply the CSS property
-`display: flex;` or `display: inline-flex;`. This makes it a container
-for Flex Items, which are the child elements within the Flex Container.
-Flex Items are flexibly arranged inside the container.
-
-
-### Main Axis and Cross Axis
-
-Flexbox operates along two axes: the "Main Axis" and the "Cross Axis."
-The Main Axis represents the primary direction of Flex Items' alignment,
-and the Cross Axis is perpendicular to it.
-
-### Flex Container Properties
-
-#### 1. `flex-direction`
-
-The `flex-direction` property determines the direction of the Main Axis. It has four possible values:
-- `row`: Flex Items are placed horizontally in a row from left to right (default).
-- `row-reverse`: Flex Items are placed horizontally in a reversed order from right to left.
-- `column`: Flex Items are placed vertically in a column from top to bottom.
-- `column-reverse`: Flex Items are placed vertically in a reversed order from bottom to top.
-
-#### 2. `justify-content`
-
-The `justify-content` property aligns Flex Items along the Main Axis.
-It offers various values to control the spacing between Flex Items:
-- `flex-start`: Items are aligned to the start of the container (default).
-- `flex-end`: Items are aligned to the end of the container.
-- `center`: Items are centered within the container.
-- `space-between`: Items are evenly distributed with the first item at the start and the last item at the end.
-- `space-around`: Items are evenly distributed with equal space around them.
-- `space-evenly`: Items are evenly distributed with equal space around and at the start and end.
-
-#### 3. `align-items`
-
-The `align-items` property aligns Flex Items along the Cross Axis. It has the following values:
-- `flex-start`: Items are aligned to the start of the container.
-- `flex-end`: Items are aligned to the end of the container.
-- `center`: Items are centered along the Cross Axis.
-- `baseline`: Items are aligned based on their text baselines.
-- `stretch`: Items are stretched to fill the container along the Cross Axis (default).
-
-#### 4. `flex-wrap`
-
-The `flex-wrap` property determines whether Flex Items should wrap to a new line when
-they exceed the Flex Container's width. It has three possible values:
-- `nowrap`: Items are displayed in a single line (default).
-- `wrap`: Items wrap to a new line as necessary.
-- `wrap-reverse`: Items wrap to a new line in reverse order.
-
-#### 5. Quick Speed Hack
-
-The `flex-flow` property is a shorthand property for setting both the flex-direction and flex-wrap properties.
-
-```css copy showLineNumbers
-.flex-container {
- display: flex;
- flex-flow: row wrap;
-}
-```
-
-### Flexbox Example Usage:
-
-Creating the content using index.html:
-```html copy showLineNumbers
-
-
-
Header 1
-
Header 2
-
Header 3
-
-
-
Cell 1
-
Cell 2
-
Cell 3
-
-
-```
-
-Now we can style the table cells, area and the rows using Flexbox by adding the
-following code in style.css
-
-Styling the table cells:
-```css copy showLineNumbers
-.cell {
- width: 100px;
- padding: 10px;
- border: 1px black solid;
- background-color: #f1f1f1;
-}
-```
-Styling the table area:
-```css copy showLineNumbers
-.table {
- width: 400px;
- height: 400px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
- background-color: #1e90ff;
-}
-```
-Styling the rows:
-```css copy showLineNumbers
-.row {
- display: flex;
- flex-direction: row;
-}
-```
-
-### Flex Item Properties
-
-#### 1. `flex-grow`, `flex-shrink`, and `flex-basis`
-
-These properties are collectively known as the "flex shorthand." They control the growth, shrinking, and initial size of Flex Items.
-- `flex-grow`: Determines how much an item should grow relative to other items when extra space is available.
-- `flex-shrink`: Determines how much an item should shrink relative to other items when there is not enough space.
-- `flex-basis`: Specifies the initial size of an item before any available space is distributed.
-
-#### 2. `order`
-
-The `order` property allows you to change the order in which Flex Items appear within the
-Flex Container without changing their source order in the HTML.
-
-
-
-### Games to Learn Flexbox:
-
-[Coding Fantasy](https://codingfantasy.com/games/flexboxadventure/play)
-
-[Flexbox Froggy](https://flexboxfroggy.com/)
\ No newline at end of file
diff --git a/pages/hack-school/deployment.mdx b/pages/hack-school/deployment.mdx
index ab53a59..578e287 100644
--- a/pages/hack-school/deployment.mdx
+++ b/pages/hack-school/deployment.mdx
@@ -1,4 +1,4 @@
-# Week 6: Deployment
+# Week 4: Debugging and Deployment
## What is deployment?
@@ -57,6 +57,21 @@ how much compute your app needs!
Finally, add environment variables and adjust any other configurations you need.
+## Why Vercel and Render?
+
+
+#### **Vercel:**
+ - Optimized for Static Sites: Great for React, Next.js, etc.
+ - Global CDN: Fast load times with automatic global distribution.
+ - User-Friendly: Easy integration with GitHub and automatic previews.
+ - Serverless Functions: Supports lightweight backend tasks.
+
+#### **Render:**
+ - Full-Stack Support: Handles complex backend services.
+ - Easy Deployment: Auto-scaling, managed databases, and environment variables.
+ - Multiple Environments: Supports staging and production setups.
+ - Flexible: Works with various languages and frameworks.
+
## What's next?
@@ -66,5 +81,3 @@ In the future, you may want to consider scalability. Once your app starts gainin
load balancers. If your application continues to grow to support more functionality, it might be worth considering splitting your architecture into microservices. Each of these approaches have their
own considerations, so make sure to do some research!
-
-
diff --git a/pages/hack-school/express.mdx b/pages/hack-school/express.mdx
index d3462da..118ac16 100644
--- a/pages/hack-school/express.mdx
+++ b/pages/hack-school/express.mdx
@@ -1,4 +1,4 @@
-# Week 4: Building APIs with Express.js
+# Week 3: Building APIs with Express.js
## What is Express?
[Express](https://expressjs.com) is a web application framework for Node.js that enables developers to start a local server and develop API routes. Express does
diff --git a/pages/hack-school/html.mdx b/pages/hack-school/html.mdx
deleted file mode 100644
index cf845b2..0000000
--- a/pages/hack-school/html.mdx
+++ /dev/null
@@ -1,589 +0,0 @@
-# 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 examples provided help clarify the concepts prevented!
-
-**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. | ``, ``, `
-```
-
-
-- **Opacity**: `opacity` - Adjusting the transparency of elements and their content.
-```html 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
-
-```
-
-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.
-
-- `