be-hacking-hyf · AAHEDD · Sep 19, 2019 · Sep 27, 2019
diff --git a/...k-1-project/0-blank-page-setup/index.html → ...roject-ahed/0-blank-page-setup/index.html b/...k-1-project/0-blank-page-setup/index.html → ...roject-ahed/0-blank-page-setup/index.html
diff --git a/...ek-1-project/0-blank-page-setup/style.css → ...project-ahed/0-blank-page-setup/style.css b/...ek-1-project/0-blank-page-setup/style.css → ...project-ahed/0-blank-page-setup/style.css
diff --git a/homework/week-1- project-ahed/1-head-and-header/Tic-tac-toe.png b/homework/week-1- project-ahed/1-head-and-header/Tic-tac-toe.png
diff --git a/homework/week-1- project-ahed/1-head-and-header/index.html b/homework/week-1- project-ahed/1-head-and-header/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+    <div class="body-wrapper">
+
+        <header class="header">
+          <h1 class="title" id="title" align="center">Welcome To Tic Tac Toe</h1>
+        </header>
+
+        <main class="main">
+          <p id="description">Tic-tac-toe (American English), noughts and crosses (British English), <br>Xs and Os is a paper-and-pencil game for two players,<br> X and O, who take turns marking the spaces in a 3×3 grid.<br> The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.</p>
+               <img src="Tic-tac-toe.png" alt="Tic-tac-toe" height="100" width="600"> </img>
+        </main>
+      </div>
+</body>
+
+</html>
diff --git a/homework/week-1- project-ahed/1-head-and-header/style.css b/homework/week-1- project-ahed/1-head-and-header/style.css
@@ -0,0 +1,39 @@
+* {
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    padding: 0;
+    margin: 0;
+    font-size: 62.5%;
+  }
+
+  body {
+    background-color: rgb(231, 130, 130);
+  }
+
+  .body-wrapper {
+    background-color: rgb(231, 130, 130);
+    border-radius: 1rem;
+    width: 85vw;
+    margin: 5vh auto;
+    padding: 2vh;
+  }
+
+  .title {
+    font-size: 4rem;
+    background-color: rgb(60, 183, 224);
+  }
+
+  .main {
+    font-size: 1.7rem;
+  }
+
+  @media screen and (min-width: 1000px) {
+    .body-wrapper {
+      width: 1000px;
+      padding: 1vw 5vw 3vw 5vw;
+    }
+  }
+
diff --git a/homework/week-1- project-ahed/2-rules-of-the-game/Tic-tac-toe.png b/homework/week-1- project-ahed/2-rules-of-the-game/Tic-tac-toe.png
diff --git a/homework/week-1- project-ahed/2-rules-of-the-game/index.html b/homework/week-1- project-ahed/2-rules-of-the-game/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+    <div class="body-wrapper">
+
+        <header class="header">
+          <h1 class="title" id="title" align="center">Welcome To Tic Tac Toe</h1>
+        </header>
+
+        <main class="main">
+          <p id="description">Tic-tac-toe (American English), noughts and crosses (British English), <br>Xs and Os is a paper-and-pencil game for two players,<br> X and O, who take turns marking the spaces in a 3×3 grid.<br> The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.</p>
+               <img src="Tic-tac-toe.png" alt="Tic-tac-toe" height="100" width="600"> </img>
+        </main>
+
+        <br>
+        <br>
+        <br>
+        <h1 class="title" id="title" align="center" ><b>RULES FOR TIC-TAC-TOE</b></h1>
+        <main class="main">
+
+            <p id="description">1. The game is played on a grid that's 3 squares by 3 squares.<br>
+                2. You are X, your friend (or the computer in this case) is O. Players take turns putting their marks in empty squares.<br>
+                3. The first player to get 3 of her marks in a row (up, down, across, or diagonally) is the winner.<br>
+                4. When all 9 squares are full, the game is over. If no player has 3 marks in a row, the game ends in a tie.
+            </p>
+                 <img src="Tic-tac-toe.png" alt="Tic-tac-toe" height="100" width="600"> </img>
+          </main>
+        </div>
+</body>
+
+</html>
diff --git a/homework/week-1- project-ahed/2-rules-of-the-game/style.css b/homework/week-1- project-ahed/2-rules-of-the-game/style.css
@@ -0,0 +1,39 @@
+* {
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    padding: 0;
+    margin: 0;
+    font-size: 62.5%;
+  }
+
+  body {
+    background-color: rgb(231, 130, 130);
+  }
+
+  .body-wrapper {
+    background-color: rgb(231, 130, 130);
+    border-radius: 1rem;
+    width: 85vw;
+    margin: 5vh auto;
+    padding: 2vh;
+  }
+
+  .title {
+    font-size: 4rem;
+    background-color: rgb(60, 183, 224);
+  }
+
+  .main {
+    font-size: 1.7rem;
+  }
+
+  @media screen and (min-width: 1000px) {
+    .body-wrapper {
+      width: 1000px;
+      padding: 1vw 5vw 3vw 5vw;
+    }
+  }
+
diff --git a/homework/week-1- project-ahed/3-unplayable-board/Tic-tac-toe.png b/homework/week-1- project-ahed/3-unplayable-board/Tic-tac-toe.png
diff --git a/homework/week-1- project-ahed/3-unplayable-board/index.html b/homework/week-1- project-ahed/3-unplayable-board/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+    <div class="body-wrapper">
+
+        <header class="header">
+          <h1 class="title" id="title" align="center">Welcome To Tic Tac Toe</h1>
+        </header>
+
+        <main class="main">
+          <p id="description">Tic-tac-toe (American English), noughts and crosses (British English), <br>Xs and Os is a paper-and-pencil game for two players,<br> X and O, who take turns marking the spaces in a 3×3 grid.<br> The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.</p>
+               <img src="Tic-tac-toe.png" alt="Tic-tac-toe" height="100" width="600"> </img>
+        </main>
+
+        <br>
+        <br>
+        <br>
+        <h1 class="title" id="title" align="center" ><b>RULES FOR TIC-TAC-TOE</b></h1>
+        <main class="main">
+
+            <p id="description">1. The game is played on a grid that's 3 squares by 3 squares.<br>
+                2. You are X, your friend (or the computer in this case) is O. Players take turns putting their marks in empty squares.<br>
+                3. The first player to get 3 of her marks in a row (up, down, across, or diagonally) is the winner.<br>
+                4. When all 9 squares are full, the game is over. If no player has 3 marks in a row, the game ends in a tie.
+            </p>
+
+        <br>
+        <br>
+        <br>
+        <h1 class="title" id="title" align="center" ><b>TIC-TAC-TOE Board</b></h1>
+
+        <br>
+        <br>
+        <br>
+        <table id="tictac" align="center"><tbody>
+            <tr><td id="cell0"></td><td id="cell1"></td><td id="cell2"></td></tr>
+            <tr><td id="cell3"></td><td id="cell4"></td><td id="cell5"></td></tr>
+            <tr><td id="cell6"></td><td id="cell7"></td><td id="cell8"></td></tr>
+            </tbody></table>        
+
+          </main>
+
+
+        </div>
+</body>
+
+</html>
diff --git a/homework/week-1- project-ahed/3-unplayable-board/style.css b/homework/week-1- project-ahed/3-unplayable-board/style.css
@@ -0,0 +1,61 @@
+* {
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    padding: 0;
+    margin: 0;
+    font-size: 62.5%;
+  }
+
+  body {
+    background-color: rgb(231, 130, 130);
+  }
+
+  .body-wrapper {
+    background-color: rgb(231, 130, 130);
+    border-radius: 1rem;
+    width: 85vw;
+    margin: 5vh auto;
+    padding: 2vh;
+  }
+
+  .title {
+    font-size: 4rem;
+    background-color: rgb(60, 183, 224);
+  }
+
+  .main {
+    font-size: 1.7rem;
+  }
+
+  @media screen and (min-width: 1000px) {
+    .body-wrapper {
+      width: 1000px;
+      padding: 1vw 5vw 3vw 5vw;
+    }
+  }
+
+
+
+  table#tictac td {
+    width: 5em;
+    height: 5em;
+    text-align: center;
+    vertical-align: middle;
+    font: bold 36px sans-serif;
+}
+
+td#cell0, td#cell1, td#cell2, td#cell3, td#cell4, td#cell5 {
+    border-bottom: 3px solid rgb(0, 23, 153);
+}
+
+td#cell0, td#cell1, td#cell3, td#cell4, td#cell6, td#cell7 {
+    border-right: 3px solid rgb(0, 10, 153);
+}
+
+div#result {
+    margin: 0.5em;
+    font: 24px sans-serif;
+}
diff --git a/homework/week-1- project-ahed/4-playable-board/Tic-tac-toe.png b/homework/week-1- project-ahed/4-playable-board/Tic-tac-toe.png
diff --git a/homework/week-1- project-ahed/4-playable-board/index.html b/homework/week-1- project-ahed/4-playable-board/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+    <div class="body-wrapper">
+
+        <header class="header">
+          <h1 class="title" id="title" align="center">Welcome To Tic Tac Toe</h1>
+        </header>
+
+        <main class="main">
+          <p id="description">Tic-tac-toe (American English), noughts and crosses (British English), <br>Xs and Os is a paper-and-pencil game for two players,<br> X and O, who take turns marking the spaces in a 3×3 grid.<br> The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.</p>
+               <img src="Tic-tac-toe.png" alt="Tic-tac-toe" height="100" width="600"> </img>
+        </main>
+
+        <br>
+        <br>
+        <br>
+        <h1 class="title" id="title" align="center" ><b>RULES FOR TIC-TAC-TOE</b></h1>
+        <main class="main">
+
+            <p id="description">1. The game is played on a grid that's 3 squares by 3 squares.<br>
+                2. You are X, your friend (or the computer in this case) is O. Players take turns putting their marks in empty squares.<br>
+                3. The first player to get 3 of her marks in a row (up, down, across, or diagonally) is the winner.<br>
+                4. When all 9 squares are full, the game is over. If no player has 3 marks in a row, the game ends in a tie.
+            </p>
+
+        <br>
+        <br>
+        <br>
+        <h1 class="title" id="title" align="center" ><b>TIC-TAC-TOE Board</b></h1>
+
+        <table id="tictac"><tbody>
+            <tr><td id="cell0"></td><td id="cell1"></td><td id="cell2"></td></tr>
+            <tr><td id="cell3"></td><td id="cell4"></td><td id="cell5"></td></tr>
+            <tr><td id="cell6"></td><td id="cell7"></td><td id="cell8"></td></tr>
+            </tbody></table>
+
+            <div id="result"></div>
+
+            <form>
+            <button type="button" id="tictacreset">New Game</button>
+            </form>
+
+
+          </main>
+
+
+        </div>
+</body>
+
+</html>
diff --git a/homework/week-1- project-ahed/4-playable-board/style.css b/homework/week-1- project-ahed/4-playable-board/style.css
@@ -0,0 +1,61 @@
+* {
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    padding: 0;
+    margin: 0;
+    font-size: 62.5%;
+  }
+
+  body {
+    background-color: rgb(231, 130, 130);
+  }
+
+  .body-wrapper {
+    background-color: rgb(231, 130, 130);
+    border-radius: 1rem;
+    width: 85vw;
+    margin: 5vh auto;
+    padding: 2vh;
+  }
+
+  .title {
+    font-size: 4rem;
+    background-color: rgb(60, 183, 224);
+  }
+
+  .main {
+    font-size: 1.7rem;
+  }
+
+  @media screen and (min-width: 1000px) {
+    .body-wrapper {
+      width: 1000px;
+      padding: 1vw 5vw 3vw 5vw;
+    }
+  }
+
+
+
+  table#tictac td {
+    width: 5em;
+    height: 5em;
+    text-align: center;
+    vertical-align: middle;
+    font: bold 36px sans-serif;
+}
+
+td#cell0, td#cell1, td#cell2, td#cell3, td#cell4, td#cell5 {
+    border-bottom: 3px solid rgb(0, 23, 153);
+}
+
+td#cell0, td#cell1, td#cell3, td#cell4, td#cell6, td#cell7 {
+    border-right: 3px solid rgb(0, 10, 153);
+}
+
+div#result {
+    margin: 0.5em;
+    font: 24px sans-serif;
+}
diff --git a/...ek-1-project/1-head-and-header/index.html → ...ek-1- project-ahed/5-up-to-you/index.html b/...ek-1-project/1-head-and-header/index.html → ...ek-1- project-ahed/5-up-to-you/index.html
diff --git a/...eek-1-project/1-head-and-header/style.css → ...eek-1- project-ahed/5-up-to-you/style.css b/...eek-1-project/1-head-and-header/style.css → ...eek-1- project-ahed/5-up-to-you/style.css
diff --git a/homework/week-1-project/README.md → homework/week-1- project-ahed/README.md b/homework/week-1-project/README.md → homework/week-1- project-ahed/README.md
diff --git a/homework/week-1-project/index.html → homework/week-1- project-ahed/index.html b/homework/week-1-project/index.html → homework/week-1- project-ahed/index.html
diff --git a/homework/week-1-project/2-rules-of-the-game/index.html b/homework/week-1-project/2-rules-of-the-game/index.html
diff --git a/homework/week-1-project/2-rules-of-the-game/style.css b/homework/week-1-project/2-rules-of-the-game/style.css
diff --git a/homework/week-1-project/3-unplayable-board/index.html b/homework/week-1-project/3-unplayable-board/index.html
diff --git a/homework/week-1-project/3-unplayable-board/style.css b/homework/week-1-project/3-unplayable-board/style.css
diff --git a/homework/week-1-project/4-playable-board/index.html b/homework/week-1-project/4-playable-board/index.html
diff --git a/homework/week-1-project/4-playable-board/style.css b/homework/week-1-project/4-playable-board/style.css
diff --git a/homework/week-1-project/5-up-to-you/index.html b/homework/week-1-project/5-up-to-you/index.html
diff --git a/homework/week-1-project/5-up-to-you/style.css b/homework/week-1-project/5-up-to-you/style.css