HackYourFuture · danielkapeleti · Dec 13, 2017 · Dec 13, 2017 · Dec 18, 2017 · Dec 19, 2017
diff --git a/README.md b/README.md
@@ -4,11 +4,11 @@
 
 In this module you will learn HTML and CSS. HTML is the language in which you define the structure of the content of your pages (e.g. headings, paragraphs, links and images). CSS is used to write down how everything should look (e.g. font sizes, colors and positions). While learning the basics of these two languages, you will also get familiar with text editors and the developer tools of your browser.
 
-We will focus on _responsive_ web development : you will learn how to make your website adapt to the size of the screen, using the _mobile first_ approach. As well as the _accessibility_ part of it, by adpoting ARIA (Accessible Rich Internet Applications) as part of our dicipline. ARIA defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. Last but not least we will spend time practicing some soft skills that are important for becoming a good developer. These include: giving feedback to your colleagues, presenting and explaining your work, and finding documentation on the web.
+We will focus on _responsive_ web development : you will learn how to make your website adapt to the size of the screen, using the _mobile first_ approach. As well as the _accessibility_ part of it, by adopting ARIA (Accessible Rich Internet Applications) as part of our discipline. ARIA defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. Last but not least we will spend time practicing some soft skills that are important for becoming a good developer. These include: giving feedback to your colleagues, presenting and explaining your work, and finding documentation on the web.
 
-## Command line 
+## Command line
 
-The command line (cli, shell) is the interface between you (the user) and the operating system which interprets your commands and allows the computer to respond to your command. In this module you will be introduced to the command line, in this module we will mainly use it to navigate our file system and creating files. Throughout the entire program you will have to use these skills and build on top of it.
+The command line (cli, shell) is the interface between you (the user) and the operating system which interprets your commands and allows the computer to respond to your command. In this module you will be introduced to the command line which you will mainly use it to navigate to your file system and for creating files. Throughout the entire program you will have to use these skills and build on top of it.
 
 So since this is your first module, what can you expect the next three weeks?
 
@@ -18,18 +18,18 @@ So since this is your first module, what can you expect the next three weeks?
 |0.|Prepare for first session|[Pre-reading](/Week0/README.md)|-|-|
 | 1. | DOM, HTML/CSS syntax | [Week 1 Reading](/Week1/README.md) |  [Homework week 1](/Week1/MAKEME.md) |
 | 2. | [CLI](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md), Responsive design, media queries, developer tools | [Week 2 Reading](/Week2/README.md) | [Homework week 2](/Week2/MAKEME.md) |
