Language fixes, some code fixes

_posts/2015-03-05-html-tables.md

@@ -19,7 +19,7 @@ Building a table in HTML requires a **specific structure**:
 
 This **hierarchy** is required, and all 3 elements are necessary to build a table.
 
-When writing the code, you need to define your table cells from left to right, and _then_ from to bottom.
+When writing the code, you need to define your table cells from left to right, and _then_ from top to bottom.
 
 {% highlight html %}
 <table>

_posts/2015-03-07-html-forms.md

@@ -45,7 +45,7 @@ These controls use different HTML **tags**, but most of them use the `<input>` t
 
 ### The Form element
 
-The `<form>` is a block-level element thats defines an **interactive** part of a webpage. As a result, all form controls (like `<input>`, `<textarea>` or `<button>`) must appear _within_ a `<form>` element.
+The `<form>` is a block-level element that defines an **interactive** part of a webpage. As a result, all form controls (like `<input>`, `<textarea>` or `<button>`) must appear _within_ a `<form>` element.
 
 Two HTML attributes are **required**:
 

_posts/2015-08-05-css-animations.md

@@ -104,8 +104,9 @@ Notice how the start `0%` and the end `100%` have the **same CSS rules**. This e
 
 The animation's **name** is used at least **twice**:
 
-* when **writing** the animation using `@keyframes`
-* when **using** the animation using the `animation-name` property (or withing the `animation` shorthand)
+* when **writing** the animation, by using `@keyframes`
+* when **using** the animation, by using the `animation-name` property (or by using the `animation` shorthand)
+
 
 {% highlight css %}
 @keyframes whatever{

_posts/2015-08-06-css-transform.md

@@ -19,7 +19,7 @@ CSS **transforms** are a collection of _functions_ that allow to **shape element
 There are 3 CSS transform properties available:
 
 * `transform` defines which transform _function_ to use (translate, rotate, scale...)
-* `transform-origin` allows to modify the origin point of a transformation (works like [background positions](/css-background.html#background-position))
+* `transform-origin` allows you to modify the origin point of a transformation (works like [background positions](/css-background.html#background-position))
 * `transform-style` is for 3d settings
 
 Note that unlike `background` and `border`, `transform` is **not a shorthand property**.
@@ -32,7 +32,7 @@ To prevent unexpected behavior, transformed elements **do not affect the Flow**.
 
 ### translate
 
-The `translate()` function allows to move an element **across the plane** (on the x and y axis). It accepts either:
+The `translate()` function allows you to move an element **across the plane** (on the x and y axis). It accepts either:
 
 * **1 parameter**: moves the element along the `x` axis
 * **2 parameters**: first value is for the `x` axis, second for the `y` one
@@ -76,7 +76,7 @@ You can use `translateX()` and `translateY()` to only move your element along th
 
 ### rotate
 
-The `rotate()` function allows to make an element **revolve around a fixed point**. By default, it revolves around the element's center. Think of it as vinyl being played on a turntable.
+The `rotate()` function allows you to make an element **revolve around a fixed point**. By default, it revolves around the element's center. Think of it as vinyl being played on a turntable.
 
 `rotate()` accepts only **1** parameter, which is an **angle** value defined in degrees `deg`, gradians `grad`, radians `rad` or turns `turn` (with 1 turn being equivalent to a full circle).
 
@@ -104,7 +104,7 @@ p{ animation: rotating 4s linear infinite;}
 
 ### scale
 
-The `scale()` function allows to **resize an element**. It can either expand or shrink it. The function accepts either:
+The `scale()` function allows you to **resize an element**. It can either expand or shrink it. The function accepts either:
 
 * **1 parameter**: the element is resized uniformily in height and width
 * **2 parameters**: the first value resizes the element _horizontally_, the second one _vertically_
@@ -174,7 +174,7 @@ Like `translate()`, the `scale()` function has x and y versions: `scaleX()` and
 
 ### skew
 
-The `skew()` function allows to **distort an element**, by dragging its sides along a line basically.
+The `skew()` function allows you to **distort an element**, by dragging its sides along a line basically.
 
 This transform function is rarely used, as its effects are quite unpredictable, and its results not necessarily appealing. Nevertheless, let's see how it works.
 

_posts/2015-08-07-css-responsiveness.md

@@ -109,7 +109,7 @@ By writing `@media (min-width: 1200px)`, we tell the browser to read this block
 
 The **width** parameter is the most used one in responsive web design. This comes from the fact that **webpages are read vertically**: we scroll to read the hidden content. As a result, the width is fixed and constrained, while the height of the website is variable.
 
-Because we don't (usually) scroll horizontally, we need to fit our design within the **available viewport width**. Media queries allow to perform **checks** on this width, and apply certain styles if the viewport is _wider than_ (`min-width`) or _narrower than_ (`max-width`) a specific amount of pixels.
+Because we don't (usually) scroll horizontally, we need to fit our design within the **available viewport width**. Media queries allow you to perform **checks** on this width, and apply certain styles if the viewport is _wider than_ (`min-width`) or _narrower than_ (`max-width`) a specific amount of pixels.
 
 You can use either:
 
@@ -147,7 +147,7 @@ The **orientation** parameter can detect if the viewport is in either of the fol
 
 Although it's mostly used for tablets and smartphones, be aware that even on a widescreen monitor, the viewport can be in portrait if its width is smaller than its height.
 
-On mobile, even if you're holding your device in portrait mode, if the keyboard shows up, the viewport can be considered as landscape, considering how its height becomes smaller than its width.
+On mobile, even if you're holding your device in portrait mode, if the virtual keyboard appears, the viewport can be considered as landscape, if its height becomes smaller than its width.
 {: .info}
 
 #### resolution
@@ -177,7 +177,7 @@ Desktop screens usually have a pixel density around **100** dpi. Smartphones on
 
 What role does CSS play here? Well, higher resolution screens will render text very clearly: individual pixels become hardly noticable, and letters look absolutely smooth.
 
-The problem is with **images** on Retina displays for example. It's a long topic, so read this ["CSS Techniques for Retina Displays" article on sitepoint](http://www.sitepoint.com/css-techniques-for-retina-displays/).
+The problem is with **images** on very high resolution displays (like Retina displays) for example. It's a long topic, so read this ["CSS Techniques for Retina Displays" article on sitepoint](http://www.sitepoint.com/css-techniques-for-retina-displays/).
 
 <figure markdown="1">
 ![Image density in CSS](/images/image-density-in-css.png)
@@ -207,7 +207,7 @@ The `@2x` suffix is just Apple's notation for Retina images, and has been adopte
 
 Usually, you want to focus on the full width **desktop** version first, as it features a more complex design that includes columns, hover states, absolute positioning, floats etc.
 
-But designing the **mobile** version first is actually _easier_ considering a **["HTML is almost 100% responsive out of the box"](http://fluidity.sexy/)**. Most web designs on mobile are only focusing on vertical layouts, with no or very few columns, because scrolling is **natural** on mobile devices.
+But designing the **mobile** version first is actually _easier_ considering that **["HTML is almost 100% responsive out of the box"](http://fluidity.sexy/)**. Most web designs on mobile are only focusing on vertical layouts, with no or very few columns, because scrolling is **natural** on mobile devices.
 
 Using [the Flow](/css-the-flow.html) is straightforward to design a mobile site: just order your HTML elements in the way you want them to be displayed. Simply by writing your HTML code, you're _already designing your mobile website_. Header first, menu afterwards, then your content, and a footer at the end. _Voilà_!
 

_posts/2015-09-04-sass-nesting.md

@@ -7,7 +7,7 @@ section: sass
 
 ### Syntax
 
-In Sass, **nesting CSS rules** allows to define **hierarchy selectors**:
+In Sass, **nesting CSS rules** allow you to define **hierarchy selectors**:
 
 {% highlight scss %}
 .title{
@@ -28,7 +28,7 @@ Because `strong` and `em` appear _within_ the `.title` rule (between the 2 curly
 
 ### Nesting purpose
 
-Because [CSS priority](/css-priority.html) can be tricky, it's common to use be **specific** when writing selectors, by combining multiple classes/tags to prevent CSS rules to cancel each other out.
+Because [CSS priority](/css-priority.html) can be tricky, it's common to be **specific** when writing selectors, by combining multiple classes/tags to prevent CSS rules to cancel each other out.
 
 {% highlight css %}
 .description{}
@@ -146,43 +146,6 @@ The `.parent.other-class` will target HTML elements that have `class="parent oth
 
 ### Full example
 
-{% highlight css %}
-.post-content{}
-.post-content a{}
-.post-content a:hover{}
-.post-content aside{}
-.post-content blockquote{}
-.post-content code{}
-.post-content h3{}
-.post-content h3 a{}
-.post-content h4{}
-.post-content h4:before{}
-.post-content h4:after{}
-.post-content p{}
-.post-content p:first-child{}
-.post-content p:last-child{}
-.post-content ul{}
-.post-content ul ul{}
-.post-content ul ul ul{}
-.post-content dl{}
-.post-content dl:before{}
-.post-content dl dt{}
-.post-content dl dd{}
-.post-content pre{}
-.post-content pre code{}
-.post-content table{}
-.post-content table tr{}
-.post-content table tr:nth-child(2n){}
-.post-content table th,
-.post-content table td{}
-.post-content table th{}
-.post-content table td.empty,
-.post-content table th.empty{}
-.post-content table code{}
-.post-content table pre{}
-.post-content table pre:before{}
-{% endhighlight %}
-
 {% highlight scss %}
 .post-content{
   a{
@@ -232,3 +195,41 @@ The `.parent.other-class` will target HTML elements that have `class="parent oth
 }
 {% endhighlight %}
 
+The resulting CSS is:
+
+{% highlight css %}
+.post-content{}
+.post-content a{}
+.post-content a:hover{}
+.post-content aside{}
+.post-content blockquote{}
+.post-content code{}
+.post-content h3{}
+.post-content h3 a{}
+.post-content h4{}
+.post-content h4:before{}
+.post-content h4:after{}
+.post-content p{}
+.post-content p:first-child{}
+.post-content p:last-child{}
+.post-content ul{}
+.post-content ul ul{}
+.post-content ul ul ul{}
+.post-content dl{}
+.post-content dl:before{}
+.post-content dl dt{}
+.post-content dl dd{}
+.post-content pre{}
+.post-content pre code{}
+.post-content table{}
+.post-content table tr{}
+.post-content table tr:nth-child(2n){}
+.post-content table th,
+.post-content table td{}
+.post-content table th{}
+.post-content table td.empty,
+.post-content table th.empty{}
+.post-content table code{}
+.post-content table pre{}
+.post-content table pre:before{}
+{% endhighlight %}

_posts/2015-09-06-sass-extend.md

@@ -65,7 +65,7 @@ Sass helps solving these problems.
 
 ### Sass @extend syntax
 
-A Sass `@extend` allows to **inherit** CSS properties from _another_ **selector**:
+A Sass `@extend` allows you to **inherit** CSS properties from _another_ **selector**:
 
 {% highlight scss %}
 // scss