diff --git a/README.md b/README.md index 3a2d9de..6740a70 100644 --- a/README.md +++ b/README.md @@ -1,84 +1,161 @@ -

HackYourFuture Belgium

- -
- - - -
- -# 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. - - ---- ---- -### Hack Your Future: Belgium +## Week 1 Project - Yavuz Ugurtas + + +

+ I have tried to build a non-interactive TicTacToe board. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StagesContextMy notes
Blank Page empty HTML template and CSS fileI did not understand what kind of role it has
Head and Headertitle, main div, header, description I've tried my best
Rules of the game a section describing the rules of TicTactoeAdded extra tutorial
Example (Unplayable) Board empty 3x3 TicTacToe board The best Tic Tac Toe board in the world
"O" Wins!There are Xs and OsI've just filled in the blanks. Couldn't figure it out how to create the game itself
+ + + + + + ## Week 2 Project - Yavuz Ugurtas + + +

+ I have tried to build a brand new website +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StagesContextMy notes
Blank Page empty HTML template and CSS fileEmpty
Header parttitle, header, nav I've tried my best
section part boxes,showcasemain page
About menu other pages
Services menu other pages
Footer part Footer simple footer
+ + + + + ## Week 3 Project - Yavuz Ugurtas + + + +

+ Duch Duch Go - Original one +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StagesContextMy notes
Part-0 empty HTML template and CSS fileEmpty
Part-1Search box and logo Main page, I couldnt manage the nav part, I think it is js
Part-2 second page - infobackground changed, pic added
Part-3 3rd page - info background changed, pic added
Part-4 4th page - info background changed, pic added
Part-5 Footer background changed, pic added, go to the top button added
+ + + + + + + + + diff --git a/homework/week-1-project/1-head-and-header/index.html b/homework/week-1-project/1-head-and-header/index.html index e69de29..0dbebba 100644 --- 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,76 @@ + + + + + + + + + + + + + + +
+ Tic Tac Toe +
+ +
+ +

+ If tic-tac-toe were as simple as it seems,
+ why has it been around for over 3,000 years? +

+ + + + + This classic game contributes to children’s developmental growth in numerous ways + including their understanding of predictability, problem solving, spatial reasoning, + hand-eye coordination, turn taking, and strategizing. Tic-tac-toe is a simple, + two-player game which, if played optimally by both players, will always result in a tie. + + The game is also called noughts and crosses or Xs and Os. Tic-tac-toe is a game that is + traditionally played by being drawn on paper, and it can be played on a computer or + on a variety of media. + +

+ History +

