diff --git a/README.md b/README.md
index 6236844..ef7059d 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
-> If you are following the HackYourFuture curriculum we recommend you to first take a look at the complete curriculum, which you can find [here](https://github.com/HackYourFuture/curriculum).
+# DEPRECATED - HTML-CSS
+This module has been reorganised:
+- The HTML and CSS is now in the explore module, find it [here](https://github.com/HackYourFuture/explore)
+- The CLI and Git is now the CLI-Git module which you can find [here](https://github.com/HackYourFuture/CLI-Git)
-> Please help us improve and share your feedback! If you find better tutorials or links, please share them by [opening a pull request](https://github.com/HackYourFuture/HTML-CSS/pulls).
-
-# Module #1 - HTML, CSS and GIT (Frontend)
@@ -85,6 +85,6 @@ Learn from Arco in the following playlist of videos he has made for you! (Click
Have you finished the module? Great! Pat yourself on the back for the great work you've done.
-If you feel ready for the next challenge, click [here](https://www.github.com/hackyourfuture/javascript1) to go to **JavaScript1**!
+If you feel ready for the next challenge, click [here](https://www.github.com/hackyourfuture/javascript) to go to **JavaScript**!
_The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)_
diff --git a/Week0/README.md b/Week0/README.md
index 2d3080f..97f3292 100644
--- a/Week0/README.md
+++ b/Week0/README.md
@@ -59,7 +59,7 @@ Technically speaking, you can write code for the web in any application that all
Depending on the programming language, the code editor highlights special keywords, gives suggestions to some extent, adds automatic indentation and sometimes has an integrated command line interface (more on that in the next section) as well.
-While your code editor does the basic job of allowing you to write code, it can always be improved to make our lives as developers easier. In [this video](https://www.youtube.com/watch?v=ORrELERGIHs&t=324s) you'll get a great introduction on all the features. His code is python, so don't worry about understanding the code, it is about how to navigate the visual studio code environment.
+While your code editor does the basic job of allowing you to write code, it can always be improved to make our lives as developers easier. In [this video](https://www.youtube.com/watch?v=ORrELERGIHs) you'll get a great introduction on all the features. His code is python, so don't worry about understanding the code, it is about how to navigate the visual studio code environment.
Currently, Visual Studio Code is one of the top code editors on the market. As such, we have chosen it has our default code editor to use. Click the following link to download it:
@@ -84,7 +84,7 @@ For more specific information on how to setup your editor:
Trello is a planning tool that allows you to make todo lists in order to organize and prioritize your projects. In HackYourFuture we'll use it to submit your homework for the first module. Before you start your first class, please do the following:
- [Register](https://trello.com/signup) for an account
-- Get access to the `Feedback Assignments` board, by asking @Wouter in Slack
+- Join the `Feedback Assignments` board, the link to join will be shared in your Slack channel. If not, reach out to your class mentor.
- Create a card with your name. Inside, add a CodePen URL of your technical assignment + a short description of your website
### How do I put my code online? On software development platform GitHub
diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
index a19694f..1de5cbb 100644
--- a/Week1/MAKEME.md
+++ b/Week1/MAKEME.md
@@ -22,7 +22,7 @@ Using the CLI, create a plain text file (`.txt`) that contains the commands nece
1. How do I create a hidden file or folder? How do I display it in the CLI?
2. How do I create multiple nested directories, like `/c/Users/myusername/these/folders/are/just/for/fun`?
-3. How do I append a message to a file, without a newline character, so the output would be:
+3. Write more than one command that will create a file that looks like the following (you are **not** allowed to use the newline character (\n)):
```
first message
@@ -50,8 +50,8 @@ In the following assignment you'll make your own Digital Resume. Here are the re
- It needs to be one webpage
- Your project folder should contain two files: a `.html` and a `.css` file
- Include the following pieces of information:
- - Your personal information (Note: _the page will be public on the whole internet_ for our review, so as a privacy-conscious individual, feel free to use fake information here)
- - A picture of you
+ - Some personal information (Note: _the page will be public on the whole internet_ for our review, so as a privacy-conscious individual, feel free to use fake information here)
+ - A picture of you (or a fake one, https://thispersondoesnotexist.com/ provides AI generated faces)
- A few lines about who you are
- Education (list at least 1 education institute)
- Work experience (list at least 1 workplace)
@@ -75,7 +75,7 @@ When writing the CSS include the following:
After you've finished your todo list it's time to show us what you got! The homework that needs to be submitted is the following:
1. The CLI challenge
-2. The Digital Resume
+2. A link to your *deployed* Digital Resume! Remember your CLI knowledge to figure out the URL to it (a webserver is just a computer and so the directories are part of the URL!)
Upload both in a repository to GitHub and then upload the link to it on the Trello board: "Feedback Assignments". Go through the [guide](../hand-in-homework-guide.md) to learn how to do this.
diff --git a/Week1/README.md b/Week1/README.md
index 9e85a93..c967827 100644
--- a/Week1/README.md
+++ b/Week1/README.md
@@ -184,13 +184,14 @@ For further study, delve into the following:
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)
+- [Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge)
- [Opera](https://www.opera.com/download)
+There are other browsers popping up, but they are mostly enhancements of the Chromium OS browser which is the basis of Chrome. This generally means that if it works in Chrome, it will work on those browsers too.
+
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
diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md
index ef040ef..85915a6 100644
--- a/Week2/MAKEME.md
+++ b/Week2/MAKEME.md
@@ -44,9 +44,7 @@ In the following video you'll be rebuilding a responsive HTML5 website. Put your
### 5. PROJECT: Responsive website
-> Before you start this exercises, make sure to create a folder inside the `hyf-html-exercises` folder. Create a `week2` folder and put this exercise files inside.
-
-> Tip: Use GIT and GitHub along the way, you can easily use this project as part of your portfolio!
+> Tip: Use GIT and GitHub along the way, so that you can practice it!
In this project you're going to rebuild `the homepage` of an existing responsive website. Choose one of the following:
@@ -59,13 +57,16 @@ In this project you're going to rebuild `the homepage` of an existing responsive
You don't have to build everything, but include the following requirements:
-- Only rebuild the homepage (which should include a navigation bar, footer, the landing section and at least 2 other sections)
+- Create a completely new repository on your GitHub for your website, you can name it _WEBSITENAME-copy_
+- Create an `index.html` to make your HTML
+- Design-wise it should be similar so the fonts, icons, text, etc. should look the same as the original
+- Only rebuild the homepage (which should include a navigation bar, footer, the landing section and at least 2 other sections. A section is one part of the website that contains information and that needs to adjust based on the screen size. A list of company logo's or a single button is not considered a section!)
- Write your CSS in an external stylesheet
-- You are **allowed** to use a CSS framework, but you do not have to. It is up to you!
+- You are **allowed** to use a CSS framework if you have experience in it, but you do not have to. It is up to you!
- 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_
+- Deploy your website using Github Pages! It is very similar to what you did in week 1, have a look at the guide if you forgot how to do it.
### 6. Optional: Flexbox games
@@ -79,7 +80,8 @@ If you like learning in a fun way there are quite a few games on the internet th
After you've finished your todo list it's time to show us what you got! The homework you have to submit this week is the following:
-1. GIT exercise #1 (the URL of the remote `git_practice` repository)
-2. The responsive website
+1. GIT exercise (the URL of the remote `favorite-cmd-commands` repository)
+2. A link to your repository of your copied website
+3. A link to your *deployed* copied website
Go through the [guide](../hand-in-homework-guide.md) to learn how to submit your homework.
diff --git a/Week2/README.md b/Week2/README.md
index 18120a4..aec3272 100644
--- a/Week2/README.md
+++ b/Week2/README.md
@@ -31,7 +31,7 @@ GIT is software that allows you to save your work at any given moment in time. I
You can think of it like a video game. You get to a certain point in the game, after hours of struggle. You're really proud of how far you've come, and don't want to do it over again in case you die. So you decide to _save your game_. If something bad happens after that point you can always reload your game and start from that point on.
-This is exactly what happens with GIT: however, instead of calling it _saving your game_ we call it **committing your changes**. A "change" is a code modification you made within a working day.
+This is exactly what happens with GIT: however, instead of calling it _saving your game_ we call it **committing your changes**. A "change" is a code modification you made in one or more files. It's recommended to commit multiple times a day, every time you make something that is worth saving. Making commits often also makes it easier to reset your work to the last working state. Discarding changes with GIT is better than to trust on CTRL-Z to undo failed attempts.
If you ever would want to go back to a previous _game save_ you can make GIT help you do so by **checking out to that commit**. You will learn more about that in the next sections.
@@ -55,7 +55,14 @@ git --version
It should say that the version is **2.21** (or up if you've installed a new version).
-Now that you have GIT installed, it's important to make a basic configuration. Inside your CLI, type in the following (Replace "Your name" and "your.email@youremailserver.com" with your own name and email address, respectively):
+You can work with GIT using only the CLI but you can also use a GUI (graphical user interface).
+Two free cross-platform examples are [SourceTree](https://www.sourcetreeapp.com/) and [Gitkraken](https://www.gitkraken.com/).
+It's up to personal preference what works the best, both CLI and GUI will use the same underlying system.
+You can even use both in the same project, e.g. commands on the CLI will reflect instantly in the GUI.
+The main advantage of a GUI is that it has a visual overview of all commits and branches, local and remote.
+
+Now that you have GIT installed, it's important to make a basic configuration. Inside your CLI, type in the following (Replace "Your name" and "your.email@youremailserver.com" with your own name and email address, respectively).
+In case you are using a GUI, it will probably ask the same data the first time you open the application, and it will do these commands for you.
```bash
git config --global user.name "Your name"
@@ -86,12 +93,13 @@ What it does is creating a brand new **local** repository in your project folder
Now we can continue with the actual procedure itself. This happens in 3 stages:
1. **Untracked**. In this stage GIT is not aware of the changes in your workspace.
-2. **Staged**. In this stage the changes will be tracked by GIT.
+2. **Staged**. In this stage the changes are selected for the next commit.
3. **Committed** In this stage your changes have been saved into the local repository. If you need to refer to a previous version of your workspace you can safely do that now.
This might sound very abstract, and it is. So to make it more comprehensible, you can watch the following videos and/or try stuff in the Git playground:
-- [GIT Tutorial for beginners](https://www.youtube.com/watch?v=HVsySz-h9r4)
+- [GIT command line basics](https://www.youtube.com/watch?v=HVsySz-h9r4)
+- [Learn Git - using CLI & GitKraken](https://www.youtube.com/playlist?list=PLe6EXFvnTV7-_41SpakZoTIYCgX4aMTdU)
- [Introduction to GIT - Core Concepts](https://www.youtube.com/watch?v=uR6G2v_WsRA)
- [GIT & GitHub Crash Course](https://www.youtube.com/watch?v=SWYqp7iY_Tc)
- [Git Playground](https://git-school.github.io/visualizing-git/)
@@ -127,6 +135,8 @@ When working with GitHub we want to ensure the same level of security. Thus, we
- [How to generate an SSH key](https://help.github.com/en/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)
- [Adding SSH Key to GitHub](https://www.youtube.com/watch?v=H5qNpRGB7Qw)
+> Note that if you are in AZC then usually the SSH port is blocked on the internet. If that is the case you cannot use SSH, so you will need to do all your communication with git using HTTPS instead
+
## 2. More advanced CSS
By now you've had some practice with CSS. In the following sections you'll learn about some more essentials concepts in order to write modern stylesheets for the web!
@@ -152,7 +162,7 @@ display: flex;
This will give us the `flexbox`-specific properties, so we can develop clean and organised CSS. Check the following links to understand how this is done:
-- [CSS Flexbox in 100 Seconds](https://www.youtube.com/watch?v=K74l26pE4YA)
+- [Interactive guide to flexbox](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/)
- [What is Flexbox and Why to Learn it](https://www.youtube.com/watch?v=CXSwNIPsyTs)
- [CSS Flexbox Course](https://www.youtube.com/watch?v=-Wlt8NRtOpo)
@@ -164,6 +174,12 @@ The complete guide to grid by css-tricks is the go to guide, read it here:
- [CSS-tricks complete guide to grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
+### When to use flex and when to use grid
+
+A common question we get is when to use flexbox and when to use grid. Kevin Powell is a css master and does a great job of answering that question here:
+
+- [Flexbox or grid](https://www.youtube.com/watch?v=3elGSZSWTbM)
+
### Pseudo class selectors
Every HTML element can be in different states. The default state is when an element is untouched. You already know how to style for this.
diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md
index f5d915b..f67e0a6 100644
--- a/Week3/MAKEME.md
+++ b/Week3/MAKEME.md
@@ -20,8 +20,8 @@ Inside your `HTML-CSS` fork, go to the folder `week3`. Inside of that folder, na
We'll start the week off with some more GIT practice! Go through the following:
1. [Learn Git branching](https://learngitbranching.js.org/)
-2. [Learn Git Version Control (Scenario 1 - 4)](https://www.katacoda.com/courses/git)
-3. [How to Use GIT and GitHub](https://eu.udacity.com/course/how-to-use-git-and-github--ud775)
+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
@@ -51,7 +51,7 @@ In this section you're going to get familiar with [MaterializeCSS](https://mater
### 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. This is also a great time to learn new things as there are plenty of mentors available to help you out in the `#projects` channel on Slack! You will not get this amount of time and support once you start working. 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.
+> 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
diff --git a/Week3/README.md b/Week3/README.md
index ec6e2ce..325f94f 100644
--- a/Week3/README.md
+++ b/Week3/README.md
@@ -80,6 +80,10 @@ While both are important to know about, it's useful to study the second way a li
- [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.
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
index 376f5fd..19a4fa9 100644
--- a/Week3/prep-exercises/01-animals-repo/README.md
+++ b/Week3/prep-exercises/01-animals-repo/README.md
@@ -1,7 +1,5 @@
# Animals repo
-> Tip: you can either use the CLI to make your git commands or use a GUI. The most used is [Git Kraken](https://www.gitkraken.com/) and it visualises what happens. VSCode also has an integrated Git activity tab that you can use. Try them out and see what you prefer!
-
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`
diff --git a/_teachers/bird-exercise/index.html b/_teachers/bird-exercise/index.html
deleted file mode 100644
index 5a3face..0000000
--- a/_teachers/bird-exercise/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
-
- Document
-
-
-
-