Responsive Process Steps: HTML & CSS Tutorial for Beginners

Reading time 23 minutes

In this tutorial, we’ll walk through the process of creating a visually appealing and responsive process steps section using HTML and CSS. This type of section is commonly used on websites to illustrate a sequence of steps, such as a process for signing up, making a purchase, or, in this case, finding health treatment. The code we’ll be using is designed to be both functional and aesthetically pleasing, with animated hover effects and responsive behavior across different screen sizes.

Prerequisites:

Basic understanding of HTML and CSS
A text editor (e.g., VS Code, Sublime Text, Notepad++)
A web browser (e.g., Chrome, Firefox, Safari)

Step 1: Setting up the HTML Structure

First, let’s create the HTML structure for our process steps section. This code defines the basic layout and content of the section.

<div class="pmsteps-container">
    <h1 class="pmsteps-title" style="text-align:center;font-weight:normal;">The Simplest Process for Finding Health Treatment at <br> <strong>Zero Cost, Zero Worries & complete peace of mind</strong></h1>
    <div class="pmsteps-process">
        <div class="pmsteps-step pmsteps-step-1"><div class="pmsteps-step-circle">1</div><div class="pmsteps-step-label">Explore & Match</div><div class="pmsteps-step-connector"></div></div>
        <div class="pmsteps-step pmsteps-step-2"><div class="pmsteps-step-circle">2</div><div class="pmsteps-step-label">Doctor Opinion & Diagnosis</div><div class="pmsteps-step-connector"></div></div>
        <div class="pmsteps-step pmsteps-step-3"><div class="pmsteps-step-circle">3</div><div class="pmsteps-step-label">Cost Estimate</div><div class="pmsteps-step-connector"></div></div>
        <div class="pmsteps-step pmsteps-step-4"><div class="pmsteps-step-circle">4</div><div class="pmsteps-step-label">Medical Visa</div><div class="pmsteps-step-connector"></div></div>
        <div class="pmsteps-step pmsteps-step-5"><div class="pmsteps-step-circle">5</div><div class="pmsteps-step-label">On Filed Assistance</div><div class="pmsteps-step-connector"></div></div>
        <div class="pmsteps-step pmsteps-step-6"><div class="pmsteps-step-circle">6</div><div class="pmsteps-step-label">Treat & Get Fit</div><div class="pmsteps-step-connector"></div></div>
    </div>
    <div style="text-align:center;">
      <div class="pmsteps-footer-note" style="display:inline-block;">
      *We do not collect any charges
    </div>
    </div>
</div>

pmsteps-container: This is the main container that wraps the entire process steps section.
pmsteps-title: This is the heading for the section, providing a clear title for the process. The style attribute is used for basic in-line styling, centering the text and setting the font weight. Using inline styles is not the best practice but it is helpful in situations to quick styling or where styles might be dynamic.
pmsteps-process: This container holds the individual steps of the process.
pmsteps-step: Each of these represents a single step in the process. The pmsteps-step-1, pmsteps-step-2, etc., classes are used to apply specific styles to each step.
pmsteps-step-circle: This is the circular element that displays the step number.
pmsteps-step-label: This is the text label that describes the step.
pmsteps-step-connector: This element creates the connecting lines between the steps.
pmsteps-footer-note: This provides a short note for the bottom.

Step 2: Basic CSS Styling

Now, let’s add some basic CSS styling to structure the layout. We’ll start by setting up the main structure of the process steps.

body{
  margin: auto 2%;
}

.pmsteps-process {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for responsive behavior */
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: relative;
    padding: 2rem 0;
}

.pmsteps-step {
    flex: 1;
    text-align: center;
    min-width: 120px; /* Ensure each step has a minimum width */
    max-width: 200px; /* Limit maximum width for better spacing on smaller screens */
    position: relative;
    min-height: 90px;
    overflow: hidden; /* Ensure the pseudo-element stays within bounds */
}

