User Card Design Tutorial with HTML & CSS (No JS!)

In web design, a card is a self-contained rectangular block that displays related pieces of information in a visually organized manner. Cards are used to present various content types, such as user profiles, team member information, product listings, blog excerpts, or social media posts. They often consist of an image, text elements, and sometimes buttons or links for interaction.

This tutorial guides you through creating a stylish and functional user card using only HTML & CSS, without relying on JavaScript. By following this step-by-step approach, you'll learn the fundamentals of building and customizing user cards with basic HTML and CSS techniques.

Prerequisites:

This tutorial assumes a basic understanding of HTML and CSS syntax. Familiarity with basic webpage structure and CSS styling properties will be helpful.

Step 1: Building the HTML Structure

First, let's create the basic HTML framework for our user card:

HTML

                        
<!DOCTYPE html>

<html>

<head>

    <title>User cards</title>

</head>

<body>

    <div class="card">

        <img class="avatar" src="user.jpg" alt="user">

        <div>

            <h2>Username</h2>

            <p>User bio and details</p>

            <button class="open-profile-button">Connect</button>

        </div>

    </div>

    <!-- Add more cards here -->

</body>

</html>

This code uses the following elements:

div: We use a div element to define the overall container for the user card structure. For ease of access we give our cards the classname 'card'. That way, when we add more cards we can easily style them without using additional code.
img: This element adds the user's profile picture with appropriate src and alt attributes.
h2: This element displays the user's name as a heading.
p: This element contains the user's bio or other relevant information.
button: This element creates a button with customizable text.

Step 2: Styling the User Card with CSS

Next, we'll use CSS to style the appearance and layout of the user card:

CSS

                        
body {

  background-color: #f4f4fa;

}



.card {

  display: inline-block;

  width: 150px;

  height: fit-content;

  border: 1px solid #lightgrey;

  box-shadow: 5px 5px 10px lightgrey;

  padding: 20px;

  margin: 16px;

  background-color: white;

}



.avatar {

  display: block;

  width: 120px;

  height: 120px;

  margin: auto;

  object-fit: cover;

  border-radius:50%;

}



h2 {

  text-align: center;

  color: #009688;

}



p {

  text-align: center;

  color: grey;

}



.open-profile-button {

  display: block;

  color: white;

  background-image: linear-gradient(to bottom, #4CAF50, #009688);

  border: none;

  border-radius: 15px;

  padding: 8px 16px;

  margin: 16px auto;

}

This CSS code defines styles for:

Body: Sets a light gray background color.
Card: Defines the card's overall layout, including dimensions, borders, shadow, and padding.
Avatar: Styles the user's profile picture with size, positioning, and rounded corners.
Text elements: Sets text alignment and color for the username and bio.
Button: Applies styling for the button, including background gradient, color, and border.

If you open your HTML file your cards will look like this:

web page with button centered on the screen

Customization and Further Exploration:

This is a basic example to get you started. You can customize it further by:

Changing colors and fonts: Explore different color palettes and fonts to match your design preferences.
Adding hover effects: Implement CSS hover effects to make the card elements more interactive, such as changing colors or adding subtle animations.
Responsive design: Adapt the layout using CSS media queries to ensure optimal display on various screen sizes.

By experimenting with these techniques, you can build creative and engaging user cards for your web projects using just HTML and CSS. Feel free to explore additional resources and tutorials to learn more advanced styling options and functionalities.