Create User Business Card | HTML & CSS Tutorial

Introduction

In this project, you will learn how to create a user business card with HTML and CSS. The goal is to create a visually appealing and well-structured business card that can be used to showcase a user's information.

👀 Preview

🎯 Tasks

In this project, you will learn:

How to set up the project and open the necessary files
How to center the card and user avatar elements using CSS
How to horizontally center the left text elements (level and points)

🏆 Achievements

After completing this project, you will be able to:

Structure an HTML page for a business card
Use CSS to style and position elements on the page
Apply techniques for centering elements both horizontally and vertically

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css(("`CSS`")) -.-> css/CSSPreprocessorsGroup(["`CSS Preprocessors`"]) css(("`CSS`")) -.-> css/CodingStandardsandBestPracticesGroup(["`Coding Standards and Best Practices`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/BasicStylingGroup -.-> css/fonts("`Fonts`") css/BasicStylingGroup -.-> css/text_styling("`Text Styling`") css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/CoreLayoutGroup -.-> css/positioning("`Positioning`") css/AdvancedLayoutGroup -.-> css/flexbox("`Flexbox`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") css/CSSPreprocessorsGroup -.-> css/import_and_extend("`Import and Extend`") css/CodingStandardsandBestPracticesGroup -.-> css/comments("`Comments`") subgraph Lab Skills css/selectors -.-> lab-300116{{"`Create Visually Appealing Business Card`"}} css/colors -.-> lab-300116{{"`Create Visually Appealing Business Card`"}} css/fonts -.-> lab-300116{{"`Create Visually Appealing Business Card`"}} css/text_styling -.-> lab-300116{{"`Create Visually Appealing Business Card`"}} css/box_model -.-> lab-300116{{"`Create Visually Appealing Business Card`"}} css/margin_and_padding -.-> lab-300116{{"`Create Visually Appealing Business Card`"}} css/borders -.-> lab-300116{{"`Create Visually Appealing Business Card`"}} css/width_and_height -.-> lab-300116{{"`Create Visually Appealing Business Card`"}} css/display_property -.-> lab-300116{{"`Create Visually Appealing Business Card`"}} css/positioning -.-> lab-300116{{"`Create Visually Appealing Business Card`"}} css/flexbox -.-> lab-300116{{"`Create Visually Appealing Business Card`"}} css/backgrounds -.-> lab-300116{{"`Create Visually Appealing Business Card`"}} css/transformations -.-> lab-300116{{"`Create Visually Appealing Business Card`"}} css/import_and_extend -.-> lab-300116{{"`Create Visually Appealing Business Card`"}} css/comments -.-> lab-300116{{"`Create Visually Appealing Business Card`"}} end

Set Up the Project

In this step, you will set up the project and open the files in the editor.

Open the project folder, which contains the following files and directories:

├── avatar.png ├── style.css └── index.html

Here:

index.html is the main page.

style.css is the file where you need to add the required styles.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Center the Card and Avatar

In this step, you will complete the TODO section in style.css to center the card and user avatar elements.

Locate the TODO section in the style.css file.

Add the necessary CSS rules to horizontally and vertically center the card (class = card) and user avatar (class = avatar) elements.

.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Save the changes to the style.css file.

Refresh the browser to see the finished result, the finished result is as follows:

Congratulations! You have successfully completed the User Business Cards project.

Create Visually Appealing Business Card