Amena
Let's make JavaScript logo with HTML and CSS! 💛

Let's make JavaScript logo with HTML and CSS! 💛

Amena 💫's photo
Amena 💫
·

4 min read

Table of contents

Heyy Smarties! 😎

How are you all doing? Hope you all are doing well!

Today we are gonna make a JS logo with HTML and CSS it's gonna be fun! 🥳

And when you'll make it you need to post on TWITTER and tag me so that I can know that YOU made it!

Let's start!

We'll make our logo in VS code...😎

1. Make files 📁

Step 2. Let's make 2 files like I have made index.html and styles.css

2. Install Live server💡

Step 1. In VS code install your live server Extension!

Step 2. After installing the Live server extension click on Go live:

image.png

You can see where is Go live👆

3. Let's Start 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>Document</title>
</head>
<body>

</body>
</html>

This is the Boilerplate and if you hit "!" then you will automatically find this out.

Let's name the title "JS Logo".

You need to "link" to the "styles.css" I have shown below in the 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">
    <link rel="stylesheet" href="styles.css">
    <title>JS Logo</title>
</head>
<body>
    <div class="main-logo">
        <h1>JS</h1>
    </div>
</body>
</html>

  • Now, in the body tag, we'll make the <div></div> LIKE THIS 👆

  • I have given the div class "main-logo" (You can name as you want)

  • Inside the div container, I have made the h1 tag and inside it the text is JS.

4. CSS starts 😉

Now, go to styles.css (MAKE SURE YOU link TO THE styles.css as I have done...)

.main-logo{
    width: 90px;
    height: 90px;
    background-color: #fff200;
}

  • Here we have pointed out our class "main-logo"

  • Inside it, I have made a Square by width and height and I have set the background color to almost Yellow...

OUTPUT:

Let's make it beautiful😜

body{
    background-color: black;
    position: relative;
}

.main-logo{
    width: 90px;
    height: 90px;
    background-color: #fff200;
    position: absolute;
}

  • If you don't know about Positioning in CSS. If we do "position-relative" It will be the parent. And after that "position-absolute," we can move the logo anywhere in the body.

  • Hopefully, you understood...

Let's make it in the Center...😉

body{
    background-color: black;
    position: relative;
}

.main-logo{
    width: 90px;
    height: 90px;
    background-color: #fff200;
    position: absolute;
    top: 40px;
    left: 130px;
}

Output:

So, now the main part is there to change the font...

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">

Explanation:

  • This link is from google fonts and I have found the same font...

  • Just paste this link in the head tag...

Let's take the last step into it...😉

body{
    background-color: black;
    position: relative;
}

.main-logo{
    width: 90px;
    height: 90px;
    background-color: #fff200;
    position: absolute;
    top: 40px;
    left: 130px;
    border: 2px solid white;
}

h1{
    position: absolute;
    top: 14px;
    left: 37px;
    font-family: 'Roboto', sans-serif;
    font-size: 45px;
    color: #211e1e;
}

So, this was the last step let's have the explanation part...👇

  • First and Foremost I have written here: "position-absolute" coz I wanna control it.

  • Then by the top and left I have styled it like the JS logo...

  • Then the font copy and paste...

  • After that the perfect size you want...

  • Lastly the color code of the text :)

  • One change is there that in the main-logo I have made the border so that it will look Amazing...😍

DONE:

Finally Finally Finally... 🎉🎉 We did it...

Final code...😎

HTML 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">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
    <title>JS Logo</title>
</head>
<body>
    <div class="main-logo">
        <h1>JS</h1>
    </div>
</body>
</html>

CSS code 👇

body{
    background-color: black;
    position: relative;
}

.main-logo{
    width: 90px;
    height: 90px;
    background-color: #fff200;
    position: absolute;
    top: 40px;
    left: 130px;
    border: 2px solid white;

}

h1{
    position: absolute;
    top: 14px;
    left: 37px;
    font-family: 'Roboto', sans-serif;
    font-size: 45px;
    color: #211e1e;
}

So, that's it for today guys... Hopefully, you enjoyed it and share it on Twitter that's a Challenge for you...😍

You must be like:

My Twitter account: Amena

Finally, Goodbye! Thanks for reading...😊

HTML5CSS2Articles1WeekJavaScriptcss flexbox