DEV Community

Cover image for Starting the Onboarding Flow - Building SaaS #49
Matt Layman
Matt Layman

Posted on • Originally published at mattlayman.com

2 3

Starting the Onboarding Flow - Building SaaS #49

In this episode, we worked on the progress element that will display in every step of the onboarding flow. I added some labels and styled the banner using Tailwind CSS. At the end of the stream, we boxed in the shape of the welcome page with some placeholder elements.

The very first thing I did was insert a top bar that was unstyled to the top of the welcome page. We added some placeholder text for each of the steps in the onboarding flow. After that, I started styling the UI until it took shape.

We talked about design elements like color and spacing and some aesthetic qualities that help make a user interface feel better.

After completing a first cut of the top bar navigation, I shifted to the welcome page and added vector art and placeholder text to give the page some life.

This article first appeared on mattlayman.com.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay