CSS Beginner Project: Stylish Profile Card

Step 1: Create Project Files

01. Create a folder named profile-card-project
02. Inside this folder, create three files:
  • index.html → The main HTML file.
  • style.css → The CSS file for styling.
  • profile.jpg → A profile picture image.

Step 2: Writing the HTML Code

01. <!DOCTYPE html> – Defines the document as an HTML5 document. 
				
					<!DOCTYPE html>
02. <html lang="en"> – The <html> tag is the root of the document, and lang=”en” specifies English as the document language. 
				
					<!DOCTYPE html>
<html lang="en">
03. The <head> section stores metadata like the document title and links to stylesheets. 
				
					<!DOCTYPE html>
<html lang="en">
<head></head>
04. <meta charset="UTF-8"> – This defines UTF-8 encoding, ensuring the document supports special characters and symbols. 
				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
05. The <meta name="viewport"> tag controls the layout and scaling of a webpage on mobile devices. 
				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

06. <title>Profile Card</title> – Sets the browser tab title.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card</title>
</head>

07. <link rel="stylesheet" href="styles.css"> – Connects the styles.css file to style the profile card.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card</title>
    <link rel="stylesheet" href="styles.css">
</head>
08. <body> – Contains all visible webpage content. 
				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body></body>

</html>

09. <div class="profile-card"> – A container that will hold the profile card content.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="profile-card"></div>
</body>

</html>
10. <img src="profile.jpg" alt="Profile Picture"> – The src="profile.jpg" – Specifies the source of the image file. alt="Profile Picture" – Provides alternative text that will be displayed if the image cannot be loaded. 
				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="profile-card">
        <img decoding="async" src="profile.jpg" alt="Profile Picture">
    </div>
</body>

</html>
11. <h2>Bornomala</h2> – The <h2> tag is used to display the name of the profile owner. It indicates that this text is a subheading. 
				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="profile-card">
        <img decoding="async" src="profile.jpg" alt="Profile Picture">
        <h2>Bornomala</h2>
    </div>
</body>

</html>