Github and Website Workshop/new-page-grid

From OpenHatch wiki
Jump to navigation Jump to search

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

GH-Website-Mockup2.png

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[edit]

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[edit]

  • <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[edit]

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