From b301406acae5379d2a51ffe61bdde0df4743e3bf Mon Sep 17 00:00:00 2001 From: Ivana Setiawan Date: Sun, 17 Sep 2017 11:25:30 +0200 Subject: [PATCH 001/188] Add accessibility on intro --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index a2f3535..4e4d023 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,7 @@ 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. 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 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. So since this is your first module, what can you expect the next three weeks? @@ -22,10 +21,10 @@ Please get yourself familiar with this repository by navigating your way through ## Learning goals for this module: * 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 From 3c0fc15724ae5ed56dc43e4e297561578e069f6e Mon Sep 17 00:00:00 2001 From: Ivana Setiawan Date: Sun, 17 Sep 2017 11:42:15 +0200 Subject: [PATCH 002/188] Week 0 with ARIA intro --- README.md | 1 + Week0/README.md | 9 +++++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4e4d023..172c813 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,7 @@ Please get yourself familiar with this repository by navigating your way through ## Learning goals for this module: * Basic understanding of HTML and CSS +* Basic understanding of Accessible Rich Internet Applications (ARIA) * Know how to organize your files * Know your way around your text editor * Feel comfortable working with the inspector diff --git a/Week0/README.md b/Week0/README.md index f1474e5..a514b7d 100644 --- a/Week0/README.md +++ b/Week0/README.md @@ -21,12 +21,17 @@ * How do you reference CSS in your HTML? * Why would you use CSS resets? ->Don't worry if you don't understand everything, but make sure to prepare some questions for your first session about the reading material. - ### Watch these videos: * How the Internet Works in 5 Minutes * How Web Browsers Work +### Get familiar with Accessible Rich Internet Applications (ARIA) + * [What is ARIA and why is it important?](https://www.youtube.com/watch?v=HtTyRajRuyY) + * [Introduction to ARIA](https://www.youtube.com/watch?v=g9Qff0b-lHk&t=4s) + * [Web applications and ARIA FAQ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ) + +>Don't worry if you don't understand everything, but make sure to prepare some questions for your first session about the reading material. + ### Add a card in Trello: * In Trello, create a card with your name (there is an example in there) and add the link to your CodePen that contains you application assignment. From 61210e98a57f5b41a07619dc683cf87a3132c2a1 Mon Sep 17 00:00:00 2001 From: Ivana Setiawan Date: Sun, 17 Sep 2017 11:52:09 +0200 Subject: [PATCH 003/188] Add Aria and validation on Week 1 --- Week0/README.md | 1 + Week1/MAKEME.md | 18 ++++++++++++------ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/Week0/README.md b/Week0/README.md index a514b7d..ea8882f 100644 --- a/Week0/README.md +++ b/Week0/README.md @@ -29,6 +29,7 @@ * [What is ARIA and why is it important?](https://www.youtube.com/watch?v=HtTyRajRuyY) * [Introduction to ARIA](https://www.youtube.com/watch?v=g9Qff0b-lHk&t=4s) * [Web applications and ARIA FAQ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ) + * _Bonus knowlegde:_ [Practical guide for developers on how to add accessibility information to HTML elements using the ARIA specification](https://w3c.github.io/using-aria/) >Don't worry if you don't understand everything, but make sure to prepare some questions for your first session about the reading material. diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index a621588..ed626d9 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -9,32 +9,38 @@ * Indentation * Semantic elements * Paragraphs, links, images, lists + * Validating HTML + * Introduction to ARIA: + * What is ARIA and why is it important? + * Using ARIA in HTML + * Validating ARIA * 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 + * Validating CSS * External files: relative and absolute paths * Getting to know your text editor # Homework Week 1 -## Step 1. +## Step 1. ### Good learning practices 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) ### CSS: -* [CSS reference](http://cssreference.io/) +* [CSS reference](http://cssreference.io/) * [MDN - Introduction to CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction) * [CSS-tricks - CSS Properties](https://css-tricks.com/almanac/properties/) * [MDN - CSS box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) ## Step 2. * In Trello, you are assigned to one of the cards of your fellow students (in the Class11 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. +* 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 @@ -42,7 +48,7 @@ Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 ## Step 3. ### Assignment: * Make your own web resume: - * One page + * One page * Two files: HTML and CSS * Include the following: * Your personal info (name, place of birth, etc.) @@ -56,7 +62,7 @@ Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 * Another list (ul). In this list you include the most important platforms/resources where you can find all hyf related information. * img * p - * Some CSS properties: margin, padding + * Some CSS properties: margin, padding * Make sure that you page looks nice, and that your text is readable * upload in a zip * BEFORE you hand it in, read the [Style guide](http://www.w3schools.com/html/html5_syntax.asp) and check your files (you can also use the [HTML validator](https://validator.w3.org)). From e13c2ea98e1f19b61b5a33eab18a1d542c553cdd Mon Sep 17 00:00:00 2001 From: Ivana Setiawan Date: Sun, 17 Sep 2017 12:07:59 +0200 Subject: [PATCH 004/188] Add accessibility to homework --- Week1/MAKEME.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index ed626d9..fd643ec 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -18,7 +18,7 @@ * 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 + * Naming conventions * Validating CSS * External files: relative and absolute paths * Getting to know your text editor @@ -63,7 +63,7 @@ Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 * img * p * Some CSS properties: margin, padding - * Make sure that you page looks nice, and that your text is readable + * Make sure that you page looks nice, and that your text is readable & accessible (ARIA) * upload in a zip * BEFORE you hand it in, read the [Style guide](http://www.w3schools.com/html/html5_syntax.asp) and check your files (you can also use the [HTML validator](https://validator.w3.org)). From f7b8b0080b9425abfa556bd24bd2fb879cb5cf84 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 18 Sep 2017 12:14:31 +0200 Subject: [PATCH 005/188] fixed list --- README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index fbaa446..a799fc2 100644 --- a/README.md +++ b/README.md @@ -19,19 +19,21 @@ So since this is your first module, what can you expect the next three weeks? 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 this module: +``` • Basic understanding of HTML and CSS -* Basic understanding of Accessible Rich Internet Applications (ARIA) • 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 • Give receive/feedback from/on fellow students • Presenting and explaining your work to others +``` + From 0a48f98e138a8bdfe49e14c91f644b80c2172b91 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 18 Sep 2017 12:15:37 +0200 Subject: [PATCH 006/188] style fix --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a799fc2..5e7bc68 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ Please get yourself familiar with this repository by navigating your way through • Feel comfortable working with the inspector • Properly indent your code • Properly naming classes, id's -• Responsive, _mobile first_ development +• 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 • Give receive/feedback from/on fellow students From 81b00566dd59c974d706d1c4817efb6cfe149df8 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Tue, 19 Sep 2017 13:59:22 +0200 Subject: [PATCH 007/188] added resources about the inspector --- README.md | 1 - Week1/README.md | 11 +++++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5e7bc68..d23d965 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,6 @@ Please get yourself familiar with this repository by navigating your way through • Get an understanding of where to find information on the web • Give receive/feedback from/on fellow students • Presenting and explaining your work to others - ``` diff --git a/Week1/README.md b/Week1/README.md index 7d561b1..0118ce4 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -5,6 +5,7 @@ In week two we will discuss the following topics • Responsive web design • Media queries • Flexbox +• How to use the inspector ``` ### Here are resources that we like you to read as a preparation for the coming lecture: @@ -12,4 +13,14 @@ In week two we will discuss the following topics - And read about [flexbox](https://tympanus.net/codrops/css_reference/flexbox/And) - Also take a look at this [website](http://mediaqueri.es) here you can find examples of responsive design. +### 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) + +Please read the following sections: +- Accessing the DevTools +- The DevTools window +- Inspecting the DOM and styles + _Please go through the material and come to class prepared!_ \ No newline at end of file From 03c41e3d3592bbbde07b41b544d213d07b2269e9 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Tue, 26 Sep 2017 11:48:38 +0200 Subject: [PATCH 008/188] added resource about :nth-child selectors --- Week1/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Week1/README.md b/Week1/README.md index 0118ce4..d4573cb 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -11,6 +11,7 @@ In week two we will discuss the following topics ### 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/And) +- [Mastering the :nth-child](http://nthmaster.com/) - Also take a look at this [website](http://mediaqueri.es) here you can find examples of responsive design. ### How to use the inspector :mag: From 510c0e1e4ae0f8f364af55282c813e769421b5b6 Mon Sep 17 00:00:00 2001 From: Elias011 Date: Tue, 14 Nov 2017 15:06:47 +0100 Subject: [PATCH 009/188] Added Arabic translation to the text of Skeye Nano Drone --- Week2/Homework2/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week2/Homework2/index.html b/Week2/Homework2/index.html index ca7a57c..46c80e1 100644 --- a/Week2/Homework2/index.html +++ b/Week2/Homework2/index.html @@ -77,7 +77,7 @@

