Github and Website Workshop/new-page-grid

From OpenHatch wiki

Welcome to Challenge 10 of the Github and Website Workshop - creating a new page with a grid

The goal of this challenge is to create a page called portfolio.html to provide information on your projects in an organized manner

1. From the terminal, run touch portfolio.html to create this new page.

2. Copy and paste the contents of index.html into portfolio.html.

3. Erase the contents of <main> in portfolio.html

We do this because the <head> and <header> should be the same when navigating between pages

HTML

We will not being using the <table> tag to create the grid

General rule of thumb: don’t use tables to create a page layout (as you may have noticed we have been using <div> tags to do so), use them for tabular data.

What if we aren't using a grid for page layout? It’s good practice to mimic the functionality of <table> through <div> tags

  • For instance if you want to make your site responsive, it will be far easier to do so using <div> tags
    • (Responsive Web Design implies the formatting of Website design in a way that it most optimal for viewing and navigation across a wide range of devices, including traditional PCs, smartphones and tablet devices)

<section id=”portfolio”> houses the section containing the grid

Table to divs

  • <div class=”table”> mimics <table>
  • <div class=”table-row”> mimics <tr>
  • <div class=”table-cell”> mimics <td>

Challenge: make a 2x2 table (or however big you want it to be to show your projects)

Solution


CSS

How on earth do we mimic a table and its rows and columns?

Thankfully, there are table related attributes for the display property! 

div.table {
  display: table;
  table-layout: fixed; /* All cells will have equal width */
  width: 100%;
  text-align: center; /* Centers the table in the section */
}

Save the changes and reload index.html. When you’re satisfied, commit and push the changes.

But wait, we haven’t defined div.table-row and div.table-cell! See the next challenge.

Next: Challenge 10

Retrieved from "https://wiki.openhatch.org/wiki/Github_and_Website_Workshop/new-page-grid?oldid=15978"