Merge pull request #70 from btholt/dustin/repo-issues

cleaning up issues

lessons/01-welcome-to-the-class/B-get-set-up.md

@@ -42,8 +42,6 @@ Something really important is that you choose to learn from good sources. Just l
 
 Frontend Masters also puts out a really awesome book every year called the [Frontend Handbook][handbook]. It's a good way to get an overview of the whole industry.
 
-## Other Recommendations
-
 [code]: https://code.visualstudio.com/
 [ws]: https://www.jetbrains.com/webstorm/
 [nova]: https://nova.app/

lessons/02-html/B-types-of-tags.md

@@ -21,7 +21,7 @@ So let's explore some of the essential tag types.
   sapiente in optio quia inventore quis maxime ullam tenetur?
 </p>
 <p>
-  Maxime quibusdam, dolorum quaerat ducimus inventore sunt pariatur et ea dolore
+  Maxime quibusdam, dolorum quaerat ducimus inventore sunt pariatur et dolore
   ipsam. Distinctio eum nobis officiis quam quasi exercitationem eaque?
 </p>
 ```

lessons/02-html/C-attributes.md

@@ -2,7 +2,7 @@
 description: ""
 ---
 
-Attributes allow you to modify behavior of an HTML attribute. You've already seen a few of them but we'll go into a few more examples of them.
+Attributes allow you to modify behavior of an HTML tag. You've already seen a few of them but we'll go into a few more examples of them.
 
 A really good example we have seen already is the `href` attribute of the `<a href="www.frontendmasters.com"></a>` tag. By modifying the href we're modifying what the tag does. It's contextual as well: `href` only works on `a` tags. You can't add a `href` to a `div` and expect to suddenly work as a link.
 

lessons/02-html/D-organizing-html.md

@@ -84,7 +84,7 @@ What's more, this is reusable now. We could have a full feed of these.
 </div>
 ```
 
-Now I used a div to enclose the entire social feed, and then I reused our structure from above to remake a bunch of the same post. Pretty neat, huh? We build one component and then reuse it over and over again. I imagine then we'd put the `social-feed` div inside another `news` component and then that inside of our `app` page. Our `app` div might a navbar, the news div, a footer, a sidebar, and other things. But we'd just do nested things like we did with our `social-feed`.
+Now I used a div to enclose the entire social feed, and then I reused our structure from above to remake a bunch of the same post. Pretty neat, huh? We build one component and then reuse it over and over again. I imagine then we'd put the `social-feed` div inside another `news` component and then that inside of our `app` page. Our `app` div might have a navbar, the news div, a footer, a sidebar, and other things. But we'd just do nested things like we did with our `social-feed`.
 
 Let's construct a navbar for fun.
 

lessons/03-css/C-pseudoclasses-and-pseudoelements.md

@@ -6,7 +6,7 @@ description: ""
 
 Some times we want to change how elements look based on certain events that happen in the DOM. One of the most common ones is we want to change an element when someone hovers their mouse over it. Like this box:
 
