Merge pull request #1619 from ironhack-labs/uros/update/simplify-iterations

Simplify lab iterations and fix grammar

Author: sandrabosk

README.md

@@ -6,7 +6,7 @@
 
 **Slack** is a cloud-based set of team collaboration tools and services, or in simpler terms, an online chat application.
 
-We use Slack app almost every day to keep our communications with our classmates and the **Ironhack** team, but today we will be focusing on their landing page. In today's lab, we'll recreate Slack's landing page while ensuring it's responsive and adapts well to different screens. You can see the web page that we will be cloning [here](https://www.figma.com/proto/k77VYVA70WcPYRLvg4QmIf/LAB-CSS-Slack-Clone?node-id=125%3A3&scaling=scale-down-width&page-id=125%3A2&starting-point-node-id=125%3A3&hide-ui=1).
+We use the Slack app almost every day to keep our communications with our classmates and the **Ironhack** team, but today we will be focusing on their landing page. In today's lab, we'll recreate Slack's landing page while ensuring it's responsive and adapts well to different screens. You can see the web page that we will be cloning [here](https://www.figma.com/proto/k77VYVA70WcPYRLvg4QmIf/LAB-CSS-Slack-Clone?node-id=125%3A3&scaling=scale-down-width&page-id=125%3A2&starting-point-node-id=125%3A3&hide-ui=1).
 
 
 
@@ -42,7 +42,7 @@ The `starter_code` folder contains all the files you'll need. The `images` folde
 
 
 
-**The `index.html` already contains all the text and content needed.  We will be focusing on the CSS and the styling!**
+**The `index.html` already contains all the text and content needed.  We will be focusing on the CSS and styling!**
 
 
 
@@ -54,11 +54,11 @@ During each iteration, the first step you should do is to inspect the provided s
 
 ## Iteration 0 | Introduction to Figma
 
-The first step during every iteration will be to inspect the design files. These were created using Figma are usually handed of to developers by designers. [Figma](https://www.figma.com/) is a web-based UI (User Interface) design tool, used for creating design prototypes for websites and applications.
+The first step during every iteration will be to inspect the design files. These were created using Figma and are usually handed off to developers by designers. [Figma](https://www.figma.com/) is a web-based UI (User Interface) design tool, used for creating design prototypes for websites and applications.
 
-Figma is great because it allows designers and developers to collaborate on projects while also making it simple to share and preview the web page designs.
+Figma is great because it allows designers and developers to collaborate on projects while also making it simple to share and preview web page designs.
 
-When you begin working as a developer, it is very likely that your team will use Figma to handoff the designs of the features you will be asked to create. We're going to assume you've never seen Figma before, so don't worry. The following short videos should get you up to speed:
+When you begin working as a developer, your team will likely use Figma to hand off  to you the designs of the features you will be asked to create. We're going to assume you've never seen Figma before, so don't worry. The following short videos should get you up to speed:
 
 - [What is Figma?](https://www.youtube.com/watch?v=_d8GG2QZYAM)
 - [Figma for Frontend developers [ in 5 minutes ]](https://www.youtube.com/watch?v=hbN9RGcQFNU)
@@ -87,7 +87,7 @@ Use the following page screenshot as the guide:
 
 <details>
   <summary>Screenshot - Mobile Screens</summary>
-  <img src="https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/m1/lab-flexbox-slack/Home+Page+-+420px.png" width="200px"/>
+  <img src="https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/m1/lab-flexbox-slack/Slack+Home+Page+-+420px.png" width="200px"/>
   <br/>
 
   [Back to top](#iteration-1--mobile-screens-width--768px)
@@ -118,13 +118,15 @@ You can inspect the page styles here:
 
 ### Iteration 2 | Small Screens (width > 768px and width < 1024px)
 
-Let's start growing our screen size. Focus on small screens (iPads, tablets or bigger smartphones). Notice we have some changes. You need to work on the following ones: 
+Let's start growing our screen size. In this iteration, you will work on making the website look great on small screens (iPads, tablets, or larger smartphones). You will have to use CSS [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to apply the style and layout changes. Take a look at the preview and the screenshot to see the changes that are needed. Your task is to work on the following:
 
-- The **header** should go from 1 column to display 2 columns; one with the content and buttons and the other with the image.
-- The **company logos** should be displayed in a single row
+
+
+- The **header** should go from 1 column to display 2 columns: one with the content and buttons, and the other with the image.
+- The **company logos** should be displayed in a single row.
 - The **images** in the sections in the **main** part should be fully displayed and aligned to the left or right side of the page, respectively.
-- The **section "Team large and small rely on Slack"** should have the list items and the buttons displayed horizontally as rows.
-- The **subfooter** items, previously displayed as a column, should now be displayed in a single row.
+- The **section "Teams large and small rely on Slack"** should have the list items and the buttons displayed horizontally as rows.
+- The **sub-footer** items, previously displayed as a column, should now be displayed in a single row.
 
 
 
@@ -140,7 +142,7 @@ Use the following page screenshot as the guide:
 
 <details>
   <summary>Screenshot - Small Screens</summary>
-  <img src="https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/m1/lab-flexbox-slack/Home+Page+-+768px.png" width="550px"/>
+  <img src="https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/m1/lab-flexbox-slack/Slack+Home+Page+-+768px.png" width="550px"/>
   <br/>
 
   [Back to top](#iteration-2--small-screens-width--768px-and-width--1024px)
@@ -170,12 +172,12 @@ You can inspect the page styles here:
 
 ### Iteration 3 | Medium Screens (width > 1024px and width < 1440px)
 
-The easiest change we will have. We'll continue by focusing on the meduim screen size devices (notebooks and bigger tablets):
+We'll continue by focusing on devices with medium-sized screens (notebooks and bigger tablets). Similar to the previous iteration, you will have to use CSS media queries to apply the style and layout changes. The most noticeable changes for this viewport size are:
 
 
 
 - The **navbar** should now display all the menu links. The previously displayed menu icon should now be hidden.
-- The **sections** in the **main** part should now display the content in 2 columns; one column for the heading and text and the other for the image.
+- The **sections** in the **main** part should now display the content in 2 columns: one column for the heading and text, and the other for the image.
 - The **section "Welcome to your new digital HQ"** should now have the buttons displayed horizontally as rows.
 
 
@@ -192,9 +194,10 @@ Use the following page screenshot as the guide:
 
 <details>
   <summary>Screenshot - Medium Screens</summary>
-  <img src="https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/m1/lab-flexbox-slack/Home+Page+-+1024px.png" />
+  <img src="https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/m1/lab-flexbox-slack/Slack+Home+Page+-+1024px.png" />
   <br/>
 
+
   [Back to top](#iteration-3--medium-screens-width--1024px-and-width--1440px)
 </details>
 
@@ -219,11 +222,15 @@ You can inspect the page styles here:
 
 
 
-### Iteration 4 | Large Screens (width > 1440px)
+### BONUS: Iteration 4 | Large Screens (width > 1440px)
+
+Last one! Some small changes and we are done! In this iteration we are targeting large-screen devices such as desktops and laptops:
 
-Last one! Some small changes and we are done! In this iteration we are targeting the large screen devices such as desktops and laptops:
 
-- The **sign up buttons** in the **header** should now be displayed horizontally, next to each other. Additionally, the image shown in the **header** should be centered and fully visible.
+
+- The **signup buttons** in the **header** should now be displayed horizontally, next to each other.
+
+- Additionally, the image shown in the **header** should be centered and fully visible.
 
 
 
@@ -239,10 +246,11 @@ Use the following page screenshot as the guide:
 
 <details>
   <summary>Screenshot - Large Screens</summary>
-  <img src="https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/m1/lab-flexbox-slack/Home+Page+-+1440px.png" />
+  <img src="https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/m1/lab-flexbox-slack/Slack+Home+Page+-+1440px.png" />
   <br/>
 
 
+
   [Back to top](#iteration-4--large-screens-width--1440px)
 
 </details>