body: sets margin for the entire body of the HTML page.
pmsteps-process:
- display: flex: This enables flexbox layout, which allows us to easily arrange the steps in a row.
- flex-wrap: wrap: This allows the steps to wrap onto multiple lines when the screen is too narrow to display them all in a single row, enabling responsive behavior.
- justify-content: space-between: This distributes the steps evenly across the container, with equal space between them.
- align-items: center: This vertically aligns the steps in the center of the container.
- gap: 1rem: Adds a gap between each flex item (here each flex item is the steps).
- position: relative: This sets the positioning context for the step connectors.
- padding: 2rem 0: This adds padding to the top and bottom of the process steps container.
pmsteps-step:
- flex: 1: This allows each step to take up an equal amount of space in the row.
- text-align: center: This centers the content within each step.
- min-width: 120px: sets the minimum width of the step to 120px.
- max-width: 200px: sets the maximum width of the step to 200px.
- position: relative: This sets the positioning context for the step connectors.
- min-height: 90px: Ensures each step is at least 90px tall.
- overflow: hidden: Hides any overflowing content.

Step 3: Styling the Step Circle and Label

Next, let’s style the circle and label within each step.

.pmsteps-step-circle {
    width: 30px;
    height: 30px; /* Ensure consistent height */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin: 0 auto 1rem; /* Consistent margin for all steps */
    transition: transform 0.3s ease;
    position: relative;
    left: -75px; /* Keep the left positioning but ensure alignment */
    top: 0; /* Reset any unintended top positioning */
}

.pmsteps-step-label {
    font-size: clamp(0.8rem, 2vw, 1rem);
    margin-top: 10px; /* Add consistent spacing between circle and label */
    position: absolute;
    bottom: 10px;
    right: 15px;
    width: 120px;
    font-weight: 600;
    padding-bottom:10px;
}

pmsteps-step-circle:
- width: 30px; height: 30px: Sets the width and height of the circle to create a square.
- border-radius: 50%: Makes the square into a circle by setting the border radius to 50%.
- display: flex, align-items: center, justify-content: center: Centers the step number within the circle.
- font-size: 14px, font-weight: bold, color: #fff: Styles the text (step number) to be white, bold, and 14 pixels in size.
- margin: 0 auto 1rem: Sets the margin to center the circle horizontally and add spacing below it.
- position: relative: set position relative so we can position inside it absolute.
- left: -75px: set left to -75px.
pmsteps-step-label:
- font-size: clamp(0.8rem, 2vw, 1rem): uses the clamp function to make it responsive, setting a minimum, dynamic and maximum sizes.
- margin-top: 10px: Adds spacing between circle and label.
- position: absolute, bottom: 10px, right: 15px, width: 120px: Allows you to overlap the label and have it stay in the bottom right

Step 4: Styling the Step Connector

The step connector is the line that visually links the steps together. Let’s style it.

.pmsteps-step-connector {
    position: absolute;
    width: 2px;
    height: 50px; /* Consistent height for all connectors */
    top: 10px; /* Align with the bottom of the circle */
    left: 11% !important; /* Center the connector under the circle relative to its parent */
    transform: translateX(-50%) translateY(15px); /* Adjust vertically to align with circle bottom and center horizontally */
    z-index: 2;
}

pmsteps-step-connector:
- position: absolute: Positions the connector relative to its containing .pmsteps-step.
- width: 2px, height: 50px: Sets the width and height of the connector line.
- top: 10px: set top to 10px so it will connect to bottom part of circle.
- left: 11% !important: set left to 11% to position it center.
- transform: translateX(-50%) translateY(15px): Moves to the center of the step.

Step 5: Adding Color Progression

To make the process steps visually appealing, let’s add a color progression to the circles, connectors, labels, and bottom borders.

