CodeCrew-CodeSchool · mrjones91 · Feb 12, 2024 · Feb 13, 2024 · Feb 13, 2024 · Feb 13, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,61 @@
+# CSS Week
+
+## Monday
+
+- Layout
+
+    Using layout.html and layout.js, we designed a page that has a spatially designed layout. Each element, instead of being based on content and floating left/right, is given a percentage of the page to occupy.
+
+    Layout.js is only used to color the divs on the layout.html page. Do not edit/worry too much about the javascript.
+
+- Animations Intro
+
+    keyframes
+
+        from & to - useful for 2 state animation, a start and finish
+            from sets the beginning
+            to sets the end
+        percentages - thinking of your animation more as a video that you're editing, you can add styles that control what the target should be doing at certain parts of the animation. In the example, the emoji starts at 0, halfway through its animation it is across the page. 100% aka at the end of the animation, it should be back where it started at 0
+
+## Tuesday
+
+- [Selectors](https://codeschoolcourses.slack.com/archives/C06ELJ3SV1A/p1707838519276469)
+
+    - Elementname/Tagname/Type Selectors
+    - Class Selector
+    - ID Selector
+    - Attribute Selector
+    - Pseudo-class Selector
+    - Pseudo-Element Selector
+
+## Wednesday
+
+- Box Model
+    - content
+    - padding
+    - border
+    - margin
+    - ++ block vs inline - new line vs same line
+    - ++ alternative model - no margin or padding
+
+- Flex
+
+    Control the layout of child elements either horizontally or vertically
+
+- Grid
+
+    Control the layout of child elements both horizontally and vertically
+
+
+## Layout Examples
+
+The folders in this repo contain a collection of the various ways of setting up page layouts we've discussed this week.
+
+[semantic](https://codecrew-codeschool.github.io/css-intro/semantic/layout.html) 
+- using semantic elements and the float style for sidebars, we can arrange content on our page based on our content.
+
+[div](https://codecrew-codeschool.github.io/css-intro/div/layout.html) 
+- irrespective of content, we can generate a layout using div elements and give them a percentage of the page they can take up.
+
+[grid](https://codecrew-codeschool.github.io/css-intro/grid/layout.html) 
+- going all in, we can use semantic elements where applicable, and style our page with a specific grid layout to properly space elements
diff --git a/anim/index.html b/anim/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animation Overview</title>
+</head>
+<body>
+    <style>
+        h1 {
+            opacity:0.5;
+        }
+        h1:hover {
+            opacity:1;
+        }
+    </style>
+    <h1>Header Text</h1>
+    <h1>Header Text</h1>
+    <h3>Header Text</h3>
+    <h1>Header Text</h1>
+</body>
+</html>
diff --git a/div/layout.html b/div/layout.html
@@ -0,0 +1,93 @@
+<body style="">
+<!-- Your Divs here -->
+<style>
+    body {
+        margin: 0;
+        overflow: hidden;
+        background-color: darkgrey;
+    }
+    div {
+        width: 100vw;
+    }
+    #header {
+        height: 15vh;
+    }
+    #main {
+        height: 70vh;
+        display: flex;
+    }
+    #content {
+        height: 90%;
+        width: 70%;
+        margin: 2.5%;
+    }
+    #sidebar {
+        height: 70vh;
+        width: 20%;
+        margin: 0% 0 0% 2.5%;
+        position: absolute;
+        right: 0;
+    }
+    #footer {
+        height: 15vh;
+    }
+    /* attribute - a tags with a specific title attribute value */
+    a[title="styled link"] {
+        color: red;
+    }
+    /* pseudo-class - a tags that have been clicked */
+    a:visited {
+        color: red;
+    }
+    /* psuedo-class - a tags that are being hovered over */
+    a:hover {
+        color: green;
+    }
+    /* pseudo-element - the first line of a paragraph */
+    p::first-line {
+        color: turquoise;
+        font-family: 'Comic Sans';
+    }
+    /* invalid pseudo-element attempt - the last line of a paragraph is not an existing pseudo-element */
+    p::last-line {
+        color: purple;
+        font-family: Helvetica;
+    }
+
+    /* Paragraphs that have a next paragraph following them */
+    p:has(+ p) {
+    font-weight: bold;
+    }
+</style>
+
+<div id="header"></div> <!--header-->
+
+<div id="main">
+    <div>
+        <div id="content">
+            <ul style="display: flex; list-style: none;">
+            <li>1</li>
+            <li>2</li>
+            <li>3</li>
+            </ul>
+            <a title="styled link" href="https://code-crew.org">This is our link</a>
+            <a title="not styled" href="https://google.com">This is just text</a>
+            <br/>
+            <img alt="no image" src=""/>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo autem iusto earum modi quas facere consequatur fuga temporibus a ullam, architecto ab iure maxime amet nihil ad nostrum saepe ipsum.
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur dolores, doloremque, facilis incidunt quisquam earum facere, aliquid minima numquam molestiae praesentium cum pariatur dolore! Cumque numquam id perferendis ex distinctio!
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis aut pariatur eveniet aliquam! Numquam, a. Dolorum, possimus sapiente asperiores repudiandae officia, cumque aperiam consectetur quas quidem, veritatis eius labore facilis!
+            </p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo autem iusto earum modi quas facere consequatur fuga temporibus a ullam, architecto ab iure maxime amet nihil ad nostrum saepe ipsum.
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur dolores, doloremque, facilis incidunt quisquam earum facere, aliquid minima numquam molestiae praesentium cum pariatur dolore! Cumque numquam id perferendis ex distinctio!
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis aut pariatur eveniet aliquam! Numquam, a. Dolorum, possimus sapiente asperiores repudiandae officia, cumque aperiam consectetur quas quidem, veritatis eius labore facilis!
+            </p>
+        </div>
+        <div id="sidebar"></div>
+    </div>
+</div> <!--main & sidebar-->
+
+<div id="footer"></div> <!--footer-->
+
+</body>
+<script src="./layout.js"></script>
diff --git a/div/layout.js b/div/layout.js
@@ -0,0 +1,18 @@
+function changeDivDisplayToInlineBlock() {
+    // Select all div elements on the page
+    const divs = document.querySelectorAll('div');
+
+    // Iterate over each div
+    divs.forEach(function(div) {
+        div.style.display = "inline-block"
+        div.style.boxSizing = "border-box"
+        div.style.border = "3px solid black"
+        div.style.minWidth = "1%"
+        div.style.minHeight = "1%"
+        const randomColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
+        div.style.border = `3px solid ${randomColor}`
+    });
+}
+
+// Run the function to change the colors
+changeDivDisplayToInlineBlock();
diff --git a/grid/C.png b/grid/C.png