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.

| Week | Topic | Read | Homework |

| ---- | ----- | ---- |----------|

| 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/Week1/Lecture.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/Week2/Lecture.md/), Recap, useful resources on the web| [JavaScript Intro](https://github.com/HackYourFuture/JavaScript/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!

- 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.

- Make your own web resume:

- One page

- Two files: HTML and CSS

- Include the following:

- Your personal info

- A picture

- A few lines about who you are

- Education

- Work experience

- *Please do not include your current address, phone number and mail address, your CV will be hosted on Github*

- 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.

- `<img>`

- `<p>`

- Some CSS properties: `margin`, `padding`

- Make sure that you page looks nice, and that your text is readable & accessible (ARIA)

- 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)).

_Deadline Monday_

- In Trello you are added to one of the cards of your fellow students.

- Give feedback CV assignment of one 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 CV assignment and improve it with the feedback and suggestions given by one of your classmates.

- [Introduction to media queries](https://teamtreehouse.com/library/css3/media-queries/introduction)

- [More about media queries](https://css-tricks.com/css-media-queries/)

- [HTML syntax](http://www.w3schools.com/html/html5_syntax.asp)

- [How CSS selectors work](https://css-tricks.com/how-css-selectors-work/)

- [Article about multiple ways to select classes and id's](https://css-tricks.com/multiple-class-id-selectors)

- [Read about nice color combinations](http://www.colorcombos.com/index.html)

- CodeAcedemy: [Learn Responsive Design](https://www.codecademy.com/learn/learn-responsive-design)

- [flexboxfroggy](https://flexboxfroggy.com/)

- [cssgridgarden](http://cssgridgarden.com/)

- Grids exercise

- Download the HTML and images in the folder Homework 2 ([or click this link to download](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/Homework2))

- You are going to write the CSS for this page

- You are not allowed to change the HTML

- The page contains two grids: the first one should work using floats, the second using flex box. Be careful not to mix the two!

- We want the grid to look as follows (check the wireframe below):

- On mobile phones: a two column grid, with the exception that the first item spans the full width

- On tablets: a three column grid, with the exception that the first two items span the full width together (so first we have two columns, then after the first two items we have three columns)

- On desktops: a four column grid, with the exception that the first item spans two columns.

- There should be some space between the grid items

- Make the page look beautiful by adding some more CSS! Some tips:

- How about some nice colors, fonts, hover styles?

- According to the grid specification, some products are bigger than others. Maybe these are "highlighted" products, so the rest of the styling could also be different.

- BEFORE you hand it in, read [the Style guide](http://www.w3schools.com/html/html5_syntax.asp) again and check your files

- An animation using CSS keyframes

- SVG

_Deadline Monday_

- In Trello you are added to one of the cards of your fellow students.

- Give feedback on the drone assignment and the command line homework 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 drone assignment and command line homework and improve it with the feedback and suggestions given by one of your classmates.