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…


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:


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

With an interactive hover experience for our image gallery, it’s time to include a preview overlay.

We’ll be using a bit of JavaScript to make this happen.

Within our script tags, we need to grab all the items. Then for each of those items, we assign an event listener to pick up any clicks. When a click happens, the custom function we define called handleClick will run.

const items = document.querySelectorAll('.item');items.forEach(item => item.addEventListener('click', handleClick));

We haven’t written the handleClick function. …


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

In part 2 we created an image gallery that shuffles the tiles around to try fit every image without spaces as the window gets resized.

Now we look into improving how the images are presented, as well as adding hovering effects for clicking functionality.

At the moment, all the images are shown at full size, which means anything that spans less than 4 is cropped out. …


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

Now that we have images generated within our gallery, we can begin applying CSS Grid and custom styling to size our images.

To begin, we give our container the ability to use CSS Grid:

.gallery {
display: grid;
}

Each grid cell needs to be 100px wide. We don’t know how many columns we need as it will depend on the width of the window — so we’ll use auto-fill to help us determine this.

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}

We don’t know how…

Emily Y Leung

Creative. Problem solver. Weekly: 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