-| 3. | [CLI](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-2.md), Recap, useful resources on the web| [JavaScript Intro](https://github.com/HackYourFuture/JavaScript/blob/master/Week0/README.md) | [Homework week 3](/Week3/MAKEME.md) |
+| 3. | [CLI](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-2.md), Recap, useful resources on the web| [JavaScript Intro](https://github.com/SocialHackersCodeSchool/JavaScript1/blob/master/Week1/README.md) | [Homework week 3](/Week3/MAKEME.md) |
 
-Please get yourself familiar with this repository by navigating your way through the different README files. Kind note: make sure to read assignment requirements properly for handing them in, in the end this saves both you and your teacher a lot of time. If you have any questions or something is not entirely clear ¯\\\_(ツ)_/¯, please ask/comment on Slack!
+Please get yourself familiar with this repository by navigating your way through the different README files. Kind note: make sure to read assignment requirements properly for handing them in. In the end this saves both you and your teacher a lot of time. If you have any questions or something is not entirely clear ¯\\\_(ツ)_/¯, please ask/comment on Slack!
 
 ## Learning goals for HTML-CSS:
 ```
 • Basic understanding of HTML and CSS
 • Know how to organize your files
-• Know your way around your text editor 
+• Know your way around your text editor
 • Feel comfortable working with the inspector
 • Properly indent your code
-• Properly naming classes, id's 
+• Properly naming classes, id's
 • Responsive, mobile first development
 • Know good and bad practices when it comes to HTML
 • Get an understanding of where to find information on the web
@@ -45,7 +45,3 @@ Please get yourself familiar with this repository by navigating your way through
 • Learn output redirection, piping on the terminal.
 • Write basic shell scripts to ease the programming life.
 ```
-
-
-
-
diff --git a/Student-Notes.md b/Student-Notes.md
@@ -0,0 +1,23 @@
+# General
+* Learn HTML in Arabic: https://www.youtube.com/playlist?list=PLDoPjvoNmBAwClZ1PDcjWilxp9YERUbNt
+* Learn CSS in Arabic: https://www.youtube.com/playlist?list=PLDoPjvoNmBAzAeIcXA3_JsmSkPKOs9W-Y
+* Learn CSS3 in Arabic: https://www.youtube.com/playlist?list=PLDoPjvoNmBAyEyQaHOHO1HJtmSgGt07VC
+
+# Week 1
+* Validate your HTML to make sure there are no bugs in it: https://validator.w3.org/
+* Some fun CSS transitions to play with to make your website look nice: https://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/
+* Introduction to ARIA: http://www.informit.com/articles/article.aspx?p=2464970
+* CSS reference: http://cssreference.io/
+* HTML reference: http://htmlreference.io/
+* CSS values: https://cssvalues.com/
+
+# Week 2
+* Explanation about the ViewPort meta tag: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#Viewport_basics
+* Introduction to using Media Queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
+* How to position content on a page: https://learn.shayhowe.com/html-css/positioning-content/
+* Understanding and using REM units in CSS: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
+* Useful Nth Child Codes: https://css-tricks.com/useful-nth-child-recipies/
+* Flexbox Information: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+* Flexbox Properties Demonstration: https://codepen.io/justd/full/yydezN/
+
+# Week 3
diff --git a/Week0/README.md b/Week0/README.md
@@ -1,6 +1,6 @@
 ### Hello new class!
 
->Before you come to your first session at HackYourFuture please go through this document, read, watch and check if you are ready to start your HackYourFuture adventure!
+>Before you come to your first session at Social Hackers Academy please go through this document, read, watch and check if you are ready to start your Social Hacker's adventure!
 
 ### Read these Chapters from the [Front-end Handbook](https://www.frontendhandbook.com)
  * [What Is a Front-End Developer?](https://frontendmasters.com/books/front-end-handbook/2017/what-is-a-FD.html)
@@ -64,8 +64,14 @@
 ### Do you have Visual studio installed?
 
 - [Visual studio](https://code.visualstudio.com/)
+- [Brackets](http://brackets.io)
+- [Atom](https://atom.io/)
+- [Spacemacs](http://spacemacs.org/)
+- [Sublime (*)](https://www.sublimetext.com/)
 
->Visual studio is the default text editor we use in the course. We expect you to use this editor through the entire course.
+  _[*] __Sublime Text__ may be downloaded and evaluated for free, however a license must be purchased for continued use._
+
+If you have no experience or preference when it comes to working with text editor just install Visual studio, you can always switch to another editor later on in the program.
 
 ### Curriculum
-Don't forget to take a look at the [HackYourFuture curriculum](https://github.com/HackYourFuture/curriculum). Go through it and make sure you have an idea of what you will learn at HackYourFuture :muscle:
+Don't forget to take a look at the [Social Hacker's Academy curriculum](https://github.com/SocialHackersAcademy/curriculum). Go through it and make sure you have an idea of what you will learn at Social Hackers :muscle:
diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
@@ -28,7 +28,9 @@
 Before you start check out this [video](http://www.learningscientists.org/videos/) and/or this [article](https://www.cultofpedagogy.com/learning-strategies/) about good learning practices.
 
 #### HTML5
-Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
+- Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
+- [A page that lists all the HTML elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
+- [A page that lists all available HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)
 
 #### CSS:
 - [CSS reference](http://cssreference.io/)
@@ -40,19 +42,14 @@ Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
 
 _Deadline Monday_
 
-- Please create a repository on Github, call it `hyf-html-css`.
-- Inside this repository create a folder `week0`.
-- Use the code of the application assignment you have made, copy and paste the html in a `index.html` file and the css in a `style.css` file and upload it to github in the `week0` folder.
-- For better instructions on how to do this please check the [how to hand in homework](#how-to-hand-in-homework) down below.
+- Make sure you have posted the link to your CodePen on your Trello card
 - In Trello, you are assigned to one of the cards of your fellow students (in the _your class number_ Week0 HTML/CSS list). Give feedback on the application assignment of your fellow student. Please be critical but most of all give constructive feedback. If there are resources that you used and might be useful, share them.
 - revisit you own application assignment and improve it with the feedback and suggestions given by one of your classmates.
 
-> Don't forget, you can always revisit Khan Academy: [Into to HTML/CSS: Making web pages](https://nl.khanacademy.org/computing/computer-programming/html-css) if you are stuck and need a reminder
+> Don't forget, you can always revisit Khan Academy: [Into to HTML/CSS: Making web pages](https://khanacademy.org/computing/computer-programming/html-css) if you are stuck and need a reminder
 
 ## Step 3: Assignment
 
-_Deadline Saturday_
-
  - Make your own web resume:
     - One page
     - Two files: HTML and CSS
@@ -65,7 +62,7 @@ _Deadline Saturday_
     - Include the following:
         - Different types of headings (`<h1>`, `<h2>`)
         - A list (`<ul>`). In this list include the _learning strategies_ you used making your resume. Also include some of the resources/references, this can be documentation/video etc, that where helpful.
-        - Another list (`<ul>`). In this list you include the most important platforms/resources where you can find all hyf related information.
+        - Another list (`<ul>`). In this list you include the most important platforms/resources where you can find all Social Hackers Academy related information.
         - `<img>`
         - `<p>`
         - Some CSS properties: `margin`, `padding`
@@ -74,17 +71,17 @@ _Deadline Saturday_
 
 ### How to hand in Homework:
 _Steps_:
-1. In your newly created Github account search for the invitation from the HackYourFuture organization to you join your classes team.
-2. Create a new repository (name it something like hyf-html-css) make sure you select the option: initialize with README.
+1. In your newly created Github account search for the invitation from the SocialHackersAcademy organization to you join your classes team.
+2. Create a new repository (name it something like html-css) make sure you select the option: initialize with README.
 3. Inside your new repository create a folder called "week1". If you have trouble finding out how to create a folder in Github check this [Stack Overflow question](https://stackoverflow.com/questions/18773598/creating-folders-inside-github-com-repo-without-using-git)
 >Tip: you can also create a "week1" folder on your local computer that contains you files and upload the entire folder to Github.
 
 4. Upload the files you created on your computer (step 3 of the homework) inside this folder, write a description for this “commit” (for example: "homework week1").
-5. Your hyf-html-css/week1 should now contain an index.html and a main.css file (and maybe a folder containing your images)
+5. Your html-css/week1 should now contain an index.html and a main.css file (and maybe a folder containing your images)
 6. Open the files in your folder to check if all of this worked.
 7. Now go to the settings of your repository:![settings overview](./assets/github_pages1.png)
 8. And go to _Github Pages_ select "master" instead of "none"![pages overview](./assets/github_pages2.png)
-9. Now you can view your homework online at: https://_hereyouplaceyourgithubusername_/hyf-html-css/week1
+9. Now you can view your homework online at: https://_hereyouplaceyourgithubusername_/html-css/week1
 10. Please upload a link to your homework in Trello.
 
 ### Here is an example of how your homework repository should look:
@@ -96,7 +93,4 @@ _Steps_:
 
 ## Step 4: Prepare for next class
 
-_Deadline Sunday morning_
-
 Go trough the reading material in the [README.md](/Week1/README.md) to prepare for your next class
-
diff --git a/Week1/README.md b/Week1/README.md
@@ -5,7 +5,7 @@ In week two we will discuss the following topics
 • CLI
     • To know the terminal/bash/command line for UNIX based systems.
     • Navigate the file system without using a UI explorer.
-    • Copy, rename and move files with terminal commands. 
+    • Copy, rename and move files with terminal commands.
 • Responsive web design
 • Media queries
 • Flexbox
@@ -23,8 +23,8 @@ If you have Linux installed on your laptop or you have a MACbook, then you don
 Go to the [CLI](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md) repoistory to prepare for you first commandline class!
 
 ### Here are resources that we like you to read as a preparation for the coming lecture:
-- Start reading about media queries here: [Introduction to Media Queries](https://varvy.com/mobile/media-queries.html). 
-- And read about [flexbox](https://tympanus.net/codrops/css_reference/flexbox/) 
+- Start reading about media queries here: [Introduction to Media Queries](https://varvy.com/mobile/media-queries.html).
+- And read about [flexbox](https://tympanus.net/codrops/css_reference/flexbox/)
 - [Mastering the :nth-child](http://nthmaster.com/)
 - Also take a look at these two websites, here you can find examples of responsive design
     + https://responsivedesign.is/examples/
@@ -33,7 +33,7 @@ Go to the [CLI](https://github.com/HackYourFuture/CommandLine/blob/master/Lectur
 ### How to use the inspector :mag:
 Read and watch about how you can [Inspect and Edit Pages and Styles](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/) using the inspector
 
-Here you can read about the inspector which is part of the [The Chrome Developer Tools](https://developer.chrome.com/devtools) 
+Here you can read about the inspector which is part of the [The Chrome Developer Tools](https://developer.chrome.com/devtools)
 
 Please read the following sections:
 - Accessing the DevTools

diff --git a/Week1/REVIEW.md b/Week1/REVIEW.md
@@ -2,18 +2,23 @@
 
 ```
 This review covers:
-• The division of labor between HTML and CSS
+• HTML vs CSS
 • Introduction to HTML:
-    • Parents, children, attributes
-    • Indentation
+    • Tags, HTML elements and content
+    • Basic structure of HTML file
+    • Indentation on HTML
     • Semantic elements
-    • Paragraphs, links, images, lists
+    • Non-semantic elements
+    • Attributes
+    • Comments
 • Introduction to CSS:
     • Where can we write it and what difference does that make?
     • Selectors (id, class, element type), properties
     • How to structure a CSS file
     • Naming things
+• Introduction to ARIA:
+    • Brief explanation of ARIA
+    • Screen readers
 • External files: relative and absolute paths
-• Getting to know your text editor
 ```