Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

Today we look at building a Full Bleed Blog Layout inspired by Phillipp Rudloff.

Wesbos has provided us with a single base HTML file which also houses the base CSS at the bottom.

Below is what we’re working with.

CSS grid has shown it’s capabilities in application layouts, but in this project we tap into the benefits of using it for laying out text on a page.

To do this, we’ll turn the post into a grid with 3 columns, where:

• Most of the content is going…

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

Now we can begin adding some responsiveness to the website.

We’ll begin at the top with the top div.

At the moment, regardless of the size of the window, the layout is kept the same.

.top {
    display: grid;
    grid-template-areas:
        "hero hero cta1"
        "hero hero cta2"
    ;
    grid-gap: 20px;
}

What we would like to do is rearrange the layout depending on the width of the window. We can do this using media queries to adjust the layout at different widths.

In this case, we’ve defined two…

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

Today we’ll continue with the about and gallery section before adding some form of interactivity.

Starting off with the about section, the HTML has been setup so that we have an image next to some text wrapped in a class of about__details

<section class="about">
    <img src="images/queso-taco.png" alt="Yummy Taco" class="about__mockup">
    <div class="about__details">
        <h2>Featured Taco</h2>
        <p>Slim Profile, easy to hold and loaded with cheese.</p>
        <p>This is the one you have been waiting for</p>
        <button>Learn More →</button>
    </div>
</section>

We would like to style the about section by:

• adding 50px…

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

Moving onto the menu and features section.

At the moment, the menu buttons come as a list.

<nav class="menu">
    <button aria-expanded="false" aria-controls="menu-list">
        <span class="open">☰</span>
        <span class="close">×</span>
        Menu
    </button>
    <ul id="menu-list">
        <li>
            <a href="">Tacos</a>
        </li>
        <li>
            <a href="">Beers</a>
        </li>
        <li>
            <a href="">Wines</a>
        </li>
        <li>
            <a href="">Desserts</a>
        </li>
        <li>
            <a href="">Reservations</a>
        </li>
    </ul>
</nav>

To add some styling:

• turn the menu into a grid
• remove the padding
• remove the margin
• remove the bullet points so it’s only just text
• we want the menu buttons to be in their own…

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

Today we look at building a responsive website.

It’ll contain an insignificant amount of JavaScript for the menu buttons.

Wesbos has provided us with base HTML and CSS files.

Below is what we’re working with.

Basic Structure

Eventually, as we start applying CSS Grid, the design will look something like this:

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

Today we look at how we can imitate the way Bootstrap works.

For those of you who aren’t familiar with Bootstrap. It is a library that provides developers the ability to quickly create responsive websites from predefined classes assigned to HTML elements.

The power of Bootstrap comes from limiting the amount of CSS to be written as these elements have been made into a series of reusable components. …

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

In this post we look at fine tuning CSS for the code editors and settings footer.

Styling Code Editors

Each editor has a HTML structure like this:

Editor headers

At the moment the editor headers are vertically spaced. So we’ll:

• create a grid inside the editor header
• place the buttons and title in a single row
• push the right button to the far right
• remove the vertical stretch of the buttons
• give them a padding of 5px
• space them with a grid gap of 5px
• add a translucent background

.editor__header {…

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

In this post we look at fine tuning CSS for the pen header.

Styling Pen header

For the pen header, we’ll add:

• a black background
• a 5px border at the bottom of the header — using custom grey
• white text
• padding of 10px

We’ll start by defining our custom grey at the top of our CSS file.

:root {
    --grey: #343436;
};

To reference it, we call it as a variable: var(--grey)

.pen {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: column…