Grid with floats
--
-
-
-
Drone 6-AXIS + camera
++ -Using flexbox
+-
+
-
+
6 Eksenli Drone + Kamera
- De Eddy Toys Drone is een instap drone met 6 assen en laat zich besturen door de meegeleverde 2.4Ghz controller met een bereik tot 50m hoogte.Vliegduur is 6 minuten.
+Oyuncakçı Eddy’nin dronu yeni başlayanlar için, altı ekseni var. 2.4Ghz kumadasıyla hareket ederek 50 metre yüksekliğe kadar çıkabilir. Uçuş süresi ise 6 dakika.
- - +
-
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
De DJI Phantom 4 is een intelligente drone die onder meer automatisch obstakels vermijdt en 4K-beelden opneemt. Uiteraard is dit niet het enige waar de Phantom 4 indruk mee maakt. Wat dacht je van ActiveTrack, een sportmodus en een nog langere vliegduur.
- - +
-
DJI Phantom 3 Standard
Met een bereik van 500 meter, een Full HD-camera die met 30 fps opneemt en een f/2.8-lens maakt u met de DJI Phantom 3 standard de mooiste opnames vanuit de lucht.
- - +
-
YUNEEC Breeze 4K
De Breeze 4K van Yuneec is makkelijk te besturen, veilig en snel in staat opnames te delen. De drone wordt bestuurd met je iOS- of Android-apparaat en produceert indrukwekkende 4K-beelden.
- - +
-
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
Met prachtige luchtfoto's en -video's maak je indruk. De DJI Spreading Wings S900 is een lichtgewicht drone die met zijn draaggewicht van maximaal 8,2 kilogram voorziet in het maken van dergelijke beelden.
- - +
-
Drone 6-AXIS + camera
De Eddy Toys Drone is een instap drone met 6 assen en laat zich besturen door de meegeleverde 2.4Ghz controller met een bereik tot 50m hoogte.Vliegduur is 6 minuten.
- - +
-
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
De DJI Phantom 4 is een intelligente drone die onder meer automatisch obstakels vermijdt en 4K-beelden opneemt. Uiteraard is dit niet het enige waar de Phantom 4 indruk mee maakt. Wat dacht je van ActiveTrack, een sportmodus en een nog langere vliegduur.
- - +
-
DJI Phantom 3 Standard
Met een bereik van 500 meter, een Full HD-camera die met 30 fps opneemt en een f/2.8-lens maakt u met de DJI Phantom 3 standard de mooiste opnames vanuit de lucht.
- - +
-
YUNEEC Breeze 4K
De Breeze 4K van Yuneec is makkelijk te besturen, veilig en snel in staat opnames te delen. De drone wordt bestuurd met je iOS- of Android-apparaat en produceert indrukwekkende 4K-beelden.
- - +
-
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
Met prachtige luchtfoto's en -video's maak je indruk. De DJI Spreading Wings S900 is een lichtgewicht drone die met zijn draaggewicht van maximaal 8,2 kilogram voorziet in het maken van dergelijke beelden.
@@ -87,18 +87,18 @@DJI Spreading Wings S900
- Grid with flexbox
--
+
-
Drone 6-AXIS + camera
- De Eddy Toys Drone is een instap drone met 6 assen en laat zich besturen door de meegeleverde 2.4Ghz controller met een bereik tot 50m hoogte.Vliegduur is 6 minuten.
+Oyuncakçı Eddy’nin dronu yeni başlayanlar için, altı ekseni var. 2.4Ghz kumadasıyla hareket ederek 50 metre yüksekliğe kadar çıkabilir. Uçuş süresi ise 6 dakika.
-
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
diff --git a/Week3/LESSONPLAN.md b/Week3/LESSONPLAN.md new file mode 100644 index 0000000..85b0240 --- /dev/null +++ b/Week3/LESSONPLAN.md @@ -0,0 +1,75 @@ +# Lesson Plan Week 3 + +## Agenda + +The purpose of this class is to introduce to the student: + +- What is GIT branching? +- Remote vs. local branches +- What's a pull request? + +- What is a framework? +- Popular CSS frameworks +- Framework vs custom CSS + +## Core Concepts + +FIRST HALF (12.00 - 13.30) + +## 1. GIT branching + +### Explanation + +- A branch is an experiment, a possible way your project can evolve. +- Local branch can be created with `git branch` command. Remote branch must be set using `--set-upstream` option while pushing +- Pull request is a `diff` between two commit points. It can be merged when we want to suggest changes to a Github repository to which we don't have write access. + +### Example + +Create a repository and initialize GIT. Show the use of `git branch`, `git checkout -b` + +### Exercise + +A fun exercise by [Arco](https://github.com/ArcoMul) to practise creating pull requests: [Cat pull request exercise](https://github.com/ArcoMul/netlify-cats) + +Instruction on how to set things up at Netlify: https://github.com/ArcoMul/netlify-cats/blob/main/SETUP.md + +### Essence + + +SECOND HALF (14.00 - 16.00) + +## 2. CSS framework + +### Explanation + +- A software framework is prewritten code that provides generic functionality and a structure to build applications with +- Analogy of pot of ingredients (see [example](./README.md) at section 2) +- CSS frameworks allow for faster development + +- Pros and cons of framework + + - PRO: Speeds up your development + - PRO: Enables cross-browser functionality + - PRO: Are usually maintained by a community of developers + - CON: It takes time to learn a framework + - CON: Lack of understanding the underlying CSS + +- Pros and cons of custom CSS + - PRO: Satisfies your specific needs + - PRO: Total control over the direction of CSS + - PRO: Creates a unique look + - CON: Have to maintain own code + - CON: You have to make sure it works cross-browser + +### Example + +Show various CSS frameworks: [MaterializeCSS](https://materializecss.com/), [Bootstrap](https://getbootstrap.com/), [Foundation](https://foundation.zurb.com/) + +### Exercise + +Give students an exercise to rebuild a button and navbar with custom CSS. Then let them do the same with any of the CSS frameworks you feel most comfortable with! + +### Essence + +A CSS framework is used to speed up development: it's prewritten code that provides the developer with basic structure and styling in order to create a presentable user interface. diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md new file mode 100644 index 0000000..f67e0a6 --- /dev/null +++ b/Week3/MAKEME.md @@ -0,0 +1,84 @@ +## Homework HTML/CSS/GIT Week 3 + +## Todo list + +1. Prep exercises +2. Practice the concepts +3. Code along +4. Optional: Practice using frameworks +5. Optional: Side project ideas +6. Final notes + +### 1. Prep exercises + +> Prep exercises are exercises that you should work on _before_ the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your mentor. Have a solution ready by Sunday as you may be asked to show what you did. + +Inside your `HTML-CSS` fork, go to the folder `week3`. Inside of that folder, navigate to `/prep-exercises`. For each exercise, you will find a separate folder. The `README` explains what needs to be done. There will also be some questions at the bottom to think about. Go through them _before_ the session on Sunday as it will be covered then. + +### 2. Practice the concepts + +We'll start the week off with some more GIT practice! Go through the following: + +1. [Learn Git branching](https://learngitbranching.js.org/) +2. [How to Use GIT and GitHub](https://eu.udacity.com/course/how-to-use-git-and-github--ud775) +3. [Git katas](https://github.com/eficode-academy/git-katas/blob/master/Overview.md) (Do 1-4 of the Basic Git Katas and have a quick look at the Katas that solve standard problems section so you know what to do when you encounter those situations. The rest is more advanced, but bookmark this page and go through them later on when you start getting more comfortable with Git basics) + +### 3. Code along + +In this code along you'll continue practicing your skill by building a fully responsive website: + +- [Build a responsive website](https://www.youtube.com/watch?v=p0bGHP-PXD4) + +> Tip: Use GIT and GitHub along the way to practice! + +### 4. Optional: Practice using frameworks + +Some people love using frameworks, others like being in full control of the CSS. This is a personal thing and also differs per company so there is no one way that the world works here. If you have time and are interested, then have a look at the following tutorials for the different frameworks: + +#### Bootstrap + +Bootstrap is probably the most used CSS framework if a framework is being used. Have a look at the following links to know how to use it: + +- [Bootstrap 5 Crash Course](https://www.youtube.com/watch?v=4sosXZsdy-s) +- [Making a complete responsive website using Bootstrap/HTML/CSS](https://www.youtube.com/watch?v=zhllkjYYUVE) + +#### Materialize + +In this section you're going to get familiar with [MaterializeCSS](https://materializecss.com/), a CSS framework based on Material Design - a design language created by Google. + +- [Materialize Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gGrbtvASEZSlFEYBnPkmff) +- [Build A Travel Agency Theme With Materialize CSS](https://www.youtube.com/watch?v=MaP3vO-vEsg) + +### 5. Optional: Side project ideas + +> A part of the HackYourFuture curriculum is to work on as many side projects as you can throughout the time you have. This is a nice way to add extra knowledge to your arsenal and show in your CV that you are motivated to learn new technologies. There are plenty of people available to help you out in the `#get-help` channel on Slack so definitely make use of that! Have a look at the [hyf_projects repo](https://github.com/HackYourFuture/hyf_projects/blob/main/README.md#project-2-a-try-out-application) for more details. + +#### 5.1 CSS preprocessor + +In the wild you may also encounter the following terms: Less, SCSS, Sass. These are CSS preprocessors that give you some extra functionality when working with CSS. You can, for example, create certain blocks of css code (mixins) that you can then use in multiple places allowing you to make sure that if you change the css in that mixin it is changed everywhere automatically. The preprocessor will convert your code to actual CSS files and the browser will be none the wiser. + +For more information, have a look at: + +- [Sass vs SCSS vs Less: tutorial](https://marksheet.io/sass-scss-less.html) + +You can try to recreate your project from week 2 using one of these CSS preprocessors but you may need to add a couple more pages from the original website. The strength of the preprocessors comes when you have a lot of closely related css. + +#### 5.2 Parallax effect + +You may have seen some [beautiful websites](https://www.awwwards.com/30-great-websites-with-parallax-scrolling.html) that look more like art than a website. The techniques used in these websites are broadly called the Parallax effect and it works by making the website respond to mouse movements or scrolling. Imagine how a cool website like that would look on your CV. + +Try to copy one of the examples! Note that you will need to have a little bit of JavaScript knowledge to do this so if you don't have any previous programming experience you may want to wait until you have done some of the JavaScript weeks. + +### 6. Final notes + +In this module and especially this last week we have bombarded you with a lot of different ways to create your styles. In the rest of the curriculum we will leave it up to you to decide what way you like to work. Per project that you do, think about how you want to manage your css. You can either: + +- **Write the CSS yourself**. This will allow you to have full control over the styles enabling you to make any changes you want, but will probably take some more time initially to make sure everything works. +- **Use a CSS framework**. If you had time to go through the frameworks, you may decide that you want to use the speed that they offer and don't mind the loss of some customizability. +- **Use a CSS preprocessor**. If you had the time to try these out and like that they solve a couple of problems you have writing the CSS yourself then use these. They require a little setting up though that could complicate things, so make sure you understand how that works. + +You will always have to write some css yourself, but make sure to always choose only _one_ way of working per project, otherwise you are going to create a mess! If you are up for the challenge, then feel free to try different ways per project. It's always good to try different things! + +## SUBMIT YOUR HOMEWORK! + +There is no homework this week, spend your time working on the parts you found difficult or copying another website like you did last week! diff --git a/Week3/README.md b/Week3/README.md index 5cbacf8..325f94f 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -1,33 +1,134 @@ -## Weekly Deliverables: - * Presentations of students website remakes - * Repeat topics of last two weeks: - * Understand why/ how to use which language - * Media-queries - * DOM - * File structure, external links - * How to find information on the web - - -## In class: - * Task: find some info about a certain topic in groups of 2, present to each other - * Choose one of the following subjects, look up how it works and implement it in a webpage - * CSS transitions - * CSS animations with keyframes - * SVG - * Dropdown menu in CSS - * flex-box - -## Homework - -### Assignment: - * Remake an existing responsive website: choose one of the following - * https://www.rijksoverheid.nl - * http://www.awwwards.com - * https://www.bostonglobe.com - * https://www.thinkwithgoogle.com - * http://muumilaakso.tampere.fi/en/ - * http://incredibletypes.com - * http://thenextweb.com - * It should have an external CSS file - * BEFORE you hand it in, read the Style guide again and check your files +# Reading Material HTML/CSS/GIT Week 3 +## Agenda + +These are the topics for week 3: + +1. GIT branching + - Local branches + - Working with branches on GitHub + - Making pull requests +2. CSS Frameworks + - Why use a framework? + - Most popular frameworks + - CSS Framework vs. custom CSS + +## 0. Video Lectures + +Your teacher Arco has made video lectures for this week's material. You can find them here: [Videos 12 - 15](https://www.youtube.com/playlist?list=PLVYDhqbgYpYXbAL_Hps1Y--THRmaTFipj) + + 
+
+## 1. GIT branching
+
+### Local branches
+
+`Branches` are a core feature of GIT. A branch allows you to work on a different "version" of your project. Take a look at the following image:
+
+
+
+Whenever you make a branch, you're creating an exact copy of your workspace that you can work with. Try it out:
+
+```md
+Go into a folder and initialize GIT to create a local repository. Then create a branch. In this new branch, create some basic files. **stage** and **commit** the changes you've made. Now, switch back to the original branch (**main**). What do you see? Nothing! That's because in that branch you didn't make those changes. If you switch back to the other branch you will see the files you've created again. Magic!
+```
+
+You can see a branch as an experiment, a possible way your project can evolve. Usually, each branch (except the `main` branch) contains code for what is called a new `feature`: a piece of functionality that you want to add to your software. Let's take Facebook as a simple example: After creating an account (which is a feature itself) you can do multiple things. Each "thing" is a feature: having a news feed, being able to send friend requests or liking posts.
+
+Working with branches is especially important when working with other developers. This only applies when working with a **remote** repository, which we'll talk about in the next section.
+
+When working with different branches it is useful to have one single branch that contains all the working and finished code: the `main` branch (we call it main out of convention, but in actuality you can name it whatever you want). Whenever you're working on a project that has already been put on the internet, it is the code from the main branch that is online.
+
+However, usually there's a separate branch that contains all the development code. Of course, this is called the `development` branch. This branch is an almost exact copy of main, but contains features that have not been tested yet.
+
+After finishing a feature, it is time to merge the branch into the main branch. This is usually either the `main` or `development` branch.
+
+Once the new version of the software has been tested and approved, the cycle repeats!
+
+Go through the following resources to learn more:
+
+- [Git Tutorial: Branches](https://www.youtube.com/watch?v=sgzkY5vFKQQ)
+- [Introduction to GIT - Branching and Merging](https://www.youtube.com/watch?v=FyAAIHHClqI)
+
+### Working with branches on GitHub
+
+While working with branches works a bit differently on GitHub (because of its user interface) the concept remains the same: you always want to have a main branch that holds all your stable, working code. Any other branches will contain software features that eventually will be merged into main.
+
+Go through the following project to learn how to work with branches on GitHub:
+
+- [GitHub 'Hello World' Project](https://guides.github.com/activities/hello-world/)
+
+### Making pull requests
+
+A **pull request** is a term GitHub uses to refer to a request to incorporate code changes from one branch made by a developer (whether it's you or another developer) into the code stored in a different branch of a repository.
+
+> Sometimes you'll hear developers speak of "merge requests". This is just another name for the same thing: pulling changes from another branch or fork into your branch and merging the changes with your existing code. Software development platforms like GitLab (an alternative to GitHub) use this the term "merge request" instead of "pull request".
+
+These changes are made in one branch, and the pull request usually is made to merge into the `main` branch. However, this doesn't happen directly: in normal circumstances, there has to be at least one other person reviewing the proposal before it is approved to be merged. The reason why is simple: it's very easy to merge code that might be buggy or conflicts with what's already there.
+
+- [GitHub Pull Request in 100 Seconds](https://www.youtube.com/watch?v=8lGpZkjnkt4)
+
+Pull requests only happen in remote repositories. This can happen in 2 ways:
+(1) From one branch to another **within the same repository**. For more information on this, read:
+
+- [Creating a pull request](https://help.github.com/en/articles/creating-a-pull-request)
+
+(2) From one branch to another branch **from a forked repository into the original repository**. A `fork` is a copy of a repository, that is stored in your personal GitHub account. Forks let you make changes to a project without affecting the original repository. You can fetch updates from or submit changes to the original repository with pull requests.
+
+While both are important to know about, it's useful to study the second way a little more in-depth because that's how you'll submit your homework:
+
+- [About forks](https://help.github.com/en/articles/about-forks)
+- [GitHub Homework flow](https://www.youtube.com/watch?v=CpYARPYGQU8)
+
+Also the following diagram will help you in understanding the principles of flow movements between the local and remote repositories.
+
+
+
+## 2. CSS Frameworks
+
+In order to explain CSS frameworks, we first must understand what a framework is. Let's illustrate this using an analogy.
+
+Let's suppose you want to make a ginger tea on daily basis. You do this with several ingredients: water, pieces of ginger and sugar. Doing so you will find it is really difficult to put all ingredients in the right proportions, to get the right flavor, all the time.
+
+One morning you come up with idea of mixing all the ingredients in one jar in the correct proportion, such that every spoon will serve the right amount to make the tea.
+
+This jar is your framework. By using it you don't have to think about the ingredients, nor the proportions. Only about how much you want to use to fit your needs.
+
+Or here's another analogy:
+
+Imagine you want to make star-shaped pancakes. That's pretty hard to do by itself, so you choose to use a mold. The mold helps you "structure" the pancake. All you need to add is the right content, which is the pancake batter.
+
+This mold is your framework. By using it, you need only think about the actual content you want to use. The rest will be taken care of for you.
+
+> Tip: The concept of a framework will come back many times, as we don't want to reinvent the wheel every time we create a new application. The point of any piece of software is to write it as simply as possible, and a framework really helps with that. So keep it in mind!
+
+### Why use a CSS framework?
+
+A CSS framework allows you to style your HTML reliably, by making use of pre-defined CSS rules. This way you don't have to think about what custom CSS you have to write to make something the way you want. This is useful mainly to **speed up development**.
+
+There are other reasons as well which you can learn about in the following article:
+
+- [What are the benefits of using a CSS framework](https://css-tricks.com/what-are-the-benefits-of-using-a-css-framework/)
+
+It does come with a drawback, however, and that is that it forces you into a specific design and adjusting things to your needs will be more difficult.
+
+### Most popular frameworks
+
+There are a lot of different CSS frameworks out, each with their pros and cons. In the following video you'll learn about several of the top ones used and what problems exactly they're trying to solve:
+
+- [CSS frameworks](https://www.youtube.com/watch?v=AMDx0IIgiK4)
+
+### CSS Framework vs. custom CSS
+
+As a general rule, you always want to be able to write custom CSS when needed. And if you're using a framework, you need to at least know why it works the way it does. This means that you look at the **documentation** of that particular CSS framework first. Alternatively, you could also look into the class definition within the stylesheet (you can use the browser inspector for this, more on that later).
+
+However, writing custom CSS is in practice not always possible. This could be because of project deadlines, lack of skill or wanting to do rapid prototyping (a technique to quickly build a working version in order to test if it works). This is when we use frameworks to help us out.
+
+Keep in mind that a framework should be there only to assist, not compensate or define your application. Research the following resources to learn about the pros and cons of CSS frameworks:
+
+- [Are CSS Frameworks Bad?](https://www.youtube.com/watch?v=VlY5CfkL760)
+- [Discussing the Pros and Cons of Using a CSS Framework](https://speckyboy.com/discussing-the-pros-and-cons-of-using-a-css-framework/)
+
+## Finished?
+
+Are you finished with going through the materials? Nice job!!! If you feel ready to get practical, click [here](./MAKEME.md).
diff --git a/Week3/assets/branches.png b/Week3/assets/branches.png
new file mode 100644
index 0000000..ba08bd0
Binary files /dev/null and b/Week3/assets/branches.png differ
diff --git a/Week3/assets/diagram.jpeg b/Week3/assets/diagram.jpeg
new file mode 100644
index 0000000..95252e3
Binary files /dev/null and b/Week3/assets/diagram.jpeg differ
diff --git a/Week3/prep-exercises/01-animals-repo/README.md b/Week3/prep-exercises/01-animals-repo/README.md
new file mode 100644
index 0000000..19a4fa9
--- /dev/null
+++ b/Week3/prep-exercises/01-animals-repo/README.md
@@ -0,0 +1,27 @@
+# Animals repo
+
+In this homework you'll be working with GIT and GitHub. Follow the steps to learn how to create a remote repository and work with it from your local machine:
+
+1. Create a repository on GitHub, called `animals`
+2. Clone the repository to your local machine, using the SSH URL
+3. Locally, create a file called "zoo.txt". Include 3 animals found in a zoo
+4. Add and commit the file to the local repository. Make sure the commit message is meaningful (ex. "created txt file with animal names")
+5. Push your commit to the remote repository, verify that it has worked on GitHub
+6. Go back to your local repository and create a branch called `new-feature`
+
+> Tip: in software, a "feature" is a technical term that points to any functionality that a user can derive benefit from. For example, Facebook has many features: the ability to make a profile, like a post, place comments, etc.
+
+7. Inside the new branch, create a file called "pets.txt". Include 3 animals that could be a pet
+8. Also, add 2 more animals to the "zoo.txt" file
+9. Add and commit the file to the local repository. Again, make sure the commit message is meaningful
+10. Push your commit to the remote repository, verify that it has worked on GitHub
+11. On GitHub, find out how to merge branch `new-feature` into `main`
+12. Merge the branches
+13. Switch back to branch `main`
+14. Pull the changes from your remote repository to your local repository, verify that everything worked
+
+## Things to think about
+
+- Why do you think we develop features in a branch rather than straight away pushed to `main`? Is there a situation that pushing to the `main` branch directly is better?
+- What would happen if you create two different branches that edit the same file and then merge them after each other?
+- Why do you think is the commit message important?
diff --git a/assets/bird.png b/assets/bird.png
new file mode 100644
index 0000000..6d7098d
Binary files /dev/null and b/assets/bird.png differ
diff --git a/assets/github-logo.png b/assets/github-logo.png
new file mode 100644
index 0000000..63a59be
Binary files /dev/null and b/assets/github-logo.png differ
diff --git a/assets/github_pages1.png b/assets/github_pages1.png
new file mode 100644
index 0000000..54ceb5d
Binary files /dev/null and b/assets/github_pages1.png differ
diff --git a/assets/github_pages2.jpg b/assets/github_pages2.jpg
new file mode 100644
index 0000000..4a93da6
Binary files /dev/null and b/assets/github_pages2.jpg differ
diff --git a/assets/github_pages3.jpg b/assets/github_pages3.jpg
new file mode 100644
index 0000000..469e198
Binary files /dev/null and b/assets/github_pages3.jpg differ
diff --git a/assets/module1.png b/assets/module1.png
new file mode 100644
index 0000000..6aef461
Binary files /dev/null and b/assets/module1.png differ
diff --git a/assets/slack-logo.png b/assets/slack-logo.png
new file mode 100644
index 0000000..b41f9ca
Binary files /dev/null and b/assets/slack-logo.png differ
diff --git a/assets/trello-logo.png b/assets/trello-logo.png
new file mode 100644
index 0000000..a78c2b2
Binary files /dev/null and b/assets/trello-logo.png differ
diff --git a/assets/trello.-logopng.png b/assets/trello.-logopng.png
new file mode 100644
index 0000000..a78c2b2
Binary files /dev/null and b/assets/trello.-logopng.png differ
diff --git a/assets/vscode-logo.png b/assets/vscode-logo.png
new file mode 100644
index 0000000..ee7d5b5
Binary files /dev/null and b/assets/vscode-logo.png differ
diff --git a/assets/week1-arco.png b/assets/week1-arco.png
new file mode 100644
index 0000000..d1d66d5
Binary files /dev/null and b/assets/week1-arco.png differ
diff --git a/assets/weekflow.png b/assets/weekflow.png
new file mode 100644
index 0000000..9da0971
Binary files /dev/null and b/assets/weekflow.png differ
diff --git a/hand-in-homework-guide.md b/hand-in-homework-guide.md
new file mode 100644
index 0000000..4e14519
--- /dev/null
+++ b/hand-in-homework-guide.md
@@ -0,0 +1,49 @@
+# How to hand in homework
+
+During this module you will hand in your homework in the following order:
+
+1. [GitHub](https://www.github.com/HackYourFuture/HTML-CSS).
+
+You'll first create a personal GitHub repository (a storage place for code) in which you'll upload all the homework files.
+
+2. [Trello](https://trello.com/b/U1gK8Q1c/feedback-assignments).
+
+After you've uploaded your files you'll copy the link to the homework folder in GitHub and paste it in a card on Trello in the board "Feedback Assignments" (in the correct week).
+
+In the following guides you'll learn how to do this step-by-step.
+
+## 1. GitHub homework guide
+
+At the beginning of the module:
+
+1. Go to Github and [create a new repository](https://github.com/new) called `HYF-Module-HTMLCSSGIT` (select the option: initialize with README)
+
+Then follow these steps for every week of the HTML/CSS/GIT module:
+
+2. Inside the new repository create a folder with the name of the appropriate week (ex. `week1`)
+3. Upload the the homework files
+4. Before submitting the upload, write a message that says something about what you've done. For week1 the message could be: "wrote cli commands and build digital resume"
+5. Open the files in your folder to check if all of this worked.
+6. Now go to the settings of your repository:
+
+
+
+7. And go to _Github Pages_ select "main" or "master" instead of "none"
+
+
+
+8. Now you can view your homework online at: https://_hereyouplaceyourgithubusername_.github.io/HYF-Module-HTMLCSSGIT/week1, this url will also be visible on the settings page:
+
+
+
+> Here is an example of how your homework repository should look: https://github.com/mkruijt/HTML-CSS
+
+## 2. Trello homework guide
+
+Follow these steps to upload the link to your homework:
+
+1. Go to the `Feedback Assignments` board
+2. In the correct week, create a card with your name and week number (like, `Noer Paanakker Week 1 homework`)
+3. Click on the card, and attach the URL of your GitHub repository and/or other links that are relevant. Additionally, add a short description of what you did
+
+If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack!
+ flexbox with flexbox
+ -
+