`, `<link>`, `<meta>` -- Show example of the box model by using the browser inspector on various elements +- Show most basic HTML structure, also show how Visual Studio Code can autocomplete html structure by just typing: html +- `<title>`, `<link>`, `<meta>` +- Show example of the box model by using the browser inspector on various elements ### Exercise -- Using the command line create a project folder, a html file and css file -- Create a basic html structure, and link to an external css file -- Create a webpage which uses all the html tags and css properties which were have discussed +- Using the command line create a project folder, a html file and css file +- Create a basic html structure, and link to an external css file +- Create a webpage which uses all the html tags and css properties which were have discussed ### Essence @@ -108,41 +108,15 @@ Box model ### Explanation -- Explain why there are `<h1>`, `<h2>`, `<h3>` -- In theory a page can be constructed using only `<div>`s -- Semantic tags make the code more comprehensible -- It helps organize the page +- Explain why there are `<h1>`, `<h2>`, `<h3>` +- In theory a page can be constructed using only `<div>`s +- Semantic tags make the code more comprehensible +- It helps organize the page ### Example -- Show examples of semantic HTML: `<header>`, `<footer>`, `<main>`, `<section>`, `<article>`, `<nav>`, `<aside>` +- Show examples of semantic HTML: `<header>`, `<footer>`, `<main>`, `<section>`, `<article>`, `<nav>`, `<aside>` ### Exercise ### Essence - -## 4. CSS Basics - -### Explanation - -- Explain inline css, `<style>` block css and external css -- Roughly two types of CSS, styling (text) and CSS for layout structure - -### Example - -Show different ways to write css, and some basic css properties: `font-size`, `background-color`, `border` - -### Exercise - -A fun CSS exercise can be to ask the students to recreate the following image using HTML and CSS: - -![Bird created with HTML and CSS](bird-exercise/bird.png) - -Of which the code can be found in the [bird-exercise folder](bird-exercise). After 15-20 minutes it might be fun to ask all students to share their screen when video calling, or in class to ask them to turn around their laptop. - -Take aways: -- Ask students about their approach. Which different steps did they take? What did they Google? -- How did they solve the triangle beek? This is very challanging to do without Googling. Emphasize how important Googling is. -- With little knowledge already fun things can be created - -### Essence diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 5fb8cf4..a19694f 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -2,14 +2,21 @@ ## Todo list -1. Command Line Interface -2. CSS Challenges -3. Code along -4. PROJECT: Digital Resume +1. Prep exercises +2. Command Line Interface +3. CSS Challenges +4. Code along +5. PROJECT: Digital Resume -### 1. Command Line Interface challenge +### **1. Prep exercises** -> Before you start any of the exercises, make sure to create a folder on your desktop that will hold all of your exercise files. Give the folder the name `hyf-html-exercises`. Inside, create a `week1` folder and will hold this week's exercise files inside. +> Prep exercises are exercises that you should work on _before_ the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your mentor. Have a solution ready by Sunday as you may be asked to show what you did. + +Inside your `HTML-CSS` fork, go to the folder `week1`. Inside of that folder, navigate to `/prep-exercises`. For each exercise, you will find a separate folder. The `README` explains what needs to be done. There will also be some questions at the bottom to think about. Go through them _before_ the session on Sunday as it will be covered then. + +### **2. Command Line Interface challenge** + +> Before you start any of the exercises, make sure to create a folder on your desktop that will hold all of your exercise files. Give the folder the name `hyf-html-exercises`. Inside, create a `week1` folder and will hold this week's exercise files inside. Using the CLI, create a plain text file (`.txt`) that contains the commands necessary to answer the following questions: @@ -22,46 +29,46 @@ first message second message ``` -### 2. CSS Challenges +### **3. CSS Challenges** In order to improve you need to practice a lot! In the following challenges you'll work with CSS, starting from the absolute basics to building a page: -- [CSS Challenges](https://en.wikiversity.org/wiki/Web_Design/CSS_challenges): Do challenge #1 to #6. +- [CSS Challenges](https://en.wikiversity.org/wiki/Web_Design/CSS_challenges): Do challenge #1 to #6. -### 3. Code along +### **4. Code along** A big part of learning web development is through learning by example. In the following video you'll learn how to build a simple website, using basic HTML & CSS: -- [Simple website](https://www.youtube.com/watch?v=pOwLCTkypUs) +- [Simple website](https://www.youtube.com/watch?v=pOwLCTkypUs) -### 4. PROJECT: Digital Resume +### **5. PROJECT: Digital Resume** > Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to. In the following assignment you'll make your own Digital Resume. Here are the requirements that need to be fulfilled: -- 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 - - A few lines about who you are - - Education (list at least 1 education institute) - - Work experience (list at least 1 workplace) +- 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 + - A few lines about who you are + - Education (list at least 1 education institute) + - Work experience (list at least 1 workplace) When writing the HTML include the following: -- Different types of headings, like `<h1>` and `<h2>` -- An unordered list (`<ul>`). Use this to list out your educational background -- Another unordered list (`<ul>`). -- An `<img>` tag (for your picture) -- Some `<p>` tags +- Different types of headings, like `<h1>` and `<h2>` +- An unordered list (`<ul>`). Use this to list out your educational background +- Another unordered list (`<ul>`). +- An `<img>` tag (for your picture) +- Some `<p>` tags When writing the CSS include the following: -- Some CSS properties, like: `margin`, `padding`, `color`, etc. -- You are **NOT** allowed to use CSS frameworks (like Bootstrap, MaterializeCSS, etc.) -- Bonus: look into using [flexbox](https://www.youtube.com/watch?v=fYq5PXgSsbE) or [grid](https://www.youtube.com/watch?v=EFafSYg-PkI) +- Some CSS properties, like: `margin`, `padding`, `color`, etc. +- You are **NOT** allowed to use CSS frameworks (like Bootstrap, MaterializeCSS, etc.) +- Bonus: look into using [flexbox](https://www.youtube.com/watch?v=fYq5PXgSsbE) or [grid](https://www.youtube.com/watch?v=EFafSYg-PkI) ## SUBMIT YOUR HOMEWORK! diff --git a/Week1/README.md b/Week1/README.md index 5ad1402..9e85a93 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -14,6 +14,12 @@ These are the topics for week 1: - Where to write it? - The box model - The cascading effect + - Specificity +4. Working with the browsers + - What is a web browser? + - Choosing the right web browser + - How to use the inspector + - Useful browser extensions ## 0. Video Lectures @@ -29,7 +35,7 @@ As a beginning developer it's important to get familiar with it, as it will teac The first thing you'll notice is that once you type in a command, the computer doesn't always give back feedback. This is completely normal. Most of application development goes like that, and it's good to get used to it. -**Note for Windows users**: Please install [Git for Windows](https://gitforwindows.org). It comes with an application called *Git BASH* which simulates frequently used CLI commands in Unix fashion. This aligns our work here in this course, as we can all use the same commands. But there is an even bigger reason: Being comfortable in the Unix Bash shell is very important for a web developer, as web servers usually run Linux. +**Note for Windows users**: Please install [Git for Windows](https://gitforwindows.org). It comes with an application called _Git BASH_ which simulates frequently used CLI commands in Unix fashion. This aligns our work here in this course, as we can all use the same commands. But there is an even bigger reason: Being comfortable in the Unix Bash shell is very important for a web developer, as web servers usually run Linux. For more information, check the following resources and code along: @@ -124,14 +130,95 @@ To learn more about the box model, go through the following: The first C in CSS stands for Cascading and it's crucial to learning how to use CSS correctly. Essentially, it means that it matters (1) **in which order** and -(2) **how specific** -you write CSS rules. +(2) **how specific** you write CSS rules. Read the following articles to learn about it: - [The "C" in CSS](https://css-tricks.com/the-c-in-css-the-cascade/). - [How CSS works: understanding the cascade](https://blog.logrocket.com/how-css-works-understanding-the-cascade-d181cd89a4d8) +### Specificity + +As there are multiple ways to write your css code which leads to multiple rules applying to the same html element CSS needs to decide which rule to follow. In the simplest form, if we for example have the following HTML: + +```html +<p>This paragraph should be styled normally</p> +<p class="explanation"> + This paragraph should be styled differently as we add a class to the element +</p> +``` + +and the following CSS: + +```css +p .explanation { + font-weight: 600; +} + +p { + font-weight: 400; +} +``` + +Then because the `p .explanation` rule is more specific than the `p` rule the `font-weight` of our second paragraph will be `600` even though the other rule was applied last. Read the following articles to learn more about how it works: + +- [Learn Basic CSS Selectors in 15 mins](https://www.youtube.com/watch?v=7kxhOI1Y38Y) +- [Specifics on CSS specificity](https://css-tricks.com/specifics-on-css-specificity/) +- Optional as it goes into every detail: [MDN's guide on Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) + +## 4. Working with the browser + +### What is a web browser? + +You probably use it daily. Let's take a closer look at what it actually is. + +A `web browser` is software that allows you to view webpages, either retrieved from the internet or loaded from your computer. The primary function of a web browser is to render HTML files: transforming all the code (HTML, CSS and JavaScript) as well as the references (images, videos, etc.) to display a page correctly. + +For further study, delve into the following: + +- [What is a browser?](https://www.youtube.com/watch?v=TcbhVv9ty44) +- [How web browsers work](https://www.youtube.com/watch?v=WjDrMKZWCt0) +- [About your web browser](http://www.allaboutcookies.org/browsers/) + +### Choosing the right browser + +As a web developer you will write code that will display in different browsers. As such it is important that you get familiar with most major browsers in use today. These are: + +- [Internet Explorer](https://support.microsoft.com/en-us/help/17621/internet-explorer-downloads) +- [Google Chrome](https://www.google.com/chrome/) +- [Safari](https://support.apple.com/downloads/safari) +- [Mozilla Firefox](https://www.mozilla.org/en-GB/firefox/new/) +- [Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) (Not available for Mac/Linux yet) +- [Opera](https://www.opera.com/download) + +In your HackYourFuture journey you'll mainly be using **Google Chrome** when developing, as is has great developer tools that allow us to develop web applications in an easier and clearer way. + +### How to use the browser inspector + +The inspector is a part of web browsers developers can use to take a closer look at the composition of the HTML elements. This makes it easier to write HTML and CSS code that works. + +Watch the following videos and follow along: + +- [Using browser inspector tools](https://www.youtube.com/watch?v=WJIqIDm7CoA) +- [Google Chrome Developer Tools Crash Course](https://www.youtube.com/watch?v=x4q86IjJFag) + +### Useful browser extensions + +As web developers we'll be dealing with the browser all the time. Why not upgrade our browser so it can make our programming life easier? + +A `browser extension` is a piece of software someone has written to increase the capability of the web browser. For example, if you hate receiving advertisements you probably use something like [Adblock](https://chrome.google.com/webstore/detail/adblock/gighmmpiobklfepjocnamgkkbiglidom) to block all the unwanted ads you might find in your webpages (if not, download it as soon as possible!). + +The following is a list of extensions that have proven to be useful during web development. This list only applies for Google Chrome, so if you don't have it, [install it](https://www.google.com/chrome/). + +Extensions: + +- Modify the technologies underlying each website, in real time, using [Web developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm/related?hl=en-US) +- Expose what technologies a website is using with [WhatRuns](https://chrome.google.com/webstore/detail/whatruns/cmkdbmfndkfgebldhnkbfhlneefdaaip?hl=en-US) +- If you ever wanted to know the exact color of any element in a page, you can now do so with [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en-US) +- When developing you'll be using dummy text to populate your elements. Enter [Loren Ipsum Generator](https://chrome.google.com/webstore/detail/lorem-ipsum-generator-def/mcdcbjjoakogbcopinefncmkcamnfkdb?hl=en%20) + +There are many more of these extensions and we encourage you to explore. See what fits your needs! + ## 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/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 fff54b9..2a5d802 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -4,25 +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. -### Exercise 1: +### 2. GIT exercise -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. 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. -### 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. @@ -30,43 +34,46 @@ 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) +- [Build A Responsive Website With HTML & CSS Tutorial](https://www.youtube.com/watch?v=ZeDP-rzOnAA) -### 4. PROJECT: Drones website +### 5. PROJECT: Responsive website -> Before you start this exercise, 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 exercise's files inside. +> 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. -> Use GIT and GitHub while making this project, you can easily use this as part of your portfolio! +> Tip: Use GIT and GitHub along the way, you can easily use this project as part of your portfolio! -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. +In this project you're going to rebuild `the homepage` of an existing responsive website. Choose one of the following: -Start off by downloading the HTML and images in the following [folder](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/homework). +- [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/) -You are going to write the CSS for this page, **it is not allowed to change the HTML**. +You don't have to build everything, but include the following requirements: -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. +- Only rebuild the homepage (which should include a navigation bar, footer, the landing section and at least 2 other sections) +- Write your CSS in an external stylesheet +- You are **allowed** to use a CSS framework, 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_ -Other than that you should use `media queries`. Here are the requirements for each device size: +### 6. Optional: Flexbox games -- 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 +If you like learning in a fun way there are quite a few games on the internet that teach you the way flexbox works: -So that it works like this: - -![](./assets/wireframe.png) - -Make the page look beautiful by adding some more CSS! Include CSS rules for: - -- `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! diff --git a/Week2/README.md b/Week2/README.md index 3bd8ad4..264c794 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -12,6 +12,7 @@ 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 @@ -155,6 +156,14 @@ This will give us the `flexbox`-specific properties, so we can develop clean and - [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/) + ### 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. @@ -200,23 +209,24 @@ 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! +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)` -| `<p>Single line of code</p>` | `` use single `backticks` around your code`` +| HTML | Markdown | +| ---------------------------- | -------------------------------------------- | +| H1 | `# title` | +| H2 | `## title` | +| _Emphasis_ | `*italic` | +| **Bold** | `**bold**` | +| ~~Strikethrough~~ | `~~Scratch this.~~` | +| [Link](#) | `[link text](https://somewhere)` | +| `<p>Single line of code</p>` | `` use single `backticks` around your code`` | If you want to show a bigger block of code, you start and end with 3 backticks + ````markdown -``` +``` <html> <head>...</head> <body>...</body> @@ -226,6 +236,7 @@ If you want to show a bigger block of code, you start and end with 3 backticks 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) 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 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

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
-

Grids

Drones

Grid with floats

Using flexbox

6 Eksenli Drone + Kamera

DJI Mavic Pro Fly More Combo

DJI Phantom 4

DJI Phantom 3 Standard

YUNEEC Breeze 4K

SKEYE Nano Drone

DJI Spreading Wings S900

Drone 6-AXIS + camera

DJI Mavic Pro Fly More Combo

DJI Phantom 4

DJI Phantom 3 Standard

YUNEEC Breeze 4K

SKEYE Nano Drone

DJI Spreading Wings S900

DJI Spreading Wings S900

Grid with flexbox

flexbox with flexbox

Drone 6-AXIS + camera