diff --git a/README.md b/README.md index 1bb8893..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) ![Module 1](assets/module1.png) 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 b60e0d6..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,14 +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: +- 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) +- 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 @@ -81,6 +81,7 @@ 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 (the URL of the remote `favorite-cmd-commands` repository) -2. The responsive website +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 4860449..aec3272 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -135,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! @@ -160,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) @@ -172,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 7e95332..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 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. + +![diagram](assets/diagram.jpeg) + ## 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