-The see we used for this is this:
+The CSS we used for this is this:
 
 ```html
 <style>
@@ -57,7 +57,7 @@ We're not going to dwell too much on pseudoelements as they are a bit of an adva
 <div class="chapter">This is a second chapter of my book.</div>
 
 <style>
-  .chapter p {
+  .chapter {
     margin: 0;
   }
   .chapter::after {

lessons/03-css/D-layout-css.md

@@ -77,7 +77,7 @@ We're going to talk about what is call the **box model** of CSS. This is one of
 
 Every tag in CSS has a `display` property associated with it by default. In fact, CSS has a lot of hidden defaults, just like by-default all text's color is black. With `display`, it varies by what type of tag we're talking about. `div`s are `display: block;` by default while `span`s are `display: inline;` and this makes sense given their functions. However, being that we have access to CSS, we can manipulate a `span` to act like a `div` and vice-versa (though usually you'd just use the appropriate tag.) We'll list out a few of the options here of what `display` can be.
 
-- `inline` – Like it sounds, it makes whatever the `tag` is behave like text. If you I want to style some text inline, this is how to do. The key here is the browser will determine all the height, width, padding, margins, etc. for you and **will not let you change it**. This is a common pitfall for those learning. If you have something and you're trying to set the width or height and it's not respecting it, it's probably the wrong `display` type.
+- `inline` – Like it sounds, it makes whatever the `tag` is behave like text. If you want to style some text inline, this is how to do. The key here is the browser will determine all the height, width, padding, margins, etc. for you and **will not let you change it**. This is a common pitfall for those learning. If you have something and you're trying to set the width or height and it's not respecting it, it's probably the wrong `display` type.
 - `block` – `div`s and `p`s by default are `display: block;`. This give you control over the height, width, padding, margins, etc. of something. By default, something that is `block` takes the whole line to itself.
 - `inline-block` – A hybrid of the previous two. This will make browser try to place the tag inline, but will still allow you to control the height, width, padding, and margins. Like this box: <div class="long-inline-box"></div> This wouldn't be possible with either of the previous.
 - `flex` and `inline-flex` – Similar to `block` in that it affects the tags around it like `block` does, however it gains some new super power on how its interior tags are layed out. There's a section where we'll talk about `flex`.
@@ -125,6 +125,8 @@ This will make everything use the `border-box` sizing instead of the default one
 
 There are a few ways to accomplish layouts. We'll briefly discuss two: floats and flex. There is also grid, but it's still new which means a significant of people's computers don't support it and the best practices for it are still being ironed out. In addition, you don't need it right away.
 
+> Note: CSS Grid is now full supported. Learn more in our [Ultimate CSS Grid & Layout Techniques course](https://frontendmasters.com/courses/css-grid/)
+
 We're going to be using these boxes a lot over the next examples. Here's the CSS if you want to play with them:
 
 ```html
@@ -158,7 +160,7 @@ We're going to be using these boxes a lot over the next examples. Here's the CSS
 
 ### Floats
 
-The old, bullet-proof of laying things is using a property called `float`. The idea behind float is you'll an element to push itself as far left or right as possible, and once it's out of space, go to the next line. I'll put an example on the line below. Try resizing your browser horizontally and see the boxes re-arrange themselves.
+The old, bullet-proof way of laying things is using a property called `float`. The idea behind float is you'll tell an element to push itself as far left or right as possible, and once it's out of space, go to the next line. I'll put an example on the line below. Try resizing your browser horizontally and see the boxes re-arrange themselves.
 
 ```html
 <style>

lessons/03-css/E-flex.md

@@ -62,7 +62,7 @@ description: ""
   }
 </style>
 
-`display: flex;` is a display mode for CSS. It's to note that when you stick `display: float`, it allows you to change the layout **inside** the tag. It allows you to change the layout of its children. Externally, it acts just like `block`. Likewise there is a `inline-flex` which acts just like `display: inline-block` externally.
+`display: flex` is a display mode for CSS. It's to note that when you stick `display: flex`, it allows you to change the layout **inside** the tag. It allows you to change the layout of its children. Externally, it acts just like `block`. Likewise there is a `inline-flex` which acts just like `display: inline-block` externally.
 
 Flex allows for a lot of interesting patterns but we're going to scratch the surface today. Take [Jen Kramer's course][jen] or read the [CSS Tricks article][flex] to learn more. We're going to explore same case today. Flex lets you tell CSS how to lay out the items inside a tag. We can tell them to be left aligned, bottom aligned, center aligned, whatever you want. You can even throw them into columns. I think this is best taught by example so let's just throw a bunch on the page. All of them will have the following CSS:
 
@@ -132,7 +132,7 @@ Okay, so now we've done columns, (also, `column-reverse` works as you would expe
 </div>
 ```
 
