Feature/positioning

1-the-basics/index.md

@@ -268,7 +268,7 @@ Please complete all the levels of [Fluke Out](https://flukeout.github.io/)
 
 We are going to apply styles to the HTML form that we created in the [HTML Tutorial](https://pushdev-code.github.io/html-tutorial/)
 
-1. Change the `background-color` of the `<header>` and the `<footer>`.
+1. Change the `background-color` of the `<header>`.
 2. Set a `background-image` to the element that contains the `<form>`.
 3. Change the `background-color` of the `<form>`.
 4. Apply the `:hover` pseudo-class to the buttons.

2-positioning/index.md

@@ -1 +1,104 @@
 # Positioning
+
+With positioning you can change the location of HTML elements within the visual viewport of the document.
+
+Positioned elements are important to create complex layouts.
+
+## Static
+
+```css
+  .css-selector {
+    position: static;
+  }
+```
+
+This is the default value for `position` property, it basically means it's not positioned.
+
+## Relative:
+
+```css
+.css-selector {
+  left: 20px;
+  position: relative;
+  top: -20px;
+  width: 500px;
+}
+```
+
+Relatively positioned elements are offset a given amount from their normal position within the document. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.
+
+### Absolute:
+
+An element that is absolutely positioned is taken out of the flow. It behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block.
+
+```css
+.css-selector-relative {
+  height: 400px;
+  position: relative;
+  width: 600px;
+}
+.css-selector-absolute {
+  height: 200px;
+  position: absolute;
+  right: 0;
+  top: 120px;
+  width: 300px;
+}
+```
+
+### Fixed:
+
+Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. The top, right, bottom, and left properties specify offsets from the edges of the viewport's block.
+
+```css
+.css-selector-fixed {
+  bottom: 0;
+  position: fixed;
+  right: 0;
+  width: 200px;
+}
+```
+
+## Sticky:
+
+Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.
+
+```css
+.css-selector-sticky {
+  position: sticky;
+  top: 60px;
+  width: 200px;
+}
+```
+
+## Normal Flow
+
+Elements on a webpage lay out in the normal flow, if you have not applied any CSS to change the way they behave. And, as we began to discover, you can change how elements behave either by adjusting their position in that normal flow, or removing them from it altogether.
+
+First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that box model thing again, which we've looked at earlier.
+
+By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are as tall as their content, and as wide as their content. You can't set width or height on inline elements — they just sit inside the content of block level elements. If you want to control the size of an inline element in this manner, you need to set it to behave like a block level element with display: block; (or even,display: inline-block; which mixes characteristics from both.)
+
+### Exercise
+
+1. create a new branch from master called `feature/positioning`.
+2. Go to `2-positioning` folder and create a file named `positioning.html`.
+3. Create a file named `styles.css`.
+4. Inside the CSS file, create this layout using CSS positioning:
+
+![Positioning exercise](https://user-images.githubusercontent.com/668906/81229480-7dc2ea80-8fb5-11ea-9ada-220a61240b7d.png)
+
+* `<header>` sticky, green borders and black background.
+* `<nav>` absolute, blue borders and 200px of width.
+* `<section>` static, red border and it's 200px away from its left.
+* `<footer>` fixed, orange border and it's fixed to the bottom.
+
+What do you need to make the footer full width and visible?
+Resize your window and double check the responsiveness of your layout.
+
+5. Push your changes and create a new PR with your code. 
+
+### Sources
+
+* [CSS Position - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
+* [Learnlayout](http://learnlayout.com/)

2-positioning/positioning.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="author" content="augusticor" />
+    <link rel="stylesheet" href="style.css">
+    <title>Oscar Bosigas positioning</title>
+</head>
+
+<body>
+    <header>
+        <h1>This is my first layout</h1>
+    </header>
+    <nav>
+        <lu>
+            <li>Home</li>
+            <li>Products</li>
+            <li>About us</li>
+            <li>Contact</li>
+        </lu>
+    </nav>
+
+    <section>
+        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est culpa aut magni doloribus debitis quam ea veritatis eveniet vitae voluptatem adipisci dolore blanditiis error, voluptatibus porro animi quisquam deleniti. Ducimus.</p>
+    </section>
+    <section>
+        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore dolorem odit minima illo vitae nam totam distinctio repellat eaque dicta reprehenderit praesentium aliquam iusto, veniam maxime. Expedita adipisci facere deserunt?</p>
+    </section>
+    <section>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni sint dignissimos quis repellendus corrupti mollitia pariatur repellat odit eius obcaecati, eveniet, sapiente, nihil saepe. Iure explicabo quisquam tempore placeat expedita.</p>
+    </section>
+    <footer>About my company</footer>
+</body>
+</html>

2-positioning/style.css

@@ -0,0 +1,25 @@
+header {
+    background-color: black;
+    border: 2px solid green;
+    color: white;
+    position: sticky;
+}
+
+nav {
+    border: 2px solid blue;
+    position: absolute;
+    width: 200px;
+}
+
+section {
+    border: 2px solid red;
+    margin-left: 200px;
+    position: static;
+}
+
+footer {
+    background-color: brown;    
+    border: 2px solid orange;
+    font-style: italic;
+    position: fixed;
+}

3-box-model/index.md

@@ -1 +1,75 @@
 # Box model
+
+CSS box model is a container which contains multiple properties including borders, margin, padding and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements. The web browser renders every element as a rectangular box according to the CSS box model.
+Box-Model has multiple properties in CSS. Some of them are given below:
+
+* borders
+* margins
+* padding
+* Content
+
+Image of Box Model
+
+![Box Model](https://www.csssolid.com/images/CSSBoxModel.png)
+
+* `Content box`: The area where your content is displayed, which can be sized using properties like width and height.
+* `Padding box`: The padding sits around the content as white space; its size can be controlled using padding and related properties.
+* `Border box`: The border box wraps the content and any padding. Its size and style can be controlled using border and related properties.
+* `Margin box`: The margin is the outermost layer, wrapping the content, padding and border as whitespace between this box and other elements. Its size can be controlled using margin and related properties.
+
+When you set the width of an element, the element can actually appear bigger than what you set: the element's border and padding will stretch out the element beyond the specified width. Look at the following example, where two elements with the same width value end up different sizes in the result.
+
+```css
+.css-selector-500 {
+  margin: 20px auto;
+  width: 500px;
+}
+
+.css-selector-bigger {
+  border-width: 10px;
+  margin: 20px auto;
+  padding: 50px;
+  width: 500px;
+}
+```
+
+Can you calculate the width of the `css-selector-bigger` element?
+
+## box-sizing
+
+So you had to use some math to calculate the width of the elements, so this was considered unintuitive, that's why `box-sizing` property appeared, when it is applied on an element, the padding and border of that element no longer increase the width.
+
+```css
+.css-selector-500 {
+  box-sizing: border-box;
+  margin: 20px auto;
+  width: 500px;
+}
+
+.css-selector-bigger {
+  border-width: 10px;
+  box-sizing: border-box;
+  margin: 20px auto;
+  padding: 50px;
+  width: 500px;
+}
+```
+
+What's different?
+
+## Exercise
+
+1. create a new branch from master called `feature/box-model`.
+2. Go to `3-box-model` folder and copy the file from positioning exercise and rename it as `box-model.html`.
+3. Also copy the file `styles.css`.
+4. Inside the CSS file, set the `<section>` elements to not overlap the `<nav>`.
+5. Update the `<nav>` styles so the 200px of width are set by padding and border, meaning you can't use the `width` property but the same width needs to remain.
+6. Can you make the `<nav>` links to occupy the full width of its container?
+7. Push your changes and create the PR.
+
+Extra: Read about `display` property and find out how it can affect the elements flow in the document.
+
+### Sources
+
+* [CSS Box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
+* [Learnlayout - Box Model](http://learnlayout.com/box-model.html)

4-css-grid/index.md

@@ -27,10 +27,12 @@ Please complete all the levels of [Grid Garden](https://cssgridgarden.com/)
 
 ## Exercise
 
-1.
+1. From master `$ git checkout master`, create a new branch called `feature/css-grid-exercise`.
+2. Create a new html file named `grid.html` with a css file named `styles.css` in `4-css-grid` folder.
+3. Create this layout using CSS grid.
+<img width="355" alt="Screen Shot 2020-05-09 at 11 56 06 AM" src="https://user-images.githubusercontent.com/668906/81480003-5d30a580-91ec-11ea-8a8f-7265514d31fa.png">
 
-* Create a new branch called /feature/css-grid-yourname
-* Push the changes to your local copy of the repo (Pull request).
+4. Push the changes to your local copy of the repo (Pull request).
 
 
 ## Source

6-media-queries/index.md

@@ -1,13 +1,13 @@
 # Media Queries
 
 * [Let's see](https://mediaqueri.es/)
-* The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". 
+* The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels".
 
 ![image](https://user-images.githubusercontent.com/61557537/80324916-a5b58f80-87f8-11ea-8b74-c597b2493b54.png)
 
 * Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse.
 
-### Syntax:
+## Syntax:
 
 ```css
 @media media-type and (media-feature-rule) {
@@ -19,7 +19,29 @@
 * The media expression, which is a rule, or test that must be passed for the contained CSS to be applied.
 * The set of CSS rules that will be applied if the test passes and the media type is correct.
 
-## Source 
+## Example
+
+```css
+@media screen and (max-width: 768px) and (min-width: 320px) {
+  body {
+    background-color: red;
+  }
+}
+```
+
+This code will change the body's background color in between 320px and 768px.
+
+## Exercise
+
+1. From master `$ git checkout master`, create a new branch called `feature/media-queries-Exercise`.
+2. Use your `form.html` form the `1-the-basics` folder.
+3. Change the body background color to match these scenarios:
+  * from 320 up to 600px the body color should be blue, font should be white.
+  * from 601 up to 1023px the body color should be green, font should be black.
+  * from 1024 and up the body color should be white, font should be black.
+4. Push the changes to your local copy of the repo (Pull request).
+
+## Source
 
 * [Img Source](https://www.silocreativo.com/media-queries-css/)
 * [Mozilla Developer](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)

7-layouts/index.md

@@ -8,25 +8,15 @@ You should already:
 * Have basic familiarity with HTML, as discussed in the first module (tags,classes,attributes,conventions).
 * Be comfortable with CSS fundamentals, as discussed in the start of the second module.
 
-## Objective
-
-Layout 1: https://cdn-images-1.medium.com/max/1600/1*aN_Im5EoU8hswHF2Hkpksw.gif
-
-![Layout 1](https://user-images.githubusercontent.com/61557537/80284993-aad6e980-86e7-11ea-851d-3ee4bcc8ae95.png)
-
-Layout 2: https://cdn-images-1.medium.com/max/1600/1*7JLljCGtZXZySxVPbns1Og.gif
-
-![Layout 2](https://cdn-images-1.medium.com/max/1600/1*7JLljCGtZXZySxVPbns1Og.gif)
-
-## Topics
-
-    * Box Model
-    * Positioning
-    * Normal flow
-    * Display property
-    * Flexbox
-    * CSS Grid
-    * Floats
-
-
-
+## Exercise
+
+1. From master `$ git checkout master`, create a new branch called `feature/layout-exercise`.
+2. Create a new html file named `layout.html` with a css file named `styles.css` in `7-layouts` folder.
+3. Create this layout:
+![Layout 1](https://cdn-images-1.medium.com/max/1600/1*aN_Im5EoU8hswHF2Hkpksw.gif)
+* It should be responsive, you should use media queries.
+* It should match the columns, you can use grid or flexbox.
+* Images are responsive.
+* Fonts are responsive.
+
+4. Push the changes to your local copy of the repo (Pull request).