From e6ed96d6fd64b5a7a5ff87b0b743ca6c12d823a4 Mon Sep 17 00:00:00 2001
From: earthfront <earthfront@users.noreply.github.com>
Date: Thu, 4 Aug 2016 17:34:53 -0500
Subject: [PATCH 1/8] Fix Typo

---
 _posts/2015-03-05-html-tables.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_posts/2015-03-05-html-tables.md b/_posts/2015-03-05-html-tables.md
index 706e3cd..4a08e22 100644
--- a/_posts/2015-03-05-html-tables.md
+++ b/_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>

From 047c03df990654cb54b0108f1bc816e9de628c09 Mon Sep 17 00:00:00 2001
From: earthfront <earthfront@users.noreply.github.com>
Date: Thu, 4 Aug 2016 18:06:41 -0500
Subject: [PATCH 2/8] Fixed typo

---
 _posts/2015-03-07-html-forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_posts/2015-03-07-html-forms.md b/_posts/2015-03-07-html-forms.md
index 7b6f952..b2091c7 100644
--- a/_posts/2015-03-07-html-forms.md
+++ b/_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**:
 

From 80a7c853461e96acd33687d585d616b246fa2fb5 Mon Sep 17 00:00:00 2001
From: earthfront <earthfront@users.noreply.github.com>
Date: Thu, 11 Aug 2016 12:52:47 -0500
Subject: [PATCH 3/8] Fixed typo, clarified languages

---
 _posts/2015-08-05-css-animations.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/_posts/2015-08-05-css-animations.md b/_posts/2015-08-05-css-animations.md
index 063f59f..cec628b 100644
--- a/_posts/2015-08-05-css-animations.md
+++ b/_posts/2015-08-05-css-animations.md
@@ -104,8 +104,8 @@ 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 `@keframes`
-* when **using** the animation using the `animation-name` property (or withing the `animation` shorthand)
+* when **writing** the animation, by using `@keframes`
+* when **using** the animation, by using the `animation-name` property (or by using the `animation` shorthand)
 
 {% highlight css %}
 @keyframes whatever{

From 4e4b55032ffb7e4383ec4fa4157979d5cc98c18b Mon Sep 17 00:00:00 2001
From: earthfront <earthfront@users.noreply.github.com>
Date: Thu, 11 Aug 2016 12:58:26 -0500
Subject: [PATCH 4/8] Updated to idiomatic English

---
 _posts/2015-08-06-css-transform.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/_posts/2015-08-06-css-transform.md b/_posts/2015-08-06-css-transform.md
index 328607a..3ddf888 100644
--- a/_posts/2015-08-06-css-transform.md
+++ b/_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.
 

From e44772daa09f2a7dfb395d0c9f27f49eb4f025b4 Mon Sep 17 00:00:00 2001
From: earthfront <earthfront@users.noreply.github.com>
Date: Thu, 11 Aug 2016 13:13:31 -0500
Subject: [PATCH 5/8] More language tweaks.

---
 _posts/2015-08-07-css-responsiveness.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/_posts/2015-08-07-css-responsiveness.md b/_posts/2015-08-07-css-responsiveness.md
index 255d1f9..e0adde3 100644
--- a/_posts/2015-08-07-css-responsiveness.md
+++ b/_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à_!
 

From 12a4ed2792d154e28643c1aa055073ef42ce1996 Mon Sep 17 00:00:00 2001
From: earthfront <earthfront@users.noreply.github.com>
Date: Thu, 11 Aug 2016 15:11:24 -0500
Subject: [PATCH 6/8] More lang tweaks

---
 _posts/2015-09-04-sass-nesting.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/_posts/2015-09-04-sass-nesting.md b/_posts/2015-09-04-sass-nesting.md
index d5820d1..bc680eb 100644
--- a/_posts/2015-09-04-sass-nesting.md
+++ b/_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{}

From a1fb4536f7682d81a0a814fb5a216a461fd67be7 Mon Sep 17 00:00:00 2001
From: earthfront <earthfront@users.noreply.github.com>
Date: Thu, 11 Aug 2016 15:29:35 -0500
Subject: [PATCH 7/8] Changed to show logical order

---
 _posts/2015-09-04-sass-nesting.md | 75 ++++++++++++++++---------------
 1 file changed, 38 insertions(+), 37 deletions(-)

diff --git a/_posts/2015-09-04-sass-nesting.md b/_posts/2015-09-04-sass-nesting.md
index bc680eb..d3ca9ff 100644
--- a/_posts/2015-09-04-sass-nesting.md
+++ b/_posts/2015-09-04-sass-nesting.md
@@ -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 %}

From bfa5e9315a1c76745d7c65f5169495bb68a26f3c Mon Sep 17 00:00:00 2001
From: earthfront <earthfront@users.noreply.github.com>
Date: Thu, 11 Aug 2016 17:00:59 -0500
Subject: [PATCH 8/8] Lang tweak

---
 _posts/2015-09-06-sass-extend.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_posts/2015-09-06-sass-extend.md b/_posts/2015-09-06-sass-extend.md
index cd0b29d..66f501d 100644
--- a/_posts/2015-09-06-sass-extend.md
+++ b/_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