STEP 1: Upload Original Screenshot

Here's a screenshot of the original Skillshare homepage. The main content here is 930 pixels wide, and was not set to adjust responsively on smaller screen sizes.

----

STEP 2: Add Grid and Adjust Content to Fit for Desktop

We chose a grid based off the width of 930 pixels since all of our pages were using this width for the main content. With this approach we could roll out with updated responsive pages one at a time (without creating a jarring experience as users navigate from one page to another).

When the broswer is 990 pixels
- 12 columns, each 50 pixels wide
- 30 pixel wide gutters
- Flexible width padding on both sides of the content

When the window is between 989 and 810 pixels
- 12 columns, flexible in width
- 30 pixel wide gutters
- 60 pixel wide padding on both sides of the content

Below you can see the homepage content adjusted to fit within the new grid. Most notably, the rows of five items (projects and press coverage) became 4 items to fit. Since there are 12 columns, the amount of items needed to be divisible by 12 to fit properly. If I didn’t want to cut down on the number of items shown, I could have also done 6 smaller items, or added another row of 4 to make 8.

(shown at 1090 pixels wide)

----

STEP 3: Adjust the Grid and Content to Fit for Tablet

For browser windows below 810 pixels, we inserted our first breakpoint to make gutters slightly less wide (which allows for slightly wider columns). 

When the browser window is between 809 and 541 pixels wide:
- 12 columns, flexible in width
- 20 pixel wide gutters
- 40 pixel wide padding on both sides of the content

When the content is adjusted to this grid, you can notice that the images are smaller, but the text remains the same size to remain legible. Instead, the text wraps to the next line, which pushes the content below it farther down on the page.
At this breakpoint I also moved the ‘explore all classes ->’ link from the top right of the row to below the sub headers. You want to be aware of items converging from both sides. This is also true for the 'Ready to Join?’ box in the middle, where the text remains only 9 columns wide, wrapping before hitting the [SIGN UP] button.

(shown at 610 pixels wide)

----

Step 4:

For mobile devices, when the browser is below 540 pixels wide, we have another breakpoint. Because there is less screen real estate for columns, we reduced the number of columns from 12 to 6.

When the browser window is below 540 pixels wide:
- 6 columns, flexible in width
- 20 pixel wide gutters
- 20 pixel wide padding on both sides of the content

At this smaller width, multiple items cannot fit comfortably side by side. You’ll notice that a lot of the elements are now stacked in a longer scrolling page, such as the buttons in the header and rows of main content. Additionally header text was made center aligned.

(shown at 320 pixels wide)