Learn CSS: Create the Google Logo
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; }