/* Color progression for step circles, connectors, labels, and the bottom border (via ::after) */
.pmsteps-step-1 .pmsteps-step-circle { background-color: #4a47a3; }
.pmsteps-step-1 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #4a47a3, #4a47a3 2px, transparent 2px, transparent 4px); }
.pmsteps-step-1 .pmsteps-step-label { color: #4a47a3; }
.pmsteps-step-1::after { background-color: #4a47a3; }

.pmsteps-step-2 .pmsteps-step-circle { background-color: #007bff; }
.pmsteps-step-2 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #007bff, #007bff 2px, transparent 2px, transparent 4px); }
.pmsteps-step-2 .pmsteps-step-label { color: #007bff; }
.pmsteps-step-2::after { background-color: #007bff; }

.pmsteps-step-3 .pmsteps-step-circle { background-color: #00b4d8; }
.pmsteps-step-3 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #00b4d8, #00b4d8 2px, transparent 2px, transparent 4px); }
.pmsteps-step-3 .pmsteps-step-label { color: #00b4d8; }
.pmsteps-step-3::after { background-color: #00b4d8; }

.pmsteps-step-4 .pmsteps-step-circle { background-color: #0096c7; }
.pmsteps-step-4 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #0096c7, #0096c7 2px, transparent 2px, transparent 4px); }
.pmsteps-step-4 .pmsteps-step-label { color: #0096c7; }
.pmsteps-step-4::after { background-color: #0096c7; }

.pmsteps-step-5 .pmsteps-step-circle { background-color: #2ecc71; }
.pmsteps-step-5 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #2ecc71, #2ecc71 2px, transparent 2px, transparent 4px); }
.pmsteps-step-5 .pmsteps-step-label { color: #2ecc71; }
.pmsteps-step-5::after { background-color: #2ecc71; }

.pmsteps-step-6 .pmsteps-step-circle { background-color: #27ae60; }
.pmsteps-step-6 .pmsteps-step-connector { background: repeating-linear-gradient(to bottom, #27ae60, #27ae60 2px, transparent 2px, transparent 4px); }
.pmsteps-step-6 .pmsteps-step-label { color: #27ae60; }
.pmsteps-step-6::after { background-color: #27ae60; }

This CSS assigns different background colors to the circles, connectors, labels, and bottom borders for each step. The .pmsteps-step-1, .pmsteps-step-2, etc., classes are used to target each step individually.

.pmsteps-step-* .pmsteps-step-circle: Styles the background color of the circle for each step.
.pmsteps-step-* .pmsteps-step-connector: Styles the background color of the connector line for each step.
.pmsteps-step-* .pmsteps-step-label: Styles the text color of the step label for each step.
.pmsteps-step-*::after: Styles the background color of the bottom border for each step using the ::after pseudo-element.

Step 6: Adding Bottom Border with Rounded Corners

To add a subtle visual touch, let’s add a bottom border with rounded corners to each step.

/* Step bottom border with rounded corners */
.pmsteps-step::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px; /* Match the border thickness */
    border-radius: 0 0 10px 10px; /* Rounded corners at the bottom */
    z-index: -1; /* Place behind other content */
}

.pmsteps-step::after:
- content: ”: This is required for pseudo-elements to be displayed.
- position: absolute: Positions the border relative to the step element.
- bottom: 0, left: 0: Positions the border at the bottom of the step.
- width: 100%, height: 10px: Sets the width to fill the step and the height to 10 pixels.
- border-radius: 0 0 10px 10px: Adds rounded corners to the bottom of the border.
- z-index: -1: Places the border behind the step’s content.

Step 7: Adding Hover Animations

To make the process steps more interactive, let’s add hover animations to the step circles.

/* Custom hover animations for the step circle */
.pmsteps-step:hover .pmsteps-step-circle {
    animation: pmsteps-tada 0.5s ease-in-out, pmsteps-swing 0.5s ease-in-out, pmsteps-balloon 0.5s ease-in-out; /* Combine all three animations */
    transform: scale(1.1); /* Keep the existing scale effect */
}

/* Custom Animation: Tada (shaking and slight scaling) */
@keyframes pmsteps-tada {
    0% { transform: scale(1); }
    10%, 20% { transform: scale(1.1) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1.1) rotate(0); }
}

/* Custom Animation: Swing (pendulum-like motion with left-to-right/right-to-left movement) */
@keyframes pmsteps-swing {
    0% { transform: rotate(0deg) translateX(0); }
    20% { transform: rotate(15deg) translateX(10px); } /* Swing right and move right */
    40% { transform: rotate(-10deg) translateX(-10px); } /* Swing left and move left */
    60% { transform: rotate(5deg) translateX(5px); } /* Swing right and move right (smaller) */
    80% { transform: rotate(-5deg) translateX(-5px); } /* Swing left and move left (smaller) */
    100% { transform: rotate(0deg) translateX(0); } /* Return to center */
}

/* Custom Animation: Balloon (gentle bouncing/floating effect) */
@keyframes pmsteps-balloon {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

.pmsteps-step:hover .pmsteps-step-circle: This targets the circle within a step when the step is hovered over.
- animation: pmsteps-tada 0.5s ease-in-out, pmsteps-swing 0.5s ease-in-out, pmsteps-balloon 0.5s ease-in-out: Applies the pmsteps-tada, pmsteps-swing, and pmsteps-balloon animations to the circle, creating a combined effect.
- transform: scale(1.1): Increases the scale of the circle by 10% on hover.

Step 8: Adding Footer Note

Let’s add footer note

.pmsteps-footer-note {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem 2rem;
    background-color: #f0f8ff;
    color: #666;
    border-radius: 20px;
    font-size: clamp(0.8rem, 2vw, 1rem);
    display: inline-block;
}

pmsteps-footer-note:
- text-align: center: Centers the text
- margin-top: 2rem: Add a margin to the top
- padding: 1rem 2rem: Add padding to the top and to the sides
- background-color: #f0f8ff: Sets the background color
- color: #666: Set text color
- border-radius: 20px: Add border radius to the note, making it a circle
- font-size: clamp(0.8rem, 2vw, 1rem): uses the clamp function to make it responsive, setting a minimum, dynamic and maximum sizes.
- display: inline-block: set the display as an inline-block, making it a block element that’s not as big as the whole width.

Step 9: Adding Fade-in Animations

To create a smooth entrance effect, let’s add fade-in animations to the steps.

/* Animations */
@keyframes pmsteps-fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.pmsteps-step {
    animation: pmsteps-fadeIn 0.5s ease-out forwards;
}

.pmsteps-step:nth-child(1) { animation-delay: 0.1s; }
.pmsteps-step:nth-child(2) { animation-delay: 0.3s; }
.pmsteps-step:nth-child(3) { animation-delay: 0.5s; }
.pmsteps-step:nth-child(4) { animation-delay: 0.7s; }
.pmsteps-step:nth-child(5) { animation-delay: 0.9s; }
.pmsteps-step:nth-child(6) { animation-delay: 1.1s; }

@keyframes pmsteps-fadeIn: Defines the fade-in animation, which starts with the element being transparent and slightly below its final position, and ends with the element being fully visible at its final position.
.pmsteps-step:
- animation: pmsteps-fadeIn 0.5s ease-out forwards: Applies the fade-in animation to each step, making them fade in and slide up over 0.5 seconds.
.pmsteps-step:nth-child(n): Adds a delay to the animation for each step, creating a staggered effect.

Step 10: Adding Responsive Design

To ensure that the process steps look good on different screen sizes, let’s add some responsive design using media queries.

/* Responsive design */
@media (max-width: 576px) {
    /* Mobile View: Single step per row */
    .pmsteps-process {
        flex-direction: column; /* Stack steps vertically */
        align-items: center; /* Center steps */
        gap: 1.5rem; /* Increase gap for better spacing */
        padding: 1rem 0; /* Reduce padding for mobile */
    }

    .pmsteps-step {
        flex: 100%; /* Full width for each step */
        min-width: 100%; /* Ensure full width */
        max-width: 100%; /* Ensure full width */
        margin: 0; /* Remove margins for stacking */
    }

    .pmsteps-step-circle {
        left: 0; /* Center circle on mobile */
        margin-bottom: 0.5rem;
    }

    .pmsteps-step-label {
        position: static; /* Reset to static positioning for stacking */
        width: auto; /* Allow full width */
        margin-top: 0.5rem; /* Adjust spacing */
        right: auto; /* Reset right positioning */
        bottom: auto; /* Reset bottom positioning */
    }

    .pmsteps-step-connector {
        display: none; /* Hide connectors on mobile since steps stack */
    }

    .pmsteps-line {
        display: none; /* Hide the horizontal line on mobile */
    }

    .pmsteps-step::after {
        border-radius: 0; /* Remove border radius on mobile for simplicity */
    }

    /* Remove hover animations on mobile for better usability */
    .pmsteps-step:hover .pmsteps-step-circle {
        animation: none;
        transform: scale(1); /* Reset scale on mobile hover */
    }
}

@media (min-width: 577px) and (max-width: 1024px) {
    /* Tablet View: 2–3 steps per row */
    .pmsteps-process {
        flex-wrap: wrap; /* Allow wrapping for 2–3 steps */
        justify-content: space-around; /* Distribute steps evenly */
        gap: 1rem; /* Maintain gap */
    }

    .pmsteps-step {
        flex: 0 1 calc(33.33% - 1rem); /* Approximately 3 steps per row, accounting for gap */
        max-width: calc(33.33% - 1rem); /* Limit to about 1/3 of the container width */
        min-width: 120px; /* Minimum width to ensure readability */
    }

    .pmsteps-step-circle {
        left: -75px; /* Maintain desktop positioning */
    }

    .pmsteps-step-label {
        position: absolute; /* Keep label positioned absolutely */
        bottom: 10px;
        right: 15px;
        width: 120px;
    }

    .pmsteps-step-connector {
        left: 50%; /* Center the connector under the circle */
        transform: translateX(-50%) translateY(15px); /* Maintain alignment with circle */
    }

    .pmsteps-line {
        display: block; /* Keep the horizontal line visible */
    }

    .pmsteps-step::after {
        border-radius: 0 0 10px 10px; /* Maintain rounded corners */
    }

    /* Adjust for narrower tablets (2 steps per row) */
    @media (max-width: 768px) {
        .pmsteps-step {
            flex: 0 1 calc(50% - 1rem); /* 2 steps per row on narrower tablets */
            max-width: calc(50% - 1rem); /* Limit to half the container width */
        }
    }
}

@media (min-width: 1025px) {
    /* Desktop View: All 6 steps in a single row */
    .pmsteps-process {
        justify-content: space-between; /* Distribute steps evenly across the full width */
    }

    .pmsteps-step {
        flex: 1; /* Allow equal distribution */
        max-width: 200px; /* Maintain maximum width */
        min-width: 120px; /* Maintain minimum width */
    }

    .pmsteps-step-circle {
        left: -75px; /* Maintain desktop positioning */
    }

    .pmsteps-step-label {
        position: absolute; /* Keep label positioned absolutely */
        bottom: 10px;
        right: 15px;
        width: 120px;
    }

    .pmsteps-step-connector {
        left: 50%; /* Center the connector under the circle */
        transform: translateX(-50%) translateY(15px); /* Maintain alignment with circle */
    }

    .pmsteps-line {
        display: block; /* Keep the horizontal line visible */
    }

    .pmsteps-step::after {
        border-radius: 0 0 10px 10px; /* Maintain rounded corners */
    }
}

Mobile View (max-width: 576px):
- Stacks the steps vertically using flex-direction: column.
- Centers the steps using align-items: center.
- Hides the connectors and lines as they are not needed in a vertical layout.
- Resets positioning for labels and circles.
Tablet View (min-width: 577px and max-width: 1024px):
- Wraps the steps to fit 2–3 steps per row.
- Maintains the connector lines and positioning.
- Adjusts the width of the steps for smaller screens.
Desktop View (min-width: 1025px):
- Displays all six steps in a single row.
- Maintains the connector lines and positioning.

Demo: Codepen

You can re-edit or use it in your project!

Conclusion

By following these steps, you can create a visually appealing and responsive process steps section using HTML and CSS. This type of section is a great way to illustrate a sequence of steps on your website, providing a clear and engaging user experience.

This detailed tutorial breaks down the code into manageable sections, explaining the purpose of each CSS property and how it contributes to the overall design. The inclusion of responsive design ensures that the process steps section looks good on all devices.

Here are five Amazon product suggestions that could be relevant for someone learning to code and build web components like this one:

Learning Resource: “HTML and CSS: Design and Build Websites” by Jon Duckett: A highly visual and beginner-friendly book that covers the fundamentals of HTML and CSS.
Code Editor: VS Code Power User Course: While VS Code is free, a good course can unlock its advanced features and boost productivity. Search for Udemy or Skillshare gift cards on Amazon.
Colorimeter – for choosing accessible color palettes: Datacolor SpyderX Pro (Could include a general search link if specific model hard to find): A colorimeter can help ensure your color palettes are accessible for users with visual impairments, a crucial aspect of good web design.
Large Monitor: 27-inch Monitor – for better screen real estate while coding: More screen space makes coding and debugging easier.
Ergonomic Keyboard: Logitech MX Keys Advanced Wireless Illuminated Keyboard : Comfortable keyboard for long coding sessions.

5454

Creating a Responsive Process Steps Section with HTML and CSS15 min read

Table of Contents