From baeb3a8eed6cfd8b1336172c73d2592f667c909a Mon Sep 17 00:00:00 2001 From: Philipp Beau Date: Sun, 19 May 2019 14:28:16 +0200 Subject: [PATCH 001/135] This extention is broken Apparenly vscode has introduced some changes to their api `https://github.com/HarshdeepGupta/live-html-preview/issues/29`. I also saw that it sometimes behaves a little different than standalone browsers when it comes to styling the `` and `` tags. Proposing to remove this and make them use the real browser. --- Week1/README.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/Week1/README.md b/Week1/README.md index 09ce965..b039b2d 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -86,9 +86,6 @@ In week one we will discuss the following topics - [Visual studio](https://code.visualstudio.com/) -After you installed vscode, also install the following plugins -- [Live HTML Previewer](https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer) - >Visual studio is the default text editor we use in the course. We expect you to use this editor through the entire course. ### Curriculum From a70cef0f5d13b202f3cf5e37844fd6e20c59395f Mon Sep 17 00:00:00 2001 From: Noer Paanakker Date: Mon, 27 May 2019 16:20:52 +0200 Subject: [PATCH 002/135] rewrite readme main --- README.md | 50 +++++++++++++++++++++------------------------ Week1/LESSONPLAN.md | 1 + Week2/LESSONPLAN.md | 1 + Week2/README.md | 21 ++++++++++++------- Week3/LESSONPLAN.md | 1 + 5 files changed, 40 insertions(+), 34 deletions(-) create mode 100644 Week1/LESSONPLAN.md create mode 100644 Week2/LESSONPLAN.md create mode 100644 Week3/LESSONPLAN.md diff --git a/README.md b/README.md index baee45c..b8ffb8e 100644 --- a/README.md +++ b/README.md @@ -1,41 +1,37 @@ -# HTML-CSS and Command Line +> Please help us improve and share your feedback! If you find better tutorials or links, please share them by [opening a pull request](https://github.com/HackYourFuture/HTML-CSS/pulls). -## Introduction +# HackYourFuture - HTML, CSS and GIT (Frontend) -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. +Welcome to the wonderful world of web development! In this module you will learn the basic building blocks of the web: HTML and CSS. HTML gives us the power to add text, images and videos to a page. CSS gives us the power to organize these parts and make it look nice. Think of it like this: if a webpage were a person, the HTML would be the skeleton and CSS the skin and clothing. -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 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: presenting and explaining your work, and finding documentation on the web. +## Learning goals -## Command line +In order to successfully complete this module you will need to master the following: -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. +- Be able to write syntactically correct HTML and CSS +- Understand what is meant by "responsive" web development +- Keep in mind accessibility by developing according to the rules of ARIA +- Explain your code by presenting what you've done +- Know your way around your text editor +- Feel comfortable working with your browser's inspector +- Properly indent your code -So since this is your first module, what can you expect the next three weeks? +## How to use this repository -## Planning for Current Class +This repository consists of 3 essential parts: -| 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) | +1. `Reading materials`: this document contains all the required theory you need to know _**while**_ you're coding. It's meant as both study material and as a reference to understand what you're doing. +2. `Homework`: this document contains the instructions for each week's homework. -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 if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! -## Learning goals for HTML-CSS: +## Planning -``` -• Basic understanding of HTML and CSS -• Know how to organize your files -• Know your way around your text editor -• Feel comfortable working with the inspector -• Properly indent your code -• 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 -• Presenting and explaining your work to others -``` +| Week | Topic | Reading Materials | Homework | Lesson Plan | +| ---- | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- | ----------------------------------- | -------------------------------------- | +| 1. | HTML/CSS syntax, Document-Object Model | [Week 1 Reading](/Week1/README.md) | [Homework week 1](/Week1/MAKEME.md) | [W1 Lesson Plan](/Week1/LESSONPLAN.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) | [W2 Lesson Plan](/Week2/LESSONPLAN.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) | [W1 Lesson Plan](/Week3/LESSONPLAN.md) | ## Learning goals for CLI diff --git a/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md new file mode 100644 index 0000000..8c65f4e --- /dev/null +++ b/Week1/LESSONPLAN.md @@ -0,0 +1 @@ +# Lesson Plan Week 1 diff --git a/Week2/LESSONPLAN.md b/Week2/LESSONPLAN.md new file mode 100644 index 0000000..8dbbbd3 --- /dev/null +++ b/Week2/LESSONPLAN.md @@ -0,0 +1 @@ +# Lesson Plan Week 2 diff --git a/Week2/README.md b/Week2/README.md index c55d4e2..0474995 100644 --- a/Week2/README.md +++ b/Week2/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 development • Relative measurements (%, (r)em, vw) • Media queries @@ -15,9 +15,13 @@ In week two we will discuss the following topics • How to use the inspector ``` +## Introduction to the Command Line + +The Command Line interface (also known as CLI or 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. + ### Install GitBash if you have a windows machine. -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 +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 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. @@ -26,19 +30,22 @@ 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/) 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/ - + https://www.awwwards.com/50-examples-of-responsive-web-design.html + - https://responsivedesign.is/examples/ + - https://www.awwwards.com/50-examples-of-responsive-web-design.html ### 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 - The DevTools window - Inspecting the DOM and styles diff --git a/Week3/LESSONPLAN.md b/Week3/LESSONPLAN.md new file mode 100644 index 0000000..6ca563a --- /dev/null +++ b/Week3/LESSONPLAN.md @@ -0,0 +1 @@ +# Lesson Plan Week 3 From 54b1fddfaca05089f245c7ac513e38538450f87b Mon Sep 17 00:00:00 2001 From: Noer Paanakker Date: Tue, 28 May 2019 14:43:43 +0200 Subject: [PATCH 003/135] added preparation file, rewrote content main readme --- README.md | 27 +++++---- Week0/preparation.md | 85 ++++++++++++++++++++++++++++ Week1/README.md | 131 ++++++++++++++++--------------------------- 3 files changed, 149 insertions(+), 94 deletions(-) create mode 100644 Week0/preparation.md diff --git a/README.md b/README.md index b8ffb8e..190aa7c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -> Please help us improve and share your feedback! If you find better tutorials or links, please share them by [opening a pull request](https://github.com/HackYourFuture/HTML-CSS/pulls). +> If you are following the HackYourFuture curriculum we recommend you to first take a look at the complete curriculum, which you can find [here](https://www.github.com/curriculum). -# HackYourFuture - HTML, CSS and GIT (Frontend) +# Module #1 - HTML, CSS and GIT (Frontend) Welcome to the wonderful world of web development! In this module you will learn the basic building blocks of the web: HTML and CSS. HTML gives us the power to add text, images and videos to a page. CSS gives us the power to organize these parts and make it look nice. Think of it like this: if a webpage were a person, the HTML would be the skeleton and CSS the skin and clothing. @@ -22,8 +22,13 @@ This repository consists of 3 essential parts: 1. `Reading materials`: this document contains all the required theory you need to know _**while**_ you're coding. It's meant as both study material and as a reference to understand what you're doing. 2. `Homework`: this document contains the instructions for each week's homework. +3. `Lesson Plans`: this part is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well! + +After your first class you should start off with checking the `reading materials` for that week. At the beginning that would be the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of every concept. After, you can get started with the `homework` for that week. -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 if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! +**Have time left over?** Already take a look at the readings for the next week. That why you'll be doubly prepared for your next class! + +If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! ## Planning @@ -33,12 +38,12 @@ Please get yourself familiar with this repository by navigating your way through | 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) | [W2 Lesson Plan](/Week2/LESSONPLAN.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) | [W1 Lesson Plan](/Week3/LESSONPLAN.md) | -## Learning goals for CLI +## How to submit homework + +In this module we'll be using [Trello](https://www.trello.com) -``` -• 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. -• Learn output redirection, piping on the terminal. -• Write basic shell scripts to ease the programming life. -``` +## Finished? + +Have you finished the module? Great! Pat yourself on the back for the great work you've done. + +> Please help us improve and share your feedback! If you find better tutorials or links, please share them by [opening a pull request](https://github.com/HackYourFuture/HTML-CSS/pulls). diff --git a/Week0/preparation.md b/Week0/preparation.md new file mode 100644 index 0000000..66fa21e --- /dev/null +++ b/Week0/preparation.md @@ -0,0 +1,85 @@ +# Welcome to HackYourFuture! + +Hi new student, welcome to HackYourFuture! In this document you'll find all the instructions you need in order to prepare yourself for your upcoming journey in HackYourFuture, and beyond! + +## Agenda + +We'll discuss the following points: + +- How do I communicate with everybody? Use communication tool Slack +- Where do I write my code? Inside a code editor called Visual Studio Code +- What's the way to submit my homework? Use planning tool Trello +- How do I put my code online? On software development platform GitHub + +### How do I communicate with everybody? Use Slack + +Slack is an application that allows us to communicate with others through (video) chat. It's used in most tech companies and is really easy to use. In order for you to get familiar we're going to use it as well! + +Please download the app for on your desktop: + +- [OSX](https://slack.com/downloads/osx) +- [Windows](https://slack.com/downloads/windows) +- [Linux](https://slack.com/downloads/linux) + +And if you really can't go without your phone, you can also get it for mobile: + +- [App store](https://itunes.apple.com/nl/app/slack/id803453959?mt=12) +- [Google Play](https://play.google.com/store/apps/details?id=com.Slack&hl=nl) + +When it's all installed it's time to get into it! These are the first things to do: + +- Add a (professional looking) profile picture +- Add a nice description about yourself +- Say hi to your classmates in the class channel + +Done? This is optional, but for those who are curious: + +- [Cheat sheet for basics and shortcuts](https://get.slack.help/hc/en-us/articles/217626358-Cheat-sheet-for-basics-and-shortcuts) +- [How to format your messages in Slack](https://get.slack.help/hc/en-us/articles/202288908-Format-your-messages) + +### Where do I write my code? Inside a code editor called Visual Studio Code + +Currently, Visual Studio Code is one of the top code editors on the market. As such, we have chosen it has our default code editor to use. We highly recommend you to use it as well: + +- [Visual Studio Code](https://code.visualstudio.com/) + +We can always improve what we have, including our code editor! We can add `plugins` to make our programming life much easier. Please install the following plugins as well and see for yourself! + +- [Live HTML Previewer](https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer) +- [Syntax Highlighter](https://marketplace.visualstudio.com/items?itemName=evgeniypeshkov.syntax-highlighter) +- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) +- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) +- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + +### What's the way to submit my homework? Use planning tool Trello + +Trello is a planning tool that allows you to make todo lists in order to organize and prioritize your projects. In HackYourFuture we'll use it to submit your homework for the first module. + +- [Register](https://trello.com/signup) for an account +- Get access to the `Feedback Assignments` board, by asking Wouter +- Create a card including a CodePen URL of your technical assignment + +### How do I put my code online? On software development platform GitHub + +GitHub is a place where you can put your code online. Why? To safely store your code in case something bad happens to your computer (computer crash, virus, faulty files). You'll always be able to access this code from GitHub, using any other computer. + +- [Register](https://github.com/join) for an account +- Put the URL for your account in the class channel + +At first we won't be using it. But after module #2 it will be a close companion, so stay tuned! + +### Check double check: + +Let's make sure you have done everything necessary: + +- Slack: downloaded, added profile and said hi +- Trello: registered and added a card with the CodePen URL in of your technical assignment +- Github: registered and put the URL of your account in the class channel + +> If the answer to this is 'no', don't panic. First try and see if you can find some information about the above tools yourself (hint: ask Google first). If that doesn't work, don't be shy to ask your classmates or anyone from HackYourFuture on what to do next. + +### Finished? + +Have you finished with everything? Be proud of yourself, as you have optimally prepared yourself with all the tools needed to make your coding adventure a success! + +Now, what will you be learning? Find out by clicking [here](https://github.com/HackYourFuture/curriculum). diff --git a/Week1/README.md b/Week1/README.md index 09ce965..c0701b1 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -1,95 +1,60 @@ -### 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! - -``` -In week one we will discuss the following topics - • The division of labor between HTML and CSS - • Introduction to HTML: - • Parents, children, attributes - • Indentation - • Semantic elements - • Paragraphs, links, images, lists - • 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 - • External files: relative and absolute paths - • Getting to know your text editor -``` +## Agenda + +Week 1 will start off with the following: + +- The division of labor between HTML and CSS +- Introduction to HTML: + - Parents, children, attributes + - Indentation + - Semantic elements + - Paragraphs, links, images, lists +- 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 +- External files: relative and absolute paths +- Getting to know your text editor ### 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) - * [Part I. The Front-End Practice](https://frontendmasters.com/books/front-end-handbook/2017/practice.html) - * From Part II. have a look at: [Self Directed Learning](https://www.frontendhandbook.com/learning/self-direct-learning.html), read the definitions of HTML and CSS here (use the rest of the links for later reference) [Learn HTML/CSS](https://frontendmasters.com/books/front-end-handbook/2017/learning/html-css.html) - * Read(important!) [lesson 1: building your first web page](http://learn.shayhowe.com/html-css/building-your-first-web-page/) - -### After you finish reading ask yourself the following questions: - * What is a Front-End Developer? - * What is A web browser? - * Wat are considered as Front-End Dev Skills? - * What are good references/resources to use to learn on your own? (have you bookmarked them??) - * What is the difference between HTML and CSS? - * What are HTML elements, tags, and attributes? - * How do you setup up the structure of your first web page? - * What are CSS selectors, properties, and values? - * How do you work with CSS selectors? - * How do you reference CSS in your HTML? - * Why would you use CSS resets? - -### 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) - * _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. -### 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. - -### Install the Slack Apps on your: -- 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) -- Desktop: [OSX](https://slack.com/downloads/osx) or [Windows](https://slack.com/downloads/windows) - -### Read: -- About Slack: [Cheat sheet for basics and shortcuts](https://get.slack.help/hc/en-us/articles/217626358-Cheat-sheet-for-basics-and-shortcuts) -- How to format your messages in Slack: [Using Slack](https://get.slack.help/hc/en-us/articles/202288908-Format-your-messages) -- Take the Trello [tour](https://trello.com/tour) - -### Check double check: - -### Are you signed up for: +- [What Is a Front-End Developer?](https://frontendmasters.com/books/front-end-handbook/2017/what-is-a-FD.html) +- [Part I. The Front-End Practice](https://frontendmasters.com/books/front-end-handbook/2017/practice.html) +- From Part II. have a look at: [Self Directed Learning](https://www.frontendhandbook.com/learning/self-direct-learning.html), read the definitions of HTML and CSS here (use the rest of the links for later reference) [Learn HTML/CSS](https://frontendmasters.com/books/front-end-handbook/2017/learning/html-css.html) +- Read(important!) [lesson 1: building your first web page](http://learn.shayhowe.com/html-css/building-your-first-web-page/) -- Slack -- Trello -- Github +### After you finish reading ask yourself the following questions: -### Did you do the following?: +- What is a Front-End Developer? +- What is A web browser? +- Wat are considered as Front-End Dev Skills? +- What are good references/resources to use to learn on your own? (have you bookmarked them??) +- What is the difference between HTML and CSS? +- What are HTML elements, tags, and attributes? +- How do you setup up the structure of your first web page? +- What are CSS selectors, properties, and values? +- How do you work with CSS selectors? +- How do you reference CSS in your HTML? +- Why would you use CSS resets? -- Write "hallo :hand:" in Slack? -- Did you add a card to Trello with your name and added the link to your application assignment (CodePen)? -- Did you create a Github account? +### Watch these videos: ->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). +- How the Internet Works in 5 Minutes +- How Web Browsers Work -### Do you have Visual studio installed? +### Get familiar with Accessible Rich Internet Applications (ARIA) -- [Visual studio](https://code.visualstudio.com/) +- [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/) -After you installed vscode, also install the following plugins -- [Live HTML Previewer](https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer) +> Don't worry if you don't understand everything, but make sure to prepare some questions for your first session about the reading material. ->Visual studio is the default text editor we use in the course. We expect you to use this editor through the entire course. +### Add a card in Trello: -### 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: +- 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 beecce77e47f2725a6a7944e01f3bd74ac4619a5 Mon Sep 17 00:00:00 2001 From: Noer Date: Tue, 28 May 2019 14:49:51 +0200 Subject: [PATCH 004/135] Update MAKEME.md --- Week2/MAKEME.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 6334404..aef8855 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -54,7 +54,7 @@ testanother test ``` -## Step 3: Read/do/watch +## Step 2: Read/do/watch - [Introduction to media queries](https://teamtreehouse.com/library/css3/media-queries/introduction) - [More about media queries](https://css-tricks.com/css-media-queries/) @@ -72,7 +72,7 @@ testanother test - [flexboxfroggy](https://flexboxfroggy.com/) - [cssgridgarden](http://cssgridgarden.com/) -## Step 4: Assignment +## Step 3: Assignment _Deadline Saturday_ @@ -109,8 +109,8 @@ How to hand in your homework: - An animation using CSS keyframes - SVG -## Step 5: Prepare for next class +## Step 4: Prepare for next class _Deadline Sunday morning_ -Go trough the reading material in the [README.md](/Week3/README.md) to prepare for your next class +Go through the reading materials in the [README.md](/Week3/README.md) to prepare for your next class. From 8c80c1c02879b5ed5d1dad2b3c4a9261f5f7671f Mon Sep 17 00:00:00 2001 From: Noer Paanakker Date: Wed, 29 May 2019 12:20:46 +0200 Subject: [PATCH 005/135] preparation typo, content rewrite week 2 readings --- README.md | 13 ++-- Week0/preparation.md | 2 - Week1/MAKEME.md | 68 +++++++++--------- Week1/README.md | 160 ++++++++++++++++++++++++++++++------------- Week2/README.md | 118 ++++++++++++++++++++++++------- Week3/MAKEME.md | 2 +- 6 files changed, 239 insertions(+), 124 deletions(-) diff --git a/README.md b/README.md index 190aa7c..9fb28b3 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,8 @@ Welcome to the wonderful world of web development! In this module you will learn the basic building blocks of the web: HTML and CSS. HTML gives us the power to add text, images and videos to a page. CSS gives us the power to organize these parts and make it look nice. Think of it like this: if a webpage were a person, the HTML would be the skeleton and CSS the skin and clothing. +The second part of this module will deal with [GIT]() + ## Learning goals In order to successfully complete this module you will need to master the following: @@ -12,9 +14,8 @@ In order to successfully complete this module you will need to master the follow - Understand what is meant by "responsive" web development - Keep in mind accessibility by developing according to the rules of ARIA - Explain your code by presenting what you've done -- Know your way around your text editor +- Know your way around Visual Studio Code - Feel comfortable working with your browser's inspector -- Properly indent your code ## How to use this repository @@ -24,9 +25,7 @@ This repository consists of 3 essential parts: 2. `Homework`: this document contains the instructions for each week's homework. 3. `Lesson Plans`: this part is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well! -After your first class you should start off with checking the `reading materials` for that week. At the beginning that would be the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of every concept. After, you can get started with the `homework` for that week. - -**Have time left over?** Already take a look at the readings for the next week. That why you'll be doubly prepared for your next class! +After your first class you should start off with checking the `reading materials` for that week. At the beginning that would be the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of everything. After, you can get started with the `homework` for that week. If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! @@ -38,10 +37,6 @@ If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯ | 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) | [W2 Lesson Plan](/Week2/LESSONPLAN.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) | [W1 Lesson Plan](/Week3/LESSONPLAN.md) | -## How to submit homework - -In this module we'll be using [Trello](https://www.trello.com) - ## Finished? Have you finished the module? Great! Pat yourself on the back for the great work you've done. diff --git a/Week0/preparation.md b/Week0/preparation.md index 66fa21e..d617d1a 100644 --- a/Week0/preparation.md +++ b/Week0/preparation.md @@ -66,8 +66,6 @@ GitHub is a place where you can put your code online. Why? To safely store your - [Register](https://github.com/join) for an account - Put the URL for your account in the class channel -At first we won't be using it. But after module #2 it will be a close companion, so stay tuned! - ### Check double check: Let's make sure you have done everything necessary: diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index b6338e8..f46930d 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,6 +1,4 @@ -## Homework Week 1 - -> [Here](/Week2/README.md) you find the readings you have to complete before the second lecture. +# Homework HTML/CSS Week 1 ### Learning goals for this week: @@ -20,13 +18,11 @@ • Selectors (id, class, element type), properties • How to structure a CSS file • Naming things - • External files: relative and absolute paths - • Getting to know your text editor ``` ## Step 1: Read and watch -#### Good learning practices +#### How to learn effectively 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. @@ -37,11 +33,8 @@ Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 #### CSS: - [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: Upload to GitHub +## Step 2: Upload your technical assignment to GitHub _Deadline Monday_ @@ -50,35 +43,40 @@ _Deadline Monday_ - Use the code of the application assignment you have made(in codepen.io), 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. -> 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://nl.khanacademy.org/computing/computer-programming/html-css) if you are stuck and need a refresher. ## Step 3: Assignment _Deadline Saturday_ -- 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 (`

`, `

`) - - A list (`