Resume Building Using HTML & CSS

Introduction
Today designing Basic Resume, I see user profile pages with that classic split look — an avatar in a sidebar and a bigger section for their details. So today, I made template for it. To do this, I used CSS Grid for the layout columns and Flexbox to align the images just right. Here's how

Source Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .container {
            border: 1px solid rgb(246, 6, 166);
            height: 100vh;
            width: 65vw;
            margin: auto;
            display: grid;
            grid-template-columns: 10fr 20fr;
        }
        .left{
            border: 1px solid rgb(217, 249, 10);
            display: flex;
            justify-content: center;

        }
        .right{
            border: 1px solid rgb(12, 178, 244);
        }
        img{
            border: 1px solid rgb(77, 16, 16);
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="container">


        <div class="left">
            <img src="download.jpg" alt="avatar">

        </div>



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

</html>

HTML Tags

<div>
The <div> tag defines a division or a section in an HTML document. It is used as a container for HTML elements. A <div> is a block-level element, meaning it naturally starts on a new line and takes up the full width available. It carries no inherent visual meaning on its own. Instead, we use the class attribute (container, left, right) to group elements together so we can Target and style them cleanly using CSS.
**<img src="download.jpg" alt="avatar">**
The <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages.
src The source attribute. It provides the exact relative path file name of your image. alt="avatar" is the alternate text attribute. Essential for web accessibility, it describes the image out loud to screen readers and displays text as a backup if your image file fails to load or get deleted.

CSS Properties

box-sizing:border-box;:
Changes the default CSS box model calculations. By default, adding padding or borders to an element makes its total size wider than your designated width. border-box forces the browser to pull padding and borders inward, meaning a box set to a width of 100px will stay exactly 100px wide.
height: 100vh;:
Viewport Height unit. 100vh means this main container will scale dynamically to occupy precisely 100% of the browser's view window height.
width: 65vw;:
Viewport Width unit. Constrains the content wrapper box to exactly 65% of the total screen width, preventing layout stretching on super-wide monitors.
display: grid;:
Activates the CSS Grid Layout Module, shifting children formatting rules from traditional block flow into a rigid, cell-based coordinate layout system.
margin: auto;:
Tells the browser engine to automatically compute and split the remaining 35% of unused screen space equally between the left and right sides. This acts as the standard method for centering block containers cleanly on desktop layouts.
grid-template-columns: 10fr 20fr;:
Defines the column parameters of your grid using Fractional units (fr). Instead of pixels, fr divides up dynamic remaining free space. Here, the columns split into 30 total parts (10 + 20). The left column gets 10 parts, and the right gets 20 parts—creating a fluid 1:2 layout ratio.
display: flex;:
Activates the CSS Flexible Box Layout Module (Flexbox) for this element's direct children. Flexbox is highly optimized for aligning content linearly inside a container.
justify-content: center;:
It moves through flex direction (Flex default direction Row) Aligns flex children along the main horizontal axis. This centers your inside avatar photo perfectly horizontally inside the boundaries of the left column container.
align-item;:
It moves through oppsite to flex direction (Flex default direction Row then it moves through column) Enters the child elements perfectly between the top and bottom edges of the parent container.

While justify-content aligns items horizontally (left to right), align-items aligns elements vertically (top to bottom) inside a Flexbox container.

推荐订阅源

DEV Community