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

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

Written by amenaisabuwala on Jan 20th, 2023 ・ Views ・ Report Post

amenaisabuwala Visit User Profile

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

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

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...😊

Comments (0)