In this weeks class we created version 3 of Baskerville using HTML and CSS. We added in a grid table web fonts and images.

Below is a link to my Github profile:

https://github.com/karolinekato/baskerville

Viewport

A viewport is the area on a screen that is visible. A good example of this is when we use tablets or smartphones everything has to shrink to fit the screen. The goal of a viewpoint is to make content built for a PC legible for all types of screen sizes without having to zoom in or out.

<aside> <img src="/icons/code_blue.svg" alt="/icons/code_blue.svg" width="40px" /> <meta name="viewport" content="width=device-width, initial-scale=1">

</aside>

Building tables in HTML

For the next class exercise we had to create a table with content. The data will be organised into rows and columns.

HTML

<table>
            <caption>Foundries that offer versions of Baskerville</caption>
                <tr>
                    <th>Hot type</th>
                    <th>Cold type</th>
                    <th>Digital type</th>
                </tr>
                <tr>
                    <td>Deberny & Peignot</td>
                    <td>Autologic</td>
                    <td>Linotype</td>
                </tr>
                <tr>
                    <td>Fry Foundry</td>
                    <td>Berthold</td>
                    <td>URW++</td>
                </tr>
                <tr>
                    <td>American Type Founders</td>
                    <td>Compugraphic</td>
                    <td>Hell AG</td>
                </tr>
                <tr>
                    <td>Lanston Monotype</td> 
                    <td>Monotype</td>
                    <td>Bitstream</td>
        
                </tr>
        </table>

CSS

/*-- Styling Table--*/
table {
margin: auto;
display: table;
border-collapse: collapse;
border-spacing: 2px;
margin-bottom: 2rem;
width: 100%;
}

caption {
margin: 1.5em 0;
text-transform: uppercase;
letter-spacing: 1px;
}

th {
    text-transform: uppercase;
    font-weight: normal;
    text-align: left;
    color: white;
    background: slategray;
    border: 2px solid white}

th,td {padding: 0.6em;}

table, td {
    background:peachpuff;
    border: 2px solid white;}

Above is the HTML and CSS code I created for the Baskerville webpage. we firstly opened and closed the table using <table> and </table>

Next we inserted these codes into the table:

• <caption> The main caption for the table
• <tr> The table rows
• <th> The table header
• <td> The table data

Going over to CSS we linked each code as you can see above, The main focus was to add in background colour, a border and suitable font weight and letter spacing. Below is the final result of my table I used the colours slategray and peachpuff for the colour palette as it complimented my image header.

Images

The term optimising in short is the process of reducing the size of a file without ruining the image resolution. We use optimisation in webpages so they load faster which is extremely important.

Using a image from Unsplash The next step was to crop our image on Photoshop using the dimensions 2509px x 1673px. This would be the size I would use for all my images apart from my header.

Next we opened photoshop and made sure that the image size fitted the megabytes below or at least were in a close range to the set numbers:

• RAW 12MB