YUNEEC Breeze 4K

  • SKEYE Nano Drone

    -

    Met de Nano Drone kan iedereen het gevoel van vliegen met een drone ervaren. De zeer kleine drone van slechts vier centimeter breed is na uitpakken direct klaar om te vliegen.

    +

    مع هذه الطائرة الصغيرة يمكن للجميع تجربة شعور الطيران بطائرة من دون طيار. هذه الطائرة من دون طيار الصغيرة جداً بعرض أربعة سانتيمترات بعد إزالتها من التغليف تكون جاهزة للطيران

  • DJI Spreading Wings S900

    @@ -153,7 +153,7 @@

    YUNEEC Breeze 4K

  • SKEYE Nano Drone

    -

    Met de Nano Drone kan iedereen het gevoel van vliegen met een drone ervaren. De zeer kleine drone van slechts vier centimeter breed is na uitpakken direct klaar om te vliegen.

    +

    مع هذه الطائرة الصغيرة يمكن للجميع تجربة شعور الطيران بطائرة من دون طيار. هذه الطائرة من دون طيار الصغيرة جداً بعرض أربعة سانتيمترات بعد إزالتها من التغليف تكون جاهزة للطيران

  • DJI Spreading Wings S900

    From 442779c3c06ff6b2a80cc855b150ba689b1ce343 Mon Sep 17 00:00:00 2001 From: Elias011 Date: Tue, 14 Nov 2017 15:16:14 +0100 Subject: [PATCH 010/188] Added Arabic translation to the second text --- Week2/Homework2/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Week2/Homework2/index.html b/Week2/Homework2/index.html index 46c80e1..8720781 100644 --- a/Week2/Homework2/index.html +++ b/Week2/Homework2/index.html @@ -22,7 +22,7 @@

    Drone 6-AXIS + camera

  • DJI Mavic Pro Fly More Combo

    -

    Met de Mavic, die direct opvalt vanwege zijn kleine afmeting, zet DJI een nieuwe standaard op het gebied van drones. De Mavic is zeer behulpzaam tijdens de niet altijd even makkelijke vluchten, vooral dankzij de vele ingebouwde technieken.

    +

    طائرة مافيك: مايميز هذه الطائرة هو صغر حجمها، وهي معيار جديد في مجال الطائرات من دون طيار. طائرة المافيك مفيدة كثيراً في الحالات التي لايكون الطيران فيها سهلاً، وذلك بفضل التقنيات العديدة المدمجة فيها.

  • DJI Phantom 4

    @@ -77,7 +77,7 @@

    YUNEEC Breeze 4K

  • SKEYE Nano Drone

    -

    مع هذه الطائرة الصغيرة يمكن للجميع تجربة شعور الطيران بطائرة من دون طيار. هذه الطائرة من دون طيار الصغيرة جداً بعرض أربعة سانتيمترات بعد إزالتها من التغليف تكون جاهزة للطيران

    +

    Met de Nano Drone kan iedereen het gevoel van vliegen met een drone ervaren. De zeer kleine drone van slechts vier centimeter breed is na uitpakken direct klaar om te vliegen.

  • DJI Spreading Wings S900

    @@ -98,7 +98,7 @@

    Drone 6-AXIS + camera

  • DJI Mavic Pro Fly More Combo

    -

    Met de Mavic, die direct opvalt vanwege zijn kleine afmeting, zet DJI een nieuwe standaard op het gebied van drones. De Mavic is zeer behulpzaam tijdens de niet altijd even makkelijke vluchten, vooral dankzij de vele ingebouwde technieken.

    +

    طائرة مافيك: مايميز هذه الطائرة هو صغر حجمها، وهي معيار جديد في مجال الطائرات من دون طيار. طائرة المافيك مفيدة كثيراً في الحالات التي لايكون الطيران فيها سهلاً، وذلك بفضل التقنيات العديدة المدمجة فيها.

  • DJI Phantom 4

    @@ -153,7 +153,7 @@

    YUNEEC Breeze 4K

  • SKEYE Nano Drone

    -

    مع هذه الطائرة الصغيرة يمكن للجميع تجربة شعور الطيران بطائرة من دون طيار. هذه الطائرة من دون طيار الصغيرة جداً بعرض أربعة سانتيمترات بعد إزالتها من التغليف تكون جاهزة للطيران

    +

    Met de Nano Drone kan iedereen het gevoel van vliegen met een drone ervaren. De zeer kleine drone van slechts vier centimeter breed is na uitpakken direct klaar om te vliegen.

  • DJI Spreading Wings S900

    From 34a49f27274e73348d6901fc47ea390ef34d257a Mon Sep 17 00:00:00 2001 From: pesh12 Date: Tue, 14 Nov 2017 19:01:24 +0100 Subject: [PATCH 011/188] Turkish version added --- Week2/Homework2/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week2/Homework2/index.html b/Week2/Homework2/index.html index 8720781..a5ca521 100644 --- a/Week2/Homework2/index.html +++ b/Week2/Homework2/index.html @@ -15,9 +15,9 @@

    Grids

    Grid with floats