Alexis/js (#10)

* first part of css * added flexbox * almost done * finished js and applied strucutre and themes from main * Finished js and fixed merge conflicts * implemented requested changes: fixed typos, added examples for 'Common CSS Properties' and 'Flexbox', and some structuring changes --------- Co-authored-by: avVergnet <[email protected]>
acmucsd · Aug 21, 2023 · 1dff5a0 · 1dff5a0
1 parent 3546432
commit 1dff5a0
Show file tree

Hide file tree

Showing 4 changed files with 825 additions and 1 deletion.
diff --git a/pages/hack-school/_meta.json b/pages/hack-school/_meta.json
@@ -1,4 +1,6 @@
 {
   "index": "Welcome to ACM Hack School!",
-  "logistics": "Hack School Logistics"
+  "logistics": "Hack School Logistics",
+  "css": "Week 1: HTML & CSS",
+  "js": "Week 2: JavaScript"
 }
diff --git a/pages/hack-school/css.mdx b/pages/hack-school/css.mdx
@@ -0,0 +1,325 @@
+# 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
+<h2 style="color: red; text-align: center;">Come to Hack School next week!</h2>
+```
+
+### Internal CSS
+
+Internal CSS is placed within the `<style>` tags in the `<head>` section of the HTML document. 
+It allows you to define CSS rules that apply only to the specific HTML document.
+
+```html copy showLineNumbers
+<head>
+  <style>
+    h2 {
+      color: red;
+      text-align: center;
+    }
+  </style>
+</head>
+
+<h2>Come to Hack School next week!</h2>
+```
+
+### External CSS
+
+External CSS involves creating a separate CSS file with all the styles and linking it 
+to the HTML document using the `<link>` 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: red;
+    text-align: center;
+}
+```
+
+index.html:
+```html copy showLineNumbers
+<head>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<h2>Come to Hack School next week!</h2>
+```
+
+### 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 `<div>` elements.
+
+styles.css:
+```css copy showLineNumbers
+div {
+    padding: 32px;
+}
+```
+
+index.html:
+```html copy showLineNumbers
+<div>
+    <p> The padding of this div is 32 px!</p>
+</div>
+<div>
+    <h3> The padding of this div is also 32 px!</p>
+</div>
+```
+
+* 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
+<div id="navbar">
+    <ul>
+        <li class="blue"><a href="home.asp">Blue Home</a></li>
+        <li><a href="contact.asp">Contact</a></li>
+        <li class="blue"><a href="about.asp">Blue About</a></li>
+    </ul>
+</div>
+```
+
+## Common Properties that CSS can Modify 
+
+- **Color**: `color` - Changing the text color, background color, or border color of elements.
+```html copy showLineNumbers
+<p style="color: blue;">Text with blue color</p>
+```
+- **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
+<p style="font-family: Arial, sans-serif; font-size: 16px; font-weight: bold;">Bold Arial 16px text</p>
+```
+- **Margins**: `margin` - Adjusting the space around an element, controlling the gap between elements.
+```html copy showLineNumbers
+<div style="margin: 20px;">Content with a 20px margin</div>
+```
+- **Padding**: `padding` - Adding space inside an element's boundaries, creating space between content and borders.
+```html copy showLineNumbers
+<div style="padding: 10px;">Content with 10px padding</div>
+```
+- **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
+<div style="border: 1px solid black; width: 100px; height: 50px;">Box with black 1px solid border</div>
+```
+- **Width and Height**: `width`, `height` - Specifying the dimensions of an element, allowing control over its size.
+```html copy showLineNumbers
+<div style="width: 200px; height: 100px; background-color: lightgray;"></div>
+```
+- **Background**: `background-image`, `background-color`, `background-position`, etc. - Setting background images, colors, and positioning for elements.
+```html copy showLineNumbers
+<div style="width: 200px; height: 100px; background-color: lightgray;"></div>
+```
+- **Text**: `text-align`, `text-decoration`, `text-transform` - Controlling text alignment, text decoration (underline, overline, etc.), and text transformation (uppercase, lowercase, capitalize).
+```html copy showLineNumbers
+<p style="text-align: center; text-decoration: underline; text-transform: uppercase;">Centered, underlined, uppercase text</p>
+```
+- **Display**: `display` - Changing how elements are displayed (block, inline, flex, grid, etc.) and how they interact with other elements.
+```html copy showLineNumbers
+<div style="display: flex; justify-content: space-between;">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</div>
+```
+- **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
+<div style="position: absolute; top: 50px; left: 100px;">Positioned at 50px from top and 100px from left</div>
+```
+- **Float**: `float` - Floating elements to either the left or right side of their container.
+```html copy showLineNumbers
+<img src="image.jpg" style="float: left; margin-right: 10px;" alt="Floating image">
+```
+- **Opacity**: `opacity` - Adjusting the transparency of elements and their content.
+```html copy showLineNumbers
+<div style="opacity: 0.7;">Semi-transparent content</div>
+```
+- **Transitions and Animations**: `transition`, `animation` - Applying smooth transitions and animations to elements.
+```html copy showLineNumbers
+<button style="transition: background-color 0.3s ease;">Hover me</button>
+```
+- **Shadows**: `box-shadow`, `text-shadow` - Adding box shadows or text shadows to elements for visual effects.
+```html copy showLineNumbers
+<div style="box-shadow: 2px 2px 5px gray; text-shadow: 1px 1px 2px black;">Shadowed box and text</div>
+```
+- **List Styles**: `list-style-type`, `list-style-image`, `list-style-position` 
+```html copy showLineNumbers
+<ul style="list-style-type: square;">
+  <li>Item 1</li>
+  <li>Item 2</li>
+</ul>
+```
+- **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
+<div class="table">
+  <div class="row header">
+    <div class="cell">Header 1</div>
+    <div class="cell">Header 2</div>
+    <div class="cell">Header 3</div>
+  </div>
+  <div class="row">
+    <div class="cell">Cell 1</div>
+    <div class="cell">Cell 2</div>
+    <div class="cell">Cell 3</div>
+  </div>
+</div>
+```
+
+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/)
diff --git a/pages/hack-school/flex.png b/pages/hack-school/flex.png