diff --git a/README.md b/README.md index 7e22bef..6235a0f 100644 --- 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 new file mode 100644 index 0000000..efb0c9a --- /dev/null +++ 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 index 22b37b8..49d8960 100644 --- 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 index 90139d9..e95340d 100644 --- 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 (`

`, `

`) - A list (`