+ + Games played on three-in-a-row boards can be traced back to ancient Egypt, + where such game boards have been found on roofing tiles dating from around + 1300 BCE. An early variation of tic-tac-toe was played in the Roman Empire, + around the first century BC. It was called terni lapilli (three pebbles at a time) + and instead of having any number of pieces, each player only had three, thus they + had to move them around to empty spaces to keep playing. The game's grid markings + have been found chalked all over Rome. Another closely related ancient game is three + men's morris which is also played on a simple grid and requires three pieces in a + row to finish,[8] and Picaria, a game of the Puebloans.The different names of the + game are more recent. The first print reference to "noughts and crosses" + (nought being an alternative word for zero), the British name, appeared in 1858, + in an issue of Notes and Queries. The first print reference to a game called + "tick-tack-toe" occurred in 1884, but referred to "a children's game played + on a slate, consisting in trying with the eyes shut to bring the pencil down + on one of the numbers of a set, the number hit being scored". "Tic-tac-toe" + may also derive from "tick-tack", the name of an old version of backgammon + first described in 1558. The US renaming of "noughts and crosses" as "tic-tac-toe" + occurred in the 20th century. + The computer player could play perfect games of tic-tac-toe against a human opponent. + + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/homework/week-1-project/1-head-and-header/style.css b/homework/week-1-project/1-head-and-header/style.css index e69de29..dd20694 100644 --- 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,41 @@ + +body { + background-image: url("https://assets.freeprintable.com/images/item/original/tic-tac-toe.jpg") +} + +header { + color: rgb(255, 255, 255); + text-shadow: 2px 5px 20px #000000; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 60px; + text-align: center; + background-color: rgb(255, 255, 255); + + + +} + +h2, h3 { + font-size: 24px; + color: midnightblue; + text-align: center; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + text-shadow: 1px 1px 1px #6e6e6e; + +} + +h3 { + font-size: 20px; + text-align: left; +} + +div { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + padding: 8px; + border: 8px groove rgb(255, 255, 255); + text-shadow: 2px 2px 2px #35353585; + padding-bottom: 30px; + background-color: rgb(255, 255, 255); + font-size: 18px; +} + diff --git a/homework/week-1-project/2-Rules/index.html b/homework/week-1-project/2-Rules/index.html new file mode 100644 index 0000000..a3e12f1 --- /dev/null +++ b/homework/week-1-project/2-Rules/index.html @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + +
+ Tic Tac Toe +
+ +
+ +

+ If tic-tac-toe were as simple as it seems,
+ why has it been around for over 3,000 years? +

+ + + + + This classic game contributes to children’s developmental growth in numerous ways + including their understanding of predictability, problem solving, spatial reasoning, + hand-eye coordination, turn taking, and strategizing. Tic-tac-toe is a simple, + two-player game which, if played optimally by both players, will always result in a tie. + + The game is also called noughts and crosses or Xs and Os. Tic-tac-toe is a game that is + traditionally played by being drawn on paper, and it can be played on a computer or + on a variety of media. + +

+ History +

+ + Games played on three-in-a-row boards can be traced back to ancient Egypt, + where such game boards have been found on roofing tiles dating from around + 1300 BCE. An early variation of tic-tac-toe was played in the Roman Empire, + around the first century BC. It was called terni lapilli (three pebbles at a time) + and instead of having any number of pieces, each player only had three, thus they + had to move them around to empty spaces to keep playing. The game's grid markings + have been found chalked all over Rome. Another closely related ancient game is three + men's morris which is also played on a simple grid and requires three pieces in a + row to finish,[8] and Picaria, a game of the Puebloans.The different names of the + game are more recent. The first print reference to "noughts and crosses" + (nought being an alternative word for zero), the British name, appeared in 1858, + in an issue of Notes and Queries. The first print reference to a game called + "tick-tack-toe" occurred in 1884, but referred to "a children's game played + on a slate, consisting in trying with the eyes shut to bring the pencil down + on one of the numbers of a set, the number hit being scored". "Tic-tac-toe" + may also derive from "tick-tack", the name of an old version of backgammon + first described in 1558. The US renaming of "noughts and crosses" as "tic-tac-toe" + occurred in the 20th century. + The computer player could play perfect games of tic-tac-toe against a human opponent. + + + + + + +
+ + + + + + + + \ No newline at end of file diff --git a/homework/week-1-project/2-Rules/style.css b/homework/week-1-project/2-Rules/style.css new file mode 100644 index 0000000..1bf8660 --- /dev/null +++ b/homework/week-1-project/2-Rules/style.css @@ -0,0 +1,45 @@ + +body { + background-image: url("https://assets.freeprintable.com/images/item/original/tic-tac-toe.jpg") +} + +header { + color: rgb(255, 255, 255); + text-shadow: 2px 5px 20px #000000; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 60px; + text-align: center; + background-color: rgb(255, 255, 255); + + + +} + +h2, h3 { + font-size: 24px; + color: midnightblue; + text-align: center; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + text-shadow: 1px 1px 1px #6e6e6e; + +} + +h3 { + font-size: 20px; + text-align: left; +} + +div { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + padding: 8px; + border: 8px groove rgb(255, 255, 255); + text-shadow: 2px 2px 2px #35353585; + padding-bottom: 30px; + background-color: rgb(255, 255, 255); + font-size: 18px; +} +a:link { + color: midnightblue; + background-color: transparent; + text-decoration: none; + } 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 deleted file mode 100644 index e69de29..0000000 diff --git a/homework/week-1-project/3-How-to-play/index.html b/homework/week-1-project/3-How-to-play/index.html new file mode 100644 index 0000000..2033e80 --- /dev/null +++ b/homework/week-1-project/3-How-to-play/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + +
+ Rules of the game +
+ + + +
+ + The game is played on a grid that's 3 squares by 3 squares. You are X, + your friend (or the computer in this case) is O. Players take turns putting + their marks in empty squares. The first player to get 3 of her marks in a row + (up, down, across, or diagonally) is the winner. 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. + +
+ + + +
+ +
+ + + + diff --git a/homework/week-1-project/3-How-to-play/style.css b/homework/week-1-project/3-How-to-play/style.css new file mode 100644 index 0000000..f9b2372 --- /dev/null +++ b/homework/week-1-project/3-How-to-play/style.css @@ -0,0 +1,44 @@ +body { + background-image: url("https://assets.freeprintable.com/images/item/original/tic-tac-toe.jpg") +} + +header { + color: rgb(255, 255, 255); + text-shadow: 2px 5px 20px #000000; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 60px; + text-align: center; + background-color: rgb(255, 255, 255); + +} + +div { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + padding: 8px; + border: 8px groove rgb(255, 255, 255); + text-shadow: 2px 2px 2px #35353585; + padding-bottom: 30px; + background-color: rgb(255, 255, 255); + font-size: 18px; + +} + + h3 { + + color: midnightblue; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + text-shadow: 1px 1px 1px #6e6e6e; + font-size: 20px; + text-align: left; + +} + +article {text-align: center +} +a:link { + color: midnightblue; + background-color: transparent; + text-decoration: none; + } + + diff --git a/homework/week-1-project/3-unplayable-board/index.html b/homework/week-1-project/3-unplayable-board/index.html deleted file mode 100644 index e69de29..0000000 diff --git a/homework/week-1-project/3-unplayable-board/style.css b/homework/week-1-project/3-unplayable-board/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/homework/week-1-project/4-playable-board/index.html b/homework/week-1-project/4-playable-board/index.html deleted file mode 100644 index e69de29..0000000 diff --git a/homework/week-1-project/4-playable-board/style.css b/homework/week-1-project/4-playable-board/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/homework/week-1-project/4-unplayable-board/index.html b/homework/week-1-project/4-unplayable-board/index.html new file mode 100644 index 0000000..0c71d17 --- /dev/null +++ b/homework/week-1-project/4-unplayable-board/index.html @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + +
+ Tic Tac Toe +
+ +
+ +

+ If tic-tac-toe were as simple as it seems,
+ why has it been around for over 3,000 years? +

+ + + + + This classic game contributes to children’s developmental growth in numerous ways + including their understanding of predictability, problem solving, spatial reasoning, + hand-eye coordination, turn taking, and strategizing. Tic-tac-toe is a simple, + two-player game which, if played optimally by both players, will always result in a tie. + + The game is also called noughts and crosses or Xs and Os. Tic-tac-toe is a game that is + traditionally played by being drawn on paper, and it can be played on a computer or + on a variety of media. + +

+ History +

+ + Games played on three-in-a-row boards can be traced back to ancient Egypt, + where such game boards have been found on roofing tiles dating from around + 1300 BCE. An early variation of tic-tac-toe was played in the Roman Empire, + around the first century BC. It was called terni lapilli (three pebbles at a time) + and instead of having any number of pieces, each player only had three, thus they + had to move them around to empty spaces to keep playing. The game's grid markings + have been found chalked all over Rome. Another closely related ancient game is three + men's morris which is also played on a simple grid and requires three pieces in a + row to finish,[8] and Picaria, a game of the Puebloans.The different names of the + game are more recent. The first print reference to "noughts and crosses" + (nought being an alternative word for zero), the British name, appeared in 1858, + in an issue of Notes and Queries. The first print reference to a game called + "tick-tack-toe" occurred in 1884, but referred to "a children's game played + on a slate, consisting in trying with the eyes shut to bring the pencil down + on one of the numbers of a set, the number hit being scored". "Tic-tac-toe" + may also derive from "tick-tack", the name of an old version of backgammon + first described in 1558. The US renaming of "noughts and crosses" as "tic-tac-toe" + occurred in the 20th century. + The computer player could play perfect games of tic-tac-toe against a human opponent. + +

+ Example Board +

+ + + + + + + + + + + + + + + + +
+ + + +
+ + + + + + + + + + \ No newline at end of file diff --git a/homework/week-1-project/4-unplayable-board/style.css b/homework/week-1-project/4-unplayable-board/style.css new file mode 100644 index 0000000..ba895c2 --- /dev/null +++ b/homework/week-1-project/4-unplayable-board/style.css @@ -0,0 +1,50 @@ + +body { + background-image: url("https://assets.freeprintable.com/images/item/original/tic-tac-toe.jpg") +} + +header { + color: rgb(255, 255, 255); + text-shadow: 2px 5px 20px #000000; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 60px; + text-align: center; + background-color: rgb(255, 255, 255); + + + +} + +h2, h3 { + font-size: 24px; + color: midnightblue; + text-align: center; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + text-shadow: 1px 1px 1px #6e6e6e; + +} + +h3 { + font-size: 20px; + text-align: left; +} + +div { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + padding: 8px; + border: 8px groove rgb(255, 255, 255); + text-shadow: 2px 2px 2px #35353585; + padding-bottom: 30px; + background-color: rgb(255, 255, 255); + font-size: 18px; +} +a:link { + color: midnightblue; + background-color: transparent; + text-decoration: none; + } + td { + border: 11px groove midnightblue; + height: 150px; + width: 150px; + } \ No newline at end of file diff --git a/homework/week-1-project/5-playable-board/index.html b/homework/week-1-project/5-playable-board/index.html new file mode 100644 index 0000000..ee1e65f --- /dev/null +++ b/homework/week-1-project/5-playable-board/index.html @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + +
+ Tic Tac Toe +
+ +
+ +

+ If tic-tac-toe were as simple as it seems,
+ why has it been around for over 3,000 years? +

+ + + + + This classic game contributes to children’s developmental growth in numerous ways + including their understanding of predictability, problem solving, spatial reasoning, + hand-eye coordination, turn taking, and strategizing. Tic-tac-toe is a simple, + two-player game which, if played optimally by both players, will always result in a tie. + + The game is also called noughts and crosses or Xs and Os. Tic-tac-toe is a game that is + traditionally played by being drawn on paper, and it can be played on a computer or + on a variety of media. + +

+ History +

+ + Games played on three-in-a-row boards can be traced back to ancient Egypt, + where such game boards have been found on roofing tiles dating from around + 1300 BCE. An early variation of tic-tac-toe was played in the Roman Empire, + around the first century BC. It was called terni lapilli (three pebbles at a time) + and instead of having any number of pieces, each player only had three, thus they + had to move them around to empty spaces to keep playing. The game's grid markings + have been found chalked all over Rome. Another closely related ancient game is three + men's morris which is also played on a simple grid and requires three pieces in a + row to finish,[8] and Picaria, a game of the Puebloans.The different names of the + game are more recent. The first print reference to "noughts and crosses" + (nought being an alternative word for zero), the British name, appeared in 1858, + in an issue of Notes and Queries. The first print reference to a game called + "tick-tack-toe" occurred in 1884, but referred to "a children's game played + on a slate, consisting in trying with the eyes shut to bring the pencil down + on one of the numbers of a set, the number hit being scored". "Tic-tac-toe" + may also derive from "tick-tack", the name of an old version of backgammon + first described in 1558. The US renaming of "noughts and crosses" as "tic-tac-toe" + occurred in the 20th century. + The computer player could play perfect games of tic-tac-toe against a human opponent. + +

+ Example Board +

+ + + + + + + + + + + + + + + + +
XXO
XOX
OXX
+ + + +
+ + + + + + + + + + \ No newline at end of file diff --git a/homework/week-1-project/5-playable-board/style.css b/homework/week-1-project/5-playable-board/style.css new file mode 100644 index 0000000..bf57db4 --- /dev/null +++ b/homework/week-1-project/5-playable-board/style.css @@ -0,0 +1,52 @@ + +body { + background-image: url("https://assets.freeprintable.com/images/item/original/tic-tac-toe.jpg") +} + +header { + color: rgb(255, 255, 255); + text-shadow: 2px 5px 20px #000000; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 60px; + text-align: center; + background-color: rgb(255, 255, 255); + + + +} + +h2, h3 { + font-size: 24px; + color: midnightblue; + text-align: center; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + text-shadow: 1px 1px 1px #6e6e6e; + +} + +h3 { + font-size: 20px; + text-align: left; +} + +div { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + padding: 8px; + border: 8px groove rgb(255, 255, 255); + text-shadow: 2px 2px 2px #35353585; + padding-bottom: 30px; + background-color: rgb(255, 255, 255); + font-size: 18px; +} +a:link { + color: midnightblue; + background-color: transparent; + text-decoration: none; + } + td { + border: 11px groove midnightblue; + height: 150px; + width: 150px; + font-size: 110px; + text-align: center; + } \ No newline at end of file diff --git a/homework/week-1-project/5-up-to-you/index.html b/homework/week-1-project/5-up-to-you/index.html deleted file mode 100644 index e69de29..0000000 diff --git a/homework/week-1-project/5-up-to-you/style.css b/homework/week-1-project/5-up-to-you/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/homework/week-1-project/README.md b/homework/week-1-project/README.md index 5ebb51b..69643c8 100644 --- a/homework/week-1-project/README.md +++ b/homework/week-1-project/README.md @@ -1,16 +1,48 @@ -## Week 1 Project +## Week 1 Project - Yavuz Ugurtas -To complete this week's project (a simple, interactive tic-tac-toe board) you'll need to code each user story described [in this user story table](https://be-hacking-hyf.github.io/HTML-CSS-GitHub/homework/week-1-project/). You will start by forking [this repository](https://github.com/be-hacking-hyf/HTML-CSS-GitHub), cloning it to your computer, and writing the HTML and CSS for each folder. For more information on what is expected from the project you can read about weekly projects [right here](https://github.com/be-hacking-hyf/html-css-github/#weekly-projects). + +

+ I have tried to build a non-interactive TicTacToe board. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StagesContextMy notes
Blank Page empty HTML template and CSS fileI did not understand what kind of role it has
Head and Headertitle, main div, header, description I've tried my best
Rules of the game a section describing the rules of TicTactoeAdded extra tutorial
Example (Unplayable) Board empty 3x3 TicTacToe board The best Tic Tac Toe board in the world
"O" Wins!There are Xs and OsI've just filled in the blanks. Couldn't figure it out how to create the game itself
-But wait! It's not enough to have a tic-tac-toe board that workss It's even more important that you understand how this tic-tac-toe board can be broken into small steps and developed incrementally. To show us that you are mastering this skill you will be required to save each step of your progress in a different folder, as a fully-working (but incomplete) web site. Each step will use the previous one as a starting point. -Take a look at the completed example to get an idea of what a finished project looks like, notice that each folder has code in it and each row in the table links to a working web page: -* [it's source code](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/tree/master/study-code/example-project-feedback-form) -* [the live example](https://be-hacking-hyf.github.io/HTML-CSS-GitHub/study-code/example-project-feedback-form/) - -When you've written your code for each folder, tested the table and each page on your computer, have pushed your work to your github account, _and_ turned on GitHub pages, you're ready to turn in your homework! You can find instructions for homework submission [right here](https://github.com/be-hacking-hyf/html-css-github/wiki/Homework-Submission). - ---- ---- -### Hack Your Future: Belgium + diff --git a/homework/week-1-project/index.html b/homework/week-1-project/index.html deleted file mode 100644 index 9c9b00b..0000000 --- a/homework/week-1-project/index.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - - - HTML/CSS Week 21Project Table - - - - -

Human-Intelligence TicTacToe

-

- Build a non-interactive (but responsive!) TicTacToe board. The board should get bigger and smaller as the screen - changes sizes, and users should be able to mark each box with an X or an O -

-

- - Be sure to use HTML5 - Semantic Elements whenever possible! - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
a user can ...HTMLCSS
... open a website empty HTML template, requiring CSS fileempty CSS file
... know what the site is abouttitle, main div, header, descriptionstyle for body, main and title
... read the rules for TicTacToea section describing the rules of TicTactoestyle the rules so they are not visible until a user wants to see them
... see a boarda 3x3 TicTacToe board (there's more than one way to do this!)style the board!
... mark the squares of the boardup to you!up to you!
... (what can the user do?)up to you!up to you!
- - - diff --git a/homework/week-2-project/1-header-part/index.html b/homework/week-2-project/1-header-part/index.html new file mode 100644 index 0000000..785f84f --- /dev/null +++ b/homework/week-2-project/1-header-part/index.html @@ -0,0 +1,38 @@ + + + + + + + + + Journoscope | Welcome + + + + +
+ +
+ + +
+

Journoscope

+ +
+ + + + +
+ +
\ No newline at end of file diff --git a/homework/week-2-project/1-header-part/style.css b/homework/week-2-project/1-header-part/style.css new file mode 100644 index 0000000..fc6aaf0 --- /dev/null +++ b/homework/week-2-project/1-header-part/style.css @@ -0,0 +1,104 @@ +body { + + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: lightgrey; + + +} + /* Global */ + +.container { + + width: 80%; + margin: auto; + overflow: hidden; + +} + +ul { + + margin: 0; + padding: 0; + + } + +.button_1 { + height: 38px; + background: rgb(0, 235, 252); + border: 0; + padding-left: 20px; + padding-right: 20px; + color: rgb(0, 0, 0); + + +} + + + + /* Header **/ + + header { + + background: #35424a; + color: white; + padding-top: 30px; + min-height: 70px; + border-bottom: 3px solid orange; + + + } + + header a { + + color: rgb(255, 255, 255); + text-decoration: none; + text-transform: uppercase; + font-size: 16px; + + + } + + + header li { + + float: left; + display: inline; + padding: 0 20px 0 20px; + } + + header #branding { + + float: left; + + } + + header #branding h1 { + + margin: 0; + + } + + header nav { + + float: right; + margin-top: 10px; + + } + + header .highlight, header .current a{ + + color: rgb(255, 255, 255); + font-weight: bold; + + } + + header a:hover { + + color: aqua; + font-weight: bold; + + } \ No newline at end of file diff --git a/homework/week-2-project/2-nav-part/1-about-page/index.html b/homework/week-2-project/2-nav-part/1-about-page/index.html new file mode 100644 index 0000000..21a97f1 --- /dev/null +++ b/homework/week-2-project/2-nav-part/1-about-page/index.html @@ -0,0 +1,87 @@ + + + + + + + + + Journoscope | Welcome + + + + +
+ +
+ + +
+

Journoscope

+ +
+ + + + +
+ +
+ + +
+ +
+ +

Subscribe our newsletter

+
+ + + +
+ +
+ +
+ +
+ +
+ +
+ + + +

About Us

+ +

News as we know it leaves us cynical, divided, and less informed. + We want to change that, with you. Journoscope will be an online platform for unbreaking news. + By that we mean: we want to radically change what news is about, how it is made, and how it is + funded.

+ +
+ + +
+ +
+ + + + + + + diff --git a/homework/week-2-project/2-nav-part/1-about-page/style.css b/homework/week-2-project/2-nav-part/1-about-page/style.css new file mode 100644 index 0000000..2d05d00 --- /dev/null +++ b/homework/week-2-project/2-nav-part/1-about-page/style.css @@ -0,0 +1,185 @@ +body { + + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: lightgrey; + + +} + /* Global */ + +.container { + + width: 80%; + margin: auto; + overflow: hidden; + +} + +ul { + + margin: 0; + padding: 0; + + } + +.button_1 { + height: 38px; + background: rgb(0, 235, 252); + border: 0; + padding-left: 20px; + padding-right: 20px; + color: rgb(0, 0, 0); + + +} + + + + /* Header **/ + + header { + + background: #35424a; + color: white; + padding-top: 30px; + min-height: 70px; + border-bottom: 3px solid orange; + + + } + + header a { + + color: rgb(255, 255, 255); + text-decoration: none; + text-transform: uppercase; + font-size: 16px; + + + } + + + header li { + + float: left; + display: inline; + padding: 0 20px 0 20px; + } + + header #branding { + + float: left; + + } + + header #branding h1 { + + margin: 0; + + } + + header nav { + + float: right; + margin-top: 10px; + + } + + header .highlight, header .current a{ + + color: rgb(255, 255, 255); + font-weight: bold; + + } + + header a:hover { + + color: aqua; + font-weight: bold; + + } + + /* Showcase */ + #showcase { + min-height: 400px; + background: url(https://images.unsplash.com/photo-1485056981035-7a565c03c6aa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80) no-repeat; + text-align: center; + color: white; + +} + +#showcase h1 { + + margin-top: 100px; + font-size: 55px; + margin-bottom: 10px; + +} +#showcase p { + font-size: 20px; + +} + +/* newsletter */ + +#newsletter { + + padding: 15px; + color: white; + background: #35424a; + +} + +#newsletter h1 { + + float: left; +} +#newsletter form { + + float: right; + margin-top: 15px; + +} +#newsletter input[type=email]{ + + padding: 4px; + height: 25px; + width: 250px; + +} + +/* boxes */ + +#boxes { + margin-top: 20px; + +} + +#boxes .box { + + float: left; + width: 30%; + padding: 10px; + text-align: center; + +} + +#boxes .box img{ + + width: 90px; + +} + +footer { + + padding: 20px; + margin-top: 20px; + color: white; + background-color: #e8491d; + text-align: center; + +} \ No newline at end of file diff --git a/homework/week-2-project/2-nav-part/2-services-page/index.html b/homework/week-2-project/2-nav-part/2-services-page/index.html new file mode 100644 index 0000000..4b8bf59 --- /dev/null +++ b/homework/week-2-project/2-nav-part/2-services-page/index.html @@ -0,0 +1,86 @@ + + + + + + + + + Journoscope | Welcome + + + + +
+ +
+ + +
+

Journoscope

+ +
+ + + + + +
+ +
+ + + +
+ +
+ +

Subscribe our newsletter

+
+ + + +
+ +
+ +
+ +
+ +
+ +
+ + + +

Our Services

+ +

News mostly is about what happens today, but rarely about what happens every day. It covers the most sensational exceptions, leaving you uninformed about the rules. We want to redefine what news is about, shifting the focus from the sensational to the foundational. Our correspondents cover the most important developments and underlying forces that shape our world, rather than speculating about the latest hype or scare. Put another way: we don’t cover the weather, we cover the climate, informing you about how the world really works.

+ +
+ + +
+ +
+ + + + + + + diff --git a/homework/week-2-project/2-nav-part/2-services-page/style.css b/homework/week-2-project/2-nav-part/2-services-page/style.css new file mode 100644 index 0000000..bb881e9 --- /dev/null +++ b/homework/week-2-project/2-nav-part/2-services-page/style.css @@ -0,0 +1,186 @@ +body { + + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: lightgrey; + + +} + /* Global */ + +.container { + + width: 80%; + margin: auto; + overflow: hidden; + +} + +ul { + + margin: 0; + padding: 0; + + } + +.button_1 { + height: 38px; + background: rgb(0, 235, 252); + border: 0; + padding-left: 20px; + padding-right: 20px; + color: rgb(0, 0, 0); + + +} + + + + /* Header **/ + + header { + + background: #35424a; + color: white; + padding-top: 30px; + min-height: 70px; + border-bottom: 3px solid orange; + + + } + + header a { + + color: rgb(255, 255, 255); + text-decoration: none; + text-transform: uppercase; + font-size: 16px; + + + } + + + header li { + + float: left; + display: inline; + padding: 0 20px 0 20px; + } + + header #branding { + + float: left; + + } + + header #branding h1 { + + margin: 0; + + } + + header nav { + + float: right; + margin-top: 10px; + + } + + header .highlight, header .current a{ + + color: rgb(255, 255, 255); + font-weight: bold; + + } + + header a:hover { + + color: aqua; + font-weight: bold; + + } + + /* Showcase */ + + #showcase { + min-height: 400px; + background: url(https://images.unsplash.com/photo-1485056981035-7a565c03c6aa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80) no-repeat; + text-align: center; + color: white; + +} + +#showcase h1 { + + margin-top: 100px; + font-size: 55px; + margin-bottom: 10px; + +} +#showcase p { + font-size: 20px; + +} + +/* newsletter */ + +#newsletter { + + padding: 15px; + color: white; + background: #35424a; + +} + +#newsletter h1 { + + float: left; +} +#newsletter form { + + float: right; + margin-top: 15px; + +} +#newsletter input[type=email]{ + + padding: 4px; + height: 25px; + width: 250px; + +} + +/* boxes */ + +#boxes { + margin-top: 20px; + +} + +#boxes .box { + + float: left; + width: 30%; + padding: 10px; + text-align: center; + +} + +#boxes .box img{ + + width: 90px; + +} + +footer { + + padding: 20px; + margin-top: 20px; + color: white; + background-color: #e8491d; + text-align: center; + +} \ No newline at end of file diff --git a/homework/week-2-project/3-section-part/index.html b/homework/week-2-project/3-section-part/index.html new file mode 100644 index 0000000..61997ca --- /dev/null +++ b/homework/week-2-project/3-section-part/index.html @@ -0,0 +1,94 @@ + + + + + + + + + Journoscope | Welcome + + + + +
+ +
+ + +
+

Journoscope

+ +
+ + + + + +
+ +
+ +
+ +
+

Journalism. Pure. Diverse.

+

We provide stories from all around the world. Stories that matter. Stories that untold. Stories that gonna bother you.

+
+ + +
+ +
+ +
+ +

Subscribe our newsletter

+
+ + + +
+ +
+ +
+ +
+ +
+ +
+ +

Data Journalism

+

We'll use data to tell stories that hold the powerful accountable. As Journoscope our focus is: Plan and execute quantitative analyses in support of investigative stories and visualizations.

+ +
+ +
+ +

Podcasts

+

Enjoy Journoscope audio on the move. A wide range of programmes and highlights are available as podcasts for you to download for free.

+ +
+ +
+ +

Documentaries

+

The truth hurts. But sometimes it’s inspirational, scary, sad, funny or anywhere in between. Experience it all with our best documentary series.

+ +
+ + +
+ +
\ No newline at end of file diff --git a/homework/week-2-project/3-section-part/style.css b/homework/week-2-project/3-section-part/style.css new file mode 100644 index 0000000..9e4ca1b --- /dev/null +++ b/homework/week-2-project/3-section-part/style.css @@ -0,0 +1,176 @@ +body { + + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: lightgrey; + + +} + /* Global */ + +.container { + + width: 80%; + margin: auto; + overflow: hidden; + +} + +ul { + + margin: 0; + padding: 0; + + } + +.button_1 { + height: 38px; + background: rgb(0, 235, 252); + border: 0; + padding-left: 20px; + padding-right: 20px; + color: rgb(0, 0, 0); + + +} + + + + /* Header **/ + + header { + + background: #35424a; + color: white; + padding-top: 30px; + min-height: 70px; + border-bottom: 3px solid orange; + + + } + + header a { + + color: rgb(255, 255, 255); + text-decoration: none; + text-transform: uppercase; + font-size: 16px; + + + } + + + header li { + + float: left; + display: inline; + padding: 0 20px 0 20px; + } + + header #branding { + + float: left; + + } + + header #branding h1 { + + margin: 0; + + } + + header nav { + + float: right; + margin-top: 10px; + + } + + header .highlight, header .current a{ + + color: rgb(255, 255, 255); + font-weight: bold; + + } + + header a:hover { + + color: aqua; + font-weight: bold; + + } + + /* Showcase */ + + #showcase { + min-height: 400px; + background: url(https://images.unsplash.com/photo-1485056981035-7a565c03c6aa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80) no-repeat; + text-align: center; + color: white; + +} + +#showcase h1 { + + margin-top: 100px; + font-size: 55px; + margin-bottom: 10px; + +} +#showcase p { + font-size: 20px; + +} + +/* newsletter */ + +#newsletter { + + padding: 15px; + color: white; + background: #35424a; + +} + +#newsletter h1 { + + float: left; +} +#newsletter form { + + float: right; + margin-top: 15px; + +} +#newsletter input[type=email]{ + + padding: 4px; + height: 25px; + width: 250px; + +} + +/* boxes */ + +#boxes { + margin-top: 20px; + +} + +#boxes .box { + + float: left; + width: 30%; + padding: 10px; + text-align: center; + +} + +#boxes .box img{ + + width: 90px; + +} \ No newline at end of file diff --git a/homework/week-2-project/4-footer-part/index.html b/homework/week-2-project/4-footer-part/index.html new file mode 100644 index 0000000..0f64346 --- /dev/null +++ b/homework/week-2-project/4-footer-part/index.html @@ -0,0 +1,104 @@ + + + + + + + + + Journoscope | Welcome + + + + +
+ +
+ + +
+

Journoscope

+ +
+ + + + +
+ +
+ +
+ +
+

Journalism. Pure. Diverse.

+

We provide stories from all around the world. Stories that matter. Stories that untold. Stories that gonna bother you.

+
+ + +
+ +
+ +
+ +

Subscribe our newsletter

+
+ + + +
+ +
+ +
+ +
+ +
+ +
+ +

Data Journalism

+

We'll use data to tell stories that hold the powerful accountable. As Journoscope our focus is: Plan and execute quantitative analyses in support of investigative stories and visualizations.

+ +
+ +
+ +

Podcasts

+

Enjoy Journoscope audio on the move. A wide range of programmes and highlights are available as podcasts for you to download for free.

+ +
+ +
+ +

Documentaries

+

The truth hurts. But sometimes it’s inspirational, scary, sad, funny or anywhere in between. Experience it all with our best documentary series.

+ +
+ + +
+ +
+ + + + + + + diff --git a/homework/week-2-project/4-footer-part/style.css b/homework/week-2-project/4-footer-part/style.css new file mode 100644 index 0000000..d7f3806 --- /dev/null +++ b/homework/week-2-project/4-footer-part/style.css @@ -0,0 +1,186 @@ +body { + + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: lightgrey; + + +} + /* Global */ + +.container { + + width: 80%; + margin: auto; + overflow: hidden; + +} + +ul { + + margin: 0; + padding: 0; + + } + +.button_1 { + height: 38px; + background: rgb(0, 235, 252); + border: 0; + padding-left: 20px; + padding-right: 20px; + color: rgb(0, 0, 0); + + +} + + + + /* Header **/ + + header { + + background: #35424a; + color: white; + padding-top: 30px; + min-height: 70px; + border-bottom: 3px solid orange; + + + } + + header a { + + color: rgb(255, 255, 255); + text-decoration: none; + text-transform: uppercase; + font-size: 16px; + + + } + + + header li { + + float: left; + display: inline; + padding: 0 20px 0 20px; + } + + header #branding { + + float: left; + + } + + header #branding h1 { + + margin: 0; + + } + + header nav { + + float: right; + margin-top: 10px; + + } + + header .highlight, header .current a{ + + color: rgb(255, 255, 255); + font-weight: bold; + + } + + header a:hover { + + color: aqua; + font-weight: bold; + + } + + /* Showcase */ + +#showcase { + min-height: 400px; + background: url(https://images.unsplash.com/photo-1485056981035-7a565c03c6aa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80) no-repeat; + text-align: center; + color: white; + +} + +#showcase h1 { + + margin-top: 100px; + font-size: 55px; + margin-bottom: 10px; + +} +#showcase p { + font-size: 20px; + +} + +/* newsletter */ + +#newsletter { + + padding: 15px; + color: white; + background: #35424a; + +} + +#newsletter h1 { + + float: left; +} +#newsletter form { + + float: right; + margin-top: 15px; + +} +#newsletter input[type=email]{ + + padding: 4px; + height: 25px; + width: 250px; + +} + +/* boxes */ + +#boxes { + margin-top: 20px; + +} + +#boxes .box { + + float: left; + width: 30%; + padding: 10px; + text-align: center; + +} + +#boxes .box img{ + + width: 90px; + +} + +footer { + + padding: 20px; + margin-top: 20px; + color: white; + background-color: #e8491d; + text-align: center; + +} \ No newline at end of file diff --git a/homework/week-2-project/README.md b/homework/week-2-project/README.md index ed64c46..a61d706 100644 --- a/homework/week-2-project/README.md +++ b/homework/week-2-project/README.md @@ -1,15 +1,103 @@ -# Week 2 Project +## Week 1 Project - Yavuz Ugurtas -This week's project is a bit different from the last weeks' projects. Your web page will be larger and more complex than the last two sites you made, but you'll be following [this video tutorial](https://www.youtube.com/watch?v=Wm6CUkswsNw) by Traversy Media. Mr. Traversy is one of the best coaches on YouTube so you're in good hands! + +

+ I have tried to build a non-interactive TicTacToe board. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StagesContextMy notes
Blank Page empty HTML template and CSS fileI did not understand what kind of role it has
Head and Headertitle, main div, header, description I've tried my best
Rules of the game a section describing the rules of TicTactoeAdded extra tutorial
Example (Unplayable) Board empty 3x3 TicTacToe board The best Tic Tac Toe board in the world
"O" Wins!There are Xs and OsI've just filled in the blanks. Couldn't figure it out how to create the game itself
+ + + + + + ## Week 2 Project - Yavuz Ugurtas -But wait. A working website is not a finished project! + +

+ I have tried to build a brand new website +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StagesContextMy notes
Blank Page empty HTML template and CSS fileEmpty
Header parttitle, header, nav I've tried my best
section part boxes,showcasemain page
About menu other pages
Services menu other pages
Footer part Footer simple footer
-We still expect your Week 3 project to be broken down into working steps with a table in the ```index.html``` to describe your user stories, and for each step to be saved separately in it's own folder. Only this time we don't tell you what the steps are! Part of your assignment is to decide when one user story begins and the next ends. (We won't even tell you how many user stories there are ;) -You'll get a chance in class next Sunday to discuss the different ways this project an be broken down into user stories. -> Pay attention to how he uses HTML5 Semantic Tags to structure his web pages! ---- ---- -### Hack Your Future: Belgium + diff --git a/homework/week-2-project/img/code.png b/homework/week-2-project/img/code.png new file mode 100644 index 0000000..db45750 Binary files /dev/null and b/homework/week-2-project/img/code.png differ diff --git a/homework/week-2-project/img/docu.png b/homework/week-2-project/img/docu.png new file mode 100644 index 0000000..70f38df Binary files /dev/null and b/homework/week-2-project/img/docu.png differ diff --git a/homework/week-2-project/img/journo.jpeg b/homework/week-2-project/img/journo.jpeg new file mode 100644 index 0000000..299096f Binary files /dev/null and b/homework/week-2-project/img/journo.jpeg differ diff --git a/homework/week-2-project/img/podcast.png b/homework/week-2-project/img/podcast.png new file mode 100644 index 0000000..99a5d55 Binary files /dev/null and b/homework/week-2-project/img/podcast.png differ diff --git a/homework/week-3-project/README.md b/homework/week-3-project/README.md index 7588cfe..6740a70 100644 --- a/homework/week-3-project/README.md +++ b/homework/week-3-project/README.md @@ -1 +1,161 @@ -See the assignment [live on GitHub Pages](https://be-hacking-hyf.github.io/html-css-github/week-3-project) +## Week 1 Project - Yavuz Ugurtas + + +

+ I have tried to build a non-interactive TicTacToe board. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StagesContextMy notes
Blank Page empty HTML template and CSS fileI did not understand what kind of role it has
Head and Headertitle, main div, header, description I've tried my best
Rules of the game a section describing the rules of TicTactoeAdded extra tutorial
Example (Unplayable) Board empty 3x3 TicTacToe board The best Tic Tac Toe board in the world
"O" Wins!There are Xs and OsI've just filled in the blanks. Couldn't figure it out how to create the game itself
+ + + + + + ## Week 2 Project - Yavuz Ugurtas + + +

+ I have tried to build a brand new website +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StagesContextMy notes
Blank Page empty HTML template and CSS fileEmpty
Header parttitle, header, nav I've tried my best
section part boxes,showcasemain page
About menu other pages
Services menu other pages
Footer part Footer simple footer
+ + + + + ## Week 3 Project - Yavuz Ugurtas + + + +

+ Duch Duch Go - Original one +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StagesContextMy notes
Part-0 empty HTML template and CSS fileEmpty
Part-1Search box and logo Main page, I couldnt manage the nav part, I think it is js
Part-2 second page - infobackground changed, pic added
Part-3 3rd page - info background changed, pic added
Part-4 4th page - info background changed, pic added
Part-5 Footer background changed, pic added, go to the top button added
+ + + + + + + + + diff --git a/homework/week-3-project/part-0/index.html b/homework/week-3-project/part-0/index.html new file mode 100644 index 0000000..7209b6a --- /dev/null +++ b/homework/week-3-project/part-0/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + Duck Duck Go - Privacy, simplified. + + + + + + + + + \ No newline at end of file diff --git a/homework/week-1-project/2-rules-of-the-game/style.css b/homework/week-3-project/part-0/style.css similarity index 100% rename from homework/week-1-project/2-rules-of-the-game/style.css rename to homework/week-3-project/part-0/style.css diff --git a/homework/week-3-project/part-1/index.html b/homework/week-3-project/part-1/index.html new file mode 100644 index 0000000..a0b80fd --- /dev/null +++ b/homework/week-3-project/part-1/index.html @@ -0,0 +1,32 @@ + + + + + + + + + + + + Duck Duck Go - Privacy, simplified. + + + + +
+
+ + +

The search engine that doesn't track you Help Spread DuckDuckGo!

+ + + +
+ + +
+ + + + \ No newline at end of file diff --git a/homework/week-3-project/part-1/style.css b/homework/week-3-project/part-1/style.css new file mode 100644 index 0000000..69dd14f --- /dev/null +++ b/homework/week-3-project/part-1/style.css @@ -0,0 +1,230 @@ + + + + +/* PART-1 */ + +.part-1 { + + text-align: center; + display: block; + margin: 0 auto; + clear: both; + padding-top: 2%; + + } + + #logo { + + text-align: center; + display: block; + margin: 0 auto; + clear: both; + padding-top: 2%; + max-width: 360px; + height: auto; + } + + #form { + max-width: 518px; + line-height: auto; + padding: 20px 10px; + text-align: center; + } + + body { + margin: 0; + padding: 0; + background: #f7f7f7; + } + + + #slogan { + text-align: center; + color: #9a9a9a; + font-family: inherit; + font-size: 100%; + } + + .tag { + font-family: inherit; + color: #4495d4; + font-size: 100%; + text-decoration-line: none; + } + + #man1 { + max-width: 100px; + height: auto; + position: relative; + text-align: center; + padding-top: 13%; + padding-bottom: 5%; + + + } + + /* PART-2 */ + + + nav { + background: #58b792; + padding-top: 4%; + + } + + #prof { + + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + + + h1 { + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; + font-size: 28px; + line-height: 27px; + margin-top: 16px; + font-weight: bold; + + + } + + #privacy { + + font-size: 17px; + line-height: 20px; + padding-top: .25em; + padding-bottom: .25em; + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; + } + + + /* PART-3 */ + + section { + + + background: #f5a339; + padding-top: 4%; + + } + + + h2, h3, h4 { + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; + font-size: 28px; + line-height: 27px; + margin-top: 16px; + font-weight: bold; + + + } + + #ads { + + font-size: 17px; + line-height: 20px; + padding-top: .25em; + padding-bottom: .25em; + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; + } + + #run { + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + + #btn { + text-align: center; + background-color: gray; + padding: 14px 28px; + font-size: 16px; + color: rgb(255, 255, 255); + padding-top: .25em; + border-style: inherit; + padding-bottom: .25em; + font-style: inherit; + text-decoration: none; + + } + #btn:hover {background: rgb(100, 100, 100);} +p { + text-align: center; +} + +/* PART-4 */ + +article { + background: #5f63bd; + padding-top: 4%; +} + + +#bath { + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + +/* PART-5 */ + + +footer { + background: #87cef5; + padding-top: 4%; +} + +#sky { + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + + #top { + text-align: center; + background-color: gray; + padding: 14px 28px; + font-size: 16px; + color: rgb(255, 255, 255); + padding-top: .25em; + border-style: inherit; + padding-bottom: .25em; + font-style: inherit; + text-decoration: none; + + } \ No newline at end of file diff --git a/homework/week-3-project/part-2/index.html b/homework/week-3-project/part-2/index.html new file mode 100644 index 0000000..65946c2 --- /dev/null +++ b/homework/week-3-project/part-2/index.html @@ -0,0 +1,54 @@ + + + + + + + + + + + + Duck Duck Go - Privacy, simplified. + + + + +
+
+ + +

The search engine that doesn't track you Help Spread DuckDuckGo!

+ + + +
+ + +
+ + + + + + + + \ No newline at end of file diff --git a/homework/week-3-project/part-2/style.css b/homework/week-3-project/part-2/style.css new file mode 100644 index 0000000..30b502a --- /dev/null +++ b/homework/week-3-project/part-2/style.css @@ -0,0 +1,230 @@ + + + + +/* PART-1 */ + +.part-1 { + + text-align: center; + display: block; + margin: 0 auto; + clear: both; + padding-top: 2%; + + } + +#logo { + + text-align: center; + display: block; + margin: 0 auto; + clear: both; + padding-top: 2%; + max-width: 360px; + height: auto; + } + +#form { + max-width: 518px; + line-height: auto; + padding: 20px 10px; + text-align: center; + } + +body { + margin: 0; + padding: 0; + background: #f7f7f7; + } + + +#slogan { + text-align: center; + color: #9a9a9a; + font-family: inherit; + font-size: 100%; + } + +.tag { + font-family: inherit; + color: #4495d4; + font-size: 100%; + text-decoration-line: none; + } + +#man1 { + max-width: 100px; + height: auto; + position: relative; + text-align: center; + padding-top: 13%; + padding-bottom: 5%; + + +} + +/* PART-2 */ + + +nav { + background: #58b792; + padding-top: 4%; + +} + +#prof { + + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; +} + + +h1 { +color: #fff; +text-shadow: 0 1px 4px rgba(0,0,0,0.1); +text-align: center; +font: inherit; +font-size: 28px; +line-height: 27px; +margin-top: 16px; +font-weight: bold; + + +} + +#privacy { + + font-size: 17px; + line-height: 20px; + padding-top: .25em; + padding-bottom: .25em; + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; +} + + +/* PART-3 */ + +section { + + + background: #f5a339; + padding-top: 4%; + +} + + +h2, h3, h4 { + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; + font-size: 28px; + line-height: 27px; + margin-top: 16px; + font-weight: bold; + + + } + + #ads { + + font-size: 17px; + line-height: 20px; + padding-top: .25em; + padding-bottom: .25em; + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; + } + + #run { + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + + #btn { + text-align: center; + background-color: gray; + padding: 14px 28px; + font-size: 16px; + color: rgb(255, 255, 255); + padding-top: .25em; + border-style: inherit; + padding-bottom: .25em; + font-style: inherit; + text-decoration: none; + + } + #btn:hover {background: rgb(100, 100, 100);} +p { + text-align: center; +} + +/* PART-4 */ + +article { + background: #5f63bd; + padding-top: 4%; +} + + +#bath { + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + +/* PART-5 */ + + +footer { + background: #87cef5; + padding-top: 4%; +} + +#sky { + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + + #top { + text-align: center; + background-color: gray; + padding: 14px 28px; + font-size: 16px; + color: rgb(255, 255, 255); + padding-top: .25em; + border-style: inherit; + padding-bottom: .25em; + font-style: inherit; + text-decoration: none; + +} \ No newline at end of file diff --git a/homework/week-3-project/part-3/index.html b/homework/week-3-project/part-3/index.html new file mode 100644 index 0000000..c1bc252 --- /dev/null +++ b/homework/week-3-project/part-3/index.html @@ -0,0 +1,72 @@ + + + + + + + + + + + + Duck Duck Go - Privacy, simplified. + + + + +
+
+ + +

The search engine that doesn't track you Help Spread DuckDuckGo!

+ + + +
+ + +
+ + + + + + + + +
+ +

We don’t follow you
+ around with ads.

+

+ We don’t store your search history. We therefore have nothing
+ to sell to advertisers that track you across the Internet.

+ +

Add DuckDuckGo to your browser

+ + + + +
+ + + + \ No newline at end of file diff --git a/homework/week-3-project/part-3/style.css b/homework/week-3-project/part-3/style.css new file mode 100644 index 0000000..30b502a --- /dev/null +++ b/homework/week-3-project/part-3/style.css @@ -0,0 +1,230 @@ + + + + +/* PART-1 */ + +.part-1 { + + text-align: center; + display: block; + margin: 0 auto; + clear: both; + padding-top: 2%; + + } + +#logo { + + text-align: center; + display: block; + margin: 0 auto; + clear: both; + padding-top: 2%; + max-width: 360px; + height: auto; + } + +#form { + max-width: 518px; + line-height: auto; + padding: 20px 10px; + text-align: center; + } + +body { + margin: 0; + padding: 0; + background: #f7f7f7; + } + + +#slogan { + text-align: center; + color: #9a9a9a; + font-family: inherit; + font-size: 100%; + } + +.tag { + font-family: inherit; + color: #4495d4; + font-size: 100%; + text-decoration-line: none; + } + +#man1 { + max-width: 100px; + height: auto; + position: relative; + text-align: center; + padding-top: 13%; + padding-bottom: 5%; + + +} + +/* PART-2 */ + + +nav { + background: #58b792; + padding-top: 4%; + +} + +#prof { + + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; +} + + +h1 { +color: #fff; +text-shadow: 0 1px 4px rgba(0,0,0,0.1); +text-align: center; +font: inherit; +font-size: 28px; +line-height: 27px; +margin-top: 16px; +font-weight: bold; + + +} + +#privacy { + + font-size: 17px; + line-height: 20px; + padding-top: .25em; + padding-bottom: .25em; + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; +} + + +/* PART-3 */ + +section { + + + background: #f5a339; + padding-top: 4%; + +} + + +h2, h3, h4 { + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; + font-size: 28px; + line-height: 27px; + margin-top: 16px; + font-weight: bold; + + + } + + #ads { + + font-size: 17px; + line-height: 20px; + padding-top: .25em; + padding-bottom: .25em; + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; + } + + #run { + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + + #btn { + text-align: center; + background-color: gray; + padding: 14px 28px; + font-size: 16px; + color: rgb(255, 255, 255); + padding-top: .25em; + border-style: inherit; + padding-bottom: .25em; + font-style: inherit; + text-decoration: none; + + } + #btn:hover {background: rgb(100, 100, 100);} +p { + text-align: center; +} + +/* PART-4 */ + +article { + background: #5f63bd; + padding-top: 4%; +} + + +#bath { + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + +/* PART-5 */ + + +footer { + background: #87cef5; + padding-top: 4%; +} + +#sky { + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + + #top { + text-align: center; + background-color: gray; + padding: 14px 28px; + font-size: 16px; + color: rgb(255, 255, 255); + padding-top: .25em; + border-style: inherit; + padding-bottom: .25em; + font-style: inherit; + text-decoration: none; + +} \ No newline at end of file diff --git a/homework/week-3-project/part-4/index.html b/homework/week-3-project/part-4/index.html new file mode 100644 index 0000000..81b073e --- /dev/null +++ b/homework/week-3-project/part-4/index.html @@ -0,0 +1,91 @@ + + + + + + + + + + + + Duck Duck Go - Privacy, simplified. + + + + +
+
+ + +

The search engine that doesn't track you Help Spread DuckDuckGo!

+ + + +
+ + +
+ + + + + + + + +
+ +

We don’t follow you
+ around with ads.

+

+ We don’t store your search history. We therefore have nothing
+ to sell to advertisers that track you across the Internet.

+ +

Add DuckDuckGo to your browser

+ + + + +
+ + + + +
+ +

We don’t track you in or out
+ of private browsing mode.

+

+ Other search engines track your searches even when you’re
+ in private browsing mode. We don’t track you — period. +

+ +

Add DuckDuckGo to your browser

+ + + + +
+ + + + \ No newline at end of file diff --git a/homework/week-3-project/part-4/style.css b/homework/week-3-project/part-4/style.css new file mode 100644 index 0000000..30b502a --- /dev/null +++ b/homework/week-3-project/part-4/style.css @@ -0,0 +1,230 @@ + + + + +/* PART-1 */ + +.part-1 { + + text-align: center; + display: block; + margin: 0 auto; + clear: both; + padding-top: 2%; + + } + +#logo { + + text-align: center; + display: block; + margin: 0 auto; + clear: both; + padding-top: 2%; + max-width: 360px; + height: auto; + } + +#form { + max-width: 518px; + line-height: auto; + padding: 20px 10px; + text-align: center; + } + +body { + margin: 0; + padding: 0; + background: #f7f7f7; + } + + +#slogan { + text-align: center; + color: #9a9a9a; + font-family: inherit; + font-size: 100%; + } + +.tag { + font-family: inherit; + color: #4495d4; + font-size: 100%; + text-decoration-line: none; + } + +#man1 { + max-width: 100px; + height: auto; + position: relative; + text-align: center; + padding-top: 13%; + padding-bottom: 5%; + + +} + +/* PART-2 */ + + +nav { + background: #58b792; + padding-top: 4%; + +} + +#prof { + + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; +} + + +h1 { +color: #fff; +text-shadow: 0 1px 4px rgba(0,0,0,0.1); +text-align: center; +font: inherit; +font-size: 28px; +line-height: 27px; +margin-top: 16px; +font-weight: bold; + + +} + +#privacy { + + font-size: 17px; + line-height: 20px; + padding-top: .25em; + padding-bottom: .25em; + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; +} + + +/* PART-3 */ + +section { + + + background: #f5a339; + padding-top: 4%; + +} + + +h2, h3, h4 { + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; + font-size: 28px; + line-height: 27px; + margin-top: 16px; + font-weight: bold; + + + } + + #ads { + + font-size: 17px; + line-height: 20px; + padding-top: .25em; + padding-bottom: .25em; + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; + } + + #run { + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + + #btn { + text-align: center; + background-color: gray; + padding: 14px 28px; + font-size: 16px; + color: rgb(255, 255, 255); + padding-top: .25em; + border-style: inherit; + padding-bottom: .25em; + font-style: inherit; + text-decoration: none; + + } + #btn:hover {background: rgb(100, 100, 100);} +p { + text-align: center; +} + +/* PART-4 */ + +article { + background: #5f63bd; + padding-top: 4%; +} + + +#bath { + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + +/* PART-5 */ + + +footer { + background: #87cef5; + padding-top: 4%; +} + +#sky { + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + + #top { + text-align: center; + background-color: gray; + padding: 14px 28px; + font-size: 16px; + color: rgb(255, 255, 255); + padding-top: .25em; + border-style: inherit; + padding-bottom: .25em; + font-style: inherit; + text-decoration: none; + +} \ No newline at end of file diff --git a/homework/week-3-project/part-5/index.html b/homework/week-3-project/part-5/index.html new file mode 100644 index 0000000..c8f97a7 --- /dev/null +++ b/homework/week-3-project/part-5/index.html @@ -0,0 +1,114 @@ + + + + + + + + + + + + Duck Duck Go - Privacy, simplified. + + + + +
+
+ + +

The search engine that doesn't track you Help Spread DuckDuckGo!

+ + + +
+ + +
+ + + + + + + + +
+ +

We don’t follow you
+ around with ads.

+

+ We don’t store your search history. We therefore have nothing
+ to sell to advertisers that track you across the Internet.

+ +

Add DuckDuckGo to your browser

+ + + + +
+ + + + +
+ +

We don’t track you in or out
+ of private browsing mode.

+

+ Other search engines track your searches even when you’re
+ in private browsing mode. We don’t track you — period. +

+ +

Add DuckDuckGo to your browser

+ + + + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/homework/week-3-project/part-5/style.css b/homework/week-3-project/part-5/style.css new file mode 100644 index 0000000..69dd14f --- /dev/null +++ b/homework/week-3-project/part-5/style.css @@ -0,0 +1,230 @@ + + + + +/* PART-1 */ + +.part-1 { + + text-align: center; + display: block; + margin: 0 auto; + clear: both; + padding-top: 2%; + + } + + #logo { + + text-align: center; + display: block; + margin: 0 auto; + clear: both; + padding-top: 2%; + max-width: 360px; + height: auto; + } + + #form { + max-width: 518px; + line-height: auto; + padding: 20px 10px; + text-align: center; + } + + body { + margin: 0; + padding: 0; + background: #f7f7f7; + } + + + #slogan { + text-align: center; + color: #9a9a9a; + font-family: inherit; + font-size: 100%; + } + + .tag { + font-family: inherit; + color: #4495d4; + font-size: 100%; + text-decoration-line: none; + } + + #man1 { + max-width: 100px; + height: auto; + position: relative; + text-align: center; + padding-top: 13%; + padding-bottom: 5%; + + + } + + /* PART-2 */ + + + nav { + background: #58b792; + padding-top: 4%; + + } + + #prof { + + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + + + h1 { + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; + font-size: 28px; + line-height: 27px; + margin-top: 16px; + font-weight: bold; + + + } + + #privacy { + + font-size: 17px; + line-height: 20px; + padding-top: .25em; + padding-bottom: .25em; + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; + } + + + /* PART-3 */ + + section { + + + background: #f5a339; + padding-top: 4%; + + } + + + h2, h3, h4 { + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; + font-size: 28px; + line-height: 27px; + margin-top: 16px; + font-weight: bold; + + + } + + #ads { + + font-size: 17px; + line-height: 20px; + padding-top: .25em; + padding-bottom: .25em; + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + text-align: center; + font: inherit; + } + + #run { + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + + #btn { + text-align: center; + background-color: gray; + padding: 14px 28px; + font-size: 16px; + color: rgb(255, 255, 255); + padding-top: .25em; + border-style: inherit; + padding-bottom: .25em; + font-style: inherit; + text-decoration: none; + + } + #btn:hover {background: rgb(100, 100, 100);} +p { + text-align: center; +} + +/* PART-4 */ + +article { + background: #5f63bd; + padding-top: 4%; +} + + +#bath { + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + +/* PART-5 */ + + +footer { + background: #87cef5; + padding-top: 4%; +} + +#sky { + text-align: center; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + } + + #top { + text-align: center; + background-color: gray; + padding: 14px 28px; + font-size: 16px; + color: rgb(255, 255, 255); + padding-top: .25em; + border-style: inherit; + padding-bottom: .25em; + font-style: inherit; + text-decoration: none; + + } \ No newline at end of file