Learn CSS: Create the Google Logo

Jennifer Bland
4 min readJan 4, 2023

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 Google logo:

  • position relative and absolute
  • pseudo classes ::before and ::after
  • positioning an element that is absolute
  • transform: translateY
  • create triangle

What we will be creating

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

Create our starter files

Let’s start by creating two files called index.html and style.css. In your index.html file add the following starter code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Google Logo</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>

In the style.css file add the following starter code:

body{ padding: 0; margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: azure; }

Dissecting the Google Logo

--

--

Jennifer Bland
Jennifer Bland

Written by Jennifer Bland

Software Engineer. Google Developers Expert. Keynote Speaker. Entrepreneur. Mountain Climber. Neil Diamond fan. World traveler. jenniferbland.com & codeprep.io

No responses yet