Merge pull request TheOdinProject#43 from msespos/fix-punctuation-and-grammar-flex-READMEs

codyloyd · web-flow · commit 93ef8fb7adeb · 2021-10-04T12:35:35.000-05:00
Fix punctuation and grammar in Flex READMEs
diff --git a/flex/02-flex-header/README.md b/flex/02-flex-header/README.md
@@ -1,6 +1,6 @@
 # A Basic Header
 
-Use flexbox rules to create this very common webpage header style. The benefit to using flex here is that everything should be _flexible_. Check out the two screenshots below to get an idea for how it should scale with your screen. Besides flex rules, you'll also want to add some rules for margin and padding. (hint: `ul`s have some default margin/padding that you will need to deal with)
+Use flexbox rules to create this very common webpage header style. The benefit to using flex here is that everything should be _flexible_. Check out the two screenshots below to get an idea of how it should scale with your screen. Besides flex rules, you'll also want to add some rules for margin and padding. (Hint: `ul`s have some default margin/padding that you will need to deal with.)
 
 ## Desired Outcome
 
@@ -11,8 +11,8 @@ wide:
 ![wide](./desired-outcome-wide.png)
 
 ### Self Check
-- There is space between all items and the edge of the header (specific px amount doesn't matter here)
+- There is space between all items and the edge of the header (specific px amount doesn't matter here).
 - Logo is centered vertically and horizontally.
-- list-items are horizontal, and are centered vertically inside the header
+- list-items are horizontal, and are centered vertically inside the header.
 - left-links and right-links are pushed all the way to the left and right, and stay at the edge of the header when the page is resized.
-- This exercise does not use floats, inline-block, or absolute positioning.
+- Your solution does not use floats, inline-block, or absolute positioning.
diff --git a/flex/03-flex-header-2/README.md b/flex/03-flex-header-2/README.md
@@ -1,6 +1,6 @@
 # Another common header style
 
-We're starting to sneak in a little more CSS that you haven't seen yet. Don't worry about this for now, we just want things to look a little bit prettier, and these things do not interfere with your task.
+We're starting to sneak in a little more CSS that you haven't seen yet. Don't worry about this for now; we just want things to look a little bit prettier, and this CSS will not interfere with your task.
 
 For this one you will probably need to edit the HTML a little bit. Often with flexbox you need to add containers around things to make them go where you need them to go. In this case, you probably want to separate the items that go on the left and right of the header.
 
@@ -18,4 +18,4 @@ As with the last example, this one needs to be flexible in the middle, with item
 - There is 8px space between everything and the edge of the header.
 - Items are arranged horizontally as seen in the outcome image.
 - There is 16px between each item on both sides of the header.
-- Used flex to arrange everything.
+- flex is used to arrange everything.
diff --git a/flex/04-flex-information/README.md b/flex/04-flex-information/README.md
@@ -1,6 +1,6 @@
 # A very common website feature
 
-This exercise is to recreate a section that is found on many informational websites.
+The goal of this exercise is to recreate a section that is found on many informational websites.
 
 For this one you will need to edit the HTML a little bit too. We can't be making things _too_ easy for you. You'll want to add containers around the various elements so that you can flex them. Good luck!
 
@@ -10,10 +10,10 @@ For this one you will need to edit the HTML a little bit too. We can't be making
 
 ### Self Check
 
-- All items are centered on the page (horizontally, not vertically)
-- Title is centered on the page
-- 32px between the title and the 'items'
-- 52px between each item
-- Items are arranged horizontally on the page
-- Items are only 200px wide and the text wraps
-- Item text is centered
+- All items are centered on the page (horizontally, not vertically).
+- The title is centered on the page.
+- There is 32px between the title and the 'items.'
+- There is 52px between each item.
+- The items are arranged horizontally on the page.
+- The items are only 200px wide and the text wraps.
+- The item text is centered.
diff --git a/flex/05-flex-modal/README.md b/flex/05-flex-modal/README.md
@@ -2,7 +2,7 @@
 This one is another very common pattern on the web. The solution to this one is _simple_... but it might not be immediately obvious to you. You'll need to edit the HTML a bit to get everything where it needs to be.
 
 ### a hint
-Depending on how to approach this one, you might need to revisit the `flex-shrink` property to keep a flex item from getting smashed.
+Depending on how you approach this one, you might need to revisit the `flex-shrink` property to keep a flex item from getting smashed.
 
 ## Desired outcome
 
@@ -11,7 +11,7 @@ Depending on how to approach this one, you might need to revisit the `flex-shrin
 ### Self Check
 
 - The blue icon is aligned to the left.
-- There is equal space on either side of the icon (the gap between the icon and the edge of the card, and the icon and the text is the same).
+- There is equal space on either side of the icon (the gaps between the icon and the edge of the card, and the icon and the text, are the same).
 - There is padding around the edge of the modal.
 - The header, text, and buttons are aligned with each other.
 - The header is bold and a slightly larger text-size than the text.
diff --git a/flex/06-flex-layout/README.md b/flex/06-flex-layout/README.md
@@ -3,19 +3,19 @@
 Flexbox is useful for laying out entire pages as well as the smaller components we've already been working with. For this exercise, we're leaving you with a little more work to do, with some things you may not have encountered yet. It's perfectly acceptable to google things you're unsure of!
 
 ### Hints
-- you may want to search something like `CSS remove list bullets`.  We've done this for you in previous examples, but not here. Yay learning.
-- We've added `height: 100vh` to the `body`.. this makes the body exactly the same height as the viewport. To stick the footer to the bottom you will need to use flex and change the direction to column.
+- You may want to search something like `CSS remove list bullets`.  We've done this for you in previous examples, but not here. Yay learning.
+- We've added `height: 100vh` to the `body`... this makes the body exactly the same height as the viewport. To stick the footer to the bottom you will need to use flex and change the direction to column.
 
 ## Desired Outcome
 ![desired outcome](./desired-outcome.png)
 
 ### Self Check
 
-- Header is at the top of the page, footer is at the bottom and they stay in place if you resize your screen.
-- Header and footer have padding.
-- Links in header and footer are pushed to either side.
+- The header is at the top of the page, the footer is at the bottom, and they stay in place if you resize your screen.
+- The header and footer have padding.
+- The links in the header and footer are pushed to either side.
 - There is space between the links in the header and footer.
-- Footer has a light gray background (`#eeeeee`).
-- Logo, input and buttons are centered in the screen.
-- Buttons have an appropriate amount of padding.
+- The footer has a light gray background (`#eeeeee`).
+- The logo, input and buttons are centered in the screen.
+- The buttons have an appropriate amount of padding.
 - There is space between the logo, input and buttons.
diff --git a/flex/07-flex-layout-2/README.md b/flex/07-flex-layout-2/README.md
@@ -1,6 +1,6 @@
 # The Holy Grail of Layout
 
-In this last flexbox exercise you're going to recreate an incredibly common website layout. It is so common that it is often called the [holy-grail](https://www.google.com/search?q=holy+grail+layout&tbm=isch&sclient=img) layout.... and with flexbox it is actually pretty easy to pull off.
+In this last flexbox exercise you're going to recreate an incredibly common website layout. It is so common that it is often called the [Holy Grail](https://www.google.com/search?q=holy+grail+layout&tbm=isch&sclient=img) layout... and with flexbox it is actually pretty easy to pull off.
 
 As with the previous exercise, we've left a little more for you to do.
 
@@ -13,20 +13,20 @@ As with the previous exercise, we've left a little more for you to do.
 
 ![desired outcome](./desired-outcome.png)
 
-The number of cards lined up in that section will change based on the width of your screen, so don't stress about getting _exactly_ a 3x3 grid.
+The number of cards lined up in that section will change based on the width of your screen, so don't stress about getting _exactly_ a 2x3 or 3x2 grid.
 
-on a smaller screen it will look like this:
+On a smaller screen it will look like this:
 
 ![smaller](./desired-outcome-smaller.png)
 
 ### Self Check
-- Header text is size 32px, weight 900
-- Header text is vertically centered and 16px from the edge of the screen.
-- Footer is pushed to bottom of screen (footer may go _below_ the bottom of the screen if the content of the 'cards' section overflows and/or if your screen is shorter)
-- Footer text is centered horizontally and vertically.
-- Sidebar and cards take up all available space above the footer.
-- Sidebar is 300px wide (i.e. it doesn't shrink)
-- Sidebar links are size 24px, white and do not have the underline text decoration.
-- Sidebar has 16px padding.
-- There is 32px padding around the 'cards' section
-- Cards are arranged horizontally, but wrap to multiple lines when they run out of room on the page
+- The header text is size 32px and weight 900.
+- The header text is vertically centered and 16px from the edge of the screen.
+- The footer is pushed to the bottom of the screen (the footer may go _below_ the bottom of the screen if the content of the 'cards' section overflows and/or if your screen is shorter).
+- The footer text is centered horizontally and vertically.
+- The sidebar and cards take up all available space above the footer.
+- The sidebar is 300px wide (and it doesn't shrink).
+- The sidebar links are size 24px, are white, and do not have the underline text decoration.
+- The sidebar has 16px padding.
+- There is 32px padding around the 'cards' section.
+- The cards are arranged horizontally, but wrap to multiple lines when they run out of room on the page.
