Grid with floats
--
-
-
+
+ -Using flexbox
+-
+
-
6 Eksenli Drone + Kamera
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
طائرة مافيك: مايميز هذه الطائرة هو صغر حجمها، وهي معيار جديد في مجال الطائرات من دون طيار. طائرة المافيك مفيدة كثيراً في الحالات التي لايكون الطيران فيها سهلاً، وذلك بفضل التقنيات العديدة المدمجة فيها.
- - +
-
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,9 +87,9 @@DJI Spreading Wings S900
- Grid with flexbox
--
+
-
Drone 6-AXIS + camera
diff --git a/Week3/LESSONPLAN.md b/Week3/LESSONPLAN.md
index b4db3e1..85b0240 100644
--- a/Week3/LESSONPLAN.md
+++ b/Week3/LESSONPLAN.md
@@ -30,8 +30,13 @@ Create a repository and initialize GIT. Show the use of `git branch`, `git check
### 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
diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md
index 815ba36..f67e0a6 100644
--- a/Week3/MAKEME.md
+++ b/Week3/MAKEME.md
@@ -2,90 +2,83 @@
## Todo list
-1. Practice the concepts
-2. GIT exercise: `animals` repository
-3. CSS framework challenges
-4. Code along
-5. PROJECT: Responsive website
+1. Prep exercises
+2. Practice the concepts
+3. Code along
+4. Optional: Practice using frameworks
+5. Optional: Side project ideas
+6. Final notes
-### 1. Practice the concepts
+### 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](https://www.codecademy.com/learn/learn-git)
+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)
-### 2. GIT exercises
+### 3. Code along
-> Before you start any of the exercises, make sure to create a folder on your desktop that will hold all of your exercise files. Go inside the `hyf-html-exercises` folder. Inside, create a `week3` folder and will hold this week's exercise files inside.
+In this code along you'll continue practicing your skill by building a fully responsive website:
-#### `animals` repository
+- [Build a responsive website](https://www.youtube.com/watch?v=p0bGHP-PXD4)
-> Tip: make use of the CLI to practice your GIT skills. This not only teaches you how GIT works, but also how to work like a real software developer!
+> Tip: Use GIT and GitHub along the way to practice!
-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:
+### 4. Optional: Practice using frameworks
-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`
+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:
-> 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.
+#### Bootstrap
-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 `master`
-12. Merge the branches
-13. Switch back to branch `master`
-14. Pull the changes from your remote repository to your local repository, verify that everything worked
+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:
-### 3. Framework tutorial: MaterializeCSS
+- [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)
-In order to speed up development it's wise to know how to use a CSS framework. In this week's homework you're going to get familiar with [MaterializeCSS](https://materializecss.com/), a CSS framework based on Material Design - a design language created by Google. Follow the playlist and code along!
+#### Materialize
-- [Materialize Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gGrbtvASEZSlFEYBnPkmff)
+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.
-### 4. Code along
+- [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)
-In this code along you'll continue practicing your skill using MaterializeCSS. In the following video you'll learn how to build a responsive website, called TravelVille:
+### 5. Optional: Side project ideas
-- [Build A Travel Agency Theme With Materialize CSS](https://www.youtube.com/watch?v=MaP3vO-vEsg)
+> 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.
-> Tip: Use GIT and GitHub along the way, you can easily use this project as part of your portfolio!
+#### 5.1 CSS preprocessor
-### 5. PROJECT: Responsive website
+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.
-> Tip: Use GIT and GitHub along the way, you can easily use this project as part of your portfolio!
+For more information, have a look at:
-In this project you're going to rebuild `the homepage` of an existing responsive website. Choose one of the following:
+- [Sass vs SCSS vs Less: tutorial](https://marksheet.io/sass-scss-less.html)
-- [Goodreads](https://www.goodreads.com/)
-- [Amazon](https://www.amazon.com/)
-- [Codecademy](https://www.codecademy.com/)
-- [Uber](https://www.uber.com/nl/nl/)
-- [Adyen](https://www.adyen.com/)
-- [Patreon](https://www.patreon.com/)
+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.
-You don't have to build everything, but include the following requirements:
+#### 5.2 Parallax effect
-- Only rebuild the homepage (which should include a navigation bar, footer, the landing section and at least 2 other sections)
-- Write your CSS in an external stylesheet
-- Make use of `flexbox`
-- Download the assets (images, other forms of media) through the original webpage, or use your own!
-- Use media queries for both tablet and mobile (This might be same for the website you're making)
-- **Make use of GIT and GitHub** to keep track of your work. The name of the repository should web _WEBSITENAME-clone_
+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.
-_Deadline Saturday 23.59 CET_
+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.
-## SUBMIT YOUR HOMEWORK!
+### 6. Final notes
-After you've finished your todo list it's time to show us what you got! The homework to be submitted this week is the following:
+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:
-1. GIT exercise: `animals` repository
-2. Responsive website
+- **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!
-Go through the [guide](../hand-in-homework-guide.md) to learn how to 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 45410e5..325f94f 100644
--- a/Week3/README.md
+++ b/Week3/README.md
@@ -5,18 +5,19 @@
These are the topics for week 3:
1. GIT branching
- - Local branches
- - Working with branches on GitHub
- - Making pull requests
+ - 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
-3. Working with the browser
- - What is a web browser?
- - Choosing the right web browser
- - How to use the inspector
- - Useful browser extensions
+ - 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
@@ -29,33 +30,33 @@ These are the topics for week 3:
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 (**master**). 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!
+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 `master` 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.
+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 `master` branch (we call it master 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 master branch that is online.
+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 master, but contains features that have not been tested yet.
+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 `master` or `development` branch.
+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)
+- [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 master branch that holds all your stable, working code. Any other branches will contain software features that eventually will be merged into master.
+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/)
+- [GitHub 'Hello World' Project](https://guides.github.com/activities/hello-world/)
### Making pull requests
@@ -63,21 +64,25 @@ A **pull request** is a term GitHub uses to refer to a request to incorporate co
> 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 `master` 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.
+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)
+- [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)
+- [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)
+- [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
@@ -103,13 +108,15 @@ A CSS framework allows you to style your HTML reliably, by making use of pre-def
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/)
+- [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 frameworks](https://www.youtube.com/watch?v=AMDx0IIgiK4)
### CSS Framework vs. custom CSS
@@ -119,61 +126,8 @@ However, writing custom CSS is in practice not always possible. This could be be
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/)
-
-## 3. Working with the browser
-
-### What is a web browser?
-
-You probably use it daily. Let's take a closer look at what it actually is.
-
-A `web browser` is software that allows you to view webpages, either retrieved from the internet or loaded from your computer. The primary function of a web browser is to render HTML files: transforming all the code (HTML, CSS and JavaScript) as well as the references (images, videos, etc.) to display a page correctly.
-
-For further study, delve into the following:
-
-- [What is a browser?](https://www.youtube.com/watch?v=TcbhVv9ty44)
-- [How web browsers work](https://www.youtube.com/watch?v=WjDrMKZWCt0)
-- [About your web browser](http://www.allaboutcookies.org/browsers/)
-
-### Choosing the right browser
-
-As a web developer you will write code that will display in different browsers. As such it is important that you get familiar with most major browsers in use today. These are:
-
-- [Internet Explorer](https://support.microsoft.com/en-us/help/17621/internet-explorer-downloads)
-- [Google Chrome](https://www.google.com/chrome/)
-- [Safari](https://support.apple.com/downloads/safari)
-- [Mozilla Firefox](https://www.mozilla.org/en-GB/firefox/new/)
-- [Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) (Not available for Mac/Linux yet)
-- [Opera](https://www.opera.com/download)
-
-In your HackYourFuture journey you'll mainly be using **Google Chrome** when developing, as is has great developer tools that allow us to develop web applications in an easier and clearer way.
-
-### How to use the browser inspector
-
-The inspector is a part of web browsers developers can use to take a closer look at the composition of the HTML elements. This makes it easier to write HTML and CSS code that works.
-
-Watch the following videos and follow along:
-
-- [Using browser inspector tools](https://www.youtube.com/watch?v=WJIqIDm7CoA)
-- [Google Chrome Developer Tools Crash Course](https://www.youtube.com/watch?v=x4q86IjJFag)
-
-### Useful browser extensions
-
-As web developers we'll be dealing with the browser all the time. Why not upgrade our browser so it can make our programming life easier?
-
-A `browser extension` is a piece of software someone has written to increase the capability of the web browser. For example, if you hate receiving advertisements you probably use something like [Adblock](https://chrome.google.com/webstore/detail/adblock/gighmmpiobklfepjocnamgkkbiglidom) to block all the unwanted ads you might find in your webpages (if not, download it as soon as possible!).
-
-The following is a list of extensions that have proven to be useful during web development. This list only applies for Google Chrome, so if you don't have it, [install it](https://www.google.com/chrome/).
-
-Extensions:
-
-- Modify the technologies underlying each website, in real time, using [Web developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm/related?hl=en-US)
-- Expose what technologies a website is using with [WhatRuns](https://chrome.google.com/webstore/detail/whatruns/cmkdbmfndkfgebldhnkbfhlneefdaaip?hl=en-US)
-- If you ever wanted to know the exact color of any element in a page, you can now do so with [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en-US)
-- When developing you'll be using dummy text to populate your elements. Enter [Loren Ipsum Generator](https://chrome.google.com/webstore/detail/lorem-ipsum-generator-def/mcdcbjjoakogbcopinefncmkcamnfkdb?hl=en%20)
-
-There are many more of these extensions and we encourage you to explore. See what fits your needs!
+- [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?
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_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_pages2.png b/assets/github_pages2.png
deleted file mode 100644
index f61bb7a..0000000
Binary files a/assets/github_pages2.png and /dev/null 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/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
index 377d9a2..4e14519 100644
--- a/hand-in-homework-guide.md
+++ b/hand-in-homework-guide.md
@@ -28,11 +28,13 @@ Then follow these steps for every week of the HTML/CSS/GIT module:
-7. And go to _Github Pages_ select "master" instead of "none"
+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
+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
+ flexbox with flexbox
+ -