be-hacking-hyf · elifsancak · Sep 19, 2019 · Sep 23, 2019 · Sep 23, 2019 · Sep 23, 2019
diff --git a/README.md b/README.md
@@ -1,84 +1,113 @@
-<h1 align="center">HackYourFuture Belgium</h1>
-
-<div align="center">
-  <a href="https://hackyourfuture.be" target="_blank">
-    <img src="https://user-images.githubusercontent.com/18554853/63941625-4c7c3d00-ca6c-11e9-9a76-8d5e3632fe70.jpg" width="250" height="250"/>
-  </a>
-</div>
-
-# Getting started
-
-> Welcome to your first training at HYF. Please read completely this file and make sure you understand everything.
-Happy learning 😁
-
-This repo contains all the materials for the module 1: `HTML, CSS`.  The homework, exercises, and study code are in the main repository for you to fork and complete, all the lesson plans and weekly information are [in the wiki](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/wiki) and the slides from class are [right here](https://be-hacking-hyf.github.io/HTML-CSS-GitHub/slides/).
-
-While this module is called "HTML & CSS", it's important to remember that you also need to learn how to Fork & Pull Request on GitHub, to Push and Pull your work between GitHub and your computer, and to develop locally on your computer using a browser+DevTools and a specialized text editor.
-
-In the first weeks it's very likely that you'll spend as much time figuring out how to publish and turn in your projects as you will spend building them.  _This is totally normal and OK!_  Working like a developer takes time and practice to get good at, and at this point in your learning it's even more important than mastering HTML & CSS!
-
-So on days when you find yourself spending a couple hours trying to push your homework or send a PR for your coach to look over your homework, remind yourself that it's all time well spent. Mastering these skills _now_ will free your time _later_ to focus on studying the more interesting and challenging skills in this course.
-
-### Your mission
-
-- Prepare each class by reading the [wiki](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/wiki) preparation work called [Prep Work (for week 1)](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/wiki/Prep-Work-wk-1)
-- During class, be focus, ask questions as much as you can, help your teammates when they are struggling.
-
----
-
-## It's not finished... yet!
-
-If only four hours a week were enough to learn web development!  But sadly it's not :(  Along side coming to class, you will have homework assignments.
-
-There are three types of homework:
-* [__Weekly Projects__](#weekly-projects): The goal of these projects is for you to practice integrating all of your skills into one live web site. These assignments are due each Thursday.
-* [__Module Exercises__](#module-exercises): The module exercises are a chance for you to focus in on some of the trickier or more important new skills without having to think about an entire project.  These exercises are due at the end of the module with the third week's project.
-* [__Suggested Study__](#suggested-study): The goal of Suggested Studies is to help you review old skills and prepare for new ones by providing you with small exercises that don't always result in a finished product but are always worth your time.  If you ever find yourself with some time to study but not enough to dig into the Projects or Exercises, Suggested Studies are there for you!   We won't be checking that you do these exercises, but you'll feel it later on if you don't :)
-
-### Weekly Projects
-
-Each week you will be required to complete a small project that integrates everything you've learned so far (HTML, CSS, GitHub, working locally, incremental development).  The goal of these projects is to practice planning and building projects in a methodical and structured way, and to write the cleanest and most correct code possible.  The goal of these projects _is not_ to build the fanciest most beautiful website, to use all the latest CSS tricks, or to use cool libraries and API's.
-
-Here's a short list of do's and don't's that can help you stay on track:
-
-__DO__
-* ... use only plain HTML & CSS (no CSS frameworks like Bootstrap or Material!)
-* ... completely finish one step of the project before moving on to the next
-* ... be very careful about your CSS classes, selectors and id's
-* ... Properly indent your code
-* ... find the simplest solution to each step of the project
-* ... start each step of the project by copy-pasting the last step
-
-__Don't__
-* ... think that your site can be pretty enough to make up for messy code
-* ... use any CSS libraries or frameworks
-* ... make the any steps of your project do less _or more_ than is assigned
-* ... move on to the next step before the previous one is finished
-* ... include any JavaScript
-
-Take a look at the completed example to study to get an idea what's expected of you:
-* [the live example](https://be-hacking-hyf.github.io/HTML-CSS-GitHub/study-code/example-project-feedback-form/)
-* [it's source code](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/tree/master/study-code/example-project-feedback-form).
-
-You can also preview the assignments here:
-1. [human-intelligence TicTacToe board](./homework/week-1-project)
-1. [responsive Web Designer site](./homework/week-3-project)
-1. [replicate DuckDuckGo](./homework/week-3-project)
-
-### Module Exercises
-
-Along side Sunday classes and weekly projects which focus on integrating your skills, you'll be expected to complete a set of exercises to focus in and practice certain skills in isolation. While the project teaches how to integrate your skills, the exercises will focus on strengthening individual skills.  This module's exercises can be found [in the exercise folder](./homework/module-exercises).
-
-Exercises are all due at the end of the Module, we won't be checking your exercises each week (unless you have some questions of course!).  We also won't accept any homework for JavaScript 1 until you have submitted your exercises from HTML & CSS.
-
-So be organized about this!  It's a lot easier to finish these exercises if you study them an hour a day than if you cram it all into the last weekend, and you'll learn a whole lot more along the way.
-
-
-### Suggested Study
-
-You can find our study suggestions in each week's ```Homework``` page from the wiki.
-
-
----
----
-### <a href="https://hackyourfuture.be" target="_blank"><img src="https://user-images.githubusercontent.com/18554853/63941625-4c7c3d00-ca6c-11e9-9a76-8d5e3632fe70.jpg" width="100" height="100" alt="Hack Your Future: Belgium"></img></a>
+## HTML-CSS-GitHub - Elif Sancak
+
+## Week 3 Project 
+
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+
+</head>
+
+<body>
+
+<a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-3-project/index.html">DuckDuckGo Website and Branches</a><br>
+## HTML-CSS-GitHub - Elif Sancak
+
+## Week 2 Project 
+  <table width="75%" border="1">
+    <thead>
+      <tr>
+        <th>a user can ...</th>
+        <th>index.html</th>
+        <th>about.html</th>
+        <th>services.html</th>
+        <th>CSS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-2-project/0-blank-page-setup/">(0-blank-page)</a> </td>
+        <td>empty HTML template, requiring CSS file, title tag</td>
+        <td>(doesn't exist yet!)</td>
+        <td>(doesn't exist yet!)</td>
+        <td>empty CSS file</td>
+      </tr>
+      <tr>
+        <td><a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-2-project/1-HTML(title)/">1-HTML(title)</a> </td>
+        <td>HTML adding <br>(title, link and meta tag)</td>
+        <td>(doesn't exist yet!)</td>
+        <td>(doesn't exist yet!)</td>
+        <td>css page created(body css added)</td>
+      </tr>
+      <tr>
+        <td><a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-2-project/2-HEADER/">(2-HEADER)</td>
+        <td>HTML adding <br>(HEADER (div, h, span tag))</td>
+        <td>(doesn't exist yet!)</td>
+        <td>(doesn't exist yet!)</td>
+        <td>css adding (header id/class)</td>
+      </tr>
+      <tr>
+        <td><a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-2-project/3-NAV/">(3-NAV)</td>
+        <td>HTML adding <br>(NAV (div, list, tag))</td>
+        <td>about page created</td>
+        <td>services page created</td>
+        <td>css adding (header a/ul/li/nav/a:hover)</td>
+      </tr>
+      <tr>
+          <td><a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-2-project/4-SECTION/">(4-SECTION)</td>
+          <td>HTML adding (SECTION (div, h, p, form, img tag))</td>
+          <td>empty about page</td>
+          <td>empty services page</td>
+          <td>css adding (class,id,h,href,form,p,input)</td>
+        </tr>
+        <tr>
+            <td><a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-2-project/5-FOOTER/">(5-FOOTER)</td>
+            <td>HTML adding <br>(FOOTER (p tag))</td>
+            <td>empty about page</td>
+            <td>empty services page</td>
+            <td>css adding (footer style changed)</td>
+          </tr>
+          <tr>
+            <td><a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-2-project/6-ARTICLE/">(6-ARTICLE)</td>
+            <td>HTML(home)page</td>
+            <td>About page adding (ARTICLE)(id,class,p,h)tag)</td>
+            <td>Services page adding (ARTICLE)(id,class,p,h)tag)</td>
+            <td>css adding (article style changed)</td>
+          </tr>
+          <tr>
+              <td><a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-2-project/7-ASIDE/about.html">(7-ASIDE)(about.html)<br>
+                <a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-2-project/7-ASIDE/services.html">(7-ASIDE)(services.html)</td>
+              <td>HTML(home)page</td>
+              <td>About page adding (ASIDE)(id,class,p,h)tag)</td>
+              <td>Services page adding (ASIDE)(id,class,p,h,ul,form,button)tag)</td>
+              <td>css adding (aside style changed)+(@media css code)</td>
+            </tr>
+    <tbody>
+  </table>
+
+## HTML-CSS-GitHub - Elif Sancak
+
+## Week 1 Project 
+  <table width="40%">
+    <tbody>
+      <tr>
+        <td><a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-1-project/0-blank-page-setup/">0-blank-page-setup</a> </td>
+      </tr>
+      <tr>
+        <td><a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-1-project/1-head-and-header/">1-head-and-header</a> </td> </tr>
+      <tr>
+        <td><a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-1-project/2-rules-of-the-game/">2-rules-of-the-game</td> </tr>
+      <tr>
+        <td><a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-1-project/3-unplayable-board/">3-unplayable-board</td> </tr>
+      <tr>
+          <td><a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-1-project/4-playable-board/">4-playable-board</td> </tr>
+        <tr>
+            <td><a href="https://elifsancak.github.io/HTML-CSS-GitHub/homework/week-1-project/5-up-to-you/">5-up-to-you</td> </tr>         
+    <tbody>
+  </table>          
+
+
+</body>
+
+</html>
diff --git a/homework/week-1-project/0-blank-page-setup/index.html b/homework/week-1-project/0-blank-page-setup/index.html
@@ -5,7 +5,7 @@
   <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">
+  <link rel="stylesheet" href="index.css">
 </head>
 
 <body>

diff --git a/homework/week-1-project/0-blank-page-setup/style.css b/homework/week-1-project/0-blank-page-setup/style.css
@@ -0,0 +1,3 @@
+body {
+    background-color: white;
+}
diff --git a/homework/week-1-project/1-head-and-header/index.html b/homework/week-1-project/1-head-and-header/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale 1.0">
+        <meta name="description" content="Tictactoc game" />
+        <link rel="stylesheet" href="style.css">
+        <title>TICTACTOE</title>
+    </head>
+    <body>
+
+        <header>
+            <h1>Tic Tac Toe</h1>
+        </header>
+
+    </body>
+</html>
diff --git a/homework/week-1-project/1-head-and-header/style.css b/homework/week-1-project/1-head-and-header/style.css
@@ -0,0 +1,6 @@
+body {
+    background-color: white;
+}
+h1 {
+    text-align: center;
+}
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
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale 1.0">
+        <meta name="description" content="Tictactoc game" />
+        <link rel="stylesheet" href="style.css">
+        <title>TICTACTOE</title>
+    </head>
+    <body>
+
+        <header>
+            <h1>Tic Tac Toe</h1>
+        </header>
+
+    <details>
+
+      <summary style="color:red"> Rules For TICTACTOE</summary>
+      <ul>
+          <li style="color:black"> The first player go first. Though traditionally, the first player goes with "X",<br> 
+            you can allow the first player to decide whether he wants to go with "X"s or "O"s.</li>
+          <li style="color:black">These symbols will be placed on the table, in the attempt to have three of them in a row.<br>
+            Have the second player go second.</li>
+          <li style="color:black">After the first player goes, then the second player should <br>
+            put down his symbol, which will be different from the symbol of the first player.</li>
+          <li style="color:black">Keep alternating moves until one of the players has drawn a row of three symbols or until no one can win.<br>
+            The first player to draw three of his or her symbols in a row, whether it is horizontal, vertical, or diagonal, <br>
+            has won tic-tac-toe.</li>
+          </ul>
+
+  </details>  
+    </body>
+</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
@@ -0,0 +1,6 @@
+body {
+    background-color: white;
+}
+h1 {
+    text-align: center;
+}
diff --git a/homework/week-1-project/3-unplayable-board/index.html b/homework/week-1-project/3-unplayable-board/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale 1.0">
+        <meta name="description" content="Tictactoc game" />
+        <link rel="stylesheet" href="style.css">
+        <title>TICTACTOE</title>
+    </head>
+    <body>
+
+        <header>
+            <h1>Tic Tac Toe</h1>
+        </header>
+
+
+    <main>
+        <table id="board">
+
+                <tr>
+                        <td><div class="form__item">
+                                <select class="form__input" id="dropdown" name="">
+                                  <option value="1">X</option>
+                                  <option value="1">O</option>
+                                </select>
+                            </div></td>
+
+                                <td><div class="form__item">
+                                        <select class="form__input" id="dropdown" name="">
+                                          <option value="1">X</option>
+                                          <option value="1">O</option>
+                                        </select>
+                                    </div></td>
+
+                                        <td><div class="form__item">
+                                                <select class="form__input" id="dropdown" name="">
+                                                  <option value="1">X</option>
+                                                  <option value="1">O</option>
+                                                </select>
+                                            </div></td>
+
+                        </tr>
+
+                        <tr>
+                                <td><div class="form__item">
+                                        <select class="form__input" id="dropdown" name="">
+                                          <option value="1">X</option>
+                                          <option value="1">O</option>
+                                        </select>
+                                    </div></td>
+
+                                        <td><div class="form__item">
+                                                <select class="form__input" id="dropdown" name="">
+                                                  <option value="1">X</option>
+                                                  <option value="1">O</option>
+                                                </select>
+                                            </div></td>
+
+                                                <td><div class="form__item">
+                                                        <select class="form__input" id="dropdown" name="">
+                                                          <option value="1">X</option>
+                                                          <option value="1">O</option>
+                                                        </select>
+                                                    </div></td>
+
+                                </tr>
+                                                <tr>
+                        <td><div class="form__item">
+                                <select class="form__input" id="dropdown" name="">
+                                  <option value="1">X</option>
+                                  <option value="1">O</option>
+                                </select>
+                            </div></td>
+
+                                <td><div class="form__item">
+                                        <select class="form__input" id="dropdown" name="">
+                                          <option value="1">X</option>
+                                          <option value="1">O</option>
+                                        </select>
+                                    </div></td>
+
+                                        <td><div class="form__item">
+                                                <select class="form__input" id="dropdown" name="">
+                                                  <option value="1">X</option>
+                                                  <option value="1">O</option>
+                                                </select>
+                                            </div></td>
+                                                 </tr>
+
+
+
+        </table>
+    </main>
+
+
+    <details>
+
+      <summary style="color:red"> Rules For TICTACTOE</summary>
+      <ul>
+          <li style="color:black"> The first player go first. Though traditionally, the first player goes with "X",<br> 
+            you can allow the first player to decide whether he wants to go with "X"s or "O"s.</li>
+          <li style="color:black">These symbols will be placed on the table, in the attempt to have three of them in a row.<br>
+            Have the second player go second.</li>
+          <li style="color:black">After the first player goes, then the second player should <br>
+            put down his symbol, which will be different from the symbol of the first player.</li>
+          <li style="color:black">Keep alternating moves until one of the players has drawn a row of three symbols or until no one can win.<br>
+            The first player to draw three of his or her symbols in a row, whether it is horizontal, vertical, or diagonal, <br>
+            has won tic-tac-toe.</li>
+          </ul>
+
+  </details>  
+    </body>
+</html>