-This is basically right-justified. Notice this is different from the reversed one about because the items stayed in the same order. By default, the `justify-content` is `flex-start` which is like left-justified.
+This is basically right-justified. Notice this is different from the reversed one above because the items stayed in the same order. By default, the `justify-content` is `flex-start` which is like left-justified.
 
 ```html
 <style>

lessons/05-putting-it-all-together/C-project.md

@@ -37,7 +37,7 @@ Okay, now that you have requirements, let's go over some tips and hints.
 - There are so many ways to write this. There is no one right way. My solution is not the only nor is it the best solution. Experiment. Try. Fail. Succeed. It's all about learning here.
 - Good idea to use `<button></button>` for the buttons. You have to deal with some extra styling stuff but it will make your code work pretty much automatically for disabled people. In general when writing HTML, if something serves the function of a button, make it a `<button></button>`.
 - I used multiple rows of flex layed out divs for the button. You could do it all in one div using the `flex-wrap` property.
-- The secret to getting equal gutters (which is what you call the black space between buttons): you can set width to be `24.5%` (so four of them fit on a line) and then use `justify-cotent: space-between` to evenly space them. That'll give them a gutter of roughly `.5%` of the whole width. The problem with using percentages in conjuections with heights: your heights and widths are different. 5% of height is not the same of 5% of width, and that'll make the gutters look weird. You want the bottom gutters to be the same size as the side gutters. `margin-bottom` to the rescue! If you give the row a `margin-bottom` of `.5%` (if you're using my same numbers) then that'll work since margin is always measured as a function of width (just one of those things you have to know!) Hopefully that helps.
+- The secret to getting equal gutters (which is what you call the black space between buttons): you can set width to be `24.5%` (so four of them fit on a line) and then use `justify-content: space-between` to evenly space them. That'll give them a gutter of roughly `.5%` of the whole width. The problem with using percentages in conjuections with heights: your heights and widths are different. 5% of height is not the same of 5% of width, and that'll make the gutters look weird. You want the bottom gutters to be the same size as the side gutters. `margin-bottom` to the rescue! If you give the row a `margin-bottom` of `.5%` (if you're using my same numbers) then that'll work since margin is always measured as a function of width (just one of those things you have to know!) Hopefully that helps.
 - Sometimes I do the math to get things right. Sometimes I just guess-and-check to see if it looks okay.
 - You can add a class to get the orange buttons. Or you could try `:last-child` (assuming you have row div.)
 

lessons/06-talking-to-servers/A-json.md

@@ -7,7 +7,7 @@ Some times you want to request additional data from the server after your page h
 
 Requesting data from the server after the page has loaded is called AJAX. AJAX is an old acronym that has been around for a while and actually now doesn't make any sense but we still use it. It stands for asynchronous JavaScript and XML (we don't typically use XML anymore.) However the name AJAX stuck so that's what it means.
 
-Before we hoptoo much into the AJAX portion, let's spend a bit with JSON. We need some standard language that your frontend website can speak with your backend, someway to encode messages. Think of it like morse code: we need some way that both the sender and receiver of messages can encode their messages so it's understood by both.
+Before we hop into the AJAX portion, let's spend a bit with JSON. We need some standard language that your frontend website can speak with your backend, someway to encode messages. Think of it like morse code: we need some way that both the sender and receiver of messages can encode their messages so it's understood by both.
 
 This is what JSON is. It stands for JavaScript Object Notation and it looks a lot like, surprise-surpise, JavaScript objects.
 

lessons/06-talking-to-servers/B-ajax.md

@@ -5,7 +5,7 @@ title: "AJAX"
 
 What is an API? An application programming interface is a URL that you can make requests to get information back from. It's like website but only for machines. It's a method that one computer can request information from another.
 
-> Note that API is also used to describe how something is used. If I wrote a dog object in JavaScript and gave it two methods: `eat()` and `bark()`, you could those two methods its "API". A similar but slightly different meaning for the word. I just point that out because it can be confusing. For the rest of this course, we're talking about endpoints that we can call to get data from.
+> Note that API is also used to describe how something is used. If I wrote a dog object in JavaScript and gave it two methods: `eat()` and `bark()`, you could call those two methods its "API". A similar but slightly different meaning for the word. I just point that out because it can be confusing. For the rest of this course, we're talking about endpoints that we can call to get data from.
 
 Now that we speak the language of APIs, let's dive into making some server requests. Let's walk through the hypothetical process.
 

lessons/06-talking-to-servers/D-project.md

@@ -51,7 +51,7 @@ You have two APIs to work with today:
 
 ## isLetter
 
-Use this function to test is a string is a single alphabetical string is a letter
+Use this function to test if a string is a single alphabetical letter
 
 ```javascript
 function isLetter(letter) {