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) ![Module 1](assets/module1.png) @@ -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 bd8a097..97f3292 100644 --- a/Week0/README.md +++ b/Week0/README.md @@ -6,99 +6,104 @@ Hi new student, welcome to HackYourFuture! In this document you'll find all the We'll discuss the following points: -- How do I communicate with everybody? Use communication tool [Slack](https://www.slack.com) -- Where do I write my code? Inside a code editor called [Visual Studio Code](https://code.visualstudio.com/) -- What's the way to submit my homework? Use planning tool [Trello](https://trello.com/) -- How do I put my code online? On software development platform [GitHub](https://www.github.com/) +- How do I communicate with everybody? Use communication tool [Slack](https://www.slack.com) +- Where do I write my code? Inside a code editor called [Visual Studio Code](https://code.visualstudio.com/) +- What's the way to submit my homework? Use planning tool [Trello](https://trello.com/) +- How do I put my code online? On software development platform [GitHub](https://www.github.com/) ### How do I communicate with everybody? Use Slack -Slack Video +![slack logo](../assets/slack-logo.png) + Slack is an application that allows us to communicate with others through (video) chat. It's used in most tech companies and is really easy to use. In order for you to get familiar we're going to use it as well! +Have a look at this + Please download the app for on your desktop: -- [OSX](https://slack.com/downloads/osx) -- [Windows](https://slack.com/downloads/windows) -- [Linux](https://slack.com/downloads/linux) +- [macOS](https://slack.com/downloads/mac) +- [Windows](https://slack.com/downloads/windows) +- [Linux](https://slack.com/downloads/linux) And if you really can't go without your phone, you can also get it for mobile: -- [App store](https://itunes.apple.com/nl/app/slack/id803453959?mt=12) -- [Google Play](https://play.google.com/store/apps/details?id=com.Slack&hl=nl) +- [App store](https://itunes.apple.com/nl/app/slack/id803453959?mt=12) +- [Google Play](https://play.google.com/store/apps/details?id=com.Slack&hl=nl) When it's all installed it's time to get into it! First try out the demo: -- [Slack Demo](https://slackdemo.com/) +- [Slack Demo](https://slackdemo.com/) + +Important things to note is to: + +- make use of threads to isolate discussions +- format code to make it easier to read by using the ` ``` your code ``` ` syntax -These are the first things to do: +These are the first things to do once you have been invited into slack: -- Add a (professional looking) profile picture -- Add a nice description about yourself -- Say hi to your classmates in the class channel +- Add a (professional looking) profile picture +- Add a nice description about yourself +- Say hi to your classmates in the class channel Done? This is optional, but for those who are curious: -- [Cheat sheet for basics and shortcuts](https://slack.com/intl/en-nl/help/articles/201374536-Slack-keyboard-shortcuts) -- [How to format your messages in Slack](https://api.slack.com/reference/surfaces/formatting) +- [Cheat sheet for basics and shortcuts](https://slack.com/intl/en-nl/help/articles/201374536-Slack-keyboard-shortcuts) +- [How to format your messages in Slack](https://api.slack.com/reference/surfaces/formatting) ### Where do I write my code? Inside a code editor called Visual Studio Code -![VS Code](https://blog.launchdarkly.com/wp-content/uploads/2018/10/visualstudio_code-card.png) +![vscode logo](../assets/vscode-logo.png) Technically speaking, you can write code for the web in any application that allows you to write and save plain text files (such as Notepad or TextEdit). However a code editor is a tool specifically designed for editing code. -Depending on the programming language, the code editor highlights special keywords, give suggestions for some extent, adds automatic indentation and sometimes has an integrated command line interface (more on that in the next section) as well. +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 the following video you'll learn about the most useful code editor extensions you can install in order to make development a much richer experience: +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: -- [Visual Studio Code](https://code.visualstudio.com/) +- [Visual Studio Code](https://code.visualstudio.com/) #### Improving our code editor -We can always improve what we have, including our code editor! We can add `plugins` to make our programming life much easier. Please install the following plugins as well and see for yourself! +We can always improve what we have, including our code editor! We can add `extensions` to make our programming life much easier. Please install the following extensions as well and see for yourself! -- [Live HTML Previewer](https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer) -- [Syntax Highlighter](https://marketplace.visualstudio.com/items?itemName=evgeniypeshkov.syntax-highlighter) -- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) -- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) -- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) +- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) +- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) (Make sure to enable 'Format on save' in the Visual Studio Code settings after installing this plugin) For more specific information on how to setup your editor: -- [VSCode Tips](https://github.com/HackYourFuture/fundamentals/tree/master/VSCodeTips) +- [VSCode Tips](https://github.com/HackYourFuture/fundamentals/tree/master/VSCodeTips) ### What's the way to submit my homework? Use planning tool Trello
-Slack Video
+Trello Video
-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 +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 -- Create a card with your name. Inside, add a CodePen URL of your technical assignment + a short description of your website +- [Register](https://trello.com/signup) for an account +- 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 -GitHub Video +GitHub Video GitHub is a place where you can put your code online. Why? To safely store your code in case something bad happens to your computer (computer crash, virus, faulty files). You'll always be able to access this code from GitHub, using any other computer. -- [Register](https://github.com/join) for an account -- Put the URL for your account in the class channel +- [Register](https://github.com/join) for an account +- Put the URL for your account in the class channel -### Check double check: +### Check double check Let's make sure you have done everything necessary: -- Slack: downloaded, added profile and said hi -- Visual Studio Code: downloaded, added plugins -- Trello: registered and added a card, including the CodePen URL of your technical assignment + short description -- Github: registered and put the URL of your account in the class channel +- Slack: downloaded, added profile and said hi +- Visual Studio Code: downloaded, added plugins +- Trello: registered and added a card, including the CodePen URL of your technical assignment + short description +- Github: registered and put the URL of your account in the class channel > If the answer to this is 'no', don't panic. First try and see if you can find some information about the above tools yourself (hint: ask Google first). If that doesn't work, don't be shy to ask your classmates or anyone from HackYourFuture on what to do next. diff --git a/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md index e2106c6..c82a328 100644 --- a/Week1/LESSONPLAN.md +++ b/Week1/LESSONPLAN.md @@ -6,11 +6,11 @@ The purpose of this class is to introduce to the student: 1. The basics of working with the command line interface 2. Basic HTML/CSS concepts: - - HTML basics - - Difference between `` and `` tags - - Semantic HTML5 - - CSS basics - - The box model + - HTML basics + - Difference between `` and `` tags + - Semantic HTML5 + - CSS basics + - The box model ## Core concepts @@ -20,10 +20,10 @@ The purpose of this class is to introduce to the student: ### Explanation -- The command line interface (CLI) is a way to navigate your computer by issuing direct commands -- In the past the computer had **ONLY** a command line -- The CLI doesn't always give feedback, like any other program on your computer would give -- Desktop application icons are visual shortcuts (Windows: show `$ calc` to launch the calculator) +- The command line interface (CLI) is a way to navigate your computer by issuing direct commands +- In the past the computer had **ONLY** a command line +- The CLI doesn't always give feedback, like any other program on your computer would give +- Desktop application icons are visual shortcuts (Windows: show `$ calc` to launch the calculator) ### Example @@ -55,18 +55,18 @@ The purpose of this class is to introduce to the student: ### Exercise -- Open a command line (Git Bash on Windows) -- Create a project folder to contain all your HYF work (mkdir) -- Create a module folder (cd, mkdir) -- Create a text file: notes.txt (cd, touch) -- Open Visual Studio Code and add some notes (code .) -- Rename the file to lecture1.txt (mv) +- Open a command line (Git Bash on Windows) +- Create a project folder to contain all your HYF work (mkdir) +- Create a module folder (cd, mkdir) +- Create a text file: notes.txt (cd, touch) +- Open Visual Studio Code and add some notes (code .) +- Rename the file to lecture1.txt (mv) _"I go on holiday and I take with me"_ with CLI commands: -- They have to repeat the commands said before them. -- Add a new command and explain what it does. -- Let the round continue twice otherwise the students that went first don't have to repeat all the commands. +- They have to repeat the commands said before them. +- Add a new command and explain what it does. +- Let the round continue twice otherwise the students that went first don't have to repeat all the commands. E.g., first student says _"ls : lists commands"_. Second student must say _"ls and cd: change directory"_. Then third student must say _"ls, cd and pwd : show print working directory"_ and so on. _By [@unmeshvrije](https://github.com/unmeshvrije)_ @@ -79,28 +79,28 @@ SECOND HALF (14.00 - 16.00) ### Explanation -- HTML is just plain text, nothing special -- Browsers read the HTML and CSS and render a beautiful webpage -- HTML of a website comes from a server (which is just another computer somewhere) -- Difference `` and `` +- HTML is just plain text, nothing special +- Browsers read the HTML and CSS and render a beautiful webpage +- HTML of a website comes from a server (which is just another computer somewhere) +- Difference `` and `` Box model -- Everything is a box -- The "box" refers to the attributes universal to every element: `margin`, `padding`, `border` -- Every element pushes against one another +- Everything is a box +- The "box" refers to the attributes universal to every element: `margin`, `padding`, `border` +- Every element pushes against one another ### Example -- Show most basic HTML structure, also show how Visual Studio Code can autocomplete html structure by just typing: html -- `Codestin Search App - - - -
-
- - diff --git a/Week1/bird-exercise/style.css b/Week1/bird-exercise/style.css deleted file mode 100644 index 94d386d..0000000 --- a/Week1/bird-exercise/style.css +++ /dev/null @@ -1,33 +0,0 @@ -body { - min-height: 100vh; - background-color: #2bc3ff; - margin: 0; - padding: 0; - display: flex; - justify-content: center; -} - -.head { - width: 600px; - background-color: black; - height: 600px; - align-self: flex-end; - border-radius: 30% 30% 0 0; -} - -.eye { - width: 60px; - height: 60px; - margin: 180px 0 0 260px; - background-color: white; -} - -.beak { - width: 0; - height: 0; - border-top: 120px solid transparent; - border-bottom: 120px solid transparent; - border-left: 120px solid #ffd946; - align-self: flex-end; - margin-bottom: 180px; -} diff --git a/Week1/prep-exercises/01-bird-in-css/README.md b/Week1/prep-exercises/01-bird-in-css/README.md new file mode 100644 index 0000000..a5b2c1f --- /dev/null +++ b/Week1/prep-exercises/01-bird-in-css/README.md @@ -0,0 +1,18 @@ +# Create a bird using just HTML and CSS! + +Your task is to create the following bird using just html and css: + +![Bird created with HTML and CSS](../../../assets/bird.png) + +Tips: + +- The beak is probably the hardest and may need some googling on how you can do triangles in CSS. +- Remember to create an html as well as a css file, do not use inline styling! + +## Things to think about + +In this exercise you have seen that you can do quite cool things already with just some basic html/css knowledge. Before the session on Sunday, have a think about the following questions. You don't need to know or fill in the answers as they will be discussed on Sunday, but see if you can figure it out: + +- Which html element(s) did you use for each of the shapes? Why did you use that one/those? +- If you couldn't change the css file that you just created but you are allowed to add a new css file, how would you change the color of the bird? +- Can you think of a reason why you sometimes cannot change a css file? diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 6a8a840..85915a6 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -4,26 +4,29 @@ ## Todo list -1. GIT exercises -2. Responsive design challenges -3. Code along -4. PROJECT: Responsive website +1. Prep exercises +2. GIT exercises +3. Responsive design challenges +4. Code along +5. PROJECT: Responsive website +6. Optional: Flexbox games +### 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. -### 1. GIT exercises +Inside your `HTML-CSS` fork, go to the folder `week2`. 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. -> 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 `week2` folder that will hold this week's exercise files inside. +### 2. GIT exercise -### Exercise 1: +1. Create a repository on Github called favorite-cmd-commands, make sure to check the checkmark about including a README file +2. Clone that repository (Google how to clone a repository). +3. Edit the `README.md` markdown file. +4. Add bash commands that you like (at least 3) and style them as headers. +5. Provide a short description (20 characters~) for each. +6. Then `git add`, `git commit` and `git push` the file to your GitHub repository. -1. Create a repository on Github called favorite-cmd-commands, make sure to check the checkmark about including a README file -2. Clone that repository (Google how to clone a repository). -3. Create a file `YOUR_NAME-commands.txt`. -4. Add bash commands that you like (at least 3). Provide a short description (20 characters~) for each. -5. Then `git add`, `git commit` and `git push` the file to your GitHub repository. - -### 2. Responsive design challenges +### 3. Responsive design challenges Making websites that are `responsive` to a variety of device sizes (in other words, that still "look good" on any device), has become the standard way of building websites. You have to learn how to do this too. It's not as intimating as it might seem; you're **not** going to build a separate page for literally every device size out there. @@ -31,43 +34,54 @@ Instead, you'll be applying certain CSS rules only to certain device sizes: the In the following mini-course you'll get some practice in doing this: -- [Responsive Web Design Challenges](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/) +- [Responsive Web Design Challenges](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/) -### 3. Code along +### 4. Code along In the following video you'll be rebuilding a responsive HTML5 website. Put your focus on how the structure of the page is built: First HTML to provide structure & content, and then the CSS. Look at the HTML tags used and the names given to classes. -- [Build A Responsive Website With HTML & CSS Tutorial](https://www.youtube.com/watch?v=ZeDP-rzOnAA) - -### 4. PROJECT: Drones website +- [Build A Responsive Website With HTML & CSS Tutorial](https://www.youtube.com/watch?v=ZeDP-rzOnAA) -> Use GIT and GitHub while making this project, you can easily use this as part of your portfolio! +### 5. PROJECT: Responsive website -In this project you'll be building on an existing project. It's your job to make it `responsive` and look organised on various devices. +> Tip: Use GIT and GitHub along the way, so that you can practice it! -Start off by downloading the HTML and images in the following [folder](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/homework). +In this project you're going to rebuild `the homepage` of an existing responsive website. Choose one of the following: -You are going to write the CSS for this page, **it is not allowed to change the HTML**. +- [Codecademy](https://www.codecademy.com/) +- [Uber](https://www.uber.com/nl/nl/) +- [Adyen](https://www.adyen.com/) +- [Patreon](https://www.patreon.com/) +- [Coursera](https://www.coursera.org/) +- [Triodos](https://www.triodos.nl/) -The page contains two grids: the first one should work using `floats`, the second using `flexbox`. Be careful not to mix the two! And make sure not to use grid anywhere. +You don't have to build everything, but include the following requirements: -Other than that you should use `media queries`. Here are the requirements for each device size: +- 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 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) +- 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. -- On mobile phones (smaller than 600px): a one column grid, that spans the full width -- On tablets (between 600px and 1024px): a three column grid, with the exception that the first two items span the full width together (so first we have two columns, then after the first two items we have three columns) -- On desktops (1024px and up): a four column grid, with the exception that the first item spans two columns. - There should be some `margin` between the grid items +### 6. Optional: Flexbox games -Make the page look beautiful by adding some more CSS! Include CSS rules for: +If you like learning in a fun way there are quite a few games on the internet that teach you the way flexbox works: -- `hover` states for the grid elements, to indicate to the user that they're looking at that specific drone -- A distinct `font-family`, found from [Google Fonts](https://fonts.google.com/). Include using the `font-face` [rule](https://css-tricks.com/snippets/css/using-font-face/) -- Animation using `transition` +- [Flexbox Froggy](https://flexboxfroggy.com/) +- [Flexbox Defense](http://www.flexboxdefense.com/) +- [Flexbox Adventure](https://codingfantasy.com/games/flexboxadventure) ## SUBMIT YOUR HOMEWORK! 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 Drones 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 a8f3631..aec3272 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -12,8 +12,10 @@ These are the topics for week 2: - Working with SSH 2. More advanced CSS - Flexible organizing with flexbox + - Using the grid layout - Pseudo class selectors - Responsive design with media queries +3. Markdown ## 0. Video Lectures @@ -29,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. @@ -53,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" @@ -84,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/) @@ -125,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! @@ -150,10 +162,24 @@ 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) +### Using the grid layout + +The most recent addition to the css toolkit for organising your layout is using `display: grid`. Where every other layout always goes from top to bottom, grid allows you to create a two-dimensional layout. + +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. @@ -190,6 +216,53 @@ Learn more about media queries here: - [Introduction to Media Queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries). - [Learn CSS Media Query in 7 Minutes](https://www.youtube.com/watch?v=yU7jJ3NbPdA) +### Layouts + +Now that you know about all the tools at your disposal it is time to look at creating layouts, which are the most basic design of your app/website. It is important to always do this step first as any changes in the layout will affect all of the other parts in the website, whereas the smaller parts should not affect the layout. + +Learn more about them here: +- [The fundamentals of css layouts](https://www.youtube.com/watch?v=yMEjLBKyvEg) + +## 3. Markdown + +As you've probably seen, every project on GitHub comes with a file called `README.md` +This readme file is used in general to outline the goal of the project and usually includes some code examples. + +Even the page you are reading now is also created using Markdown. + +Markdown is not a syntax that browsers understand, it is however really simple to write and read with any text editor. +Many online GIT platforms, like GitHub, will parse Markdown files and display them as pretty HTML pages. +Another good example on Markdown support is Slack. You can style your Slack messages using Markdown! + +A few examples of what you can do with Markdown: + +| HTML | Markdown | +| ---------------------------- | -------------------------------------------- | +| H1 | `# title` | +| H2 | `## title` | +| _Emphasis_ | `*italic` | +| **Bold** | `**bold**` | +| ~~Strikethrough~~ | `~~Scratch this.~~` | +| [Link](#) | `[link text](https://somewhere)` | +| `

Single line of code

` | `` use single `backticks` around your code`` | + +If you want to show a bigger block of code, you start and end with 3 backticks + +````markdown +``` + + ... + ... + +``` +```` + +With Markdown you can to more things like images, list, checklists, tables and more. +If you want to learn more about Markdown you could check these sources: + +- [Markdown Crash Course](https://www.youtube.com/watch?v=HUBNt18RFbo) +- [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) + ## 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/Week2/assets/wireframe.png b/Week2/assets/wireframe.png index a4b2fb2..d492a2a 100644 Binary files a/Week2/assets/wireframe.png and b/Week2/assets/wireframe.png differ diff --git a/Week2/prep-exercises/01-drones-website/README.md b/Week2/prep-exercises/01-drones-website/README.md new file mode 100644 index 0000000..8952850 --- /dev/null +++ b/Week2/prep-exercises/01-drones-website/README.md @@ -0,0 +1,24 @@ +# Drones Website + +In this project you'll be building on an existing project. It's your job to make it `responsive` and look organised on various devices. + +The HTML and images are in this folder. You are going to write the CSS for this page, **it is not allowed to change the HTML**. + +The page contains two grids: the first one should work using `flexbox`, the second using `grid`. Be careful not to mix the two! + +Other than that you should use `media queries`. Here are the requirements for each device size: + +- On mobile phones (smaller than 600px): a one column grid, that spans the full width +- On tablets (between 600px and 1024px): a three column grid, with the exception that the first two items span the full width together (so first we have two columns, then after the first two items we have three columns) +- On desktops (1024px and up): a four column grid, with the exception that the first item spans two columns. +- There should be some `margin` between the grid items + +So that it works like this: + +![](../../assets/wireframe.png) + +## Things to think about + +- Which way do you think is better for this use case? Flex or grid? What use cases can you think of that would make you use the other one? +- Can every browser run both flex and grid? What about certain features of flex and grid? What is an easy way to see if browsers support a certain feature? +- Did you use the browser inspector for the exercise? What is the reason for yes/no here? diff --git a/Week2/homework/images/drone1.png b/Week2/prep-exercises/01-drones-website/images/drone1.png similarity index 100% rename from Week2/homework/images/drone1.png rename to Week2/prep-exercises/01-drones-website/images/drone1.png diff --git a/Week2/homework/images/drone2.png b/Week2/prep-exercises/01-drones-website/images/drone2.png similarity index 100% rename from Week2/homework/images/drone2.png rename to Week2/prep-exercises/01-drones-website/images/drone2.png diff --git a/Week2/homework/images/drone3.png b/Week2/prep-exercises/01-drones-website/images/drone3.png similarity index 100% rename from Week2/homework/images/drone3.png rename to Week2/prep-exercises/01-drones-website/images/drone3.png diff --git a/Week2/homework/images/drone4.png b/Week2/prep-exercises/01-drones-website/images/drone4.png similarity index 100% rename from Week2/homework/images/drone4.png rename to Week2/prep-exercises/01-drones-website/images/drone4.png diff --git a/Week2/homework/images/drone5.png b/Week2/prep-exercises/01-drones-website/images/drone5.png similarity index 100% rename from Week2/homework/images/drone5.png rename to Week2/prep-exercises/01-drones-website/images/drone5.png diff --git a/Week2/homework/images/drone6.png b/Week2/prep-exercises/01-drones-website/images/drone6.png similarity index 100% rename from Week2/homework/images/drone6.png rename to Week2/prep-exercises/01-drones-website/images/drone6.png diff --git a/Week2/homework/images/drone7.png b/Week2/prep-exercises/01-drones-website/images/drone7.png similarity index 100% rename from Week2/homework/images/drone7.png rename to Week2/prep-exercises/01-drones-website/images/drone7.png diff --git a/Week2/homework/index.html b/Week2/prep-exercises/01-drones-website/index.html similarity index 92% rename from Week2/homework/index.html rename to Week2/prep-exercises/01-drones-website/index.html index 3f6858d..ccc05cb 100644 --- a/Week2/homework/index.html +++ b/Week2/prep-exercises/01-drones-website/index.html @@ -3,83 +3,83 @@ - Codestin Search App + Codestin Search App
-

Grids

+

Drones

-
-

Grid with floats

-