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 48a738b..85b0240 100644
--- a/Week3/LESSONPLAN.md
+++ b/Week3/LESSONPLAN.md
@@ -2,15 +2,15 @@
## Agenda
-The purpose of this class is to introduce to the student
+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 GIT branching?
+- Remote vs. local branches
+- What's a pull request?
-* What is a framework?
-* Popular CSS frameworks
-* Framework vs custom CSS
+- What is a framework?
+- Popular CSS frameworks
+- Framework vs custom CSS
## Core Concepts
@@ -19,43 +19,57 @@ 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. + +- 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` -### Excercise -### Essence +### 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 + +- 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/) -### Excercise -Give students an exercise to rebuild a button and navbar with custom CSS -### Essence +### 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 index 4b0fc93..f67e0a6 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -1,79 +1,84 @@ ## Homework HTML/CSS/GIT Week 3 -> Create a directory "week3" inside your `HYF-Module-HTMLCSSGIT` directory on GitHub. There should already be a "week1" and "week2" folder that contains your homework from the last 2 weeks. - ## Todo list -1. GIT exercise: `animals` repository -2. CSS framework challenges +1. Prep exercises +2. Practice the concepts 3. Code along -4. PROJECT: Responsive website +4. Optional: Practice using frameworks +5. Optional: Side project ideas +6. Final notes -### 1. GIT exercise: `animals` repository +### 1. Prep exercises -> 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! +> 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. -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: +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. -1. Create a repository on GitHub, called `animals` -2. Clone the repository to your local machine, using SSH -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` +### 2. Practice the concepts -> 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. +We'll start the week off with some more GIT practice! Go through the following: -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 +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. Framework tutorial: MaterializeCSS +### 3. Code along -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! +In this code along you'll continue practicing your skill by building a fully responsive website: -- [Materialize Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gGrbtvASEZSlFEYBnPkmff) +- [Build a responsive website](https://www.youtube.com/watch?v=p0bGHP-PXD4) -### 3. Code along +> 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) -You'll continue practicing your skill using MaterializeCSS. In the following video you'll learn how to build a responsive website, called Travelville: +#### 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) -> Tip: Use GIT and GitHub along the way, you can easily use this project as part of your portfolio! +### 5. Optional: Side project ideas -### 4. PROJECT: Responsive website +> 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. -In this project you're going to rebuild `the homepage` of an existing responsive website. Choose one of the following: +#### 5.1 CSS preprocessor -- https://www.rijksoverheid.nl -- https://www.bostonglobe.com -- https://www.thinkwithgoogle.com -- http://muumilaakso.tampere.fi/en/ -- http://incredibletypes.com -- http://thenextweb.com +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. -In order to pass you need to fulfill the following criteria: +For more information, have a look at: -- Write your CSS in an external stylesheet -- Make use of Flexbox -- 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_ +- [Sass vs SCSS vs Less: tutorial](https://marksheet.io/sass-scss-less.html) -> Tip: Use GIT and GitHub along the way, you can easily use this project as part of your portfolio! +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. -_Deadline Saturday 23.59 CET_ +#### 5.2 Parallax effect -## SUBMIT YOUR HOMEWORK! +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. -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: +### 6. Final notes -1. GIT exercise: `animals` repository -2. Responsive website +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! -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 ffd2803..325f94f 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -11,32 +11,39 @@ These are the topics for week 3: 2. CSS Frameworks - Why use a framework? - Most popular frameworks - - Framework vs. custom -3. Working with the browser - - What is a web browser? - - Choosing the right web browser - - How to use the inspector - - Useful browser extensions + - 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 benefit of using GIT. It allows you to work on different versions of your project in parallel, each branch representing a different version of the same project. Take a look at the following image:
+`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:
-You can see a branch as an experiment, a possible way your project can evolve. Usually, each branch (except the master branch) you work on 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.
+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 `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.
-After, the cycle repeats: first verify that everything is still working correctly on `master`/`development`, then branch off to create a new feature, then merge back into `master`/`development`!
+Once the new version of the software has been tested and approved, the cycle repeats!
Go through the following resources to learn more:
@@ -45,7 +52,7 @@ Go through the following resources to learn more:
### 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:
@@ -53,114 +60,75 @@ Go through the following project to learn how to work with branches on GitHub:
### Making pull requests
-A **pull request** is a term GitHub uses to refer to merge requests; a request to incorporate code changes made by a developer (whether it's you or another developer) into the code stored in a branch of a repository.
+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.
-These changes are proposed in a branch, and the pull request usually is made to merge into the `master` branch. Code changes through pull requests never merge directly into the target branch, unless the administrator uses their rights to do so. In normal circumstances, there has to be at least one other person reviewing the proposal before it is approved to be merged.
+> 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) A merge request from one branch to another **within the same repository**. For more information on this, read:
+(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) A merge request from one branch to a 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.
+(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, it's useful to study the second way because that's how you'll submit your homework:
+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=2qJPAVTiKPE)
+- [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 explain using an analogy.
+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 all the time.
+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 what the ingredients, nor the proportions. Only about how much you want to use it to fit your needs.
+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.
-> Tip: the concept of a framework will come back many times, as we don't want to reinvent the wheel everytime 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!
+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.
+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 teh following article:
+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)
-### Framework vs. custom
+### 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 at least know why it works the way it does. This means that you look into the class definition within the stylesheet (you can use the browser inspector for this, more on that later).
+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. Research the following resources to learn about the pros and cons of CSS frameworks:
+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 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.
-
-For further study, watch the following:
-
-- [What is a browser?](https://www.youtube.com/watch?v=TcbhVv9ty44)
-- [How web browsers work](https://www.youtube.com/watch?v=WjDrMKZWCt0)
-
-Read:
-
-- [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 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 easy and clear way.
-
-### How to use the browser inspector :mag:
-
-The inspector is part of browsers developers can use to take a closer look at the composition of the HTML elements. This makes it easier to write correct HTML and CSS code that works.
-
-Watch the following video and follow along:
-
-- [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 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 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 oyu 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 moreof these extensions and we encourage you to explore. See what fits your needs!
-
## 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/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/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 7b32c7d..4e14519 100644
--- a/hand-in-homework-guide.md
+++ b/hand-in-homework-guide.md
@@ -8,7 +8,7 @@ You'll first create a personal GitHub repository (a storage place for code) in w
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.
+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.
@@ -24,9 +24,17 @@ Then follow these steps for every week of the HTML/CSS/GIT module:
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 "master" instead of "none"
-8. Now you can view your homework online at: https://_hereyouplaceyourgithubusername_.github.io/HYF-Module-HTMLCSSGIT/week1
+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
@@ -35,7 +43,7 @@ Then follow these steps for every week of the HTML/CSS/GIT module:
Follow these steps to upload the link to your homework:
1. Go to the `Feedback Assignments` board
-2. In the right 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
+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
+ -