Summary, Notes & Highlights

Photo by Andrew Neel on Unsplash

Beginning of April this year, I set out a challenge to learn CSS Grid in public as a way to solidify my understanding of learning a new topic with some form of accountability.

While the streak lasted for at least a month (yet, still having a couple more posts that I JUST finished recently), I reckon for the most part it was a successful outcome for the challenge.

Some things that I learned in the process:


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:


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:


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:


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:

.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:

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…


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

Today we take on another project of recreating Codepen using CSS — i.e. no JavaScript. So this will be a focused exercise into creating the layout with only CSS Grid.

Wesbos has provided us with base HTML and CSS which has no CSS Grid styling yet.

Below is what we’re working with.

Basic Structure

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

Emily Y Leung

Creative. Problem solver. Learning programming in public | emilyyleung.github.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store