|
1 | | -# Reading material for the second lecture |
| 1 | +### Hello new class! |
| 2 | + |
| 3 | +>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! |
2 | 4 |
|
3 | 5 | ``` |
4 | | -In week two we will discuss the following topics |
5 | | -• CLI |
6 | | - • To know the terminal/bash/command line for UNIX based systems. |
7 | | - • Navigate the file system without using a UI explorer. |
8 | | - • Copy, rename and move files with terminal commands. |
9 | | -• Responsive web design |
10 | | -• Media queries |
11 | | -• Flexbox |
12 | | -• How to use the inspector |
| 6 | +In week one we will discuss the following topics |
| 7 | + • The division of labor between HTML and CSS |
| 8 | + • Introduction to HTML: |
| 9 | + • Parents, children, attributes |
| 10 | + • Indentation |
| 11 | + • Semantic elements |
| 12 | + • Paragraphs, links, images, lists |
| 13 | + • Introduction to ARIA: |
| 14 | + • What is ARIA and why is it important? |
| 15 | + • Using ARIA in HTML |
| 16 | + • Validating ARIA |
| 17 | + • Introduction to CSS: |
| 18 | + • Where can we write it and what difference does that make? |
| 19 | + • Selectors (id, class, element type), properties |
| 20 | + • How to structure a CSS file |
| 21 | + • Naming things |
| 22 | + • External files: relative and absolute paths |
| 23 | + • Getting to know your text editor |
13 | 24 | ``` |
14 | 25 |
|
15 | | -### Install GitBash if you have a windows machine. |
| 26 | +### Read these Chapters from the [Front-end Handbook](https://www.frontendhandbook.com) |
| 27 | + * [What Is a Front-End Developer?](https://frontendmasters.com/books/front-end-handbook/2017/what-is-a-FD.html) |
| 28 | + * [Part I. The Front-End Practice](https://frontendmasters.com/books/front-end-handbook/2017/practice.html) |
| 29 | + * From Part II. read: [Self Directed Learning](https://www.frontendhandbook.com/learning/self-direct-learning.html), also read [Learn HTML/CSS](https://frontendmasters.com/books/front-end-handbook/2017/learning/html-css.html) |
| 30 | + * Read [lesson 1: building your first web page](http://learn.shayhowe.com/html-css/building-your-first-web-page/) |
| 31 | + |
| 32 | +### After you finish reading ask yourself the following questions: |
| 33 | + * What is a Front-End Developer? |
| 34 | + * What is A web browser? |
| 35 | + * Wat are considered as Front-End Dev Skills? |
| 36 | + * What are good references/resources to use to learn on your own? (have you bookmarked them??) |
| 37 | + * What is the difference between HTML and CSS? |
| 38 | + * What are HTML elements, tags, and attributes? |
| 39 | + * How do you setup up the structure of your first web page? |
| 40 | + * What are CSS selectors, properties, and values? |
| 41 | + * How do you work with CSS selectors? |
| 42 | + * How do you reference CSS in your HTML? |
| 43 | + * Why would you use CSS resets? |
| 44 | + |
| 45 | +### Watch these videos: |
| 46 | + * <a href="https://www.youtube.com/watch?v=7_LPdttKXPc" target="_blank">How the Internet Works in 5 Minutes</a> |
| 47 | + * <a href="https://www.youtube.com/watch?v=WjDrMKZWCt0" target="_blank">How Web Browsers Work</a> |
| 48 | + |
| 49 | +### Get familiar with Accessible Rich Internet Applications (ARIA) |
| 50 | + * [What is ARIA and why is it important?](https://www.youtube.com/watch?v=HtTyRajRuyY) |
| 51 | + * [Introduction to ARIA](https://www.youtube.com/watch?v=g9Qff0b-lHk&t=4s) |
| 52 | + * [Web applications and ARIA FAQ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ) |
| 53 | + * _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/) |
| 54 | + |
| 55 | +>Don't worry if you don't understand everything, but make sure to prepare some questions for your first session about the reading material. |
| 56 | +
|
| 57 | +### Add a card in Trello: |
| 58 | +* 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. |
| 59 | + |
| 60 | +### Install the Slack Apps on your: |
| 61 | +- Mobile: [App store](https://itunes.apple.com/nl/app/slack/id803453959?mt=12) or [Google Play](https://play.google.com/store/apps/details?id=com.Slack&hl=nl) |
| 62 | +- Desktop: [OSX](https://slack.com/downloads/osx) or [Windows](https://slack.com/downloads/windows) |
| 63 | + |
| 64 | +### Read: |
| 65 | +- About Slack: [Cheat sheet for basics and shortcuts](https://get.slack.help/hc/en-us/articles/217626358-Cheat-sheet-for-basics-and-shortcuts) |
| 66 | +- How to format your messages in Slack: [Using Slack](https://get.slack.help/hc/en-us/articles/202288908-Format-your-messages) |
| 67 | +- Take the Trello [tour](https://trello.com/tour) |
| 68 | + |
| 69 | +### Check double check: |
| 70 | + |
| 71 | +### Are you signed up for: |
16 | 72 |
|
17 | | -If you have *Windows machines*, please follow the following link and install GitBash https://github.com/git-for-windows/git/releases/tag/v2.10.2.windows.1 |
| 73 | +- Slack |
| 74 | +- Trello |
| 75 | +- Github |
18 | 76 |
|
19 | | -If you have Linux installed on your laptop or you have a MACbook, then you don’t need to do anything. See you this Sunday. |
| 77 | +### Did you do the following?: |
20 | 78 |
|
21 | | -### Read about CLI |
| 79 | +- Write "hallo :hand:" in Slack? |
| 80 | +- Did you add a card to Trello with your name and added the link to your application assignment (CodePen)? |
| 81 | +- Did you create a Github account? |
22 | 82 |
|
23 | | -Go to the [CLI](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md) repoistory to prepare for you first commandline class! |
| 83 | +>If the answer to this is 'no', don't panic, you can always ask help in Slack, but before you do, please first try and see if you can find some information about the above tools yourself (hint: ask Google first). |
24 | 84 |
|
25 | | -### Here are resources that we like you to read as a preparation for the coming lecture: |
26 | | -- Start reading about media queries here: [Introduction to Media Queries](https://varvy.com/mobile/media-queries.html). |
27 | | -- And read about [flexbox](https://tympanus.net/codrops/css_reference/flexbox/) |
28 | | -- [Mastering the :nth-child](http://nthmaster.com/) |
29 | | -- Also take a look at these two websites, here you can find examples of responsive design |
30 | | - + https://responsivedesign.is/examples/ |
31 | | - + https://www.awwwards.com/50-examples-of-responsive-web-design.html |
| 85 | +### Do you have Visual studio installed? |
32 | 86 |
|
33 | | -### How to use the inspector :mag: |
34 | | -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 |
| 87 | +- [Visual studio](https://code.visualstudio.com/) |
35 | 88 |
|
36 | | -Here you can read about the inspector which is part of the [The Chrome Developer Tools](https://developer.chrome.com/devtools) |
| 89 | +After you installed vscode, also install the following plugins |
| 90 | +- [Live HTML Previewer](https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer) |
37 | 91 |
|
38 | | -Please read the following sections: |
39 | | -- Accessing the DevTools |
40 | | -- The DevTools window |
41 | | -- Inspecting the DOM and styles |
| 92 | +>Visual studio is the default text editor we use in the course. We expect you to use this editor through the entire course. |
42 | 93 |
|
43 | | -_Please go through the material and come to class prepared!_ |
| 94 | +### Curriculum |
| 95 | +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: |
0 commit comments