Jennifer Bland header image
≡ Menu

Learn CSS: Create the Microsoft Logo (Version 2)

One of the best ways to learn CSS is by creating something useful while you learn. I will show you how to use the following CSS items by creating the Microsoft logo:

  • box-shadow

In a previous article, I showed you how to create the Microsoft Logo using CSS Grid. In this article, I will show you how to create the same logo using the box-shadow property.

What we will be creating

We will create the Microsoft logo in pure CSS. It will look like this:

Microsoft Logo

[continue reading…]

Learn CSS: Create the Microsoft Logo (Version 1)

One of the best ways to learn CSS is by creating something useful while you learn. I will show you how to use the following CSS items by creating the Microsoft logo:

  • CSS Grid
  • Multiple CSS Classes

What we will be creating

We will create the Microsoft logo in pure CSS. It will look like this:

Microsoft Logo

[continue reading…]

Learn CSS: Create the YouTube Logo

One of the best ways to learn CSS is by creating something useful while you learn. I will show you how to use the following CSS items by creating the YouTube logo:

  • flexbox
  • border-radius
  • how to create a triangle in CSS

What we will be creating

We will create the YouTube logo in pure CSS. It will look like this:

YouTube Logo

[continue reading…]

Learn CSS By Creating the Figma Logo in Pure CSS

One of the best ways to learn CSS is by creating something useful while you learn. I will show you how to use the following CSS items by creating the Figma logo:

  • flex-wrap

  • multiple classes

  • border-radius

What we will be creating

We will create the Figma logo in pure CSS. It will look like this:

figma logo

[continue reading…]

Horizontal Scrolling using CSS Grid

In this previous article, I showed how to do horizontal scrolling using flexbox. I was recently asked how to do the same scrolling but using CSS Grid instead. This article shows you how to do horizontal scrolling using CSS Grid.

Setting up my project

This project will contain the following files:

  • index.html
  • style.css

It will also include one folder called images. Inside this folder will be five images. The images in the folder are:

  • image1.jpg
  • image2.jpg
  • image3.jpg
  • image4.jpg
  • image5.jpg

[continue reading…]