DEV Community

Alaguselvan T
Alaguselvan T

Posted on

Project-2(Resume Building)

#css #html

Day-6
Attribute?
In HTML, an attribute is extra information added to an element to define its behavior, appearance, or other properties.

An attribute is always specified inside the opening tag and usually comes in the form
Example:<tagname attribute_name="attribute_value">Content</tagname>

Must Declare css ?
Because all browser already have some padding and margin .To remove all inbuild css we want to make all as 0px in style tag.

*{
padding:0px;
margin:0px;
box-sizing:border-box;
}
Enter fullscreen mode Exit fullscreen mode

Difference b/w % and vh and vw?
%-Percentage vh-viewportheight vw-viewportwidth
%-Based on the parent size
vh&vw -It will choose the entire screen size not the parent

Css Grid Layout
CSS Grid Layout is a powerful layout system that allows you to create complex web page layouts with ease. It provides a grid-based layout system, with rows and columns, making it easier to design web pages

display:grid;
grid-template-columns:1fr 2fr;
Enter fullscreen mode Exit fullscreen mode

fr-fractional unit or frame

Css flexbox
CSS Flexbox is a layout module designed to help align and distribute space among items in a container, even when their size is unknown or dynamic. It is particularly useful for creating responsive layouts that adapt to different screen sizes

display:flex;
flex-direction:column;---->direction to go
justify-content:center;---->always follow row direction(if not mentioned)
align-items:centerl
Enter fullscreen mode Exit fullscreen mode

Project header:
code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resume</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        .container{
            border: 1px solid red;
            height:100vh;
            width: 65vw;
            margin:auto;
            display: grid;
            grid-template-columns: 1fr 2fr;
        }
        .left{
            border: 1px solid black;
            display: flex;
            justify-content: center;  
        }


        .right{
             border: 1px solid blue;
        }


    </style>
</head>
<body>
    <div class="container">
     <div class="left">
        <img src="profile.jpg" alt="profile image" height="150px" width="150px"><br>



    </div>
    <div class="right">

    </div>
    </div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output:

Top comments (0)