DEV Community

Cover image for My Web Development Journey Day-2: CSS 🎨
Bidut Sharkar Shemanto
Bidut Sharkar Shemanto

Posted on

My Web Development Journey Day-2: CSS 🎨

In module-2 I learned CSS.The topics that I covered:

1)3 way of CSS
2)CSS Syntex
3)Text-alignment
4)CSS Structure
5)CSS Selectors
6)ID vs Class
7)CSS Background Image
8)CSS Margin and Padding
9)CSS Box Shadow
10)CSS Box Model
11)Display: Inline, Block, Inline-block

I practised this by my own:

Image description

Image description

This the practise code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Reading List</title>
    <link rel="shortcut icon" href="./images/book.png" type="image/x-icon">
    <link rel="stylesheet" href="./styles/book.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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<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=Playwrite+US+Modern:wght@100..400&display=swap" rel="stylesheet">
</head>
<body>
    <div id="portion_1">
    <div class="section_1">
        <h1 id="name">Hi, I'm Shemanto Sharkar πŸ‘‹</h1>
        <p id="welcome">welcome to my website of Book List!</p>

    </div>
    <div class="section_2">
        <button class="button"><a href="">My LinedIn</a></button>
        <button class="button"><a href="">My Facebook</a></button>
        <button class="button"><a href="">My Youtube</a></button>
    </div>
    <div class="section_3">
        <img id="profile" src="./images/profile.png" alt="">
    </div>
</div>

    <div id="portion_2">
        <p>I am studying Energy Science and Engineering at KUET. I am in my last year.Now I am taking web development couse by programming Hero.I took this course becouse it is by Jhonkar Mahbub bhai.It will help me to get a job after I am graduated in 2025.</p>
    </div>

    <div id="portion_3">
        <img class="book" src="./images/download (1).jfif" alt="">
        <img class="book" src="./images/download.jfif" alt="">
        <img class="book" src="./images/images.jfif" alt="">
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

name {

font-family: "Playwrite US Modern", cursive;
text-align: center;
color: #000000;
font-weight: bold;
font-size: 40px;
margin-bottom: 0%;
Enter fullscreen mode Exit fullscreen mode

}

welcome{

text-align: center;
font-family: "Poppins", sans-serif;
font-weight: bold;
color: #595959;
margin-top: 0%;
font-size: 30px;
}

.section_2{
text-align: center;
margin: 5%;

}

.button{
background-color: #ffea3d;
color: #ffffff;
font-family: "Poppins", sans-serif;
font-weight: bold;
font-size: 20px;
padding: 10px 20px;
border: none;
border-radius: 10px;
cursor:pointer;
}

a{
text-decoration: none;
color: #000000;
}

profile{

display: block;
width: 300px;
margin: 0 auto;
Enter fullscreen mode Exit fullscreen mode

}

portion_2{

background-color: #ffea3d;
font-family: "Poppins", sans-serif;
font-size: medium;
padding: 2%;
margin: 5%;
border-radius: 10px;
text-align: center;
Enter fullscreen mode Exit fullscreen mode

}

.book{
display: inline-block;
width: 200px;
padding: 10px;
margin-left: auto;
margin-right: auto;
border: 10px solid #ffea3d;
border-radius: 5%;
}

portion_3{

text-align: center;
Enter fullscreen mode Exit fullscreen mode

}

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay