We (Jess, Carmen, and Eda) are excited to announce the next installation of our free and online bootcamp. We support learners as they work their way through the freeCodeCamp Responsive Web Design curriculum. The bootcamp will start Friday, April 24th, and will run for 10 weeks until Friday, July 3rd.

Here’s what to expect:

• Live Streams: We’ll be streaming Monday to Friday at 15.00 UTC (you can check your timezone here), where we’ll go through the course material together on our YouTube channel, on Jess' Twitch channel and Carmen's Twitch channel. It’s also a chance to ask your questions! If you can’t join us live, the streams will be available offline to watch later.

• Guest Sessions: We’ll expand on our studies with guest sessions where professionals working in software engineering and related fields will talk about their craft.

• Community: To support each other and work together, we have a dedicated Discord channel in the freeCodeCamp Discord server (you can join here: https://discord.gg/KVUmVXA) to help you establish better connections with other learners working on freeCodeCamp material. We’ll also be including shared notes on our website.

• Calendar: We have a shared calendar of lessons we’ll be covering with a supportive and friendly group of learners alongside you.

• Newsletter: There’s no signup needed, but if you want weekly emails, you can also sign up for our newsletter.

How Does the Bootcamp Work?

Bad Website Club bootcamps have been running for a while, so if you've joined us in the past, this one is going to feel a little different.

As the freeCodeCamp course material has expanded, we have adapted our learning structure to reflect what’s in it.

We’re experimenting with a flipped classroom model, where learners do pre-reading and more solo work before classes to come into streamed sessions, prepared to support each other’s learning.

Also, learners will be able to contribute to shared lesson notes which we’ll be going over in unit reviews. We’ll be talking through some (not all!) of the workshop steps and offer space for Q&A in our live streams.

The labs and certification projects need to be done as solo work, but we’ll be looking at how to approach them together on streams and covering them in Q&As.

We’ll be moving fast, but there are no fixed deadlines! If you need more time, your progress will be saved on your freeCodeCamp account. Also, the videos and our Discord are available after the bootcamp ends.

Note that the bootcamp doesn't offer job placement support or 1:1 instructor support for learners due to the size and global distribution of our learners. But we’ll help you learn the skills that prepare you to pursue opportunities on your own.

Who We Are

Bad Website Club has been running free and online developer education programs since 2020. It's run by a small volunteer team (Jessica Rose, Carmen Huidobro, and Eda Eren – also thank you to wonderful Kiri who made all the art!). We focus on learning and experimenting over perfection, and believe that the web can be better when it includes everyone.

Also, it really is free: there’s no way to pay for it.

If you want to join us, you can download or subscribe to the full lesson calendar (for Google Calendar, use the iCal feed with these subscription instructions), follow us on our YouTube channel, on Jess' Twitch channel and Carmen's Twitch channel. You can also sign up for our weekly newsletter for lesson notes, show and tell projects, extra resources, and more.

Hope to see you soon!

I’ve been taking it one topic at a time. My last piece on system design principles received great feedback, and that encouragement has kept me going.

Lately, I’ve developed a deep interest in UI/UX design – not just out of curiosity, but because so many readers have been requesting a detailed guide. They want one that explains how to learn web design, how to apply it to real-world projects, and how AI is reshaping the field.

Looking back, my journey started six years ago as a software tester. From there, I transitioned into full-stack development, then DevOps. I also explored data analysis, and today I manage a full-time freelancing career alongside my farming work.

One thing I’ve learned along the way is that a strong portfolio can take you to places you’d never imagined.

I’ve had a portfolio for years, but now I’m completely rebuilding it from scratch to make it cleaner, smarter, and more reflective of who I’ve become as a developer.

In this tutorial, I’ll walk you through how I created my new portfolio and show you how you can build yours too – with the right structure, design, and a touch of copywriting magic to make it stand out.

What We’ll Cover:

• What is a Portfolio Website and Why Do You Need One?

• Important Portfolio Website Components

• How to Make Your Portfolio Website Stand Out

• How to use Figma to Design Your Own Portfolio

• Tools for Figma to Code Generation

• Copywriting for Your Portfolio

• Testing Benchmarks for a Portfolio Website

• Hosting Your Portfolio

• How to Use Your Portfolio Effectively

• Q&A

• Final Notes

• Conclusion

What is a Portfolio Website and Why Do You Need One?

A portfolio website is your own space on the internet where you can proudly show your best work, projects, and achievements. Think of it as your digital résumé, but far more visual and personal. Instead of just listing your skills or job titles, it lets people actually see what you’ve built, designed, or created, and this tells your story better than any document can.

It helps employers, clients, or collaborators understand your skills, experience, and creativity at a glance. While it’s beneficial for designers, developers, writers, and photographers, anyone who wants to share their work online can create one, from students and freelancers to business professionals.

Here’s why having a portfolio website matters:

• A collection of your best work: like a gallery where you keep your most impressive projects, artwork, or achievements all in one place.

• Your online identity: It’s your personal brand, showing who you are, what you do, and what makes your work stand out.

• A way to showcase your skills: Through images, videos, and live demos, it give people a clear picture of your talent and creativity.

• An open door for opportunities: People can visit your site, explore your work, and contact you directly for jobs, collaborations, or freelance work.

• A tool for career growth: A well-built portfolio helps you attract clients, get noticed by employers, and open doors to new partnerships.

In simple words, your portfolio website is your professional story told visually – a mix of your work, passion, and personality that helps the world see what you’re capable of.

Important Portfolio Website Components

Now that we know why a portfolio website matters, let’s look at the key components that make it stand out. Each part plays a role in showing who you are, what you can do, and how you can help others.

Since I’m a developer, and the people who have reached out to me are mostly tech enthusiasts, here I’ll give a technical portfolio example. But you can apply the learnings from this guide to build any type of portfolio for any niche/business.

1. Home Page: The First Impression

Your homepage is like the front door to your digital world. It should quickly tell visitors who you are, what you do, and why you’re worth hiring or collaborating with. Keep it clean, simple, and welcoming: just a few strong lines about your skills and what kind of projects you work on.

Tip: Use a short headline like “Hi, I’m Prankur – I build fast, user-friendly web apps.”

2. About Section: Your Story

This is where you make your connection with the audience. Share your journey: how you started, what drives you, and what kind of problems you love solving. Keep it conversational and honest. People love working with real humans, not buzzwords.

Tip: Add a professional but friendly photo (optional) here to make it more personal.

3. Projects / Work Section: Show, Don’t Just Tell

This is the heart of your portfolio. List your best projects – the ones that represent your strongest skills and the kind of work you want to keep doing. Each project should include:

• A short description of what it is.

• The tools or technologies you used.

• The challenge you solved.

• A screenshot or live demo link.

• GitHub link so that people can see how you code

Tip: 3–6 strong projects are better than 15 average ones. If you’re actively contributing to open source, you should add that to your portfolio, too.

4. Case Studies: Tell the Story Behind the Work

Case studies take your projects one step further. They explain your thinking process and how you understood the client’s problem, what steps you took, and what results you achieved. This helps potential employers or clients see your problem-solving skills, not just your designs or code.

Tip: Keep it short and focus on the “before → after” transformation.

5. Skills & Tools Section

List your key technical and creative skills, like HTML, CSS, JavaScript, React, Figma, or AI.
You can group them as:

• Frontend Tools

• Backend Tools

• Design Tools

• AI or Productivity Tools

Tip: Keep the list focused and highlight the tools you actually use, not every tool you’ve ever tried.

6. Testimonials: Social Proof (Optional)

People trust people. Include a few quotes or short testimonials from clients, teammates, or mentors who can vouch for your skills and professionalism. It instantly builds trust and credibility.

If you are just starting, you can add this section later on, as initially you won’t have testimonials. Once you start working, you can politely ask your clients to give their feedback on your work. Just make sure to get their permission to add it to your site.

Tip: Ask for a 2–3 sentence testimonial right after finishing a project.

7. Blog or Articles Section (Optional)

If you write tutorials or share knowledge, add a blog section. It helps you stand out as someone who not only builds but also teaches and communicates ideas clearly. It also boosts SEO and keeps your site fresh.

Tip: Even 2–3 strong, educational articles can make a huge difference.

8. Contact Section: Make It Easy to Reach You

Your contact page should be simple, visible, and welcoming. Include your email, social links (LinkedIn, GitHub, X/Twitter), and maybe a contact form. You can also add a small call to action like:

“Have a project in mind? Let’s connect.”

Tip: Place your contact link in the main menu. Don’t hide it.

9. Résumé / Downloadable CV (Optional)

If you’re job-hunting, include a link to download your latest résumé. You can also add a “quick summary” of your experience, education, and certifications directly on the website.

10. Call to Action (CTA)

Every great portfolio ends with a nudge – a simple next step for your visitor. It could be:

• “Let’s build something amazing together.”

• “Hire me for your next project.”

• “Check out my latest work.”

A clear CTA can help turn a visitor into a lead or follower.

Your portfolio is not just a gallery. It’s a storytelling tool. It tells the world what you can do, how you think, and what makes you unique. Make sure every section serves a purpose, looks clean, and reflects your real personality.

How to Make Your Portfolio Website Stand Out

1. Showcase Your Best Work
Only include your strongest and most relevant projects. Quality matters more than quantity. A few great examples of your work will create a much better impression than a long list of average ones.

2. Use High-Quality Images and Videos
Make sure your work looks clear and professional. Good visuals instantly catch attention and show that you care about presentation. Use clean screenshots, mockups, or short demo videos.

3. Write Clearly and Keep It Short
Explain your work and skills in simple, easy-to-read language. Avoid long paragraphs — most visitors just skim. A few lines that get straight to the point are enough.

4. Tell Your Story
Use your “About Me” section to share your journey — how you started, what you love building, and what kind of work you enjoy most. People connect more with stories than with just titles or resumes.

5. Keep Navigation Simple
Make sure visitors can easily find your projects, contact info, and other key details. A clean menu and clear layout help people focus on your work instead of figuring out where to click.

6. Keep It Updated
Whenever you finish a new project or learn a new skill, add it to your portfolio. An up-to-date portfolio shows that you’re active, learning, and growing in your field.

7. Optimise for SEO
Use the right keywords — the ones people might type when searching for your kind of work (like “frontend developer” or “Figma to code expert”). This helps your site appear in search results. Many AI-powered website builders can assist with basic SEO setup.

How to Use Figma to Design Your Own Portfolio

Designing your own portfolio might sound intimidating at first, but tools like Figma make the process surprisingly intuitive – even if you’re not a professional designer. With Figma, you can visually plan every section of your portfolio before turning it into a live website.

I’ve been learning web design and using Figma for a long time for my client projects. But here, I didn’t build the entire portfolio from scratch. I used Figma’s design inspiration library to get some ideas, and I built the portfolio based on that.

Let’s walk through how you can do that, step by step, using the layout shown below as an example:

1. Start With a Wireframe

Before adding colours or fancy visuals, begin with a simple wireframe. It’s basically a rough sketch of your portfolio layout.

In Figma, you can create frames for each section you want on your site:

• Hero section (your name, title, and call-to-action buttons)

• “What I Do Best” or skills

• Tech stack

• Featured projects

• Blog or article previews

• Services and pricing

• Contact form

This helps you get the structure right before focusing on design. Don’t worry about fonts or images yet – just boxes and text placeholders are enough.

Here’s a sample wireframe I created to visualise how everything should look before moving into Figma. It’s always a good idea to sketch or plan your design on paper first, as it helps you get a clear picture of the layout and refine details like colours, fonts, and spacing early on.

Once the wireframe is ready, you can start adding your preferred colours, typography, and images to bring the design to life. If you want to go a step further and understand how to choose the right colour palettes and fonts, it’s worth exploring design psychology — it plays a huge role in how people perceive your work.

2. Add Visual Hierarchy and Colour

Once your structure feels solid, start adding typography and colour to create a visual hierarchy. This helps the viewer’s eyes know where to focus first.

For example, in the sample design above, the hero section (at the top) instantly grabs attention with bold typography (“I build things for the web”) and a subtle background/hero image.

Use Figma’s colour styles to define a consistent palette. Try using about 3 to 4 shades that complement each other. Keep it minimal and professional. For text, you can choose neutral fonts like Poppins, Inter, or Roboto, which look great on both dark and light themes.

3. Create Components for Reuse

Figma allows you to turn recurring UI elements like buttons, cards, and tags into components. In the portfolio example here, notice how every project card, article preview, and pricing box follows the same layout. By creating a single card component and reusing it, you can easily maintain consistency and update everything in one go later.

In this design, I will be using a blog featuring component multiple times, so instead of designing it again and again, I have made it once, and I am now using it multiple times.

4. Add Your Content and Images

Now that your base design is ready, it’s time to make it personal. You can go ahead and replace placeholders with:

• Your best project screenshots (use mockups if needed),

• Professional headshot or relevant visuals,

• Real content, like your bio, skills, and service details.

Make sure you keep the spacing clean. It ensures all sections stay neatly aligned, even when you adjust or add new elements later.

In this hero section, I have used my name and colour and font of my choice on the left, and you can see the Styles showing all the colours I have used across the project.

5. Create Interactive Prototypes

Before exporting your design, use Figma’s Prototype Mode to link different pages together – for example, make “Projects” in the top navigation scroll smoothly to your project section. This gives you a working demo to test how users will experience your portfolio before you even write a single line of code.

You can also share this prototype with friends or mentors for quick feedback.

6. Export or Hand Off for Development

After testing your design in Prototype Mode when you’re satisfied, the final step is the handoff. Use the Export panel to download all required assets (icons, logos, images) in their correct formats. Then share the Figma file and go to Dev Mode, where you can inspect typography, spacing, sizes, and colour values. These exported assets and inspected specs are what developers use to create the live HTML/CSS code.

Note: The Dev Mode in Figma allows you to inspect CSS and export your stuff easily. Since I don’t have a paid Figma plan, I can’t show inspecting and exporting.

Designing your portfolio in Figma gives you full freedom over layout, colour choices, and how you present your personality. Keep it simple, prioritise usability, and design with clarity. Once the layout is complete and tested, converting it into a functional site becomes straightforward.

You can also use auto layout just by right-clicking on the design section components.

Auto Layout allows designers to define rules for spacing, direction, padding, and alignment of elements. This ensures layouts like buttons, lists, and cards instantly adapt (scale/shrink) to content changes or different screen sizes without manual adjustments.

Once you’ve built and tested your Figma layout, converting it into code becomes the easy part.

Tools for Figma to Code Generation

By the time you’re done with the wireframe and colours, and your portfolio is live on Figma, it’s time to convert that Figma design into code. There are two ways to do so:

• Manual Method

• AI Method

How to Manually Convert Figma Designs to Code

When you design a website or app in Figma, the next big step is turning that design into working code. Traditionally, developers have done this manually: inspecting each element, writing HTML, CSS, and then refining the layout in frameworks like React or Tailwind CSS.

It’s important to understand how this process is normally done by hand. This is the foundation that every frontend developer relies on — and it’s also what helps you evaluate and improve AI-generated code later.

When you design a website or app in Figma, the next step is to translate that visual layout into real HTML, CSS, and JavaScript. Developers usually start by examining each element in the design – its size, spacing, typography, colour, and layout rules – and manually rebuilding it in code.

Exporting Visual Assets

Using Figma’s Export panel, you download only what needs to be recreated visually in code:

• icons

• illustrations

• logos

• images or thumbnails

Most structural elements (buttons, cards, sections, containers) are not exported – you’ll need to build them using HTML and CSS.

Rebuilding the Layout with HTML and CSS

You’ll recreate the page section by section:

• Setting up the HTML structure

• Adding Flexbox or CSS Grid for layouts

• Applying typography exactly as specified in Figma

• Matching spacing using padding, margins, and gaps

• Defining colours using the hex codes from the Figma Inspector

If you’re using Tailwind CSS, this becomes a matter of applying the right utility classes, but the logic remains the same: everything is recreated manually.

Once you have your Figma layout ready, the real work happens inside your code editor (which for me is VS Code). Here’s how developers traditionally rebuild the UI one section at a time.

Set Up Your Project Structure

In VS Code, create your project structure. It’ll look something like this:

project/
 ├─ index.html
 ├─ styles.css
 ├─ /assets
 │    ├─ logo.svg
 │    ├─ hero-image.png
 │    └─ icons/

If you’re using React, this becomes the structure:

src/
 ├─ App.jsx
 ├─ components/
 ├─ index.css
 ├─ assets/

This structure mirrors what you saw in Figma: each major design section becomes a container or component.

Write the HTML Structure Section-by-Section

Now, you’ll look at the Figma frame and convert it to raw markup.

As an example, let’s look at the Hero Section.

Figma frame shows:

• a headline

• subtext

• a button

• an illustration

So your HTML becomes this:

<section class="hero">
  <div class="hero-content">
    <h1>Modern UI for Everyone</h1>
    <p>Beautiful designs built for speed and accessibility.</p>
    <button class="cta-btn">Get Started</button>
  </div>

  <img src="assets/hero-image.png" alt="Hero illustration" class="hero-img" />
</section>

You're essentially mapping each Figma layer onto an HTML element.

Build Layouts Using Flexbox or Grid

In Figma, layouts are visual. In HTML/CSS, you must translate the layout rules.

If Figma shows two columns (text + image), you’ll use Flexbox:

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

If Figma has a 3-card layout, you’ll use Grid:

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

You literally reconstruct the layout from scratch by interpreting the Figma frame’s structure.

Apply Typography Exactly as in Figma

Next, you’ll go to Figma, select a text layer, and check the Inspector:

• Font family: Inter

• Font size: 36px

• Line height: 44px

• Font weight: 700

• Letter spacing: -1%

Then recreate it like this:

.hero h1 {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

This is why developers need to know their fundamentals: AI tools often miss these fine details.

Recreate Spacing With Padding, Margins, Gaps

In Figma, spacing is visual. But in code, you must calculate and apply it.

Example Figma spacing:

• Padding inside a button: 16px vertical / 32px horizontal

• Margin below a heading: 24px

• Gap between elements: 32px

So you write this code:

.cta-btn {
  padding: 16px 32px;
}

.hero h1 {
  margin-bottom: 24px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

Everything must match the design. And in this case, spacing is what makes UI look polished.

Apply Colours Using Figma Hex Codes

In Figma Inspector:

• Primary Blue → #4A78FF

• Background → #F8FAFC

• Text → #1A1A1A

In your CSS:

body {
  background-color: #F8FAFC;
  color: #1A1A1A;
}

.cta-btn {
  background-color: #4A78FF;
  color: white;
}

You’ll need to manually copy each hex code into CSS, as this is where accuracy matters.

(If Using Tailwind) Apply Utility Classes Instead of Writing CSS

Switching back and forth between your Figma design and a separate CSS file can slow down your whole workflow. Tailwind CSS solves this by letting you write styles right inside your HTML using small, reusable utility classes.

In this section, you’ll learn how to take the exact pixel values you see in the Figma Inspector and turn them into Tailwind utilities.

Step 1: Understand Tailwind’s Spacing Scale

Tailwind doesn’t use raw pixel values. Instead, it uses a consistent spacing scale, usually based on a 4px grid.

Here’s the simple rule: Take the pixel value from Figma, divide by 4, and that number becomes your Tailwind utility.

Example:

Prefixes you should know:

• m = margin

• p = padding

• t, b, l, r = top, bottom, left, right

• x = horizontal (left + right)

• y = vertical (top + bottom)

Step 2: Converting Complex Padding

If your Figma element uses different padding for X and Y, convert each side separately.

Example:

Step 3: Converting Font Sizes

Tailwind doesn’t use pixel sizes for fonts. Instead, it uses semantic names – almost like T-shirt sizes.

Example:

This encourages typography consistency, instead of manually choosing random font sizes.

Why This Method Is So Fast

Once you get used to it, the workflow becomes second nature:

Figma value → divide by 4 → apply Tailwind class

No switching files. No naming CSS classes. No extra stylesheet bloat.

Just fast, direct, design-to-code translation.

Try It Yourself

Open a Figma component (like a button or a card) and check its spacing, padding, and font size in the Inspector. Then convert everything using the simple rules above.

Before long, you’ll be turning Figma designs into clean Tailwind code in seconds.

You still translate Figma to code manually.

Alright, back to our workflow:

Making It Responsive

You check how the design should behave on different screen sizes:

• stacking vs. side-by-side layouts

• font scaling

• spacing adjustments

• collapsing navigation or rearranging grids

This requires writing responsive styles and breakpoints, which AI tools can attempt but rarely perfect.

Why the Manual Way Is Important

Even though it takes more time, this approach teaches fundamentals that AI tools simply can’t replace:

• How spacing systems work

• How components behave in real browsers

• How layout changes across devices

• How to optimise for performance and accessibility

These skills allow you to inspect code intelligently and improve it wherever needed, which is almost always necessary, no matter which tool you use.

How to Use AI Tools to Convert Figma Designs to Code (Optional)

To speed up this process, you can now use AI-powered and automated Figma-to-code tools. These tools analyse the Figma file and instantly generate code that you can integrate into your tech stack.

There are multiple tools available in the market, like V0, Builder.io, and Kombai.

• V0 is A Vercel project focused on fast UI generation, integrated with Next.js workflows.

• Builder.io is visual CMS with Figma integration and a visual editor that can export components for web apps.

• Kombai is an IDE extension that converts selected Figma frames into React/NextJS/React Native code and offers repo-aware features.

Building Live

For demonstration purposes, I’ll be using Kombai, a VS Code extension. And since most of us developers spend a lot of time inside VS Code, it’s the perfect place to test it out.

To install it in VS Code, simply open the Extensions Marketplace, search for 'kombai', click 'Install' and open the extension.

Now, at the agent panel, click on the “Let’s get started” button and sign up or log in with your credentials.

Now it’s time to test the agent for real work. To do so, I’ll be using the Figma file attached to build this portfolio.

A few things to keep in mind as you get going:

• You’ll need to enable WebGL if Figma is not working on your browser.

• You need to know how to copy the Figma file link and how to export the design from Figma.

To copy the Figma design file link, open your Figma design file and simply select your desired design, select copy/paste, and then select copy link to selection. It will copy the complete design file URL.

You can also copy the link of any Figma component and follow the same approach to get the desired outcome.

Open the agent extension in VSCode and select the Figma (icon) agent at the bottom of the agent toolbar. It will open a new pop-up. In it, paste the link you copied to the design file (check the screenshot below). Then you can prompt the agent with what you want it to do with this Figma file.

In my case, I wanted to replicate the same design, so I gave this prompt along with my Figma design link:

“You are an expert UI/UX designer and your task is to build and replicate the entire Figma design in the HTML/CSS/JS code from the attached URL.“

After confirming this, the agent will start working to replicate the same design as you’ve seen in the Figma file.

And here are the results:

Now you have the full picture of both approaches and when to use each one.

Here is the live Project link - FCC FIGMA TO CODE

Here is the GitHub link for the project code - Github Code

Challenges in AI-Generated Code (and Why Developer Oversight Is Essential)

AI tools can speed up the design-to-code process, but the output is rarely production-ready. Most tools struggle with layout precision, accessibility, and responsiveness, especially in real-world designs. You should expect to review and improve various parts of the generated code, such as:

• Spacing and alignment issues: AI may misinterpret padding, margins, or grid spacing, so layouts often need manual adjustment.

• Responsive breakpoints: Most tools generate layouts for a single screen size. You still need to add tablet/mobile breakpoints and test them across devices.

• Semantic HTML: AI tends to use too many <div> elements instead of meaningful tags like <header>, <nav>, <section>, or <button>.

• Accessibility gaps: Missing alt text, improper labels, weak colour contrast choices, and a lack of ARIA(HTML Tags) attributes are common issues.

• Utility class overload (in Tailwind-based code): AI outputs long, repetitive class lists that need cleanup for maintainability.

• Inconsistent component structure: AI may generate components that aren’t reusable or follow naming conventions, so refactoring is often required.

• Tokens and theming: Colours, font sizes, and spacing may not map to design tokens unless manually corrected.

Because of these limitations, AI-generated code should be treated as a starting point, not a final product. You’ll still need to validate the logic, refine the structure, and ensure the final result meets real-world quality standards. AI reduces repetitive work, but you, as the developer, need to ensure the code’s correctness, accessibility, and long-term maintainability.

What I Prefer

The manual method gives you complete control and teaches you the fundamentals, which are essential for understanding how layouts, spacing, and components actually translate into real code.

When you write the HTML, CSS, and component structure yourself, you build a deeper understanding of how layouts, spacing, responsiveness, typography, and accessibility truly work under the hood. These fundamentals are what make you a strong frontend developer, and no automated tool can replace that learning.

AI-assisted design-to-code tools can help with speed – especially in the early stages when you just want a quick starting point. They remove some of the repetitive setup work, but the output almost always needs refinement.

In real projects, the most dependable workflow is a combination of both approaches: Use automation only for the boilerplate, then rely on your own frontend knowledge to clean up, reorganise, and fine-tune the interface so it meets real-world standards.

Personally, I still prefer coding my designs manually because it keeps me connected to the craft and helps me build muscle memory. It’s the only way to fully understand how the design translates into a live, responsive interface and how each decision affects performance and user experience.

AI tools don’t replace frontend developers. They simply support them. They handle repetitive tasks so you can focus on the skills that truly matter: clarity of structure, accessibility, responsive behaviour, and crafting an experience that feels polished and intentional.

Copywriting for Your Portfolio

Now that your portfolio is designed and coded, let’s turn our attention back to what it actually says.

Copywriting is the art of using words to convince people to take a specific action, like buying a product, signing up for a service, or visiting a website. It’s a mix of creativity and marketing, where words are used to sell ideas or products smartly and emotionally.

A copywriter writes many types of content, from sales pages, website text, and social media posts to ad scripts and emails. The goal is simple: to make people take action.

So what makes copywriting effective?

• Knowing your audience: A good copywriter understands what people need, what problems they face, and what motivates them.

• Using persuasive words: Words that spark emotions and make readers want to act.

• Clarity and impact: Keeping the message short, clear, and easy to understand.

• Consistent brand voice: Writing in a tone that matches the brand’s personality — whether it’s fun, professional, or inspiring.

How to Use Copywriting in Your Portfolio

Your portfolio isn’t just about showing your work – it’s about telling your story in a way that connects with people. That’s where copywriting comes in. Good copy turns your portfolio from a plain showcase into something that feels personal, clear, and convincing.

Here’s how you can use copywriting effectively while building your portfolio:

1. Start With a Strong Headline

The first line people see should instantly tell them who you are and what you do. For example:

“I build modern, responsive web apps that turn ideas into digital reality.”

Your headline is like your elevator pitch: short, powerful, and clear.

2. Tell Your Story

In the About Me section, don’t just list your skills. You should also tell visitors about your journey. Write about how you got started programming, what you’ve learned along the way, and what drives you. Keep it conversational and real, like you’re talking to a friend.

“I started coding six years ago with simple HTML pages. Today, I design full-stack apps and help startups bring their ideas to life.”

3. Write Benefit-Focused Descriptions

When you show your projects, don’t just describe what you built. Explain why it matters.

Instead of: “I built a task manager app.”
Try: “A simple, clutter-free task manager that helps users stay productive without distractions.”

This small change turns your project into a problem-solving story, not just a tech demo.

4. Add a Call-to-Action (CTA)

Every portfolio should guide visitors toward an action, like contacting you, checking your GitHub, or reading your blog.

Here are some examples:

“Want to collaborate? Let’s build something amazing together.”
“Looking for a developer who writes clean and efficient code? Reach out!”

A clear CTA shows confidence and gives people a direction.

5. Keep It Simple and Authentic

Avoid fancy words or buzzwords. Write like a human, not a brochure. Use simple, clear sentences that sound like your real voice.

Good copywriting is not about being clever – it’s about being clear and honest.

6. Maintain a Consistent Tone

Whether your style is formal or friendly, keep it the same across all pages – home, about, projects, and contact. A consistent tone helps build your personal brand and makes your portfolio feel professional.

Copywriting is the invisible thread that ties your portfolio together. It helps people not just see your work, but feel your story.

Testing Benchmarks for a Portfolio Website

Before your portfolio goes live, it’s important to test it so that you know it looks and works as it’s supposed to. A fast, responsive, and accessible site leaves a strong first impression, and benchmarks help you measure whether it’s up to your standards. And a well-tested site loads faster, ranks better, and gives users (and recruiters) a seamless experience.

Below are the key benchmarks you should always check, along with why they matter.

1. Page Load Time

This is the time it takes for your page to fully load after someone visits it. A fast-loading site feels smooth and professional, while a slow one instantly turns people away.

This matters because most visitors leave if a site takes more than 3 seconds to load. Tools like GTmetrix or Pingdom can help you track and improve page load speed by optimising images and reducing unnecessary scripts.

2. Core Web Vitals (LCP, INP, CLS)

Google uses Core Web Vitals to measure real-world user experience.

• LCP (Largest Contentful Paint): How quickly your main content becomes visible.

• INP (Interaction to Next Paint): How fast your site responds when users interact.

• CLS (Cumulative Layout Shift): How stable your layout is while loading.

These metrics directly affect how users perceive your site and also impact SEO ranking. You can test them on PageSpeed Insights.

3. Mobile Friendliness

Most people will view your portfolio on their phones, so it needs to look and work perfectly on smaller screens.

A mobile-optimised site not only improves user experience but also ranks better on Google’s mobile search results. Use responsive layouts and flexible grids to ensure smooth viewing on all devices.

4. Accessibility Compliance (WCAG)

Accessibility means making your portfolio usable for everyone, including people with disabilities.

This is important because following WCAG standards (like proper colour contrast, keyboard navigation, and alt text for images) shows professionalism and inclusivity. Tools like Lighthouse or WAVE can help you check how your portfolio ranks for key accessibility metrics.

5. SEO Best Practices

SEO isn’t just for businesses. It can also help your personal site appear when someone searches your name or skills.

If you add proper meta tags, structured headings (H1, H2, H3), and descriptive URLs, these features can help recruiters or clients find you more easily. A well-optimised portfolio often performs better on job searches and tech blogs.

6. Responsiveness (Interaction Delay)

Responsiveness measures how quickly your website reacts when users click or scroll. And a laggy interface feels unprofessional and hurts user engagement. By minimising heavy scripts and optimising animations, you ensure smooth, immediate feedback for every action.

7. Security Checks (HTTPS)

Even a simple portfolio needs HTTPS. It builds trust and protects both you and your visitors from data breaches. Browsers like Chrome now flag non-secure sites, so enabling SSL is a must.

8. Resource Size (HTML, CSS, JS, Images)

Heavy resources can slow everything down. Compressing files, minifying CSS/JS, and using next-gen image formats (like WebP) can dramatically improve speed and performance.

9. Browser and Device Compatibility

Not everyone uses Chrome on a laptop. So make sure you test your portfolio across major browsers (Chrome, Firefox, Safari, Edge) and devices (desktop, tablet, mobile). Simulated testing tools like DebugBear or Basemark Web help catch layout issues early.

10. Real User Monitoring (RUM)

Instead of just testing in a lab, RUM captures how real visitors experience your site. This helps you understand performance in real-world scenarios – on different devices, networks, and locations – and adjust your design based on real data.

Hosting Your Portfolio

Now it’s time to push your changes to GitHub and deploy them on a hosting provider of your choice. Hosting services play a crucial role in showcasing your work. Depending on the type of projects you build, here are some of the best free hosting options that I have used so far for my personal and professional projects.

• Vercel – Best for Next.js/React projects, offering seamless deployment inside the Vercel ecosystem.

• GitHub Pages – Great for hosting static websites and personal portfolios.

• Netlify – Ideal for frontend-heavy projects with easy deployment and CI/CD integration.

Your portfolio is ready, and you can share it anywhere with just a link.

How to Use Your Portfolio Effectively

Now that your portfolio is ready, it’s time to use it the right way. Whether you’re applying for a job, pitching to a freelance client, or simply networking with like-minded people, your portfolio is your strongest asset.

Think of it as your digital introduction. It not only shows what you’ve built but also how you think and work. The key is to use it smartly in the right context.

Let’s say you come across a job post or want to reach out directly to a recruiter or a company founder. Instead of just sending a plain résumé, you can make your message stand out by attaching your portfolio link. Here’s an example of how you can do it:

Example email/direct message:

Hi [Hiring Manager/CEO Name],

I’m Prankur, a Full Stack Developer from India with over 6 years of experience building mobile and web applications.

I came across the opening for [Job Title/Role] at your company and believe my skills align perfectly with what you’re looking for.

You can explore my work here: [Portfolio URL]

I’m available to start immediately and excited about the opportunity to contribute to your team and codebase.

Best regards,

Prankur Pandey

This small but professional touch – including your portfolio link in every email, proposal, or LinkedIn message – increases your chances of being noticed. A well-presented portfolio speaks louder than a résumé, and it helps recruiters or clients quickly understand your skills, design sense, and coding depth.

So, don’t just build your portfolio. Use it actively. Share it on job boards, LinkedIn posts, your GitHub bio, or even in casual conversations with potential collaborators. Every share is a new opportunity waiting to unfold.

Q&A

1. Is building a portfolio really important?
Absolutely. Instead of sending out a dozen links to your GitHub, Behance, and LinkedIn, it’s much more effective to combine all your work into one clean, accessible portfolio site. It makes you look organised, professional, and easy to evaluate.

2. Is it worth buying a domain name?
Yes, it is, if you’re serious about your career. Having your own domain (like yourname.dev or yourname.com) gives a personal and professional touch,

But if you’re still learning or just experimenting, it’s fine to start with a free domain. Once you have solid projects to show, investing in your own domain is totally worth it.

3. Can I use AI or no-code tools to build my portfolio?
You can, but if you’re a developer, you should try coding it yourself first. It’s a great way to showcase your creativity and technical control over design and logic. Here’s a simple and straightforward guide to help you get started with that.

Once your design is ready, you can always use AI or no-code tools to speed up the process or automate parts of it. Think of AI as a helper, not a replacement.

4. How can I get AI tools for testing?
It’s easy: visit the official websites of the tools you’re interested in and sign up. Most AI tools offer free trials or limited credits that you can use to explore and test their features based on your workflow and needs.

5. I am just starting. What should I use: AI tools or the Manual Method?
I strongly recommend using the Manual Method as it will help you to understand your craft well, and you will also build muscle memory about a technology and how it works.

6. Which Platform should I use for hosting?
Most of the hosting providers offer a free plan, so you can start with that. Then, when you feel the need to expand your portfolio, switch to a paid plan.

Final Notes

Building a strong portfolio requires time, effort, and attention to detail. But it’s one of the smartest investments you can make in your tech career.

Tools and templates can help speed up the process, but your creativity, skills, and storytelling are what truly make a portfolio stand out. A well-crafted portfolio not only shows what you can build, it reveals how you think and why your work matters.

While you can use design tools, frameworks, or even AI assistance to save time, make sure you understand the basics of design, structure, and usability. The goal isn’t to create something flashy; it’s to produce something clear, professional, and authentic.

Your portfolio is your digital identity, so treat it like your personal brand. Keep refining it as your skills grow and let it evolve alongside your career.

Conclusion

A portfolio isn’t just a website. It’s your story told through your work. It helps employers, clients, and collaborators understand what you do best and why you stand out.

In this article, I’ve shared everything that helped me build and refine my own portfolio, from understanding design structure and copywriting to testing and optimisation benchmarks. My goal is to help you create a portfolio that not only looks great but also opens real opportunities for you.

In my next tutorial, I’ll explore something new for sure.

Design + Creativity+Development + Execution = The Ultimate Developer Stack 🔥

Keep learning, keep building, and most importantly — keep sharing your work.

If you found this article useful, feel free to let me know. I’m always open to learning, collaboration, and new opportunities.

Now it's your turn: what are you building next? Let me know by sending me a DM!

• Follow me on 𝕏: Prankur's 𝕏

• Connect with me on LinkedIn: Prankur's LinkedIn

• Follow me on GitHub: Prankur’s GitHub

• View my Portfolio: Prankur's Portfolio

In this tutorial, you will learn how to:

• Build tables using plain HTML

• Style them using CSS

• Create and manipulate tables dynamically using vanilla JavaScript

By the end, you’ll understand not just how to do this, but why it matters. You’ll also learn about separating data from presentation, which is at the heart of modern web development.

Table of Contents

1. Creating a Simple Table with HTML

2. Understanding and Styling Borders

3. When to Use HTML vs JavaScript for Tables

4. How to Build a Table Dynamically with JavaScript

5. Step-by-Step Explanation

6. How to Add CSS Classes for Styling

7. How to Turn It Into a Reusable Function

8. Final Thoughts & Conclusion

Creating a Simple Table with HTML

Before we involve JavaScript, let’s first understand how a standard HTML table works.

A table in HTML is built from a few key tags:

Here is a minimal example:

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Occupation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Fahim</td>
      <td>25</td>
      <td>Software Engineer</td>
    </tr>
  </tbody>
</table>

Let me break down that code snippet properly:

• <table> starts the table.

• <thead> defines the table header section.

• Inside <thead>, we have a <tr> (table row), which contains <th> elements (these are column headers).

• <tbody> holds the actual data. Each <tr> inside it is one record, and each <td> inside that row is a cell.

The border="1" attribute gives a thin outline around the cells. It’s useful for visualization when you’re learning about tables.

Understanding and Styling Borders

You might have noticed the border attribute in the <table> tag:

<table border="1">

This is a quick way to add visible outlines. You can even make them thicker, like so:

<table border="5">

The above will render thicker borders, like this:

But there is a catch as well…

Why Using border Is Not a Best Practice

The border attribute is an old, inline styling technique. Modern web development separates structure (HTML) from presentation (CSS). That means we now use CSS for all visual styling.

Here’s the modern equivalent:

table {
  border-collapse: collapse; /* prevents double borders */
  border: 2px solid #444;
}

th, td {
  border: 1px solid #666;
  padding: 8px;
  text-align: left;
}

When to Use HTML vs JavaScript for Tables

You can absolutely create tables entirely in HTML, but only if the data is static.

Use HTML only when:

• The data does not change often (like a static price list).

• You know the exact number of rows and columns.

• You are not fetching data from an external source.

Use JavaScript when:

• The data is dynamic (for example, fetched from an API).

• You want to update the table based on user input.

• You want to sort, filter, or paginate your table interactively.

JavaScript lets you build tables programmatically by defining data in an array or object and letting code handle the rendering.

How to Build a Table Dynamically with JavaScript

We will now create a dynamic table using JavaScript. First, I’ll show you the complete code, and then we’ll break it down step-by-step so you can understand exactly what’s happening.

Code Example:

<!DOCTYPE html>
<html>
<head>
  <title>JS Table Example</title>
</head>
<body>

<div id="table-container"></div>

<script>
  // Step 1: Define your data
  const data = [
    { name: "Fahim", age: 25, job: "Software Engineer" },
    { name: "Sara", age: 29, job: "Designer" },
    { name: "David", age: 31, job: "Manager" }
  ];

  // Step 2: Create a table element
  const table = document.createElement("table");
  table.border = "1"; // for visibility only

  // Step 3: Add headers
  const headers = ["Name", "Age", "Job"];
  const headerRow = document.createElement("tr");

  headers.forEach(text => {
    const th = document.createElement("th");
    th.textContent = text;
    headerRow.appendChild(th);
  });
  table.appendChild(headerRow);

  // Step 4: Add data rows
  data.forEach(item => {
    const row = document.createElement("tr");
    Object.values(item).forEach(value => {
      const cell = document.createElement("td");
      cell.textContent = value;
      row.appendChild(cell);
    });
    table.appendChild(row);
  });

  // Step 5: Insert the table into the DOM
  document.getElementById("table-container").appendChild(table);
</script>

</body>
</html>

Step-by-Step Explanation

Step 1: Define the Data – Separating Data from Presentation

In web development, data and presentation should be kept separate. In this context, data is the content (like names, ages, jobs) and presentation is how that data looks (HTML table layout, colors, and so on).

We define our data as an array of objects:

const data = [
  { name: "Fahim", age: 25, job: "Software Engineer" },
  { name: "Sara", age: 29, job: "Designer" },
  { name: "David", age: 31, job: "Manager" }
];

This structure keeps our data flexible. If you later fetch it from an API or database, your table-rendering logic stays the same.

It also mirrors how modern frameworks (like React or Vue) work: your UI simply renders what is in your data.

Step 2: Create the Table Element

const table = document.createElement("table");
table.border = "1";

Here we are using document.createElement(), a DOM API method that programmatically creates elements. We have not added it to the page yet. It’s just stored in memory.

So why build it in memory first? Well, it’s faster. Appending many elements to the DOM one-by-one causes reflows (browser recalculating layout). Building the structure first and appending once at the end reduces layout recalculations and improves performance.

Step 3: Add the Header Row

const headers = ["Name", "Age", "Job"];
const headerRow = document.createElement("tr");

headers.forEach(text => {
  const th = document.createElement("th");
  th.textContent = text;
  headerRow.appendChild(th);
});
table.appendChild(headerRow);

Here, we loop through the header labels and dynamically create <th> cells.

We generate headers automatically because if you later load data from a JSON file, you can automatically extract column names using Object.keys(data[0]). This avoids hardcoding and makes your table generation more flexible.

Step 4: Populate the Data Rows

data.forEach(item => {
  const row = document.createElement("tr");
  Object.values(item).forEach(value => {
    const cell = document.createElement("td");
    cell.textContent = value;
    row.appendChild(cell);
  });
  table.appendChild(row);
});

We loop through every data object, create a <tr> for each, and then fill in <td> cells for each value. textContent ensures we safely insert text (no HTML injection).

Step 5: Insert the Table into the DOM

document.getElementById("table-container").appendChild(table);

This is where our table finally appears on the page. We select the empty <div> (our placeholder) and append the built table to it.

JavaScript does not automatically add tables. It only creates them because we told it to. The appendChild() call is what actually adds it to the live DOM.

Why This Approach Is Better

Using JavaScript to generate tables has several benefits:

1. Reusability: You can reuse the same code for any dataset – just change the array.

2. Separation of concerns: Data (JS), structure (HTML), and design (CSS) are all handled independently.

3. Performance: Building tables in memory before appending avoids costly DOM reflows.

4. Interactivity: You can easily add features like sorting, filtering, or highlighting rows.

5. Dynamic data: It is the natural approach when fetching JSON data from APIs.

How to Add CSS Classes for Styling

Instead of inline styling, we’ll use classes for better organization:

table.classList.add("data-table");

Then we’ll define our styles in CSS:

.data-table {
  border-collapse: collapse;
  border: 2px solid #333;
  width: 100%;
}

.data-table th, .data-table td {
  border: 1px solid #888;
  padding: 10px;
}

When we say “use them,” we are referring to CSS class names – reusable identifiers that let you style your elements separately from your JavaScript logic.

How to Turn It Into a Reusable Function

Finally, let’s make this process reusable. We can wrap everything in a function that generates any table given some data and headers.

function createTable(data, headers, containerId) {
  const table = document.createElement("table");

  const headerRow = document.createElement("tr");
  headers.forEach(text => {
    const th = document.createElement("th");
    th.textContent = text;
    headerRow.appendChild(th);
  });
  table.appendChild(headerRow);

  data.forEach(item => {
    const row = document.createElement("tr");
    Object.values(item).forEach(value => {
      const td = document.createElement("td");
      td.textContent = value;
      row.appendChild(td);
    });
    table.appendChild(row);
  });

  document.getElementById(containerId).appendChild(table);
}

Then use it like this:

createTable(data, ["Name", "Age", "Job"], "table-container");

When and Why to Use a Function

This pattern is ideal when you need to generate multiple tables on one page, you want cleaner, modular, and testable code, or you plan to integrate with dynamic data sources (like APIs).

Final Thoughts & Conclusion

We have covered a lot! In this article, so let’s recap what you learned:

• How to create a table with HTML

• How to style it properly using CSS

• When to use HTML vs JavaScript

• How to separate data from presentation

• How to generate tables dynamically with JavaScript

• How to make your code reusable and efficient

With these foundations, you can now build tables that are dynamic, styled, and data-driven – using nothing but vanilla JavaScript.

Thank you for reading the entire article. I hope you have gained some insight into how to make a subtle transition from typical HTML tables to dynamic JavaScript-based tables. To get more content like this, you can follow me on LinkedIn and X. You can also check my website and follow me on GitHub if you are into open source and development.

The react-mui-sidebar, powered by Material-UI, is a helpful React NPM package designed to make it easier to build responsive and highly customizable sidebars.

In this article, we will explore the key aspects of react-mui-sidebar and how you can use it to elevate the sidebar experience in your React applications.

Table of Contents

• Prerequisites

• What is MUI (Material-UI)?

• Why Choose react-mui-sidebar?

• How to Get Started with react-mui-sidebar

• Wrapping Up

Prerequisites

Before diving into the tutorial, make sure you have the following:

• Basics of React like components, props, state, and JSX

• Familiarity with React Router or Next.js App Router so you know how linking/navigation works

• Understanding of Material-UI / MUI: theming, components, styling

• NPM / Yarn package usage: installing, importing, and managing dependencies

• Basic CSS / layout skills: Flexbox, widths, responsive design, and so on

Here’s what we’ll be building:

Here’s a live demo you can check out, too.

What is MUI (Material-UI)?

Material-UI is a widely adopted React UI framework that brings Google's Material Design principles to React applications. React MUI Sidebar leverages the strengths of Material-UI, providing a seamless integration for creating visually appealing and responsive sidebars.

Features of React MUI Sidebar

1. Responsive design: React MUI Sidebar ensures a consistent and adaptive layout across various screen sizes, catering to the increasing demand for mobile-friendly interfaces.

2. Customization options: You can easily change the appearance of the sidebar to match the overall design of you application, allowing for a cohesive and branded look.

3. Integration with React and Next.js: React MUI Sidebar seamlessly integrates with both React and Next.js, offering a familiar and efficient development experience.

4. User-friendly: React MUI Sidebar is designed with simplicity in mind, making it easy to incorporate into your projects. With intuitive documentation, you can quickly grasp and implement the sidebar functionality.

5. Icons support: The sidebar comes with built-in support for icons, helping you enhance the visual appeal and usability of your applications. You can use any icon library and provide the icon component.

6. Menu and submenu support: It provides a hierarchical structure with support for both main menus and nested submenus. This feature enables you to organize and present complex navigation structures in a clear and intuitive manner.

7. Smooth transitions: The sidebar incorporates smooth transition effects, enhancing the overall user experience by providing a visually pleasing navigation flow. Animations are thoughtfully implemented to avoid any jarring effects during sidebar interactions.

Why Choose react-mui-sidebar?

There are various reasons to use this helpful tool. Here are a few big ones:

Optimized Performance

react-mui-sidebar is designed and configured for high performance, ensuring smooth and responsive user interactions. Internally, it minimizes re-renders via memoization so that only parts of the menu that actually change are updated. It uses lightweight DOM structure and conditional rendering of nested items to avoid unnecessary mounting.

Since it's built on MUI, it also leverages efficient styling via the sx prop or styled components rather than heavy theme recalculations.

These features are crucial for applications, especially those with complex or intricate user interfaces, where performance issues can negatively impact the user experience.

Community Strength

React MUI Sidebar benefits from a large and active user base thanks in part to the large and active Material UI community. This is helpful for users because it means there's a wealth of resources, tutorials, and assistance available.

A strong community can contribute to the growth of the framework, provide solutions to common issues, and foster collaboration among developers.

Reliable Maintenance

react-mui-sidebar is actively supported by consistent updates and proactive maintenance from its community. Regular updates often include bug fixes, security patches, and new features, which help make sure that the framework remains current and adaptable to users’ evolving needs. This is especially important for long-term projects, and shows a commitment to the ongoing improvement and support of the framework.

How to Get Started with react-mui-sidebar

In this tutorial, I’ll walk you through installing and setting up react-mui-sidebar in a React and Next.js application. You’ll learn how to integrate the sidebar, add a logo, create menus, and use links.

Step 1: Install react-mui-sidebar

To begin, you’ll need to install the react-mui-sidebar package into your React and Next.js project. You can do this using either npm or yarn.

Using npm:

npm install react-mui-sidebar

Using yarn:

yarn add react-mui-sidebar

This will add react-mui-sidebar and its dependencies to your project.

Step 2: Import the React MUI Sidebar Component

Once the package is installed, you can import the necessary components from react-mui-sidebar into your project. These components will allow you to customize the sidebar with menus, submenus, and even a logo.

import { Sidebar, Menu, MenuItem, Submenu, Logo } from "react-mui-sidebar";

Step 3: Set Up Routing for React App or Next.js App

To enable navigation inside react-mui-sidebar components like MenuItem or Logo, you need to pass a link component from either react-router or next/link using the component prop inside the corresponding component like what’s shown in the below example:

If you're using React Router:

import { Link } from "react-router-dom";

const App = () => {
  return (
    <Sidebar width={"270px"}>
      <Logo
        component={Link}  // Passing link to component for routing
        href="/"
        img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png"
      >
        AdminMart
      </Logo>
      <Menu subHeading="HOME">
        <MenuItem
          icon={<CottageOutlinedIcon />}
          component={Link} // Passing link to component for routing
          link="/tes"
          badge={true}
          isSelected={true}
        >
          {" "}
          {/* text for your link */}
          Link Text
        </MenuItem>
      </Menu>
    </Sidebar>
  );
};

export default App;

If you're using Next.js App Router:

import Link from "next/link";

const App = () => {
  return (
    <Sidebar width={"270px"}>
      <Logo
        component={Link}  // Passing link to component for routing
        href="/"
        img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png"
      >
        AdminMart
      </Logo>
      <Menu subHeading="HOME">
        <MenuItem
          icon={<CottageOutlinedIcon />}
          component={Link} // Passing link to component for routing
          link="/tes"
          badge={true}
          isSelected={true}
        >
          {" "}
          {/* text for your link */}
          Link Text
        </MenuItem>
      </Menu>
    </Sidebar>
  );
};

export default App;

Step 4: Initialize the Sidebar

Now we’ll set up the Sidebar component in your application. You can set the width of the sidebar using the width prop. Here’s a simple example:

<Sidebar width={"270px"}> // pass the width you want your sidebar to have
  {/* Sidebar Content Goes Here */}
</Sidebar>

This initializes the sidebar with a width of 270px. You can adjust this width based on your design requirements.

Step 5: Add a Logo to the Sidebar

You can add a logo inside the sidebar by using the Logo component. To do so, you can provide an src URL or use the img prop to link to a CDN logo image. You can also make the logo clickable by passing a navigation link using the component and href props. Here’s how to do this:

<Sidebar width={"270px"}>
  <Logo 
    component={Link} 
    href=”/”
    img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png" // path for image you want to use as your logo
  >
    AdminMart
  </Logo>
</Sidebar>

In this example, we’ve added a logo from a CDN using the img prop, used the component prop to pass the Link, and set the navigation path to (/) (the homepage) using the href prop. We’ve also set the text “AdminMart” as the name of the application.

Step 6: Create a Menu Inside the Sidebar

Now let’s create a menu inside the sidebar using the Menu component. You can specify a submenu heading using the subHeading prop. Inside the Menu, you can add MenuItem components for each item.

You can also provide a link prop along with the component prop to the MenuItem to turn the item into a clickable link.

Here’s how you can structure the menu:

<Sidebar width={"270px"}>
  <Menu subHeading="HOME">
    <MenuItem component={Link}  link="/"  badge=”true”  isSelected={true} >
      Modern
    </MenuItem>
    <MenuItem>eCommerce</MenuItem>
    <MenuItem>Analytical</MenuItem>
  </Menu>
</Sidebar>

In this example:

• We’ve added a Menu with the heading “HOME”.

• The first MenuItem has a link prop, so clicking it will navigate to the homepage (/).

• The second and third MenuItem components are simple text items without links.

The badge="true" prop can be used to indicate a badge or notification on the MenuItem, and the isSelected={true} prop marks this menu item as currently selected or active. You can customize this feature according to your needs.

Step 7: Add Submenus (Optional)

To add submenus inside the main menu, you can use the Submenu component. The Submenu can be nested inside the Menu component and contains its own set of MenuItems. Use the title prop to set the submenu heading

Here’s an example of adding a submenu:

<Sidebar width={"270px"}>
  <Menu subHeading="SERVICES">
    <MenuItem  component={Link}   link="/web-development">Web Development</MenuItem>
    <MenuItem   component={Link}  link="/seo-services">SEO Services</MenuItem>
    <Submenu title="Marketing">
      <MenuItem  component={Link}  link="/digital-marketing">Digital Marketing</MenuItem>
      <MenuItem  component={Link}  link="/content-marketing">Content Marketing</MenuItem>
    </Submenu>
  </Menu>
</Sidebar>

In this example:

• A submenu under the "Marketing" heading is added inside the "SERVICES" menu.

• The submenu contains two MenuItems with links to different service pages.

Wrapping Up

You have now successfully integrated a fully functional sidebar in your React and Next.js application using react-mui-sidebar. You can further customize the sidebar by:

• Modifying the width and design.

• Adding more submenus, menu items, or icons.

• Using links to navigate between pages.

This setup provides a flexible, responsive, and easy-to-use sidebar, which is perfect for most web applications.

Try It Out:

You can view the working demo of the react-mui-sidebar here: View Demo.

Note: in this tutorial, we utilized Material UI Icons to construct this sidebar. Feel free to choose an alternative library or use different icons based on your specific requirements.

When users tap a button, they expect it to respond smoothly. When data is loading, users expect some visual feedback. Even small touches, like a gentle bounce or a fading transition, can make an interface feel polished and professional.

For developers, motion graphics are now part of the job. Designers may create the initial assets, but it’s usually developers who bring them to life in the actual product.

That means knowing how to control animations with code, integrate them into app logic, and make sure they perform well across devices.

Fortunately, a number of powerful tools have emerged that make motion graphics more accessible to developers without requiring them to become expert animators.

Let’s dive into some of the best motion graphics tools that developers can use today, and why each one is worth learning.

Lottie

Lottie has become one of the most widely used tools for integrating motion graphics into mobile apps and websites.

Originally developed by Airbnb, Lottie lets designers create animations in Adobe After Effects and export them as lightweight JSON files using the Bodymovin plugin.

As a developer, you don’t have to recreate complex animations manually or deal with heavy video files. Instead, you load the JSON file into your app using the Lottie library, and the animation plays natively.

One of Lottie’s biggest advantages is its cross-platform support. Whether you’re building for iOS, Android, the web, React Native, or Flutter, Lottie works the same way.

The animations are rendered as scalable vector graphics, so they stay sharp on any screen size or resolution. This makes them perfect for things like onboarding screens, button interactions, loading indicators, and even full-screen animated backgrounds.

Lottie also gives you a lot of control through code. You can play, pause, loop, or even dynamically change the speed of an animation. If you want an animation to start when a user scrolls to a certain point or clicks a button, you can easily hook into your app’s logic and control the animation’s state.

This flexibility makes Lottie a favorite for developers who want designer-level animations without the usual headaches of file size, performance, or cross-platform compatibility.

GSAP

While Lottie is great for pre-designed animations, sometimes you want full programmatic control over how elements move and interact. That’s where GSAP, short for GreenSock Animation Platform, really shines.

GSAP allows you to animate anything on the web: HTML elements, SVG graphics, Canvas drawings, and even WebGL content. It’s used by professional web developers and interactive designers around the world for its precision, performance, and flexibility.

With GSAP, you write animations directly in JavaScript. You’re not importing files created in a design tool. Instead, you describe the animations in code, which gives you complete control over timing, sequencing, and interaction.

You can chain multiple animations together, create synchronized timelines, and easily coordinate animations across multiple elements. The syntax is both simple and powerful, allowing you to start with basic effects and scale up to complex sequences as needed.

One of GSAP’s standout features is how well it handles performance. Animations stay smooth even when animating many elements at once, and the library takes care of browser quirks so you don’t have to worry about inconsistencies across platforms.

If you’ve ever struggled with CSS transitions or vanilla JavaScript animations, GSAP feels like a breath of fresh air. You get pixel-perfect control with readable and maintainable code, even as your animations grow more complex.

Framer Motion

If you’re building modern web apps with React, Framer Motion offers a different kind of power.

Unlike GSAP, which works everywhere, Framer Motion is built specifically for React’s component model. Instead of managing animations through external scripts or event listeners, you define them directly in your JSX code alongside the rest of your component logic.

This declarative approach means you simply describe what you want to happen, and Framer Motion takes care of the rest. You specify target values for things like position, opacity, or scale, and the library smoothly transitions from the current state to the new one whenever props change.

This makes it incredibly easy to animate things like page transitions, hover effects, collapsible panels, and other common UI interactions.

Framer Motion also supports more advanced features out of the box, such as gesture-based animations, layout transitions, and shared element transitions between different routes or components.

These kinds of features can be very challenging to implement manually, but Framer Motion makes them approachable even for developers who aren’t animation experts.

Another benefit is how naturally Framer Motion fits into the React ecosystem. Since you’re not writing separate animation code, your logic stays tightly integrated with your app state and component structure. This reduces bugs, simplifies maintenance, and helps keep your codebase clean and organised.

Rive

Rive represents a new way of thinking about motion graphics, one that blurs the line between design and code.

Unlike tools that focus only on timeline-based animations, Rive adds state machines and logic directly into the animation itself. This allows you to create interactive, real-time animations that respond to user input or application state changes.

In Rive’s editor, designers build both the visuals and the interaction logic. You can define how animations transition between different states based on triggers that your app can control.

As a developer, you don’t have to write complex animation logic yourself. Instead, you simply send events to the Rive runtime and let it handle the animation transitions.

For example, imagine a character that waves when a user taps the screen, then smiles if a task is completed. With Rive, the designer creates both the waving and smiling animations and wires up the logic that connects them.

You just tell the animation which state to enter based on your app’s data. The result feels dynamic and interactive, like a small game embedded into your UI.

Rive works across platforms, including web, mobile, and game engines, and the exported files are lightweight enough to use even in performance-sensitive environments.

It’s a tool that empowers both designers and developers to create richer experiences without a ton of back-and-forth or complicated handoffs.

Three.js

Sometimes, 2D animations aren’t enough. When you need true 3D motion graphics in the browser, Three.js is the go-to library for developers.

While not strictly a motion graphics tool in the traditional sense, Three.js allows you to create complex 3D scenes, animate objects, and build immersive experiences entirely with JavaScript.

Three.js abstracts much of the complexity of WebGL, making it more approachable for developers who may not have a deep background in computer graphics. You can load 3D models, apply materials and lighting, set up cameras, and create fully interactive environments that respond to user input.

Animation in Three.js can involve simple tasks like rotating a model or more complex sequences like animated camera moves or physics-based simulations. Because you have full access to the scene graph, you can control every detail of how your objects move and behave.

This opens up possibilities for product visualizations, interactive demos, educational tools, and even web-based games.

While Three.js has a steeper learning curve than the other tools mentioned here, the payoff is significant. You’re no longer limited to flat surfaces and basic transitions. With Three.js, you can build fully immersive experiences that were once only possible in native apps or games.

Summary

As motion graphics become more important in modern interfaces, developers have an expanding toolbox to help them deliver polished, interactive experiences. Each tool has its own strengths, depending on the project and platform.

As a developer, you don’t need to master all of these tools at once. Start with the one that fits your current project needs, and build your motion graphics skills from there. With practice, you’ll discover that motion isn’t just a visual extra — it’s part of how your software communicates, guides, and delights your users.

Hope you enjoyed this article. You can learn more about me or connect with me on Linkedidn.

Before now, developers used tags like <br> or <span> to manually adjust word spacing. But what happens in cases where you also need to consider the responsiveness of the website? Well, the new text-wrap: balance property in CSS can now automatically calculate and divide the lines in such a way that every word looks organized and even. Like this:

In this article, you’ll learn how the text-wrap property works and how to use it in your code. You’ll also see a few examples along the way.

Without wasting time, let's get right into it.

Table of Contents

• Understanding the Problems

• Introducing text-wrap

  • What is text-wrap?

  • Basic Syntax of text-wrap

• text-wrap vs. max-width : When to Use Each

  • When to Use max-width vs text-wrap

  • Browser Support and Considerations

• Practical Implementation: Step-by-Step Guide

• Conclusion

Understanding the Problems

Apart from making words harder to read when your text is unevenly displayed, there are other issues uneven or poorly displayed text can cause on your website as a whole. Some of these are:

• Responsive Design: We wouldn't have any issues if we could manually design for every screen size and carefully place and space the lines of our text exactly as we wanted users to read them. Unfortunately, we can't do this, which is why making designs responsive is always crucial. When text adjusts from one screen size to another, lines break, and what looks good on a desktop may look terrible on a tablet view.

• Headings and Short Paragraphs: Since paragraphs and small blocks of text have many words, there is a high probability of words ending in a very unbalanced way. Often, we see a heading line ending with just one word, forming an awkward shape in the overall design.

• Dynamic Content: If your website contains dynamic content (such as cards of various sizes, product descriptions, or blog posts), having no text-wrap might make your layout break or appear unpredictable.

Introducing text-wrap

In the last section, we looked at the problems attributed to uneven text distribution. In this section, you’ll see how text-wrap is a game changer in how you organize your text.

Before text-wrap, developers relied heavily on max-width, text-align, or <br> to control text lines. The new text-wrap CSS property was created to help break text naturally across lines without making it look out of place, preventing the need for trial and error in checking if text fits.

What is text-wrap?

text-wrap is a CSS property that can help you adjust and space text automatically, break lines evenly without using the rigid <br> tag, and not have to rely on text-align, which didn't work on all screen sizes.

With text-wrap, your headings and paragraphs are sure to look good. Instead of having some lines that look longer than others, text-wrap neatly arranges everything to appear visually appealing.

Basic Syntax of text-wrap

There are two major ways to apply text-wrap to your text. These values are:

text-wrap: balance: (The Smart Heading Balancer)

This is the smart way of telling the browser to adjust the text evenly, regardless of the screen size.

Code snippet:

h1 {
  text-wrap: balance;
}

In this code, the heading text lines will split naturally without any weird short lines.

text-wrap: pretty; (The Smart Paragraph Balancer)

Just as text-wrap: balance works best for headings, text-wrap: pretty is the best for styling long paragraphs.

Code snippet:

p{
  text-wrap: pretty;
}

The p in this code will make sure the paragraphs maintain natural readability.

Other values include:

text-wrap vs. max-width : When to Use Each

max-width was always the go-to option for developers in the past. While this method works in most cases, it won’t stop uneven text distribution. Let's compare it with the new text-wrap CSS property so you can know when to use each one.

Using max-width:

h1 {
  max-width: 400px;
}

The max-width here forces the heading not to exceed a 400px width. This can be good for controlling short body paragraphs but can cause unevenness for headings when dealing with multiple screen sizes.

Using text-wrap:

h1 {
  text-wrap: balance;
}

Here, the browser dynamically breaks the heading text in a balanced way, preventing any weird-looking single lines.

When to Use max-width vs text-wrap

Use text-wrap: balance when you want a more natural text read without any weird line breaks.

Use max-width when you need to control the text width and don't necessarily care how the lines break.

Use both if you want a more natural read within a confined width limit.

h1 {
  max-width: 500px;
  text-wrap: balance;
}

This ensures the heading stays within a 500px limit while maintaining an even text distribution.

Browser Support and Considerations

Currently, Chrome and Edge are the only main browsers that support the new text-wrap property. If you are building a project that should work on browsers like Safari and Firefox, you will need to use traditional text formatting methods like text-align, <br>, or max-width instead.

Fallback snippet:

@supports (text-wrap: balance) {
  h1 {
    text-wrap: balance;
  }
}

The @support is a pro tip to apply this style to only supported browsers.

Practical Implementation: Step-by-Step Guide

Now that you’ve seen how important text-wrap can be and how to use it, let’s put that knowledge into practise and see real examples, compare the before and after screens of using it (and not), and check how it reacts in responsive designs as well.

1. Applying text-wrap: balance to Headings

In this section, we will see how the heading lines in the topic "How to Use CSS Text Balance: A Simple Trick for Smoother, Cleaner Designs" will break across different sizes and how it looks when text-wrap: balance is applied.

Without text-wrap: balance:

HTML

<h1 class="title">How to Use CSS Text Balance: A Simple Trick for Smoother, Cleaner Designs</h1>

CSS

.title {
  font-size: 2.5rem;
  font-weight: bold;
}

Without any special application to the headings, it will just adjust freely.

Result:

With text-wrap: balance:

CSS

.title {
  font-size: 2.5rem;
  font-weight: bold;
  text-wrap: balance;
}

Now, the browser automatically adjusts the line breaks to ensure a more even distribution.

Result:

2. Using text-wrap: pretty on Short Paragraphs

You’ve now seen how text-wrap: balance handles headings, so lets also take a look at how it breaks the lines evenly in your text paragraphs. As I mentioned above, the value pretty is mostly used for paragraphs or short block of words. Here’s how it works and appears on a block of text.

Without text-wrap: pretty:

HTML

<p class="subText"> Do you know that inconsistent text layout can ruin the look of your website design? Maybe a heading has an extra word that takes up another line or in a paragraph some lines are longer than others whereby leaving the whole thing looking messed up and hard to read.</p>

CSS

.subText {
  font-size: 1.2rem;
  line-height: 1.5;
}

In this code, text adjustment will behave normally without any smart contraints.

Result:

With text-wrap: pretty:

CSS

.subText {
  font-size: 1.2rem;
  line-height: 1.5;
  text-wrap: pretty;
}

The code above makes the line breaks evenly in a way that it will be easier for someone to read through.

Result:

How text-wrap Works in Responsive Design

When you use text-wrap on your text, you need not to worry how it is going to appear on various screen sizes. The below video shows you what I mean by that:

Using Media Queries for Extra Control

Combine media-queries and text-wrap to have a great special kind of control on how your text appears on various screens.

h1 {
  font-size: 2.5rem;
  text-wrap: balance;
}

/* On smaller screens, reduce font size and apply text-balancing */
@media (max-width: 600px) {
  h1 {
    font-size: 2rem;
    text-wrap: balance;
  }
}

This code ensures your heading text adapts and remains clean across multiple device sizes.

Conclusion

How text displays is something every good developer should pay attention to. It plays a big role in user experience. By using text-wrap, you can ensure that your website layouts don't look messy or difficult to read.

One of the best things about using text-wrap in your text formatting is that it just works every time. You don’t need to bother with <br> tags, tweak max-width, or fight with text alignment.

Even though it's not yet supported by all browsers, adding it to your next project will future-proof your design so it’s always intact and good-looking.

But not everyone experiences the web in the same way. Websites are difficult to use for people who have visual, hearing, or mobility impairments. These barriers make it harder to navigate content, and in some cases, make the web completely inaccessible.

This handbook will help you understand accessibility and how to implement it. Whether you are a beginner or an intermediate developer, you'll learn basic accessibility practices and some advanced techniques. This will help you make your website more inclusive.

Let’s get started.

Table of Contents

• What is Accessibility?

• Basic Accessibility Practices

  • Semantic and Non-Semantic HTML

  • Text Content

  • Page Layouts

  • Interactive Elements

  • Keyboard Accessibility

  • Form Labels

  • Links

  • Table Accessibility

• Additional CSS and JavaScript Practices

  • Styling Form Elements

  • Color Contrast

  • JavaScript Practices

• Advanced Accessibility Practices: WAI-ARIA

  • The role attribute

  • aria-* attribute

  • Dynamic Content Attributes

  • Form Validation and Errors

  • Using non-semantic elements as buttons

• Multimedia Accessibility

• Mobile Accessibility

What is Accessibility?

Accessibility (A11y) is an important practice in web development that aims to make the website usable (accessible) for all people. This includes people who have disabilities that make it difficult for them to use websites. By making a website accessible to everyone, including people with disabilities, we ensure that they have the same opportunities as we do. We’re also helping to make the web a more inclusive place overall.

What kind of disabilities should we consider? In broad terms:

• Visual impairments: blindness, blurred vision, and colour blindness

• Hearing impairments: low to no hearing

• Mobility Impairments: difficulty with physical movement(s)

• Cognitive Impairments: like Dyslexia and ADHD

People with visual impairments commonly use devices like screen readers to visualise and understand a website’s content, for example. So a big part of web accessibility is designing a website that can be easily accessed by a screen reader.

There are various practices that you, as a developer, can follow to make a website accessible, which I’ll cover in this handbook.

Basic Accessibility Practices

Accessibility is not just an added feature on top of a website you’ve already developed. It is a practice that needs to be followed throughout the development process. Whenever you are creating content on the web page, ask yourself if it is really accessible.

Another important point is that accessibility is not just for people with impairments. It benefits everybody by making a website easier to use, thus improving overall user experience.

How do you achieve good accessibility? Well, there are some practices that you should follow while writing HTML, CSS, and JavaScript code. We’ll discuss some basic practices in this section.

Before we get into it, let’s start by understanding what semantic and non-semantic HTML tags are:

Semantic and Non-semantic HTML

Non-semantic HTML tags do not convey specific meaning or purpose. They can be used for anything, depending on the CSS styling and JavaScript functionality. Examples of non-semantic tags are: <div> and <span>. These tags are mostly used as containers for wrapping other elements.

Semantic HTML tags clearly describe their purpose to the browser and the developers through their names. They improve code readability and also help with SEO (Search Engine Optimisation). Examples of semantic tags include: <button>, <a>, <header>, <footer>.

You can find a list of all semantic elements here.

Importance of using semantic HTML

An essential part of accessibility is using the correct HTML element for its intended purpose. This means, for example, using a <button> tag when you want to render a button.

But why use semantic elements? After all, you can use CSS to make a <div> look like a button. True, but using semantic elements is important for the following reasons:

• Semantic elements have built-in styles and functionality that you otherwise would need to add through CSS and JavaScript. This makes them easier to use.

• They make the code easier to read and maintain, as you can actually see the elements being used rather than seeing a bunch of divs everywhere.

• Screen readers can easily read and interpret semantic elements, helping people with visual impairments.

In the following sections, we’ll understand basic accessibility practices for each type of content you render on HTML. We'll explore how to use the correct HTML tags for each situation, helping you see how choosing the right tag for its purpose improves accessibility.

Feel free to test each example with a screen reader. On Mac, use ⌘+F5 to activate VoiceOver, Mac’s built-in screen reader. For Windows, you can use the built-in screen reader called Narrator by pressing Ctrl + Windows Key + Enter.

Text Content

When writing text content, it’s important to use the correct elements for headings, paragraphs, and lists. Let’s understand with the following examples.

Let’s say you write headings and paragraphs in the following way:

<span id="heading1">Heading 1</span>
<br />
<br />
<span id="heading2">Heading 2</span>
<br />
<br />
This is one paragraph
<br />
<br />
This is another paragraph

This approach has the following problems:

• The screen reader won’t be able to distinguish between headings and paragraphs – it would just read out the contents in one go, thus confusing people who depend on screen readers.

• It’s difficult to style individual paragraphs, since there are no selectors. Even if you add a <span> to each one, it requires extra CSS styling.

• It also contains unnecessary line breaks which can be avoided by using the right elements.

The above code is an example of bad semantics. This is what you should do instead:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is one paragraph</p>
<p>This is another paragraph</p>

Here, we have used the right semantic elements for the text content, which has the following benefits:

• A screen reader is able to distinguish the headings from the paragraph text by reading out the heading level before reading the text.

• h1, h2, and p come with built-in styles and they each render on a new line. This eliminates the need to use line breaks.

• The code looks cleaner and is much more readable.

Lists

To render a list of items, we have the following approaches. The non-semantic approach just groups a bunch of divs together and applies CSS styles to them.

<h2>TODO List</h2>
<div id="mylist">
  <div>Make Breakfast</div>
  <div>Do Laundry</div>
  <div>Complete blog post</div>
</div>

Again, this achieves the desired output but it’s difficult for screen readers to identify this content as a list of items. Instead, use semantic elements:

<h2>TODO List</h2>
<ul id="mylist">
  <li>Make Breakfast</li>
  <li>Do Laundry</li>
  <li>Complete blog post</li>
</ul>

This helps screen readers identify the element as an unordered list and read out each item. <ul> also comes with default styles and bullet points for each list item. You can also use <ol/> for numbered lists, where the screen reader reads out the number on each list item.

You can test the above examples with Mac’s VoiceOver to see the difference.

Emphasized Text

Emphasized text refers to highlighted text that gives importance to certain words or phrases within a piece of content. When adding emphasized text, it’s important to use the right semantic elements like <strong> and <em>.

<p>For best results, use <em>fresh ingredients</em> when cooking.</p>

<p>The process of water turning into gas is called <strong>evaporation</strong>.</p>

These elements add some built-in styles to the text like bold and italic. Also, if you test with VoiceOver, you’ll notice that it puts some emphasis on the text inside these elements. This helps people using screen readers identify emphasised text.

You may also add some colour to the emphasized text. But, there’s no need to add a lot of styles, else it may cause confusion. Visit MDN Docs-Emphasis and Importance to learn more about text emphasis in HTML.

Abbreviations

Next, when writing abbreviations (or acronyms), it’s a good practice to make them visually different and also include the full expansion of the acronym. You can also add some simple styling to the abbreviation. Learn more about abbreviations in MDN Docs-Abbreviations.

Other best practices

Apart from the above, there are a few other practices that are good to follow:

• Use clear language, wherever possible. For example, expand abbreviations: instead of Jan, write January.

• When writing ranges, avoid using dashes if possible, write 1 to 5 instead of 1-5.

• Avoid using characters that may confuse users when a screen reader reads them out, for example ~ or *.

• Avoid excessive exclamations and emojis.

Also, when writing CSS for text content, remember these practices:

• When using styles like font sizes, line height, and letter spacing, ensure that the text is comfortable to read.

• Your headings should stand out from the other text, in case you are using CSS styles. Usually, this is achieved by just using the right heading tags.

• Text color should have 4.5:1 contrast with the background. See the Color Contrast section for details.

If you want more tips on styling text, visit MDN Docs - CSS Text Styling.

Page Layouts

Page layout is concerned with how the content is laid out on the screen. When you start designing a web page, your first thought is how your content should be positioned on the screen.

Typically, a web page consists of a header, nav bar, footer, main content, and sidebar. In the bad old days (phrase borrowed from the docs, sorry), developers used tables to create page layouts consisting of these elements.

But tables made the layouts incredibly complex and hard to maintain. Table layouts are also difficult for screen readers to read, affecting accessibility.

Nowadays, there are much better ways to write page layouts. If you are including a header, nav bar, and footer along with the main content, you can use the following semantic elements:

<header>
  <h1>Header</h1>
  <nav>
    <!-- main navigation in here -->
  </nav>
</header>

<!-- Here is our page's main content -->
<main>
  <!-- Main content here -->
</main>

<footer>
  <!-- footer content in here -->
</footer>

Let’s understand each tag used above (skip if you already know):

• <header>: Represents the introductory section of a webpage, typically containing headings, logos, or navigation links.

• <nav>: Defines a navigation section that contains links to other parts of the website or page, providing easy access to important sections.

• <main>: Represents the main content area that focusses on the primary purpose of the page or the website, excluding common elements like header, footer, or sidebar (may include sidebar depending on the website).

• <footer>: Represents the bottom section of the web page, typically containing metadata, copyright information, or links to related resources.

These elements are called sectioning elements. Following are advantages of using these elements:

• The layout is clear with each element clearly describing its purpose, making the code readable and maintainable.

• Using the right semantic elements makes screen readers identify each part of the layout, thus helping visually impaired users understand how the website is structured.

Of course, you can write the above layouts by using divs, but sectioning elements provide good semantics and help users understand the type of content they are navigating.

Interactive Elements

These consist of elements through which a user interacts with the web page. These elements include buttons, form fields, links, and so on.

Keyboard Accessibility

Each interactive element on a web page should be navigable through the keyboard. This gives a user flexibility while navigating your website. Keyboard accessibility is really helpful for people with mobility impairments that may struggle to use a mouse.

For instance, visit this page and try to navigate to each interactive element by pressing Tab on your keyboard. You can also press Enter/Spacebar to click on a button or a link. This should give you an idea of what a keyboard-accessible website looks like.

For the most part, using the right semantic elements should ensure keyboard accessibility, as they come with built-in functionality. Check out the following example:

<p>
  Visit my blog at 
  <a href="https://www.freecodecamp.org/news/author/KunalN25/">freecodecamp.org</a>
</p>

<button>Click me</button>
<button>Click me again</button>

<div>
  <input type="text" placeholder="Enter your name" />
</div>

Here, we have used the correct semantic elements for the hyperlink, button, and input element. All these elements can be accessed through Tab and interacted with using Enter/Spacebar. Check out other form-related elements in this list.

Some people use a div or span and make them look like an anchor tag or a button with CSS styling. But this is bad for accessibility for two reasons:

• div and span are not tab-able by default. So, even if you do make a div look like a button, the user cannot navigate to it using the keyboard.

• Screen readers won’t be able to identify them as buttons, while in the case of semantic elements, they read these elements out as buttons or links.

But if you absolutely have to use a div to create a clickable element, include the following attributes:

<div id="customButton" role="button" tabindex="0">Click me</div>

Here, we have added two attributes, tabindex and role. We’ll understand the role attribute in a later section.

The tabindex attribute takes an integer that specifies the tab order of tab-able elements, instead of the default top to bottom tab order. A positive integer means the element is focussed in an order specified by the attribute’s value.

But using tabindex to change the default tab order is not recommended, as it may cause confusion for keyboard navigators and affect accessibility. And frankly, it’s not necessary.

You should only ever use the following two values:

• tabindex=”0” makes an element tab-able which means it can be accessed through a keyboard in the natural tab order.

• tabindex=”-1” means the element is not reachable via keyboard navigation.

These attributes make the div behave like a button, but there’s a small piece of JS code you still need to add to make the button clickable via Enter/Return:

document.getElementById("customButton").addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    document.activeElement.click();
  }
});

Here, we have added an event listener to the element that listens for the keydown event. If the key pressed is Enter, then it calls the element’s onclick method.

If you are using a non-semantic element as a button, you need to add this extra code to make it work like a button. So, only use it if it's absolutely necessary. Otherwise, it's always better to use the correct semantic element in the first place.

Keyboard Accessibility is important for audio and video controls too. We’ll discuss this in the Multimedia Accessibility section.

Form Labels

A form label is some text that describes what you need to enter in a form field. Adding labels to form fields is a necessary practice since it lets the user know how to fill the form. But using the right semantic elements is important.

You could do the following and still achieve the desired output:

Enter name: <input type="text" id="name" name="name" />

This is not good for screen reader users, as it does not read out what the input field is for. Even if it reads out “Enter name”, the user may not associate it with the input field. Instead, use the <label> element for form labels.

<div>
      <label for="name">Enter name:</label>
      <input type="text" id="nameField" name="name" />
    </div>

The for attribute associates the label with the input field. With this, when the screen reader’s focus is on the input field, it reads out the label, followed by “edit field” to let the user know they should enter their name in the input field.

Check out the form with the label and form without the label in these examples for more clarity. Use Mac’s Voiceover (⌘+F5) or Windows’ Narrator (Ctrl+Windows+Enter) to see how it reads out the form elements.

Using <label> offers more advantages:

• By linking a <label> to an input field with the for attribute (clickable association), clicking on the label focuses on the input field.

• Clickable association with input field helps the user’s select small inputs like checkboxes or radio buttons.

• It follows semantic HTML and specifies that the text is being used as a form label.

Lastly, remember that the label text should clearly describe what the user should enter into the field. For examples, “Enter name” or “Enter email”.

This applies to buttons as well. Ensure that button text is descriptive enough to tell the user what they are clicking on. Vague texts like “Click me!” or “Click here!” are not helpful. Examples of descriptive text are “Submit Form” or “Download Report” that give the users a clear idea of the button’s action.

Along with these, links also come under interactive elements. But since there are a lot of examples for Links, I’ll discuss them in their own section now.

Links

Links are a key part of web pages as they allow the user to navigate the website. Links serve different purposes: going to a different page in the same website, going to an external website, or downloading something. In this section, you’ll learn about several practices with links that contribute towards accessibility.

Linking to External Websites

When you add a link that lets users open an external website, including the target=_blank attribute opens the link in a new tab.

<a href="https://www.wikipedia.org/" target="_blank"> Wikipedia </a>

This is helpful for users as they don’t need to exit the website, saving them from the hassle of navigating back to the website.

Also, if your link opens in a new tab, it’s a good idea to mention it so the screen readers can read it out and help visually impaired users.

<a href="https://www.wikipedia.org/" target="_blank" >
Wikipedia (opens in new tab)
</a>

Similarly, if your link opens a non-HTML file, like a pdf or docx, you should mention it:

<a target="_blank" href="jan-salary-slip.pdf">
Salary-January (PDF)
</a>

Alternatively, you can use an icon to indicate a link opening in new tab.

<a href="https://www.wikipedia.org/" target="_blank">
  Wikipedia
  <img src="new-tab-icon.png" alt="Opens in new tab" style="width:16px; height:16px; margin-left:5px;">
</a>

When using an icon, make sure that you include the alt attribute with description about the image. We’ll understand its purpose in the Multimedia Accessibility section.

Skip Links

A skip link is a link element placed at the top of a page that links directly to the main content of the page. This allows the users to skip the headers and all the navigation menus, and directly jump to the main content of the page. This is helpful on websites where there’s lot of repetitive content on top like menus or banners.

Skip links are especially helpful for people who are visually impaired and who might be using screen readers. These links provide a way to bypass repetitive navigation menus and directly access the main content. This also helps keyboard navigators, thus saving time and enhancing the user experience.

To add a skip link, add an anchor tag at the very top, just under the body tag, and link it to the main content.

<body>
 <a href="#main">Skip to main content</a>
    <header>
      <h1>Page Title</h1>
      <nav>
        <ul id="nav-links">
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/blog">Blog</a></li>
          <!-- other nav links -->
        </ul>
      </nav>
    </header>
    <main id="main">
      <!-- Main Content -->
    </main>
</body>

The skip link is keyboard accessible and is also read out by the screen reader. Clicking on it takes you straight to the main content. Visit WebAIM and press Tab on your keyboard to see skip links in action.

Link Styling

By default, links created with the anchor tag are visually different from non-link text. This is because the anchor tag has built-in styles like colour, text-decoration, focus-ring (displays when you tab on to the link with the keyboard) and hover effects.

Links should look different from the other text so they’re easily distinguishable. As you saw above, the browser does that for you, so you don’t need to do much. But if you are adding custom styles to the link that fit in better with your theme, you need to follow some best practices:

• Links should have different colors for default, visited, focus and hover states.

• Link text color should be different from the non-link text and should have different styling.

• Link text color should have a contrast of 3:1 between other text and 4.5:1 contrast between background color. See the Color Contrast section for more understanding

An example of custom styling for links is shown below (from the Docs):

a {
  color: #ff0000;
}

a:hover,
a:visited,
a:focus {
  color: #a60000;
  text-decoration: none;
}

a:active {
  color: #000000;
  background-color: #a60000;
}

With the help of pseudo-classes, this adds different styles for when link is hovered, previously visited, focussed (with the keyboard), or active (when the link is being clicked).

You can experiment with different colors and styles, but don’t remove the cursor: pointer or outline properties. Both are important for people using keyboard navigation.

Remember, links already have built-in styles for all the link states. Only add your own if you want something in line with your website’s theme.

Avoid using onclick handlers

Links are used to navigate to another web page on the same website or navigate to an external website. Specifying the link in the href attribute does this for you without any need to add JavaScript code.

But some people add an onclick attribute to anchor elements, to make them behave like buttons and set href=”#” or href="javascript:void(0)" to avoid page refresh. This causes unexpected behaviour and may lead to the following problems:

• Copying or dragging this link adds an unnecessary # or void(0) to the URL, which does not make sense.

• Clicking the link immediately scrolls the page to the top, which may lead to the user losing track of where they were.

• If JavaScript is still downloading, clicking the link does nothing and the web page becomes unresponsive.

It is also bad for semantics and accessibility, as people using screen readers may get confused. If you want to add JavaScript functionality on click of an element, just use a <button>. Only use links when navigating to a proper URL.

Meaningful Link Text

Similar to buttons, when writing link text, keep it meaningful and descriptive and avoid using “Click here” or “Click this”.

<p>
  For more information about accessibility
  <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">
    click here
  </a>
</p>

Instead of the above, do this:

<p>
  For more information about accessibility, visit
  <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">
    MDN Docs - Accessibility
  </a>
</p>

Check out the Good Links and Bad Links examples from the docs. You can also test them with VoiceOver (⌘+F5).

Link Proximity

If your web page has a lot of interactive elements like links and buttons, ensure that they are spaced properly to prevent accidental clicks. This helps people with Motor Control Issues that may click on the wrong link.

Using the margin property should be enough to ensure spacing.

Table Accessibility

In the page layouts section, we saw that using tables for creating page layouts is an outdated practice. However, tables can still be used if you want to display a large amount of data in tabular form. Incorporating accessibility in tables helps screen readers interpret them and help visually impaired users.

Check out MDN Docs - Table Accessibility to understand best practices.

Additional CSS and JS Practices

Most of your accessibility goals should be achieved with HTML alone. But there are certain things to keep in mind when writing CSS and JavaScript to ensure you don't break accessibility.

Styling Form Elements

When styling form elements, remember the following:

• Do not remove the default styles for focus outlines, hover, and disabled state in form elements. You may modify them as per your site design, but they should still be visible.

• Ensure that your labels and placeholder texts are visually clear. Follow colour contrast practices (next section).

• For clickable areas like buttons and inputs, ensure they are large enough so the user can click comfortably.

• Success and Error messages should be physically distinguishable from labels and other text content.

Color Contrast

When you choose colors for your website, your text and background colour should have a good colour contrast. A good color contrast ensures that the text is easily readable by all users (and it also helps people with color blindness in particular).

The WCAG (Web Content Accessibility Guidelines) recommends the following contrast ratios:

Let’s understand the colour contrast ratings:

• AA rating refers to the minimum ratio your colour contrast should be such that the site’s content is readable. As you can see in the table above, this requires a 4.5:1 minimum ratio for body text, a 3:1 ratio for large-scale text, and a 3:1 ratio for active user interface components and graphical objects.

• AAA rating is the ideal standard for accessibility that ensures high contrast for your website. This requires a 7:1 ratio for body text, a 4.5:1 ratio for large-scale text, and isn’t defined for UI components/graphical objects.

Choose a contrast ratio that aligns well with your design, but try to keep it to at least AA rating. To check colour contrast ratio between two colors, you can use the following tools:

• Color Contrast Checker

• Chrome Developer Tools - Identifies text in your website not meeting AA and AAA ratings

JavaScript Practices

Mouse-specific events

When you have functionality triggered by events like mouse-over and mouse-out, they cannot be accessed by people that depend on keyboard navigation. So, to make the functionality accessible by keyboard, you need to add the same event handlers to events like focus and blur.

Client side form validations

When you submit data through a form, the data is validated to check if you have entered valid data. Often, when the data is sent to the server, the server validates the data and lets the UI know if the validation has failed.

To make the website user-friendly, it helps to add form validations on the client-side, so users can get instant feedback if they have entered incorrect data, since the server-side mechanism may take time. This is a very small step towards improving user experience.

Check out the Form Validation Example to understand more.

Apart from the above, one thing you should remember is not to use JavaScript for anything and everything. JavaScript can be used to generate any form of HTML and dynamically apply CSS styling. It is very helpful if you have dynamic content on your website.

But if you have too much HTML generated by JavaScript, it gets hard for screen readers to keep track of the dynamic changes. This makes the website difficult to read for impaired users. So, make sure you don't overuse JavaScript when simple HTML would be enough.

Accessibility for dynamic content updates is covered in the next section.

Advanced Accessibility Practices: WAI-ARIA

As applications started to get bigger and more complex, developers started needing a new set of accessibility features. Semantic elements alone were not enough, especially for complex elements like date pickers and custom widgets.

Depending on semantic HTML does not help when content is updated dynamically on the web page. Nowadays, all websites built with JavaScript have content that isn’t loaded initially, but updated dynamically based on user interactions.

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) was introduced to add more accessibility features wherever they were needed. It defines a set of HTML attributes that you can use to provide additional semantics to your website and improve accessibility.

In the following sections, you’ll learn which attributes were introduced and how you can use them to enhance accessibility.

The role attribute

The role attribute helps add semantic information to non-semantic elements by defining their “role” on the web page. With roles, screen readers can accurately read non-semantic elements and help identify them for people with disabilities.

W3C defines several roles that you can use, depending on their purpose. But keep in mind that you should only use role when necessary. In most cases, it’s better to just use the right semantic elements like <button>, <nav>, <header>, and so on.

But, when semantic elements are not fulfilling your purpose, roles can help. So, let’s understand how to use them with some examples:

If you want to create a button with custom div, adding the role attribute specifies that this element is being used as a button.

<div role="button" tabindex="0">Click Me</div>

When you test this with Mac’s VoiceOver (⌘+F5), it reads out the element as a button. As discussed before, always include the tabindex attribute.

But if you want to use a div instead of a button, you still need to add JavaScript functionality, as explained in the the Keyboard Accessibility section.

Another example is if you are writing a custom link. You can use the following role, so that the screen reader interprets this as a link:

<div role="link">Visit our website</div>

Apart from interactive elements, role attribute can also be used to define elements as navigation menus, side bars, banners, etc. If you are using non-semantic elements for these purposes, always include a role, like the following:

<div role="navigation">
    <!-- Navigation menu items -->
</div>

In this case, the screen reader announces this as a navigation area.

Also, if you have an element that serves as an alert for the user, including the following role makes the screen reader announce it as soon as it shows up on the screen, even if it doesn’t have focus:

<div role="alert">
  Please respond to this alert
</div>

You can find the full list of available roles at MDN Docs: WAI-ARIA Roles.

aria-* attributes

Apart from role, ARIA (Accessible Rich Internet Applications) defines extra attributes to enhance the accessibility of web applications. These attributes give screen readers more information about elements, helping people with disabilities better understand them.

If native semantic elements or the role attribute alone are not sufficient, aria-* attributes can provide extra context. You can find a full list of these attributes in MDN Docs-ARIA.

In the following sections, we’ll see how role and aria-* attributes can improve accessibility. We won’t cover all the attributes here, but we’ll focus on the most commonly used ones.

Dynamic Content Updates

When a web page loads for the first time, its content is read out by the screen reader. But screen readers cannot capture dynamic content, that is content that gets added or removed.

For example, when a web page is showing live sport updates, it gets updated almost every minute. Screen readers will only read out the content displayed when the page is first rendered, but don’t show dynamic updates.

This is not really a problem for many users, but for people with visual impairments, screen readers may not be able to read the changes on the page. Most modern websites are dynamic in nature, so it’s important to consider accessibility of dynamic content updates.

Check out the aria-no-live example from MDN Docs. It loads a new quote every 10 seconds, which you can see clearly as a user with no visual impairment. But the screen reader only reads the initial page content and does not announce the updates. This is not good for accessibility.

To fix this, WAI-ARIA provides the aria-live attribute that makes the screen reader read out content that is updated. You can add this attribute to the element that contains the dynamic content.

It takes the following three values:

• aria-live="off": Default value that means no content is read out

• aria-live="polite" Updates only announced when the user is idle

• aria-live="assertive": Content read out as soon as it is updated.

Depending on the importance of the update, you can decide which value to use.

<div aria-live="polite">
    <!-- Dynamic Content here -->
</div>

In this case, the screen reader waits till the user is done with their current task before announcing the update.

You can add more detail here. With the above attribute, only the text that is updated is read out. But, screen reader users may get confused as to which part of the page is being read out. So, it is helpful if the entire element is read out.

<div aria-live="assertive" aria-atomic="true">
    <!-- Dynamic Content here -->
</div>

The aria-atomic attribute tells screen readers to read out the entire element as a single atomic unit. This avoids confusion for visually impaired users. Check out the aria-live example from MDN Docs with Mac’s VoiceOver (⌘+F5). It reads out the entire element when the content is updated.

Form Validation and Errors

Let’s say you have added some validation to your form through JavaScript. When the validation fails, an error message gets added on the screen. For example, a required message shows up if you have missed a field.

The implementation for error handling involves creating an element containing an error message or a list of errors that render on certain conditions, depending on the JavaScript code. Just as we discussed in the previous section, the screen reader does not read out new content updates.

So, we should make sure that the screen reader reads out the error message as soon as it shows up, to let visually impaired users know that an error has been thrown. We can use the following attributes for this purpose:

<div class="errors" role="alert" aria-relevant="all">
  <ul></ul>
</div>

The alert role does two things. It semantically identifies this element as a piece of important information. Secondly, this role turns the element into a live region which means the screen reader is notified immediately if there are any changes.

The aria-relevant attribute describes what changes need to be announced in a live region. The attribute takes a space-separated list of the following values:

• additions: Announces new content added to the live region

• removals: Content removed from the live region is read out

• text: Announces any modifications to existing content.

It also takes a value all which is a shorthand for additions removals text, meaning all three types of content are read out.

You can check the Form Validation Example from the MDN Docs.

Next, let’s see what to do if we want to mark certain fields as required. Normally, we’d add visual cues like a * and the following message at the top of the form:

<p>Fields marked with an asterisk (*) are required.</p>

This is helpful for regular users, but visually impaired users may get confused as to which fields are required. To make it easier for them, we can use the aria-required attribute.

<input type="text" name="name" id="name" aria-required="true" />

With this attribute, the screen reader mentions this field as “required” while reading it out.

When you are creating input fields, it’s important to include a label, as some screen readers do not read out placeholder text. If you don’t want to include a label field, here are the following alternatives:

You can use the aria-label attribute to add labels to input fields that do not have a label associated with them.

<input type="email" name="email" aria-label="Enter email" />

This attribute provides some text to be read out by a screen reader to describe the input field.

You can go one step further and use the aria-labelledby attribute that uses another element to act as a label for the input field. For example:

<div>
  <span id="emailLabel">Enter your email</span>
  <input type="email" name="email" aria-labelledby="emailLabel" />
</div>

The screen reader reads out the text inside the <span> element to describe the input element. This is similar to having a <label> with a for attribute. You can also use this attribute to reference other interactive elements like <button> or <a> that do not have a label field to reference them.

Keep in mind that the aria-labelledby attribute only defines an accessible name for the element – it does not provide other functionality like clicking on the label to focus on the input element. It’s better to use <label> with a for attribute.

We have already discussed form labels in the Interactive Elements section.

You’ve now seen some of the different attributes that WAI-ARIA offers and how they enhance accessibility. You can visit MDN Docs: WAI-ARIA to check out additional details I may have missed.

Before we move on, remember one thing: use WAI-ARIA only when necessary. Usually, semantic elements are able to achieve majority of your accessibility goals. Don’t over-use WAI-ARIA as they might end up complicating your code.

Multimedia Accessibility

A website’s content is not restricted to text. It also often consists of multimedia content like images, audio, and video. In a lot of cases, multimedia content is easier to understand than text content. While this is true for many users, it poses challenges for users with disabilities.

People with visual impairments cannot see images and people who are deaf or hard of hearing cannot easily interpret audio content. So, as developers, it’s our job to make this type of content accessible for everyone. Let’s understand how to make this possible:

Images

Since people with visual impairments cannot see images, they depend on a screen reader to describe the image. Just writing an img tag with src attribute does not help.

<img src="temple.jpg" />

By default, the screen reader reads out the file path or URL of the image. A file name might give some idea of the image, but still does not describe it.

So, it’s helpful to add an alt attribute to an img. The alt attribute provides an alternate text for the image, and its purpose is to describe the image.

<img
  src="temple.jpg"
  alt="The Meenakshi Temple, situated in Madurai, a South Indian City is dedicated to goddess Meenakshi, a form of Parvati"
/>

Here, instead of reading the file path, the screen reader reads out the alternate text – that is, the value of the alt attribute. The alternate text should provide a description of the image to help users understand what it’s conveying. So, instead of just saying “Temple”, the user knows which temple is being depicted in the image.

You can also add extra context to the image with the title attribute.

<img
  src="temple.jpg"
  alt="The Meenakshi Temple, situated in Madurai, a South Indian City is dedicated to goddess Meenakshi, a form of Parvati"
  title="The Meenakshi Temple"
/>

When focussed on the image, the screen reader reads out the alt text and the title.

Let’s take another example which uses an alternative to the alt attribute:

<img src="temple.jpg" aria-labelledby="temple-label" />
<p id="temple-label">
  The Meenakshi Temple, situated in Madurai, a South Indian City is dedicated to
  goddess Meenakshi, a form of Parvati
</p>

Here, instead of using the alt attribute, we have used the aria-labelledby attribute to link the paragraph element to the image. The text inside p acts as an alternate text for the image. This is helpful if you need to use the same text as an alternate text for different images.

Sometimes, we use images as icons for headers and navigation menus, just for decoration. Usually, these images are not relevant to understand the content of the page. In these cases, you add an empty alt attribute.

<h3>
  <img src="page-icon.png" alt="" />
  History of Meenakshi Temple 
</h3>

If you skip the alt attribute, the screen reader reads out the entire image URL. To avoid this, use an empty alt attribute, so the screen reader simply announces it as an image and moves on, preventing unnecessary distractions for users.

You can also use role=”presentation” to skip reading the image path or alternative text.

Audio and video

When using the <audio> and <video> elements, remember to include multiple sources – that is, provide the audio and video in different formats. For browsers that do not support the formats you have mentioned, include a fallback download link so they can access the resource.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="video.mp3">link to the video</a> instead.
  </p>
</audio>
<video controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <p>
    Your browser doesn't support HTML5 video. Here is a
    <a href="video.mp4">link to the video</a> instead.
  </p>
</video>

Next, let’s understand the shortcomings of using native HTML controls for audio and video.

• They cannot be styled with CSS, so they may not align with your website’s theme.

• The play/pause buttons are not keyboard accessible.

• They don’t have functionality to forward or rewind the video.

To overcome these limitations, we’ll create our custom video player in the next steps. To start, let’s create a container for the video content:

<div class="controls">
  <button class="play-pause">Play</button>
  <button class="stop">Reset Video</button>
</div>

These will work as the play/pause and reset buttons. Then, let’s remove the controls attribute from the <video> to replace them with our custom controls.

const videoPlayer = document.querySelector("video");
videoPlayer.removeAttribute("controls");

Why do we remove it at run time? Let’s say JavaScript does not load due to some issue. In this case, the user can still use the native controls. Next, let’s add some functionality to our buttons:

const playPauseBtn = document.querySelector(".play-pause");
const resetBtn = document.querySelector(".reset");

playPauseBtn.onclick = () => {
  if (videoPlayer.paused) {
    videoPlayer.play();
    playPauseBtn.textContent = "Pause";
  } else {
    videoPlayer.pause();
    playPauseBtn.textContent = "Play";
  }
};

resetBtn.onclick = () => {
  videoPlayer.pause();
  videoPlayer.currentTime = 0;
  playPauseBtn.textContent = "Play";
};

• The video player object is of type HTMLMediaElement, that contains several methods you can use to control the video.

• For the play/pause button, we add a toggling functionality, with the play() and pause() methods.

• To reset the video, we pause it and set the current time to 0.

Now, our custom video player is keyboard accessible, and able to be styled with CSS. You can also add additional functionality like forward/rewind, a timer, and a progress bar. The steps are similar for a custom audio player.

Check out the MDN Docs for more detail about this functionality.

Audio Transcripts

People who are deaf or hard of hearing cannot easily access audio content. So to make it accessible, you need to add transcripts under any audio or video form of content.

If you run a business, you could pay a professional to do the transcripts. Check out the docs for options. To show the transcript on the UI, you could use a show/hide panel. Referring to the docs, see the audio transcript UI (source code) for an example.

If the audio is a recording of some presentation, you should attach links to any documents or presentation decks. Also, include a description for any visual content being referenced.

Video Closed Captioning and Subtitles

First, let’s understand the difference between captions and subtitles. They are implemented in a similar way and visually, they look the same – but their purposes are different.

Captions denote who’s speaking and describe other sound effects in the video. They are mostly added with people who are deaf or hard of hearing in mind. Subtitles help people who don’t understand the language being spoken in the video, by translating it to text that uses the language of their choice.

Let’s see how to add subtitles to your videos. We write subtitles in WebVTT, a format that contains text along with the range of timestamps indicating which text you want in each part of the video. Following is an example of a subtitles file:

WEBVTT

1
00:00:01.230 --> 00:00:02.606
This is the first subtitle.

2
00:00:04.739 --> 00:00:06.074
This is the second.

Save this file and name it with a .vtt extension. To link this file to your video, include it in a <track> element:

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track
    src="captions.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
    default
  />
</video>

You should include the <track> element inside the <video> element and placed after all the sources. It has the following attributes:

• kind mentions the type of file being referenced.

• srclang indicates the language the subtitles are in.

• label indicates the text that is shown while the user is selecting a language

• src is the path or URL of the subtitles file, that is the .vtt file we created previously.

This will show subtitles for the specified timestamps. This will not only help people with hearing impairments, but is also useful for people who don’t understand the language, or those who are working in a noisy environment.

For people who are visually impaired, you could also include text that describes certain visuals in parts of the video. This text would be read out by screen reader.

You can also add custom styling to subtitle menu and subtitle text. Check out MDN Docs - Adding captions and subtitles to HTML video for the implementation.

Mobile Accessibility

We have covered many key accessibility practices so far, and they should work well on mobile phones as well. But there are some additional considerations you can follow for mobile users.

First, let’s talk about mouse-specific events. We have already seen how to make mouse-specific events accessible in the JavaScript Practices section. Events like mousedown or mouseup are often used for drag and drop functionalities.

But these are not accessible for touchscreen users, so you should add the same functionality to touch-specific events like touchstart and touchend. The following example is in the context of drag and drop:

source.ontouchstart = (e) => {
  // initiate drag
};

dest.ontouchend = (e) => {
   // drop
};

Next, you have to ensure that you are following responsive design when designing your web pages. Responsive designs make sure the website looks good on both desktop and mobile phones. I have written a detailed guide on responsive design, so check it out if you are interested.

Some other mobile accessibility practices that are good to know:

• Do not disable zoom on your website. Both fully-sighted users as well as those who have visual impairments may need to zoom in to read the website’s content on smaller screens.

• When writing navigation menus, you’d normally conceal it and provide a hamburger icon to open it, as the screen is much shorter/smaller on a mobile phone. In these cases, the hamburger menu should be easily accessible. Check out the example of a good hamburger menu from the docs, in mobile view.

• When creating forms, try to minimise the amount of typing the user needs to do, as it can get annoying for mobile users. This is especially important if your website is primarily designed for mobile users. Check out the docs for examples.

Visit MDN Docs-Mobile Accessibility if you want to learn more.

Testing Accessibility with Tools

There are several tools you can use to test the accessibility of your page. Lighthouse in Chrome Developer Tools is an open source tool that analyses a web page for performance, accessibility, SEO, and more. It generates a report on how a page performs in these areas.

Let’s see how it helps in analysing the accessibility of a page:

Open Chrome Dev Tools and navigate to the Lighthouse tab. Click on “Analyse Page Load” and wait for a few seconds. It will show a report that contains info on how your web page scored on Accessibility and other metrics. It will list down any accessibility issues you may have.

Let’s take the following example:

<h1>Welcome</h1>
<img src="image.jpg" />
<button tabindex="2">Click Here</button>
<div onclick="alert('Clicked!')" class="button">Click Me</div>
<form>
  <input type="text" />
</form>

When tested with the Lighthouse audit, it yields the following results:

As you can see, it’s scored 74 on accessibility, meaning there is room for improvement. It has also shown the accessibility issues within your HTML code, as you might have guessed looking at the code:

• Image elements do not have alt attribute

• Form input does not have a label

• tabindex value is greater than 0.

Let’s correct these issues and run the test again:

This time, it has scored 100 on Accessibility since we have followed all the basic practices.

As you can see, this is a really simple HTML page, and it’s much harder to achieve a score of 100 for large websites. But, you should aim to achieve as high a score as possible. This shouldn’t be too challenging if you make accessibility a part of your development process.

The accessibility score on it’s own does not mean your website is fully accessible. You also need to test the following:

• Manual testing with a screen reader (Mac’s Voiceover or Windows’ Narrator).

• Keyboard accessibility – test whether each and every part of your website is keyboard accessible

• Simulating your website with different color contrasts for different visual impairments.

For simulating, Chrome Developer Tools provides a Rendering tool to emulate your website on different preferences, like light/dark mode, high/low color contrast, reduced motion and various visual impairments.

To access it, open Developer Tools, do ⌘+shift+P (Ctrl+Shift+P on Windows) and type “Rendering”. It will open the following window:

If you have added media queries like the following, you can select these preferences and test whether your website behaves accordingly:

@media (prefers-reduced-motion) {
    * {
        animation: none;
    }
}

So, when you select prefers-reduced-motion, you can test if all the animations have been disabled, and how your website functions.

Apart from the Developer Tools, there’s an NPM plugin called eslint-plugin-jsx-a11y that evaluates React JSX code for accessibility issues.

You can find all the code snippets on GitHub.

Conclusion

Accessibility isn’t just a feature added on top of your code – it should be a part of the development process. When you make a website accessible to everyone, it not only increases your user base, but also promotes inclusivity.

Even though the primary benefactors of accessibility are people with disabilities, it also benefits other users by making the website easier to use overall. A lot of the practices mentioned in the article, like using semantic elements, adding the right attributes, and so on are very easy to follow and go a long way towards ensuring accessibility.

If you are a beginner, you have already done a great job learning about accessibility. Start including simple accessibility practices in your projects. Over time, including these practices will become a natural habit.

I hope this handbook becomes your go-to resource for anything related to accessibility. If you think I've missed something or need clarification on any concepts, feel free to reach out to me on Twitter. For more content on web development, check out out my profile.

References

• MDN Docs-Accessibility

• Web Dev Simplified- Guide on Accessibility

Breakpoints mark the points at which a website's layout and content should change to ensure optimal user experience on devices ranging from smartphones and tablets to desktop computers.

It's really important for today's web designers to know how breakpoints work and use them smartly. This helps them create websites that work well on all kinds of devices and are easy for people to use.

In this article, we'll explore breakpoints in detail: why they matter, how to use them effectively, and their role in making websites adjust smoothly to different screen sizes.

Table of Contents

1. What is Responsive Web Design?
2. Why are Breakpoints Important in RWD?
3. Common Breakpoint Ranges for Responsive Design (2024)
4. Factors to Consider When Choosing the Right Breakpoints for Your Project
5. Basic Structure of a Media Query
6. Advanced Breakpoint Techniques
7. Conclusion

What is Responsive Web Design (RWD)?

Responsive Web Design (RWD) is an approach to web design that ensures web pages render well on a variety of devices and window or screen sizes.

It involves using fluid grids, flexible images, and CSS media queries to automatically adapt the layout and content of a website to the device's screen size and orientation.

The goal of responsive web design is to provide an optimal viewing and interaction experience, ensuring easy reading and navigation with minimal resizing, panning, and scrolling across a wide range of devices, from desktop computers to mobile phones.

Why are Breakpoints Important in RWD?

Breakpoints are important in Responsive Web Design (RWD) because they define specific points where a website's layout and content should adapt to different screen sizes and devices.

Here’s why they are crucial:

Device Compatibility

Breakpoints enable websites to adjust their design and layout to ensure compatibility with various devices like smartphones, tablets, laptops, and desktops. This adaptability ensures that users have a consistent and optimized experience regardless of the device they use.

Optimal User Experience

Designers can use breakpoints to tailor the presentation of content, navigation, and functionality based on screen size. This customization enhances user experience by ensuring content is readable, accessible, and easy to interact with across devices.

Fluidity in Design

Instead of creating fixed-width designs that may not scale well, breakpoints allow for fluid grids and flexible elements. This approach ensures that the design remains visually appealing and functional, regardless of the screen dimensions.

Content Prioritization

With breakpoints, designers can prioritize and reorganize content based on device capabilities and user needs. This ensures that essential information remains accessible and prominent, enhancing usability and engagement.

Performance Optimization

Breakpoints make websites load faster and work better on different devices by adjusting how they look and work based on each device's size and type. This is crucial for retaining user interest and reducing bounce rates, particularly on mobile devices with slower internet connections.

SEO Friendliness

Responsive websites with well-implemented breakpoints provide a seamless user experience across devices. Search engines value responsive design because it improves accessibility and usability, potentially leading to better search engine rankings.

Common Breakpoint Ranges for Responsive Design (2024)

In 2024, responsive web design commonly employs a mobile-first approach, ensuring websites are designed to function and look good on smaller screens before scaling up.

Here are the typical breakpoint ranges used for different screen sizes:

Extra Small Screens (Mobile):

• Range: Up to 576px viewport width
• Description: Targets smartphones and small mobile devices in portrait mode.

Small Screens (Tablets):

• Range: 577px to 768px viewport width
• Description: Includes larger smartphones and smaller tablets in portrait mode.

Medium Screens (Large Tablets):

• Range: 769px to 1024px viewport width
• Description: Targets larger tablets and smaller desktop screens in landscape mode.

Large Screens (Desktops):

• Range: 1025px to 1440px viewport width
• Description: Targets standard desktop screens and larger laptops.

Extra Large Screens (Large Desktops):

• Range: 1441px and above viewport width
• Description: Includes large desktop monitors and wide-screen displays.

Example CSS Media Queries:

/* Example of CSS media queries for common breakpoint ranges */

/* Extra Small Screens (Mobile) */
@media only screen and (max-width: 576px) {
  /* CSS rules specific for extra small screens */
  .container {
    width: 100%; /* Adjust layout for full-width on small screens */
  }
}

/* Small Screens (Tablets) */
@media only screen and (min-width: 577px) and (max-width: 768px) {
  /* CSS rules specific for small screens */
  .container {
    width: 80%; /* Adjust layout for smaller container width on tablets */
  }
}

/* Medium Screens (Large Tablets) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  /* CSS rules specific for medium screens */
  .container {
    width: 70%; /* Adjust layout for moderate container width on large tablets */
  }
}

/* Large Screens (Desktops) */
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
  /* CSS rules specific for large screens */
  .container {
    width: 60%; /* Adjust layout for narrower container width on desktops */
  }
}

/* Extra Large Screens (Large Desktops) */
@media only screen and (min-width: 1441px) {
  /* CSS rules specific for extra large screens */
  .container {
    width: 50%; /* Adjust layout for even narrower container width on large desktops */
  }
}

In this example:

• Each media query targets a specific range of viewport widths to adjust the layout and styling of the .container element accordingly.
• The percentages used for width in the examples demonstrate how designers can progressively adjust content presentation to optimize user experience across various devices and screen sizes.

Factors to Consider When Choosing the Right Breakpoints for Your Project

Choosing the right breakpoints for your project involves considering several factors:

Target Audience and Devices

Understand the devices your target audience uses. This includes screen sizes of smartphones, tablets, laptops, and desktops. Prioritize breakpoints that align with these devices to ensure a seamless user experience.

Content Complexity

Evaluate how your content responds to different screen sizes. Complex layouts may require additional breakpoints to maintain readability and usability across devices.

Design Requirements

Your design specifications play an important role. Consider breakpoints that accommodate specific design elements such as navigation menus, images, forms, and grids. Ensure that these elements adapt well to different screen sizes.

Analyzing Device Usage Statistics

Use analytics to determine the most common screen sizes among your audience. Focus on breakpoints that optimize user experience on these prevalent devices.

Basic Structure of a Media Query

Implementing breakpoints with media queries is essential for creating responsive web designs that adapt to different screen sizes and devices.

A media query allows you to apply CSS styles based on certain conditions, such as screen width, height, device orientation, etc. The basic syntax of a media query is:

@media media-type and (media-feature) {
  /* CSS styles */
}

Where:

• media-type specifies the type of media, typically screen for devices with screens.
• media-feature defines the condition, such as width, min-width, max-width, orientation, and so on.

Now let's talk about how you can structure and use media queries effectively.

Using min-width and max-width for Breakpoints

The most common approach to defining breakpoints is using min-width and max-width media features.

min-width: Specifies the minimum width at which the styles should apply. It targets screens wider than the specified width.

Example:

@media screen and (min-width: 768px) {
  /* Styles for screens wider than 768px */
}

max-width: Specifies the maximum width at which the styles should apply. It targets screens narrower than the specified width.

Example:

@media screen and (max-width: 1024px) {
  /* Styles for screens narrower than or equal to 1024px */
}

Media Queries for Different Breakpoint Ranges

To create a responsive design that adapts to various devices, you typically define multiple breakpoints to cover different screen sizes:

Small Screens (Mobile Phones):

@media screen and (max-width: 576px) {
  /* Styles for small screens */
}

Medium Screens (Tablets):

@media screen and (min-width: 577px) and (max-width: 992px) {
  /* Styles for medium screens */
}

Large Screens (Desktops and Laptops):

@media screen and (min-width: 993px) {
  /* Styles for large screens */
}

Extra Large Screens (Large Desktops and Monitors):

@media screen and (min-width: 1200px) {
  /* Styles for extra large screens */
}

Example: Comprehensive Media Queries

Here’s an example of how you might implement media queries for a responsive layout:

/* Default styles for all screens */
body {
  font-size: 16px;
}

/* Small screens (phones) */
@media screen and (max-width: 576px) {
  body {
    font-size: 14px;
  }
}

/* Medium screens (tablets) */
@media screen and (min-width: 577px) and (max-width: 992px) {
  body {
    font-size: 16px;
  }
}

/* Large screens (desktops and laptops) */
@media screen and (min-width: 993px) {
  body {
    font-size: 18px;
  }
}

/* Extra large screens (large desktops and monitors) */
@media screen and (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

In this example:

• Font sizes adjust based on the screen size to ensure readability and optimal user experience.
• Each media query targets specific ranges of screen widths using min-width and max-width.
• Adjustments in font size are used here for demonstration purposes, but you can apply any CSS styles needed for your design.

Advanced Breakpoint Techniques

Implementing advanced breakpoint techniques enhances the responsiveness and adaptability of your web designs.

Here are several techniques you can use:

1. Container Queries (Adapting to Content Width)

Container queries allow elements to respond not to the viewport size but to their own container's dimensions. This is particularly useful when you want elements to adapt based on their parent container's width rather than the overall screen width.

Example using a hypothetical container query syntax (not currently natively supported, but evolving in standards like CSS Houdini):

.container {
  /* Apply styles based on container width */
}

@container (min-width: 600px) {
  .container {
    /* Adjust styles for containers wider than 600px */
  }
}

Container queries are highly anticipated as they provide more granular control over responsive design within individual components or sections.

2. Flexible Units (ems, rems) for Responsive Layouts

Flexible units like em (relative to the font-size of the element) and rem (relative to the font-size of the root element) are essential for creating scalable and responsive layouts.

Using em and rem:

• em units scale relative to their parent element's font size. This can be useful for creating modular designs where elements resize proportionally.
• rem units are relative to the root element (html), providing a consistent base for scaling across the entire document.

/* Example using rem for scalable font sizes */
body {
  font-size: 16px; /* Base font size */
}

h1 {
  font-size: 2rem; /* 32px on 16px base */
}

p {
  font-size: 1.5rem; /* 24px on 16px base */
}

@media screen and (max-width: 768px) {
  body {
    font-size: 14px; /* Adjust base font size for smaller screens */
  }
}

3. Using CSS Grid and Flexbox for Responsive Design

CSS Grid and Flexbox are powerful layout tools that offer flexible and responsive design options.

CSS Grid: Ideal for two-dimensional layouts, allowing precise control over rows and columns. Grids can adapt to different screen sizes with media queries or grid-auto-flow properties.

Example of responsive grid layout:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
}

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Flexbox: Best for simpler one-dimensional layouts or aligning items within a container. It’s great for navigation bars, sidebars, and elements within a grid cell.

Example of responsive Flexbox layout:

.container {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

• Container Queries are evolving and promise more precise control over responsive design elements based on their container's size.
• Flexible Units (em, rem) allow scalable and accessible typography and layout proportions across various screen sizes.
• CSS Grid and Flexbox provide robust layout options for creating responsive designs that adapt to different devices and viewport sizes.

Conclusion

In conclusion, breakpoints play a pivotal role in crafting a responsive web design that adapts seamlessly across different devices and screen sizes.

The flexibility offered by media queries, utilizing min-width and max-width to define breakpoints, allows for precise control over how content and layouts respond to varying viewport dimensions.

Advanced techniques like container queries (as they evolve), flexible units (em, rem), and leveraging CSS Grid and Flexbox further enhance the adaptability and scalability of designs.

In essence, breakpoints are not just technical specifications but critical decisions that impact user interaction and satisfaction.

Connect with me on LinkedIn.

This is because everyone has a particular way they process information. In design, this is called viewing (or reading) patterns. As a designer, it's important to understand how your users (including potential ones) consume information, and how best to place the most crucial information so nobody misses it.

In this article, we'll talk about different viewing patterns, how to choose the best ones for your project, and we'll also see real-life examples of these patterns.

Here's what we'll cover:

1. What you need to know before reading
2. The origin of viewing patterns
3. Common viewing patterns
4. Why are viewing patterns important?
5. How should I choose a viewing pattern for my design project?
6. Conclusion

Prerequisites:

Before we go into the article proper, please note that it'll be helpful if you have basic knowledge of core design principles and the importance of these principles in guiding users' attention and organizing information effectively.

But this is not necessary, as I wrote this article for everyone, including absolute beginners.

The Origin of Viewing Patterns

The concept of viewing patterns can be traced to the field of psychology, specifically the study of eye movements and visual perception.

While people have been reading and consuming visual information for a long time, proper observation and analysis of reading behaviors emerged with the development of eye-tracking technology and scientific research methodologies in the late 19th and early 20th centuries.

A lot of pioneers and researchers such as Louis Emile Javal, Edmund Huey, Alfred L. Yarbus, and Charles H. Judd conducted experiments to observe eye movemts and behaviours in the late 19th century and early to mid-20th century.

The formalization of viewing/reading patterns as design principles in the context of graphic design and information architecture began to gain traction in the latter half of the 20th century. Designers and usability experts started applying insights from eye-tracking studies to optimize layouts for print media, signage, and digital interfaces.

Over time, the study of viewing patterns expanded beyond text-based reading to include diverse media formats, such as web pages, multimedia presentations, and interactive interfaces.

Today, viewing patterns continue to evolve with advancements in technology and changes in user behaviors, guiding the way designers approach layout, navigation, and content presentation.

Common Viewing Patterns

Now that we know how viewing patterns came about, let's talk about some common viewing patterns in existence.

The F-pattern

This is a common viewing pattern observed in online content consumption. According to this pattern, users scan the page in a horizontal movement across the top, then move down the page, scanning shorter horizontal sections. They continue to read less of the content, until they finally start reading vertically, forming the F-shape.

Diagram illustrating how the F-pattern works on a wireframe. Image Credit: Nielsen Norman Group

To capitalize on the F-pattern, you can place important information such as headlines, key points, and CTAs along the top and the left-hand side of the page to ensure maximum visibility.

Some examples of real-life platforms that utilize the F-pattern include:

• Shopify
• LinkedIn
• The New York Times

The Z-Pattern

The Z-pattern is another common viewing pattern. This pattern can be noticed in designs where the user is expected to move their eyes in a zig-zag pattern across the page.

This pattern typically starts with a horizontal movement across the top of the page (forming the first stroke of the "Z"), followed by a diagonal movement from the top-right to the bottom-left (forming the second stroke), and finally, another horizontal movement across the bottom of the page (completing the "Z").

Diagram illustrating the Z-pattern. Image Credit: UX Planet

To capitalize on this pattern, you can align information on the predicted path of the Z-pattern to guide users' attention more effectively, especially in designs like landing pages and presentations.

Some examples of real-life platforms that utilize the Z-pattern include:

• Artykul
• Mohash
• Des Climbing

The Gutenberg Diagram

The Gutenberg diagram outlines a viewing pattern based on the natural eye movement of Western readers, and is influenced by cultural and linguistic factors.

The Gutenberg Diagram divides the page into four quadrants: the primary optical area (top-left), the strong fallow area (top-right), the weak fallow area (bottom-left), and the terminal area (bottom-right).

The pattern suggests that the eye will sweep across and down the page in a series of horizontal movements called axes of orientation. Each sweep starts a little further from the left edge and moves a little closer to the right edge. The overall movement is for the eye to travel from the primary area to the terminal area... – Stephen Bradley (Vanseo Design)

Image illustrating Gutenberg diagram divided into 4 quadrants. Image Credit: Techwala

You can strategically place content based on the Gutenberg diagram to optimize visual hierarchy and readability, ensuring that important information receives the most attention.

Some examples of real-life platforms that utilize the Gutenberg diagram include:

• Wikipedia
• BBC News

Layer-Cake Pattern

The layer-cake pattern involves stacking multiple layers of content vertically, with each layer containing distinct information or visual elements.

Image illustrating the layer-cake pattern on a layout. Image Credit: Chip Cullen

Users typically engage with this pattern by scanning the top layer first, then sequentially exploring deeper layers based on their interest or curiosity. You can use this pattern to present complex information in a more structured format, allowing users to navigate through layers of content at their own pace.

Some examples of real-life platforms that utilize the Layer-Cake pattern include:

• Medium
• Squarespace

Why are Viewing Patterns Important?

Viewing patterns help you guide how users view and consume information on your designs. They help you arrange content in a way that naturally aligns with your users' reading habits. By placing information where users are most likely to look first, you're ensuring that key messages are effectively communicated.

Also, understanding viewing patterns help you cater to the needs of a diverse group of users. Different people process information in different ways and understanding these habits ensure that you design with accessibility in mind.

What's more, designs that align with existing viewing patterns provide a more intuitive and less stressful user experience.

How Should I Choose a Viewing Pattern for my Design Project?

Choosing a viewing pattern for your design depends on a number of factors including, the context of your project, users' preferences, goals of the project, and so on.

Here's a step-by-step guide to help you select the best reading pattern for your project:

1. Know your Users: You have to first understand the demographics of your target or potential users. What do they prefer? What are their goals? In what situations would they use your project? Gather insights into how they interact with content and their technical proficiency.
2. Define your Project Goals: Make sure to clarify the objectives and desired outcomes of the project you're working on. Are you trying to inform or facilitate a specific action? Should your design be very serious or a little playful? You need to identify the key messages you want to pass across to your users, and prioritize them based on importance.
3. Evaluate Context and Platform: Take into account how your users would view your product. Will they view your content on a website, application or a print medium? Consider the device types and screen sizes that your users are likely to use.
4. Select Viewing Pattern: Considering the available data and the insights you've gathered, you can go ahead to choose a viewing pattern that best aligns with your project objectives.

Now that you've selected a viewing pattern for your design, make sure to constantly monitor it's effectiveness through testing and feedback.

Note: You can interchange these steps or even skip some. Just make sure to do whatever works best for your users.

Let's do a little practical exercise:

Say you're working on a hero section for a new e-commerce website selling outdoor gear. Some things you need to consider for this project include:

• The primary goal: to showcase the latest product offerings on the hero section and entice visitors to visit the website further. You'll want to highlight key features, products, and calls-to-action (CTAs) to encourage conversion such as making a purchase or signing up for a newsletter.
• Your target users: likely outdoor enthusiasts, including hikers, campers, and adventure seekers. They'll likely be people with limited time to spend on each webpage.
• Context and platform: Users will likely access the page on several devices, including desktop computers, laptops, tablets, and smartphones. You'll want to consider how the design will adapt responsively across different screen sizes and orientations, priortizing mobile optimization for on-the-go users.

Due to the time constraints of your users, and the need to capture attention quickly, the F-pattern may be a suitable choice. Place high-priority content, such as featured products, top deals, and prominent CTAs, along the top and left-hand side of the page, where users are most likely to look first.

You can use visual cues such as arrows, bold typography, and contrasting colors to draw attention to key elements and guide users' eye movements down the page.

Here's what I came up with from the practical design:

Hero section I designed using the F-pattern.

In the design above, in sequential order, there's:

• a top navigation containing the logo, links to other sub-pages, and the log-in and sign up CTAs(call-to-actions).
• a main heading, description, and call-to-action (Shop Now) on the left-hand side of the page.
• a section showing latest arrivals on the website.

Image showing how the F-pattern is depicted on the design.

I would love to see the results of this practical exercise on your end.

Conclusion

Viewing patterns are very important as I mentioned earlier. They are invaluable for designers across different disciplines, and are easy to understand and incorporate into your designs.

You just need to be sure of what works best for your users, and design with that in mind. Also make sure to experiment with different viewing patterns so you can discover your own unique style. Have fun experimenting!

In this guide, we'll explore how to build a login page with Material Tailwind and Tailwind CSS that not only looks great but also works seamlessly across devices.

Whether you're new to web design or just curious about these tools, we'll walk you through each step. Let's dive in and start building!

Happy coding 🤘🏼

Table of Contents

Check out the article chapters:

1. Introduction to Tailwind CSS and Material Tailwind
2. How to Set Up Your Development Environment
3. How to Install Necessary Dependencies for your Login Page
4. How to Design the Layout with Tailwind CSS
5. How to Integrate Material Tailwind Components
6. How to Style Input Fields and Buttons
7. How to Implement Responsive Design
8. How to Add Interactivity and Validation
9. Security and Best Practices for Login Pages
10. Conclusions

1. Introduction to Tailwind CSS and Material Tailwind

Web design has many tools to help make good-looking and easy-to-use websites.

Two useful tools are Tailwind CSS and Material Tailwind. Tailwind CSS helps web designers make websites quickly without writing a lot of extra code. Material Tailwind adds nice-looking designs that are easy to change. Together, they can help you make a Tailwind CSS login page that looks good and works well.

In this section, you can see more details about these tools and why they're useful.

What is Tailwind CSS?

Tailwind CSS homepage

Tailwind is a utility-first CSS framework. Instead of pre-designed components, it provides low-level utility classes that let you build custom designs without leaving your HTML.

Since its launch, Tailwind CSS has taken the web development community by storm. By 2023, the framework had gained over 400 million downloads on Github, a proof of its growing adoption among developers. Several popular companies and platforms also started adopting Tailwind, for example: Vercel, Algolia, Netlify, and others. The Github statistics show over 74,000 stars, which indicates a strong community backing.

Why use Tailwind CSS:

• Speed: Quickly build UIs with utility classes instead of writing custom CSS.
• Flexibility: You can customize designs without restrictions.
• Responsiveness: Easily make designs that work on all device sizes.

Example: Instead of writing custom CSS for a button, use utility classes directly in your HTML.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
   View More
</button>

What is Material Tailwind?

Material Tailwind homepage

Material Tailwind is a components library for Tailwind CSS that implements Google's Material Design guidelines. It combines the best of both worlds: the utility-first approach of Tailwind and the design philosophy of Material Design.

Why use Material Tailwind:

• Consistency: Follows Material Design guidelines, ensuring familiar UI/UX patterns.
• Customizable: Being built on Tailwind, it's highly customizable.
• Component-rich: Comes with pre-built components that speed up development.

Example: Imagine you want a Material Design inspired button. With Material Tailwind, it's straightforward.

<button
  class="middle none center rounded-lg bg-pink-500 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
  data-ripple-light="true"
>
  View More
</button>

If you are a React fan too, let me tell you that Material Tailwind also comes with Tailwind CSS + React components. For more details, check out the Material Tailwind React documentation.

Now let’s see how you can use these two amazing tools to create your desired Login Page.

2. How to Set Up Your Development Environment

Creating a development environment tailored for your web project ensures smooth and efficient workflow. For our Tailwind CSS login page, we’ll start from scratch.

Prerequisites:

• Node.js and npm (Node Package Manager): These are essential for installing and managing libraries we’ll be using.
• A Text Editor or IDE: While any text editor will work, Visual Studio Code (VS Code) is recommended due to its extensive library of extensions beneficial for web development.
• Terminal or Command Prompt: We'll be running commands to set up and manage our project.

Install Node.js and npm

To start, visit the Node.js official website and download the recommended version for your OS.

After installation, verify that Node.js and npm are correctly installed by running the following commands:

node -v
npm -v

Set up a new project

Create a new directory for your project:

mkdir tailwind-material-login
cd tailwind-material-login

Then initialize a new npm project:

npm init -y

Text Editor/IDE Setup (VS Code)

If you haven’t already, download and install VS Code. Then go ahead and open your project directory in VS Code.

Optionally, you can install extensions that enhance Tailwind CSS development:

• Tailwind CSS IntelliSense: Offers class name autocompletions, linting, and more.
• Live Server: Allows you to see live changes without manually refreshing the browser.

Terminal in VS Code

VS Code offers an integrated terminal. This means you can run commands directly within your editor.

To open it, go to the top menu: View > Terminal or press Ctrl + a backtick.

Basic Project Structure

Create a basic structure for your project:

mkdir src
touch src/index.html
touch src/styles.css
touch src/main.js

This creates a src directory with an HTML file, a CSS file, and a JavaScript file.

3. How to Install Necessary Dependencies for your Login Page

Setting up your libraries and frameworks is crucial to build upon a solid foundation. For our Tailwind CSS login page, we'll be primarily using Tailwind CSS and Material Tailwind.

Here’s a step-by-step guide to installing and configuring these dependencies.

How to install Tailwind CSS

First, you'll need to install the Tailwind CSS package. Using npm, install the Tailwind CSS package with:

npm install tailwindcss

Then, integrate Tailwind into your CSS. Inside your src/styles.css file, add the following Tailwind directives:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Next, you'll need to generate a configuration file. While Tailwind works out of the box, a configuration file (tailwind.config.js) provides customization capabilities.

To generate it:

npx tailwindcss init

This creates a minimal config file in your root directory. You can extend this file as needed.

Finally, to process your CSS and apply Tailwind’s transformations, add a script in your package.json under the "scripts" section:

"scripts": {
"build-css": "tailwind build src/styles.css -o src/output.css"
}

Run the script with:

npm run build-css

This will generate an output.css containing all Tailwind's styles. Include this file in your HTML.

How to install Material Tailwind

First, install the Material Tailwind package. Again, you can use npm:

npm i @material-tailwind/html

Now you need to integrate it into your project. Material Tailwind provides components with styles applied. You can use them directly in your HTML or customize them further in your CSS.

For instance, to use a Material Tailwind button:

<button
  class="middle none center rounded-lg bg-pink-500 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
  data-ripple-light="true"
>
  View More
</button>

Next, install the required fonts and icons. Material Design recommends specific fonts and icons. Include these in your src/index.html:

<!-- Material Icons Link -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/> 

<!-- Font Awesome Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous"/>

PostCSS and Autoprefixer (Recommended)

Install PostCSS and Autoprefixer:

npm install postcss postcss-cli autoprefixer

Go ahead and configure them by creating a postcss.config.js in your root directory:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
};

Modify your build-css script in package.json to:

"build-css": "postcss src/styles.css -o src/output.css"

This ensures your Tailwind CSS styles are vendor-prefixed, making them compatible across different browsers.

Add into your project’s <head> the output.css styling file.

<link rel="stylesheet" href="pathTo/output.css" />

4. How to Design the Login Page Layout with Tailwind CSS

A login page typically consists of a logo or branding, input fields (like username and password), a submit button, and often some secondary options or links, such as "Forgot Password" or "Sign Up".

Main Container:

Start with a main container that centers its content both vertically and horizontally.

<div class="min-h-screen flex items-center justify-center bg-gray-100">
<!-- Login Card Content Will Go Here -->
</div>

Login Card:

Create a centered card layout that will house the login form. Introduce the necessary input fields for the login process, typically an email/username and password.

<div class="relative flex flex-col text-gray-700 bg-white shadow-md w-96 rounded-xl bg-clip-border">
  <div
    class="relative grid mx-4 mb-4 -mt-6 overflow-hidden text-white shadow-lg h-28 place-items-center rounded-xl bg-gradient-to-tr from-gray-900 to-gray-800 bg-clip-border shadow-gray-900/20">
    <h3 class="block font-sans text-3xl antialiased font-semibold leading-snug tracking-normal text-white">
      Sign In
    </h3>
  </div>
  <div class="flex flex-col gap-4 p-6">
    <div class="relative h-11 w-full min-w-[200px]">
      <input
        class="w-full h-full px-3 py-3 font-sans text-sm font-normal transition-all bg-transparent border rounded-md peer border-blue-gray-200 border-t-transparent text-blue-gray-700 outline outline-0 placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
        placeholder=" " />
      <label
        class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.1] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
        Email
      </label>
    </div>
    <div class="relative h-11 w-full min-w-[200px]">
      <input
        class="w-full h-full px-3 py-3 font-sans text-sm font-normal transition-all bg-transparent border rounded-md peer border-blue-gray-200 border-t-transparent text-blue-gray-700 outline outline-0 placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
        placeholder=" " />
      <label
        class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.1] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
        Password
      </label>
    </div>
    <div class="-ml-2.5">
      <div class="inline-flex items-center">
        <label htmlFor="checkbox" class="relative flex items-center p-3 rounded-full cursor-pointer">
          <input type="checkbox"
            class="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-gray-900 checked:bg-gray-900 checked:before:bg-gray-900 hover:before:opacity-10"
            id="checkbox" />
          <span
            class="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor"
              stroke="currentColor" stroke-width="1">
              <path fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd"></path>
            </svg>
          </span>
        </label>
        <label class="mt-px font-light text-gray-700 cursor-pointer select-none" htmlFor="checkbox">
          Remember Me
        </label>
      </div>
    </div>
  </div>
  <div class="p-6 pt-0">
    <button
      class="block w-full select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button">
      Sign In
    </button>
    <p class="flex justify-center mt-6 font-sans text-sm antialiased font-light leading-normal text-inherit">
      Don't have an account?
      <a href="#signup"
        class="block ml-1 font-sans text-sm antialiased font-bold leading-normal text-blue-gray-900">
        Sign up
      </a>
    </p>
  </div>
</div>

Login Button:

Place the primary action button (Login) below the input fields.

<button
  class="block w-full select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
  type="button">
  Sign In
</button>

Secondary Options:

Beneath the login button, offer options such as "Forgot Password" or "Sign Up".

5. How to Integrate Material Tailwind Components

Material Design, initiated by Google, is a design system that combines classic principles of good design with innovative technologies. When fused with the utility-first approach of Tailwind CSS via Material Tailwind, it provides a powerful toolkit to create interactive and visually appealing user interfaces.

Material Tailwind provides styled components that adhere to Material Design guidelines but harness the utility of Tailwind. This means that while most of the styling is pre-configured, you can still utilize Tailwind classes for customization.

• Input Fields

Instead of the standard Tailwind-styled inputs, you can introduce Material-styled input fields for a more tactile and animated experience:

<div class="relative h-10 w-full min-w-[200px]">
  <input
    class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
    type="email"
    name="email"
  />
  <label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
    Email
  </label>
</div>

<div class="relative h-10 w-full min-w-[200px]">
  <input
    class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
    type="password"
    name="password"
  />
  <label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
    Password
  </label>
</div>

These components offer a floating label effect and subtle focus animations out of the box.

• Buttons

Material Tailwind offers a set of button styles that fit within the Material Design paradigm:

<button
  class="middle none center rounded-lg bg-pink-500 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
  data-ripple-light="true"
>
  Login
</button>

This renders a raised button with Material's signature ripple effect on click.

• Tooltips

To enhance user guidance, you can add tooltips to your components:

<button
  data-ripple-light="true"
  data-tooltip-target="tooltip"
  class="middle none center rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
>
  Show Tooltip
</button>
<div
  data-tooltip="tooltip"
  class="absolute z-50 whitespace-normal break-words rounded-lg bg-black py-1.5 px-3 font-sans text-sm font-normal text-white focus:outline-none"
>
  Login Form
</div>

When users hover over the element, they'll see a tooltip providing additional information.

• Incorporating Material Icons

Material Design also has a rich set of icons. Material Tailwind makes it easy to incorporate these:

<button
  class="item-center middle none center flex justify-center rounded-lg bg-pink-500 p-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
  data-ripple-light="true"
>
  <i class="fas fa-heart text-lg leading-none"></i>
</button>

Make sure you've already linked to Material icons in your HTML as instructed earlier.

• Customizing Material Components

While Material Tailwind components come pre-styled, you can still leverage Tailwind utility classes for customizations:

<button 
  class="button button-pink !bg-blue-500 px-4" 
  data-ripple-light="true"
>
  Button
</button>

Here, we've overridden the default primary color with a custom shade of purple from Tailwind's color palette.

Incorporating Material Tailwind components provides an elegant touch to the login page, combining the efficiency of Tailwind CSS with the visual and interactive richness of Material Design. The result is a responsive, user-friendly, and visually cohesive login experience.

Also, you can check the components library’s Tailwind CSS login page templates.

6. How to Style Input Fields and Buttons

The appearance and feel of input fields and buttons play a pivotal role in user experience. They're the primary interaction points. Let's focus on giving them a sleek, user-friendly design using Material Tailwind and Tailwind CSS.

1. Material Tailwind Input Fields:

Material Tailwind offers a more polished look for input fields out of the box. Here's how you can integrate them:

<div class="relative h-11 w-full min-w-[200px]">
  <input
    class="peer h-full w-full border-b border-blue-gray-200 bg-transparent pt-4 pb-1.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border-blue-gray-200 focus:border-pink-500 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
    type="email"
    name="email"
  />
  <label class="after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-500 transition-all after:absolute after:-bottom-1.5 after:block after:w-full after:scale-x-0 after:border-b-2 after:border-pink-500 after:transition-transform after:duration-300 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.25] peer-placeholder-shown:text-blue-gray-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:after:scale-x-100 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
    Email
  </label>
</div>

<div class="relative h-11 w-full min-w-[200px]">
  <input
    class="peer h-full w-full border-b border-blue-gray-200 bg-transparent pt-4 pb-1.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border-blue-gray-200 focus:border-pink-500 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
    type="password"
    name="password"
  />
  <label class="after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-500 transition-all after:absolute after:-bottom-1.5 after:block after:w-full after:scale-x-0 after:border-b-2 after:border-pink-500 after:transition-transform after:duration-300 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.25] peer-placeholder-shown:text-blue-gray-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:after:scale-x-100 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
    Password
  </label>
</div>

These fields come with improved focus effects and an overall refined look, making them more engaging.

2. Enhancing with Icons:

Integrating Material icons can guide users and enhance visual cues:

<div class="relative h-10 w-full min-w-[200px]">
  <div class="absolute top-2/4 right-3 grid h-5 w-5 -translate-y-2/4 place-items-center text-blue-gray-500">
    <i class="fas fa-heart" aria-hidden="true"></i>
  </div>
  <input
    class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 !pr-9 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
  />
  <label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
    Input With Icon
  </label>
</div>

The email field now includes a mail icon on the left, giving users a clear indication of the input type.

3. Material Tailwind Buttons:

Material Tailwind buttons come pre-styled with Material aesthetics. However, you can further customize their appearance with Tailwind utility classes:

<button
  class="middle none center rounded-lg bg-pink-500 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
  data-ripple-light="true"
>
  Login
</button>

In this example, the button has a primary blue background color with different shades on hover and active states.

4. Button Variations:

Offering secondary or tertiary actions? You can use outlined or text buttons:

• Gradient Button:

<button
  class="middle none center mr-3 rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 py-3 px-6 font-sans text-xs font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
  data-ripple-light="true"
>
  Gradient Button
</button>

• Outlined Button:

<button
  class="middle none center mr-3 rounded-lg border border-pink-500 py-3 px-6 font-sans text-xs font-bold uppercase text-pink-500 transition-all hover:opacity-75 focus:ring focus:ring-pink-200 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
  data-ripple-dark="true"
>
  Outlined Button
</button>

• Text Button:

<button
  class="middle none center rounded-lg py-3 px-6 font-sans text-xs font-bold uppercase text-pink-500 transition-all hover:bg-pink-500/10 active:bg-pink-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
  data-ripple-dark="true"
>
  Text Button
</button>

5. Responsiveness and Sizing:

Remember to consider different device sizes. Tailwind's responsive utilities can help:

<div class="relative h-10 w-full md:w-50 lg:w-24">
  <input
    class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
    type="email"
  />
  <label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
    Required
  </label>
</div>

This input field takes the full width on smaller screens, but only half the width on larger ones.

7. How to Implement Responsive Design

A significant strength of Tailwind CSS lies in its mobile-first approach to responsive design. Ensuring your login page looks good and functions well on all devices is crucial for user experience.

Tailwind CSS is built with a mobile-first mindset. This means that by default, the classes you apply are for mobile views. To target larger screens, you utilize breakpoints. For instance:

.text-sm md:text-base lg:text-xl

On mobile, the text size would be sm, on medium-sized screens (like tablets) it would be base, and on large screens (like desktops) it would be xl.

• Responsive Card Layout: While our login card may look great on desktop, it might be too narrow on mobile. You can adjust this:

<div class="relative flex flex-col text-gray-700 bg-white shadow-md w-96 rounded-xl bg-clip-border">
<!-- Login Content -->
</div>

Here, we're using less padding (p-4) and taking full width (w-full) on mobile, but increasing the padding (md:p-8) and setting a fixed width (md:w-96) on medium screens and above.

• Adapting Input Fields and Buttons: Ensure that interactive elements are easily accessible on touch devices:

<div class="relative h-10 w-full mb-4 md:mb-0">
  <input
    class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
    type="email"
  />
  <label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
    Email
  </label>
</div>
<button
  class="middle none center mr-3 rounded-lg border border-pink-500 py-3 px-6 font-sans text-xs font-bold uppercase text-pink-500 transition-all hover:opacity-75 focus:ring focus:ring-pink-200 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
  data-ripple-dark="true"
>
  Login
</button>

On mobile, the input fields and buttons take up the full width for easier touch access but adapt to more spacious designs on larger screens.

• Handling Landscape Mode: Sometimes, especially on mobile devices, landscape mode can drastically alter layouts. Consider adding specific styles for this using Tailwind's landscape plugin (if you've added it to your configuration):

<div class="mt-10 landscape:mt-4">
<!-- Login Content -->
</div>

In landscape mode, the top margin is reduced to accommodate the shorter viewport height.

• Typography Adjustments: Optimal readability is essential. Ensure text sizes are appropriate for various devices:

<h2 
  class="block font-sans text-4xl font-semibold leading-[1.3] tracking-normal text-inherit antialiased"
>
  Sign In to Your Account
</h2>

On mobile, the title is slightly smaller, but it scales up on medium and larger screens.

• Testing Responsiveness: While Tailwind offers the tools to create responsive designs, always test your layouts on actual devices or using browser tools. This ensures a consistent experience across devices and resolutions.

8. How to Add Interactivity and Validation

A successful login page isn't just about looks – it must provide feedback, handle user input gracefully, and validate that input to ensure security and functionality.

Material Tailwind components come with built-in animations and feedback mechanisms. For instance, when you click a Material Tailwind button, you'll see a ripple effect, providing immediate feedback to the user.

Toggle Password Visibility:

A common feature in login forms is the ability to toggle password visibility. This improves user experience, especially on mobile devices where typing mistakes are more frequent. Using Material icons and some simple JavaScript:

<form id="loginForm">
  <div class="relative mb-4">
    <div class="relative h-10 w-full min-w-[200px]">
      <div class="absolute top-2/4 right-3 grid h-5 w-5 -translate-y-2/4 place-items-center text-blue-gray-500">
        <i class="fas fa-heart" aria-hidden="true"></i>
      </div>
      <input
        class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 !pr-9 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
        placeholder=" "
        type="password"
        id="password"
      />
      <label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
      Password
      </label>
    </div>
    <button
      class="middle none center mr-3 rounded-lg border border-pink-500 py-3 px-6 font-sans text-xs font-bold uppercase text-pink-500 transition-all hover:opacity-75 focus:ring focus:ring-pink-200 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      data-ripple-dark="true"
      id="togglePassword"
    >
      Submit
    </button>
  </div>
</form>

<script>
    const passwordField = document.getElementById('password');
    const togglePasswordBtn = document.getElementById('togglePassword');

    togglePasswordBtn.addEventListener('click', function() {
        if (passwordField.type === "password") {
            passwordField.type = "text";
        } else {
            passwordField.type = "password";
        }
    });
</script>

Clicking the visibility icon will now toggle the password field between visible and obscured states.

Client-Side Validation:

While never a replacement for server-side validation, client-side validation provides immediate feedback:

<div class="relative h-10 w-full min-w-[200px]">
  <div class="absolute top-2/4 right-3 grid h-5 w-5 -translate-y-2/4 place-items-center text-blue-gray-500">
    <i class="fas fa-heart" aria-hidden="true"></i>
  </div>
  <input
    class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 !pr-9 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
    type="email"
    id="email"
    name="email"
    required
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
  />
  <label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
  Email
  </label>
</div>

The required attribute ensures the field is not left empty, and the pattern attribute uses a basic regex to validate email structure.

Handling Form Submission:

When the user attempts to log in, you can provide feedback using JavaScript:

document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();

    // Fetch input values
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    // Example: Check if credentials are empty
    if (!email || !password) {
        alert('Please fill in all fields.');
        return;
    }

    // TODO: Handle actual submission to server

    // On success:
    // alert('Logged in successfully!');

    // On failure:
    // alert('Invalid credentials. Please try again.');
});

The code above prevents the default form submission and provides feedback depending on the input. This is a simplistic approach, and in real-world scenarios, you'd interact with server endpoints to authenticate the user.

Handling Errors and Feedback:

It's crucial to provide clear feedback in the event of errors or successful actions. Consider using modals, snack bars, or simple inline messages to communicate the status of actions to users.

For example, using Tailwind:

<div class="bg-red-500 text-white p-4 rounded-md mt-4" id="errorMessage" style="display: none;">
Invalid credentials. Please try again.
</div>

Then, using JavaScript, you can show or hide this error message based on the authentication result.

9. Security and Best Practices for Login Pages

Security is paramount when dealing with user authentication. A well-designed login page not only enhances user experience but also acts as the first line of defense against potential threats.

HTTPS and Encryption:

Before any other consideration, ensure your website uses HTTPS. This encrypts data transmitted between the user's browser and your server, protecting it from eavesdropping and tampering.

Password Security:

Client-Side:

• Never store passwords in plain text or local storage.
• Use password input fields (type="password") to hide password characters.

Server-Side:

• Always hash and salt passwords before storing them in your database.
• Consider using proven libraries like bcrypt for hashing.

Avoid Verbose Error Messages:

If authentication fails, avoid specifying whether it was the username or password that was incorrect. Instead, use generic messages:

alert('Invalid login credentials. Please try again.');

This prevents attackers from determining if a particular email or username is registered with your site.

• Limit Login Attempts: Implement a system to track failed login attempts and consider locking out users or implementing CAPTCHAs after a certain threshold is reached. This helps prevent brute-force attacks.
• Implement CAPTCHAs: Tools like Google's reCAPTCHA can help ensure that login attempts are made by humans, not automated scripts. This further protects against brute-force and bot-driven attacks.
• Secure Password Reset - If you provide a "Forgot Password" option:
  • Use one-time tokens that expire after a short duration.
  • Send the reset link to the registered email instead of allowing password changes directly from the login page.
  • Always ask security questions or verify user identity before allowing password resets.
• Cross-Site Scripting (XSS) and SQL Injection: Always sanitize and validate input data to protect against XSS attacks and SQL injections. Utilize parameterized queries or prepared statements to prevent SQL injections.
• Keep Libraries and Dependencies Updated: Regularly update your server software, libraries, and other dependencies to ensure you're protected against known vulnerabilities.
• Use Content Security Policy (CSP): A CSP helps prevent a wide range of attacks, including XSS. It limits the sources of executable scripts, ensuring that only trusted sources are allowed.
• Logging and Monitoring: Keep logs of authentication attempts, especially failed ones. Monitoring these can alert you to potential attacks or suspicious activities.
• Two-Factor Authentication (2FA): Consider implementing 2FA for added user account protection. This requires users to provide two distinct forms of identification before gaining access.

Conclusion

Building a login page might seem easy, but there's a lot to think about. It should look good, work well, be easy to use on any device, and be safe. Thanks to tools like Tailwind CSS and Material Tailwind, you can make great login pages without too much hassle.

In this guide, we started from scratch and ended up with a ready-to-use login page. By combining Tailwind CSS's easy style tools and Material Design's nice looks, users get a great experience every time they log in.

But remember, technology keeps changing. So, always keep learning and updating your skills.

Useful links:

• Tailwind CSS Website
• Tailwind CSS Github
• Material Tailwind Website
• Material Tailwind Github
• Material Tailwind Documentation
• Free Tailwind CSS Website Templates

But here's the exciting part: biophilic design offers a cool solution. Usually, it's all about bringing nature into buildings, but now nature is branching out into web design as well.

In this article, we'll explore why we feel disconnected from nature and how biophilic design can help fix that, even in the digital world.

What is Biophilic Design?

Well, it's all about bringing nature back into our lives, whether it's at home, in the office, or wherever we hang out.

It's not just about making things look pretty – it's about making us feel good by reconnecting us with the great outdoors.

History of Biophilic Design

Biophilic design, stemming from the Greek words "bios" (life) and "philia" (love), is all about our natural connection to the world around us. It has its roots in architecture and building design, where people realised that bringing elements of nature into our spaces makes us feel better.

This design approach mimics nature's patterns and includes views of trees and natural light. It's a way of making our homes and workplaces feel more like the outdoors.

Biophilic Design in Architecture

As cities grow and technology becomes more important, we spend less time in nature. That's why biophilic design is so important. It's not just for buildings – it's also being used in things like website design to remind us of our love for nature.

So, whether it's in a physical space or online, biophilic design helps us remember how much we need nature for our happiness and well-being.

The Problem: Understanding Our Distance from Nature

How Screens Shape Our Lives

You know how it is these days – screens are everywhere, right? From our smartphones and tablets to laptops and TVs, they've become like companions, keeping us hooked for hours.

Sometimes it feels like we're living in a whole different world, one that's all digital and disconnected from nature.

Ever found yourself mindlessly scrolling through social media or binge-watching shows, losing track of time? It's what some call "zombie-scrolling" – we've all been there. 😌

Endless Scrolling

Lost in the Digital World: Where's Nature?

We're all guilty of getting sucked into the digital vortex. Whether it's getting lost in Netflix marathons, being glued to our work screens or endless scrolling through Insta… (Let’s be serious, it’s Twitter 😂), our attention rarely strays from the virtual realm. And the more we dive into digital content, the further we drift from the great outdoors.

It's like we're building this invisible wall between ourselves and nature without even realizing it.

Tweet it

We're Missing Out on Nature's Charms

With our lives becoming more and more centered around screens, outdoor adventures seem to be a thing of the past. Many of us spend our days cooped up indoors, surrounded by artificial lights and controlled temperatures. It's like we've forgotten what it feels like actually to touch grass or feel the sun on our faces. There's just not much incentive to step outside and soak in the beauty of nature anymore.

But We're Often Unaware of the Disconnect

Here's the thing: Many of us don't even realize how far we've drifted from nature. We're so caught up in the digital world that we hardly think about how it's affecting us and our connection to nature. It's like this subtle but important change that sneaks up on us until we pause and reflect on it.

And here's the kicker: this disconnection isn't just about not enjoying nature's beauty. It's also messing with our health.

Research shows that spending too much time indoors and not enough time outdoors can cause issues like obesity, depression, and not getting enough vitamin D. Lack of physical activity is a big deal, contributing to millions of deaths every year worldwide.

So, while binge-watching shows or scrolling through social media all day might seem harmless, it's impacting our health and well-being in a big way.

The Harmful Effects of a Disconnect from Nature

As we've seen, our increasing immersion in the digital world comes with consequences beyond just missing out on the joys of nature. This disconnect has profound effects on our health and well-being, impacting us in ways we might not even realize.

• Mental Health Struggles: Spending excessive time indoors and away from nature has been linked to higher rates of depression, anxiety, and stress. Without the calming influence of natural environments, our mental health can suffer, leaving us feeling more isolated and disconnected from the world around us.
• Physical Health Risks: Being too sedentary, especially with too much screen time, poses serious risks to our physical health. Conditions like obesity, cardiovascular disease, and diabetes are just some of the issues linked to not being active enough and spending too much time indoors. Our bodies thrive on movement and natural light, and depriving them of these essentials can take a toll on our health.
• Vitamin D Deficiency: Not getting enough sunlight indoors means missing out on vital nutrients like vitamin D, essential for bone health, immune function, and mood regulation. Without sufficient sunlight exposure, we become more prone to deficiencies that can affect our overall health in various ways.
• Disconnect from Reality: As we go deeper into the digital space, we risk losing touch with reality. This gradual disconnection from the natural world means we miss out on the sights, sounds, and sensations that keep us grounded. Ultimately, this disconnect can leave us feeling adrift and disconnected from both ourselves and the world around us.

Biophilic Elements in Web Design

Let's talk bout how you can incorporate bits of nature into your website design to help bring the outdoors in and reconnect with the natural world.

Natural Forms and Patterns

Integrating organic shapes, textures, and patterns reminiscent of nature is key. In web design, this means crafting interfaces that mirror the fluidity and diversity of the natural world.

For example, the UI below utilizes a hanging flower pattern to represent a flower shop, embracing the beauty of nature in its design (reference).

Floral Website

Natural Materials and Textures

Incorporating natural materials and textures is crucial for creating a warm and inviting digital environment. Just like in physical spaces, using elements that mimic natural materials can evoke a sense of comfort and connection.

For instance, the UI below shapes the landing page of a woodworking company, resembling components of a furniture piece. This use of imagery mimics the texture and warmth of wood, enhancing the user experience and bringing the outdoors to your screen (reference).

Woodworking Website

Natural Light and Views

Natural light is crucial in biophilic design for creating visually appealing spaces that promote well-being. Similarly, in web design, incorporating light and outdoor views enhances the user experience, fostering a sense of openness and connection to nature.

Maximizing natural light in web layouts involves creating airy designs with ample white space to let light in. Incorporating images or animations of outdoor scenes, like lush landscapes or serene water bodies, deepens the connection to nature, infusing websites with tranquillity and wonder.

For example, the UI below uses real images of nature to brighten up the webpage, harnessing natural light to enhance the user experience (reference).

Landscape Website

Biophilic Colors

Colours play a significant role in shaping the mood and user experience. Incorporating colours inspired by nature can cultivate a soothing atmosphere, reinforcing the connection between users and the natural world.

Choosing nature-inspired colours such as earth tones, greens, and blues evokes feelings of tranquillity, vitality, and serenity. These hues, commonly found in natural landscapes, can evoke positive emotions in users.

For instance, the UI below utilizes shades of green to convey a sense of freshness and health associated with the company's food offerings. This use of colour triggers positive associations with nature, enhancing the overall user experience (reference).

Vegetation Website

Living Systems and Biomimicry

Biomimicry, mimicking natural processes in design, provides rich inspiration for creating efficient, sustainable, and user-friendly solutions. This involves drawing from natural ecosystems to guide website functionality and navigation.

Emulating natural systems in website design can lead to intuitive user experiences that mirror the adaptability of the natural world. By studying living systems, designers can apply these principles to digital interfaces, enhancing usability and engagement.

For example, the UI below incorporates elements of human anatomy to communicate the company's purpose effectively. This biomimetic approach helps users intuitively understand the company's offerings, enhancing the overall user experience (reference).

Biomimicry Website

Benefits of Biophilic Web Design

Biophilic web design offers a multitude of benefits that extend beyond mere aesthetics.

• Enhanced User Experience: Biophilic elements have the power to evoke positive emotions and create a more engaging user experience. Natural forms, colors, and textures can resonate with users on a subconscious level, fostering a sense of comfort, connection, and delight as they interact with the website.
• Improved Well-being: Exposure to nature, even in digital form, has been shown to reduce stress and enhance cognitive function. By immersing users in environments reminiscent of the natural world, biophilic web design can create digital spaces that promote relaxation, focus, and overall well-being.
• Differentiation and Brand Identity: Incorporating biophilic design can set a website apart from competitors and communicate values of sustainability and connection to the natural world. By aligning with themes of environmental stewardship and holistic living, brands can differentiate themselves and forge deeper connections with environmentally conscious consumers.
• Increased User Engagement: When websites offer a visually appealing and calming experience, users are more inclined to stick around. By crafting digital environments that mirror the tranquillity and beauty of nature, designers can captivate users' attention, prompting them to explore, interact, and come back for more.

Minion Kiss

Conclusion

As we wrap up our exploration of biophilic design in web design, remember this: while screens can be captivating, don't forget to reconnect with nature. Biophilic design isn't just about aesthetics – it's about infusing digital spaces with the serenity of the outdoors.

And hey, here's a friendly question: Have you touched some grass today 😒? It might be just the digital detox your soul needs. Step away from the screen and immerse yourself in the beauty of the natural world. Your mind, body, and spirit will thank you.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

In this article, we're going to look at components as features which can help boost your efficiency as a designer. I'll show you how to create an interactive button component using Figma.

Table of Contents

1. Prerequisites
2. What are Components?
   – Button components
3. How to Create an Interactive Button Component in Figma
   – Build the button component
   – How to create variants
   – How to create hover and active states
   – How to create other button states
   – How to group buttons by states
   – How to make the button components interactive
4. Conclusion

Prerequisites:

To get the most out of this article, it'll be helpful to have basic knowledge of how to use Figma and its features. But note that this is not necessary, as I wrote this article for everyone – irrespective of their individual level of knowledge.

This article is for everyone who is interested in learning more about components, reusable elements, Figma, and design in general.

What are Components?

Components are reusable design elements that you can use multiple times within a project or across different projects.

Components are interactive building blocks for creating a user interface. They can be organized into categories based on their purpose: Action, containment, communication, navigation, selection, and text input. – Material Design 3

Components can range from simple elements like buttons or icons to more complex structures like navigation bars or entire UI modules. They help maintain consistency and uniformity in a design, they are scalable, and they're very helpful for collaboration.

Button Components

Buttons, sometimes called CTAs, are elements which allow a user to carry out a specific action like signing up, buying a product, subscribing to a newsletter, and so on. They come in different formats and sizes, and are very important elements in design.

Button components typically consist of visual attributes such as shape, size, color, and typography to convey their functionality and encourage user interaction. They can vary in style and appearance based on the design system, brand guidelines, or the context of their usage within an application or website.

How to Create an Interactive Button Component in Figma

Next, we're going to create an interactive button component in Figma. This button component will contain text only buttons, buttons with icons on either the left or right side of the text, and buttons with icons only.

The button component will contain different button states (default, hover, and active), and will be interactive.

This is very helpful for when you're designing interfaces with different use cases. For instance, you could want a button in your design to carry text and an accompanying icon, for a particular screen. In another screen, you might want to use an icon only button. If you have already created these different components, you'll save a lot of time.

_Different button types (Icon only, Icon & text, text only). Image from Telerik_

Let's get started!

Build the Button Component

Open a new Figma file. If you don't have a Figma account, go ahead and create one at figma.com.

Opening a new Figma file

Next, click on the Text icon on the left hand panel, and type Button.

Typing "button" in the search bar.

Next, add auto-layout (Shift + A).

Adding auto-layout

Make the horizontal button padding to be 36px and the vertical padding 12px.

Adding horizontal and vertical padding

Also, give the button a border radius of 8px.

Adding a border radius.

Add a fill to the button.

Moving to the "fill" section.

I'll choose the color code #1C199, which is a shade of blue.

Choosing a color code.

Next, I'll make the text a little bit bolder. To do that, click on the text, and move to the font section on your right panel.

Moving to the font section.

I'll give the button a font size of 16px, and make the weight "medium".

Changing the font size to 16 px

Changing the font weight to medium.

Showing the edited text

Next, I'll add any icon of my choice to the button frame. This will enable me easily create a button component with icons, and not just text when the time comes.

To add an icon, I'll use a Figma plugin called Iconify, which is one of the largest icon collections in Figma. To do this, right-click on your canva and a menu will pop-up. Go to the Plugins tab.

Opening Plugins

A list of the recent plugins you have used will pop-up. You'll also see all the Saved plugins you have. The first plugin on my list is Iconify (that's because I use it a lot, lol). Now, I'll just click on Iconify and search for the particular icon I want to use.

If you have never used a plugin before, and so there are no plugins on your list, you can use the resources section to search for your plugin of choice and save it to your list.

Going to the resources section

Searching for plugins

I want to use the forward arrow icon, so I'll just search for that using the search field on the plugin.

Searching for the forward arrow icon.

A lot of forward arrow icons from different collections will pop-up so, I'll just choose any particular one that works best for me, in this case, a forward arrow icon from IonIcons.

Selecting a particular forward arrow icon

I'll select the icon and click on the Import icon button so it can appear on my Figma file.

Importing the icon to your file

Next, we'll reduce the size of the icon to whatever height and width we want it to be. It's currently on 48 x 48 and I want it to be 24 x 24.

Icon size currently 48x48

Changing icon size to 24x24

We'll also change the colour of the icon to match the text colour (white). To do this, make sure the icon is selected and then scroll down to Selection colours to input the color code, which in this case is #FFFFFF.

Changing icon colour to white (#FFFFFF)

Next, we'll add the icon inside the button frame. To do this, just drag your icon inside the frame.

Dragging arrow icon into the button frame

You'll notice that the frame size increases to accommodate the icon added.

Next, duplicate the icon and move it to the other side of the text. Duplicating the icon will help us easily create button components with icons on either sides of the text later.

To do this, simply use Ctrl + D, and move the duplicated icon to the other side.

Using Ctrl + D to duplicate an icon

Moving the duplicated icon to the other side of the frame.

Next, I'll hide both icons because I want to create my first button component (text only button). I'll rename the frame to Button.

To hide both icons, move to the layers panel on your left, and click on the eye icon by the side of the assets you want to hide.

Moving to the layers panel to hide the icons

You'll notice that the frame resizes automatically once both icons are hidden.

Button frame with hidden icons

I'll then rename the frame to Button. To do that, double click on the heading of the frame, and rename.

Double-clicking the frame

Renamed button frame

How to Create Variants

Next, we'll make the button frame a variant.

Variants help you create multiple versions or states of a component. They're very useful when designing interfaces that have different states or variations, such as buttons with different sizes or designs, like we're creating here.

To make the button frame a variant, double-click on the component icon at the top of your screen.

Moving to the component icon at the top of the screen and double-clicking

Variant of the button component

Next, I'll add another variant because I want to have three states for the button (Default, Hover, and Active). To add another variant, click on the plus icon on any of the already existing variants.

Clicking on the olus icon on a variant to add nother variant

Automatically, a new variant will be added.

Added third variant

Next, I'll increase the size of the component frame so it can accommodate other variants that will be added. To do this, simply select the whole component, and drag to your satisfied size.

Selecting the component frame

Increasing the width of the component frame.

How to Create Hover and Active States

Next, I'll tweak the last two buttons (hover and active states), so the difference between the three button states will be obvious. To do this, I'll make the hover state lighter, and the active state darker.

For the hover state, I'll change the color code to #392AE7, which is a lighter shade of blue. Make sure the particular button is selected so the changes take effect:

Changing color code for the hover state

For the active state, I'll change the color code to #19107A which is a slightly darker shade of blue.

Changing the color code of the active state

How to Create Other Button States

Next, we want to create other button states (buttons with icons on either side of the text, and with icons only).

To start with, I'll duplicate the three buttons. To do this, select the three buttons and duplicate using Ctrl + D.

Duplicating the three buttons

Next, we want to create button components with text and a left icon. To do this, click on the eye on the left icons on each of the icons to reveal them.

Revealing the icons on the left side of the buttons

Next, we want to create button components with text and a right icon.

To do this, duplicate the buttons again, and do the same for the right icons.

Duplicating the buttons a second time

Revealing the icons on the right side

Lastly, we want to create button components with icons only.

To do that, we'll duplicate the buttons one last time to hide the text.

Duplicating the buttons a third time

Hiding the text

I'll make the icon only frames a square shape. To do that, select the three frames and drag to resize.

Selecting the 'icons only' frames

Resizing the frames

I'll now resize the component frame to fit its content.

Resizing the component frame.

Next, we'll rename the different button states so it'll be easy to identify them. First, select the whole component frame. Then move to the section labelled Properties, and change Property 1 to Button to show that this is a button component.

Moving to properties section

Renaming the component frame

Next, we'll rename the button frames by icons. Select the first three frames horizontally, and go over to the Current variant section. Rename them No icons.

Selecting first three buttons and renaming them

Renamed no icons buttons

We'll do same for the next three buttons, and name them Left Icons.

Renamed left icons' buttons

We'll do the same thing for the next set, renaming them Right Icons.

Renamed right icons' buttons

Finally, for the last set, we'll rename the buttons Icons only.

Renamed icons only buttons

How to Group Buttons by States

Next, we'll group the buttons by states and name them. We'll start with the first state: Default. Select all the button frames under default and move to the Current variant section on the right hand panel. Click on the configure icon to edit the component configuration.

Clicking on configure icon

Click on the description box to add a description. In this case, I'll simply type Default state.

Adding a description

Do the same for the other two states – hover and active.

Adding a description for the hover state

Adding a description for the active state

How to Make the Button Components Interactive

To start, switch to the Prototype tab, located at the top of your screen, right-hand panel.

Switching to prototype mode

Next, add an interaction from the first to the second no icon button frame. To do this, click on the first button frame and drag the plus icon to the second frame.

Adding an interaction

This will bring up a list of interaction options and settings for the animation.

Bringing up interaction setting

Change On click to While hovering.

Changing interaction type to "while hovering"

Do the same for the next button frame but, instead of While hovering, change to While pressing.

Animating the third button frame

Now, repeat the same steps for the other sets.

Repeating the animation steps for the other button sets.

Voilà, you just created an interactive button component.

Conclusion

Components help enhance your designs and make them more efficient. They also help you save time and they improve consistency across your designs. But they can only help when they're created the right way.

Practicing often will help improve your ability to create helpful reusable components. Remember, make every decision with your users in mind.

One hidden hurdle for some users is motion sensitivity. It might not be something we think about every day, but it can have a big impact on how people experience the internet.

In this article, I want to shine a light on motion sensitivity. We'll explore what it's like, the conditions it's linked to, and how it can affect someone's ability to enjoy using a website.

My goals for this article are:

1. To get you thinking about creating web experiences that are comfortable and welcoming for everyone.
2. To equip you with practical tips to make that happen. Because an inclusive web is a better web for everyone.

What is Motion Sensitivity?

Motion sensitivity isn't just a technical term – it refers to how we experience the digital world, especially for those whose sensitivities go beyond what meets the eye. So, let's unravel this concept and see why it matters.

According to National Library of Medicine, motion sensitivity refers to a condition where a person experiences symptoms such as dizziness, nausea, and imbalance in response to motion. This can be caused by a variety of factors, including inner ear problems, neurological disorders, and certain medications.

People with motion sensitivity may have difficulty tolerating activities that involve moving, such as riding in cars and even certain motion animations.

Maybe you've taken a long road trip and experienced motion sickness. Or you've visited the cinema to see a 3D movie and, instead of enjoying the experience, you end up with headaches, migraine, dizziness, or nausea. Then you understand how serious motion sensitivity can be.

How Motion Sensitivity Impacts People

For some people, motion effects like parallax scrolling can be annoying, but the effects of motion sensitivity go beyond a mere inconvenience. It can disrupt the digital experience and, more importantly, affect the well-being of those navigating the space.

Some people might feel dizzy, nauseous, or experience headaches or migraines when faced with certain animations or transitions. For them, accessing digital content becomes more than just a click – it's a consideration of their comfort and health.

Insights into Related Disorders

To truly understand motion sensitivity, I believe we need to explore the conditions linked to it, mainly vestibular disorders and visual motion sensitivity.

Vestibular Disorders impact the inner ear and how the brain processes spatial information. For someone with vestibular disorders, simple tasks like maintaining balance or handling motion stimuli can become challenging.

Visual Motion Sensitivity is about heightened sensitivity to visual stimuli, leading to discomfort or adverse reactions to certain types of motion. For someone with visual motion sensitivity, navigating websites with specific animations or scrolling behaviors can be a struggle.

By diving into these facets of motion sensitivity, we lay the groundwork for creating digital spaces that acknowledge and respect diverse user experiences.

So, Why Does this Matter?

Well, I think it is as simple as this: everyone deserves to enjoy the digital world without feeling unwell. Understanding motion sensitivity helps us create websites, games, and apps that are more inclusive and comfortable for everyone, not just folks with superhero vision.

Let's explore why designing with motion sensitivity in mind is not just a best practice but a step towards a more inclusive online world.

How Common is Motion Sensitivity?

Motion sensitivity is more common than you might think. According to this article from Archives of Physiotherapy, it has been reported that 28.4% of the population experience motion sensitivity. Also, according to this article:

Nearly all people are affected with sufficient motion and most people will experience motion sickness at least once in their lifetime. Susceptibility, however, is variable, with about one-third of the population being highly susceptible while most other people are affected under extreme conditions. Women are more easily affected than men.

These statistics underscore the need for web designers and developers to consider motion sensitivity in our creations. They highlight that what might be a visually engaging animation for one user could be an obstacle for another.

How to Identify Motion-Sensitive Triggers in Animations

Animation can enhance engagement and help guide users through the app. But it is vital that we scrutinize the types of animations we incorporate into our designs, particularly when aiming for motion-friendly experiences.

Let's explore these potential triggers and discuss alternatives to ensure a more inclusive design.

Rapid or Flickering Animations

• Trigger Potential: Quick, flickering animations can be disorienting for users with motion sensitivity, leading to discomfort or headaches. Examples of these types of animations include rapidly blinking notifications, flickering banners, or flashing call-to-action buttons.
• Alternative Approach: Opt for smoother transitions like subtle fades or slides, avoiding rapid flickering effects for a more comfortable experience.

Overly Complex Transitions

• Trigger Potential: Elaborate loading animations with intricate patterns, complex slide-in effects, or overly detailed transitions between pages may overwhelm users, causing sensory overload for those with motion sensitivity.
• Alternative Approach: Simplify transitions, focus on clarity and purpose. Strive for elegance in design without unnecessary visual complexity.

Bouncing or Elastic Motions

• Trigger Potential: Animations with bouncing or elastic movements can induce dizziness or nausea in motion-sensitive users. Examples include buttons that bounce upon interaction or elastic-scrolling effects.
• Alternative Approach: Choose more subtle easing functions for animations, providing a smoother and less physically demanding experience.

High-Speed Animations

• Trigger Potential: High-speed carousels, rapid image sliders, or quick-scrolling features may challenge users with motion sensitivity, potentially leading to feelings of discomfort or disorientation.
• Alternative Approach: Allow users to control animation speeds or default to slower, more deliberate transitions for a universally comfortable pace.

Continuous Auto-Scrolling

• Trigger Potential: Auto-scrolling features that move content continuously without user interaction, like automatic slideshows or news tickers, can be unsettling for users with motion sensitivity.
• Alternative Approach: Implement user-initiated scrolling, providing control to the user and avoiding unexpected motion.

Flashing or Intense Color Changes

• Trigger Potential: Flashing animations or sudden, intense color changes can be visually overwhelming and trigger discomfort. Examples include flashing banners, intense color changes on hover, or rapidly changing background colors.
• Alternative Approach: Maintain a consistent color palette and avoid rapid, drastic color shifts. Consider softer transitions for color changes.

Rotational Movements

• Trigger Potential: Rotational animations, such as spinning logos or rotating carousels, may cause dizziness or vertigo for individuals with vestibular disorders or motion sensitivity.
• Alternative Approach: Minimize or eliminate rotational motions, especially in situations where they may not be essential for understanding the content.

By recognizing these potential triggers and adopting alternative approaches, we can create digital experiences that are more considerate and welcoming for users with motion sensitivity.

The goal is not to stop adding animations but to design with empathy, ensuring that motion enhances rather than detracts from the user experience.

How to Use Reduce-Motion Preferences

One significant stride towards motion-friendly web design is utilizing the reduce-motion preferences embedded in operating systems and browsers. This preference provide users with the option to minimize or eliminate unnecessary animations.

By recognizing and respecting these user preferences, we can significantly enhance the accessibility of web applications.

Incorporate Reduced Motion Features

For developers, integrating reduced motion features into web applications involves a combination of coding practices and user interface considerations.

Begin by identifying areas where animations can be toned down or replaced with static alternatives. Implementing conditional checks for reduce-motion preferences in your codebase allows your web application to adapt dynamically, providing a smoother experience for users who opt for reduced motion.

CSS prefers-reduced-motion Media Feature

.animated-element {
  animation: pulse 1s linear infinite both;
}

/* Tone down the animation */
@media (prefers-reduced-motion) {
  .animated-element {
    animation: smooth 4s linear infinite both;
  }
}

JavaScript Reduced Motion Detection

// Check if the user prefers reduced motion using JavaScript

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Example of adjusting animation based on reduced motion preference

const animatedElement = document.querySelector('.animated-element');
if (prefersReducedMotion) {
  animatedElement.style.animation = 'smooth 4s linear infinite both';
} else {
  animatedElement.style.animation = 'pulse 1s linear infinite both';
}

Test Your Animation on Chrome

While basic accessibility checks are readily available, Chrome DevTools offers advanced capabilities through its hidden Rendering tool.

One of the options available in the rendering tool is the option to test your animation for when a user enables prefers-reduced-motion. Here's how to leverage it:

• Click the customize (three dots) icon in the DevTools panel
• Select more tools
• Select Rendering option from the list of options

Select Rendering under more tools

• Once enabled, the Rendering tab appears in DevTools.
• Look for the option named "Emulate CSS media feature prefers-reduced-motion."
• Enable this option to preview how your website's animations appear for users who have set their device or browser to reduce motion.

When a user has prefers-reduced-motion enabled, avoid completely removing animations. Aim to provide users with a smoother experience rather than completely excluding them from the interactive experience.

Motion Sensitivity Tips and Best Practices

Let's explore tips and best practices to incorporate into our designs:

1. Subtle Animations: Opt for subtle animations that convey information without being overwhelming. Gentle fades, transitions, and loading effects can enhance the user experience without causing discomfort.
2. Adjustable Speeds: Provide users with the ability to control animation speeds. Implement settings within your application that allow users to customize the speed of transitions, ensuring a comfortable experience for everyone.
3. Clear Navigation Signals: Use motion to guide users intuitively. For instance, employ subtle animations to indicate a change in state or to draw attention to important elements, ensuring that users with motion sensitivity can follow the flow without feeling disoriented.
4. User Testing: Conduct thorough user testing, specifically with individuals who experience motion sensitivity. Gather feedback to refine your design, ensuring that it meets the needs of the diverse user base.
5. Document and Communicate: Clearly document your approach to motion-friendly design in your project documentation. This not only serves as a reference for your team but also communicates your commitment to accessibility to stakeholders and users.

Conclusion

Motion sensitivity isn't a rare exception – it's a shared experience for many people. Our responsibility as web developers is not merely to acknowledge this reality but to actively integrate inclusivity into the DNA of our creations.

By identifying potential triggers and implementing reduced motion features using technologies like prefers-reduced-motion in CSS and JavaScript, we create spaces that accommodate diverse needs without compromising on engagement.

Accessibility is not a trend, it's a fundamental ethos that shapes the future of the internet into one where everyone regardless of their abilities can use the internet with comfort.

Thank you so much for reading this article, if you found it helpful consider sharing. Happy coding!

You can connect with me on LinkedIn or GitHub.

References

• Val Head. Designing Safer Web Animation For Motion Sensitivity (September 08, 2015) https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/
• Chaudhary, S., Saywell, N., Kumar, A., & Taylor, D. (2020). Visual Fixations and Motion Sensitivity: Protocol for an Exploratory Study. JMIR Research Protocols, 9(7). https://doi.org/10.2196/16805
• Albalwi, A.A., Johnson, E.G., Alharbi, A.A. et al. Effects of head motion on postural stability in healthy young adults with chronic motion sensitivity. Arch Physiother10, 6 (2020). https://doi.org/10.1186/s40945-020-00077-9
• Motion sickness. (2024, January 1). In Wikipedia. https://en.wikipedia.org/wiki/Motion_sickness

I’ve seen some incredible demos over the past year, and wanted to sink my teeth into some of these cool new features. So I used some downtime over the Christmas period to cram tons of new CSS features into a lesson progress indicator for the Component Odyssey platform.

The result is the following progress indicator that shows how much of the page the user has scrolled:

Building it gave me some exposure to some of the latest CSS features like:

• animation-timeline: scroll()
• CSS trig functions, sin() and cos()
• color-mix()
• the @property at-rule

I know the risks of building something with a particular tool in mind. As the saying goes “When all you have is a hammer, then something something nails”.

Yes, I have a hammer, and I’m going to smash the walls down with it.

In this article, I’ll run through how to create a pared-down version of this swanky progress animation while still using all of the CSS features mentioned above. I’ll also show you how to gracefully handle browsers that don’t support these features through progressive enhancement.

If you want to follow along, then it’s best to use the latest versions of Chrome or Safari – currently Firefox doesn’t have general support for properties like animation-timeline. Get started by jumping into the starter Codepen.

If you want to peruse the finished code, you can check it out here.

How to Create the Markup

I’ve already provided a little markup to simulate a page with enough content that you'll need to scroll to get to the bottom. To get started creating the progress indicator, you’ll need to add some more markup.

The markup itself is really simple – we’ll only need to create 3 div elements.

The outer element is responsible for the positioning and layout of the loader. We’ll give this a class of wrapper.

The middle element is responsible for rendering the track to the screen. We’ll give this element a class of progress. We’ll later use an ::after pseudo-element to create the indicator thumb.

The innermost element will be used to create the circular hole in the middle, making the indicator look like a low-calorie doughnut. This will have a class of inner.

Take a look at the following if you need a hand visualising the structure:

Illustration of the markup structure

Provide the following markup as the first child of the main element creates the following markup:

<div class="wrapper">
    <div class="progress">
        <div class="inner"></div>
    </div>
</div>

Applying the Base CSS to the Markup

You’ll also need to apply the following styles to give the markup a base visual appearance:

.wrapper {
    --size: 80px;

    position: fixed;
    width: var(--size);
    aspect-ratio: 1/1;
    top: 24px;
    left: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress {
    --track-size: 16px;

    width: var(--size);
    aspect-ratio: 1/1;
    border-radius: 50%;
}

.inner {
    position: absolute;
    width: calc(100% - var(--track-size));
    aspect-ratio: 1/1;
    background: var(--background-color);
    border-radius: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

Most of the CSS here shouldn’t come as a shock to you, so I won’t go over it line by line. But I will touch on some of the more interesting bits.

In .wrapper, we’re fixing the element to the top left of the screen, and we're using Flexbox to center the children horizontally and vertically.

💡 I learned that if you want an element to share the same value for both its width and height, you just set the width and use aspect-ratio: 1/1. The browser will implicitly set the height.

This is a neat trick because you won’t have to define the same value twice, and it makes it easier to guarantee that the width and the height share the same value.

As for the .inner element, I’ve used a mix of absolute positioning and the margin: auto to center it in the middle of the .progress element. We’ve also deducted the --track-size from the full width of the container, to ensure that it’s correctly positioned over the .progress element.

You won’t be able to see anything just yet, but if you add a temporary background-color: red to the .progress element, it should render as follows:

Image showing the current state of the progress indicator - a red circle

How to Create an Animated Progress Indicator

Creating a scroll-driven animation of this kind requires a lot of new CSS features that you may have not used before. Instead of learning everything all at once, we’ll start by decoupling the animation from the scrolling mechanics.

That way, by the end of this section, you should have the following animation that plays automatically:

Animation showing the initial stage of the progress indicator

We’ll start by creating a new animation called load:

@keyframes load {
    0% {
        --progress: 0%;
    }

    100% {
        --progress: 100%;
    }
}

All this does is move the progress along from 0 to 100 over the course of the animation.

Using conic-gradient to Indicate the Current Progress

In your .progress rule, add the following CSS properties:

.progress {
    # Existing rules

    animation: load linear 1s infinite;
    background: conic-gradient(
        from 0deg at 50% 50%,
        var(--red) var(--progress),
        var(--black) var(--progress)
    )
}

The animation property should be pretty straightforward, but there’s a lot going on with the background rule, so let’s step through it.

For starters, we’re using a conic-gradient as it makes it easy for us to animate the background over 360 degrees, in the way shown in the animation above. We’re starting from the 0deg position, which is top and center. We’re describing where we want the center of the gradient to be using at 50% 50%.

conic-gradient(from 0deg at 50% 50%) alone would render something like the following:

Image showing a red circle witha slight gradient, the result of conic-gradient(from 0deg at 50% 50%) alone

Hopefully I’ve made it clear why that’s the case.

As for the the second and third arguments of the conic-gradient function, we’re linking the --progress variable (which is being calculated via the load animation) to the two colors. The --red is used to denote the completed progress, while the --black is used to denote the remaining position.

It might be confusing why they share the same --progress value. The --progress value for the --red value denotes where the gradient stop ends, while the --progress value for the --black denotes where the gradient stop begins.

Because it’s the last stop on the gradient, it’s implied that it ends at 100%. By setting the same --progress value to both stops in the gradient, we create a hard transition between the two colors. Without doing so, our progress indicator (with a --progress value set to 16%) would look like this:

Progress indicator with a red to black gradient and no animation

Animating the Gradient

Now, something strange is probably happening. Instead of your progress indicator transitioning gracefully across the entire perimeter of the circle, it’s instead flashing between the black and red.

Why is this happening?

This is because we’re making the browser interpolate between percentage values, which is something it can’t do automatically. Even though we’ve given the --progress variable a percentage value, the browser doesn’t assume that it’s always going to be a percentage value.

We can solve this by telling the browser that --progress will always be a percentage value. We can do this by explicitly defining the --progress property using the @property CSS rule. Just add the following to the top-level of your CSS:

@property --progress {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

We’re telling the browser that --progress should only support percentage values and that the initial value is 0%. We’re also not interested in having the custom element inherit its value.

Finally, I don’t quite like the use of the --black variable to signify empty progress. It looks too stark. I’d like to create a lighter shade created from the black to ensure a more homogenous visual palette. This is something we can easily achieve using the color-mix() CSS function.

Jump back up to the :root CSS rule and add the following variable:

:root {
    # your other CSS variables

    --grey: color-mix(in srgb, var(--black), transparent 60%);
}

The color-mix function lets us mix two colors together. In this case, we’re mixing the color stored in our black variable with some transparency, which will result in a partially see-through grey color. You’ll need to replace the reference to the --black variable in the conic-gradient function with --grey to see the color change in effect.

Now that we’ve defined our custom property, the browser will be able to interpolate the correct values during the entire animation, so it should now transition smoothly from start to finish.

Showing the animation functioning properly

How to Enable Scroll-driven Animations

The next stage of our animation journey is to tie our animation to the scrolling of the page.

This should only take us a couple of lines of CSS.

You’ll need to do two things: first adjust the animation property in your .progress class to remove the infinite value, and to change the duration from 1s to 1ms. We can’t remove the value altogether because Firefox needs it for scroll animations to work.

Next update your .progress class to include the following:

.progress {
  # other CSS properties

    animation-timeline: scroll(nearest block);
}

The animation-timeline property tells the browser to tie the progress of the animation with a specific timeline. In this case it’s the scroll timeline, which we specify using the scroll function.

You can see I’m providing two arguments to scroll(): nearest and block.

The nearest value is used to tie the animation to the nearest ancestor that has a scrollbar. In this case it’s the document. If you’re certain that you only ever want to tie the animation to the document’s scrollbar, then you can swap out nearest for root instead.

The block property denotes the axis that we want to tie our animation to. For most cases this will be the vertical scrollbar, but for vertical writing modes, this will be the horizontal scrollbar.

Now that you’ve hooked up the animation to your page’s scroll, you should be able to scroll up and down the page and watch how your animation changes accordingly.

Demo showing a user scorlling and the animation of the scroll element changing

How to Progressively Enhance Your Scroll Animation

While it’s exciting to use these new features in the browser, the animation-timeline property doesn’t have universal support across browsers yet. It’s still very new in Chrome, and it’s only available in Firefox behind a feature flag. If you try opening the code in Firefox, you’ll notice that the progress ring just appears with a finished animation.

In cases like this, it’s important to set up a solid base experience for all browsers, and then progressively enhance your webpage with the newer features on compatible browsers. Because the progress indicator isn’t critical for the application to function, we can just hide it away if the browser doesn’t support the animation-timeline property.

We can do this by moving our .wrapper, .progress, and .inner classes within CSS’s @supports at-rule, like so:

@supports (animation-timeline: scroll()) {
    .wrapper {}

    .progress {}

    .inner {}
}

Doing so ensures that if the browser doesn’t support scroll(), then it will ignore all of the styles contained within the rule.

How to Add the Indicator Thumb

The final thing for us to add is a cool little indicator thumb, to both give our progress indicator a little more visual interest and to also let us play with the swanky CSS trigonometric functions.

The indicator thumb is the little circular element that indicates the exact current progress

Illustration showing the indicator thumb (a dark dot on the progress indicator)

Creating the Thumb's Visual Appearance

To create the indicator thumb, start by writing the following CSS inside of the @supports block:

.progress::after {
    --radius: calc(var(--size) / 2);
    --track-offset: calc(var(--track-size) / 4);

    content: '';
    position: absolute;
    aspect-ratio: 1/1;
    width: calc(var(--track-size) / 2);
    background: var(--red-dark);
    border-radius: 50%;
    left: calc(50% - var(--track-offset));
    top: calc(50% - var(--track-offset));
    transform: scale(1.5);
}

This creates a new pseudo-element off of the .progress class, and gives it its visual appearance. Once added, the indicator thumb should live in the center progress element. We’re using the --track-offset variable to position the thumb correctly by taking into consideration the dimensions of the track.

⚠️ I’m also increasing the size of the thumb to using scale() so that its size in the DOM is still relative to the --size variable. This just means a little less math for us to worry about when setting the value for --track-offset. Using scale() makes it easy to change the size of the element without causing a shift in the DOM.

The next step is to use the color-mix() function again to create a dark red from the base red color. Add the following to your :root rule.

:root {
    # your other CSS variables

    --red-dark: color-mix(in srgb, var(--red), var(--black) 60%);
}

Your progress indicator should look less like a UI widget and more like a dartboard:

Animation/indicator thumb in progress

Positioning the Thumb on the Track

Let’s position the thumb on to the track.

.progress::before {
  # rest of properties

    translate: calc((var(--radius) - var(--track-offset)) * cos(var(--angle)))
      calc((var(--radius) - var(--track-offset)) * sin(var(--angle)));
}

This is probably the gnarliest piece of CSS in this entire article. It isn’t anywhere near as complex if we break it down in half. Here’s the first half:

calc((var(--radius) - var(--track-offset)) * cos(var(--angle)))

This uses a little trigonometry to calculate the position of the thumb based on the current angle (which will be tied to the scroll progress) and the radius of the circle. The cos() function is used to determine the horizontal value of the position.

The second half of the value is identical, except we’re using the sin() function to determine the vertical position of the indicator:

calc((var(--radius) - var(--track-offset)) * sin(var(--angle)))

⚠️ I’m not going to use this article as an introduction into trigonometry, but I can point you in the direction of some amazing resources:

• Trigonometric functions in CSS
• Trigonometric functions in CSS and JavaScript: Beyond Triangles

You may have noticed that I’ve specified a variable, --angle, that I haven’t yet defined. Because we’ll be animating the --angle, we need to explicitly define it using the @property rule, much like we did for the --progress property. The only difference is that we’ll need to specify a different syntax value. Instead of <percentage> the value will need to be <angle>:

@property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: -90deg;
}

By setting the initial value to -90deg, we ensure that the thumb is placed at the 12 o’clock position on the progress indicator.

Your indicator should now look like this:

Showing the thumb now on the track of the progress indicator

The next step is to create the animation for the thumb and then bind the animation timeline to the scroll position of the page.

Animating the Thumb Indicator

Let’s start by creating a new animation:

@keyframes rotate {
    0% {
        --angle: -90deg;
    }

    100% {
        --angle: 270deg;
    }
}

Over the course of the entire animation, the thumb will rotate 360 degrees, performing a full revolution over the progress element.

Finally we need to add the following two properties to the thumb:

.progress::after {
    # other CSS properties

    animation: rotate linear 1ms;
    animation-timeline: scroll(nearest block);
}

Doing so applies the rotate animation to our thumb and binds it to the scroll position.

Everything should now work flawlessly:

Final product showing the animation working smoothly as a user scrolls

Wrapping up

I created this progress indicator specifically to become more familiar with the amazing tools that CSS has shipped in the last couple years. Hopefully you learnt just as much from this lesson as I did making it.

There were other CSS features I wanted to explore, like popover and :has but I couldn’t find a way to fit them in with this animation. If you find this article interesting, I might try and create more little changes to the Component Odyssey platform, using cutting-edge CSS features.

By wary, because a lot of the CSS features I’ve covered are still very new. So you should check the browser support before using them in production.

If they’re not supported in one or more browsers, but you’re desperate to use them, then use a progressive enhancement strategy (as I went over in this tutorial) to ensure that those with compatible browsers get the full experience, while still offering users of unsupported browsers a solid baseline experience.

If you enjoyed this article, and would love to learn more about Component Odyssey or other cool web development tips, then consider subscribing to the newsletter.

Resources

• Getting practical with scroll progress timelines
• We can finally animate CSS gradients
• Fitness inspired loaders
• MDN: @property at-rule
• MDN: Animation Timeline

In this tutorial, you'll learn what variables in Figma are, and how to create and implement different types of variables while designing in Figma.

Prerequisites:

To get the most out of this handbook, it'll be helpful to have basic knowledge of how to use Figma and its features. But note that this is not necessary, as I wrote this handbook for everyone – irrespective of their individual level of knowledge.

This handbook is for everyone who is interested in learning more about variables, Figma, and design in general.

Table of Contents:

• What are variables?
• Differences between Variables and Styles in Figma
• Why are Variables Important to the Design Process?
• How to Create Variables in Figma
  • How to Create Colour Variables in Figma
    • How to Create Colour Variables for Tokens
    • How to Implement Colour Variables in Your Designs
    • How to Create Different Modes with Variables
  • How to Create Number Variables in Figma
  • How to Create String Variables in Figma
  • How to Create Boolean Variable in Figma
• How to Use Variables for Advanced Prototyping
  • Advanced Prototyping with Number Variables
  • Advanced Prototyping with Boolean Variables
• How to Use Variables for Developers- Using APIs
• Conclusion

What Are Variables?

The word "variable" has a lot of definitions. The Oxford Dictionary defines the word variable as "not consistent or having a fixed pattern; liable to change." Another definition says "an element, feature, or factor that is liable to vary or change."

The definitions above simply tell us that variables are elements which are dynamic and prone to change. With these definitions, we can now define what a variable is in Figma.

In Figma, a variable stores reusable values like colour and text values that you can apply to different kinds of design properties and prototypes.

Differences between Variables and Styles in Figma

Given the definition of variables above, you might have begun to see some similarities between variables and style guides. Although both features exist to make your work better, there are a few key differences to keep in mind:

• Variables are a more advanced feature, and they allow you to define and reuse values like colours, text, and spacing across your designs. On the other hand, styles are predefined sets of design properties such as text styles, colour styles, and effect styles.
• Variables allow designs to change when used in various contexts, because of their dynamic nature, unlike styles. For example, you can change your designs from light mode to dark mode or have padding values change when designing for different devices. This makes variables useful for creating design systems with adaptable components.
• Variables offer a more flexible design process in creating flexible design components, especially where you want to change values like button text or color on different instances of the same component. Styles are typically used for maintaining consistent design elements like button styles, text headings, or colour palettes.
• Variables can store raw, single values, while styles store sets of values.

Why are Variables Important to the Design Process?

Using variables is quite important for a number of reasons.

First, variables help maintain consistency across a design system. By defining variables for colors, typography, spacing, and other design elements, you ensure that these elements have a uniform appearance throughout your project. This consistency is crucial for branding and user experience.

Variables also make designs adaptable. Designers can quickly experiment with different values such as colour schemes or font sizes by adjusting the variables. This adaptability is valuable when creating designs for different platforms or devices.

Variables are also quite efficient. When a variable is updated, all instances of that variable in the design updates automatically. This saves time and effort, and eliminates the need to manually update every instance of a specific element.

Variables are particularly useful in large projects or design systems because of their scalability and ease of maintenance. They allow designers to scale their designs without losing control.

Since projects grow and design systems evolve over time, variables can be adjusted globally to accommodate new requirements. Variables also provide a central place to update these changes, ensuring that all design elements are consistently modified.

And finally, variables can be beneficial to developers during the hand-off process. Designers can provide developers with precise values for design elements, reducing the chances of misinterpretation and streamlining the implementation process.

How to Create Variables in Figma

Variables are quite easy to create in Figma. Below, I'll walk you through the steps for creating different kinds of variables in Figma.

At the moment, we have four types of variables in Figma:

• Color: used for colour fills.
• Number: used for dimensions, corner radius, and auto layout properties.
• String: used for text layers and variant properties.
• Boolean: used to toggle layer visibility.

We'll create and implement each of these variables in Figma, and also use them for advanced prototyping.

How to Create Colour Variables in Figma

The first type of variable we'll be creating is a colour variable. As a designer or developer, you have likely used colours in your projects. So, the concept of colour shouldn't be unfamiliar to you from a design standpoint.

Step 1: Open a new Figma file

Let's assume that you want to create colour variables for a new design project you're going to start working on, like a magazine website for example. The first thing you need to do is open a new Figma file.

Blank Figma file

Step 2: Choose a colour palette

The next step is to choose a colour palette for the project. Every design project has a set of colours used repeatedly to establish consistency – for example, for headers and backgrounds, to call attention to a primary button, and so on.

You'll want to choose colours which complement each other for your design. If you need some help here, you can read my article on the 60-30-10 rule in design.

Creating a colour palette

Step 3: Create variables for each colour

Next, we'll create variables for each colour code in the palette. Go to the panel on the right-hand side and click on local variables.

Local variables means all the variables located in the design file.

Click on local variables

Click on create variable to create the first variable in the file.

A dropdown will appear containing the four types of variables I explained earlier. Since we're trying to create colour variables in this section, we'll choose color.

Create a colour variable

A created variable section will come up, with two columns: the title of the variable (Color), and the value of the variable (the colour code-FFFFFF).

Choose colour variables

Give your new variable a name – you can use the role of the colour, primary background for instance. In the next column, type the colour code or use a colour picker.

Rename variable & type in colour code

And there you go – you just created your first colour variable!

To see more editing options, hover over the variable's row. An edit variable icon will pop up.

Edit variable

Click on it to edit the colour variable to your taste.

Edit the colour variable/add a description

In the editing section, you can add a description on how to use the variable, hide from publishing, and so on.

Having done that, follow the steps above to create variables for the remaining colours in the colour palette.

Create variables for other colours

You can also organise your variables into groups. To do this, select the colour variables you want to group (hold down SHIFT key), and right-click.

Group the colour variables

This will bring out some options:

• New group with selection
• Edit variables
• Duplicate variables
• Delete variables

New group with selection

Choose New group with selection, double-click on the group name, and rename it to color/blue.

Rename group

You can group your colour variables anyway you'd like to – for example, background colours, header colours, different shades of a particular colour, and so on.

Colour blue variables grouped.

Violà! You just created a colour variable group in Figma. Click on the collection drop-down and choose rename collection.

Rename collection

You can rename this collection primitives.

Primitives means basic. Also, you can decide to rename your collections or not. The choice rests on you.

Renamed primitives collection

How to Create Colour Variables for Tokens

Now, we'll create colour variables for the text, surfaces (such as backgrounds), and borders we need for the project. We want to assign different functions to the colour palette (variables) we created earlier.

Click on local variables and create a new collection. You can name this tokens.

New collection

Create a new colour variable and rename it "primary text".

In order to save yourself time, and group your variables as you're naming them, rename the variable as text/primary. This will automatically form a group.

Creating and grouping text variables

Click on the fill box and go to Libraries to see all colour variables created.

Assigning colour from libraries

We'll choose Main Black which is under color/greys.

Choosing colour black

We can go ahead and assign other colour variables for different text functions, as much as we want to. Remember to add text/ before the actual name of the variable, so it'll form a group automatically.

Assigning colour variables for text

Next, we'll create colour variables for surfaces such as backgrounds, and for borders as well.

Colour variables for surfaces and borders

Some of the colour variables might bear the same colour code, but they have different functions, so that's totally fine. For example, the colour code for button text is the same as the colour code for main background.

How to Implement Colour Variables in Your Designs

Next, we're going to implement these colour variables in our design.

In the image below, there are four mobile wireframes with no colour and images (I created these previously).

You can read about how to create wireframes in this article: What is Wireframing? How to move from Paper Sketches to High Fidelity Wireframes.

We'll use the colour variables we've created to add colour to the buttons and text, making sure all elements are consistent.

Low-fidelity wireframes

Starting with the first screen, let's add colour to the button. Click on the button, and go to to Fill on the right-hand side of your screen.

Click on button

In the Fill section, click on style (the four dot icon by the side). Selecting style will bring up a list of colours in your libraries. Select the colour you've assigned for the primary button in order to implement it.

Select a fill colour from the colour variables in libraries

Implemented button colour

Next, give the button text a white colour following the same steps.

Implementing colour variable for button text

Implemented button text colour

You can go ahead and do the same for the other screens, following the steps above. Don't forget to update the text and colours as well.

Updating colour variables for other screens

You can also add some images or illustrations to complete the look.

Adding illustrations to updated design

Note: You can get your illustrations from plugins in Figma like Storyset by Freepik, Artify Illustrations, and so on, as well as from illustration libraries like Freepik, Lapa Ninja, and others.

How to Create Different Modes with Variables

Next, we'll create different modes for our design. For instance, if you're working on a project that requires light and dark modes, instead of changing all the design elements manually to accommodate the modes, you can simply use variables to implement that.

To start with, click on Local variables to create a new variable. A list of all variables in the file and their groups will come up:

color/blue:

• Primary Button
• Main Blue

color/greys:

• Main Black
• Main Background

Opening "Local variables"

Next, I'll create a new collection so I can just focus on the modes I am about to create. To create a new collection, simply click on the menu icon on the variables header.

Note that creating a new collection isn't mandatory. It's just to help take your focus away from other variables you have already created.

Creating a new collection

Next, I'll rename the collection to Modes. To rename a collection, simply double-click on the title, and input your preferred title.

Renaming a collection

Renamed collection "Modes"

Next, click on Create variable to create a new variable. I'll choose Color because that's the variable we're working with.

Creating a variable called Color

The created colour variable will come up with a default colour code: FFFFFF.

Created color variable with default colour code: FFFFFF

Next, I'll rename the variable Background because I'm trying to set the background colours for each mode (light and dark).

Renamed color variable: Background

Now, we've been working with only the name and value of the variables we've created, but we can add another column when we want to create modes. To do this, simply click on the plus icon on the header to add a new variable mode.

Clicking on the plus icon

The new mode will come with three columns:

• Column 1 (the title of the variable – Background)
• Mode 1 (the first value of the variable – colour code FFFFFF)
• Mode 2 (the first value of the variable – colour code FFFFFF)

Created new mode

Next, I'll rename the modes to light and dark. To do this, simply double-click on the title and edit the name.

Renamed modes: Light & Dark

Now, we'll assign a value to the background for dark mode. To do this, simply input the colour code/value you prefer for the background. I'll use #0C3272 as my background colour for dark mode.

Changed value for dark mode background

Next, we'll create other colour variables for other elements like, text, button colour, button text colour, and so on for the two modes. I''ll list out the specifications to make it easier:

Light/Dark:

• Body text: 1A1A1A/FFFFFF
• Button: 0C3272/FFFFFF
• Button text: FFFFFF/0C3272
• iPhone header: 1A1A1A/FFFFFF

Next, we'll go ahead to create the variables. Just follow the steps we followed earlier to create the variables and assign values for each of the modes.

Created variables for other elements

Next, we make sure the design is connected to the variables we created. To do this, simply hold the element and use Fill to tie it to the colour variable.

For the Button text for instance, select the text, and click on the style icon in Fill.

Clicking on style icon in the "FFill" section

Next, scroll down the list that comes up, to the specific variable you want to tie the variable to (in this case Body text).

Selecting Body text variable.

Do the same for the other elements in the design, including the background.

Note that I'll be leaving the illustrations the way they are.

Screens connected to the variable modes.

To check if the modes actually work, click on the change variable mode icon on the Layer section on the right-hand panel of your screen.

Clicking on the "change variable mode" icon

A list of all modes (Light & Dark) will come up and you can switch the screen to whatever mode you choose.

Switching modes

A section named Modes will appear on the Layer section, indicating that one of the screens is in dark mode.

One dark mode & one light mode screen.

How to Create Number Variables in Figma

Next, I'll show you how to create number variables in Figma.

Number variables are defined by number values, and they can be applied to corner radius, width or height padding, and so on. Here are the steps to follow to create your own:

Step 1: Choose a variable

Just like we did when creating color variables, click on the local variables panel to select the kind of variable you're trying to create. Here, you'll select number.

Choosing variable to create

Selecting "number"

When you select number, it appears on the list of variables with a value, in this case 0.

Number variable showing Number with a default value of 0

Now, you can rename the number variable to whatever you decide. To rename the variable, double click on number, and change it to whatever name you want.

Renaming number variable

I'll rename mine to OrderCount, because I'm trying to implement a function that allows a user to increase the number of portions of food they're trying to order.

Renamed number variable

Next, we'll set the default number value to 1.

Setting default number value

Now we'll tie the number on the design to the number variable (OrderCount). To do this, click on the number in the design.

Implementing the number variable

Then go to Text on the left hand side of your screen. Click on the Apply variable icon to apply the variable.

Note: The apply variable icon will only appear on the Text section when a variable has been created.

Clicking on the "appy variable" icon

Clicking on the icon will bring up a list of all number variables available in the file. Next, you'll select the variable you're trying to implement. I'll choose OrderCount.

Selecting a number variable

When the variable has been implemented (tied to the number), it'll appear on the text section, indicating that a number variable has been implemented.

Implemented number variable

Now, we'll also need two more number variables for the other number values in the design (cost of food and total cost). This is so that these values will also change when a user increases the number of portions they're ordering.

We won't include delivery fee, because it remains the same way irrespective of the number of portions a user orders.

Next, we'll follow the same process as we did above to create number variables for these.

Creating other number variables

Next, we'll tie the numbers in the design to their respective number variables, just as we also did earlier.

Note: In the main design, I gave the actual number (25) a different frame from the dollar sign (which is in text). This is because when creating the number variable, the dollar sign will not be attached, because it's a word, not a number.

Consequently, when I tie the number variable to the design, I'll be applying it to the frame containing the number alone.

Give the number a different frame from the dollar sign

So, when I tied the first number to the number variable I created (Cost-Portion), something interesting happened. The number in the design took on the value of the variable. Instead of 25.00 which was in the screen earlier, it changed to just 25 because that's what the number variable was set to.

Number variable changing the number in the design

Now, to avoid any unpleasantness, I'll change the values of the other numbers, and realign them.

Changed and realigned number values in the design

We've just created number variables for our design. In the section for advanced prototyping, we'll check to see if these number variables actually work.

How to Create String Variables in Figma

Next, you'll learn how to create string variables in Figma.

As I wrote earlier, string variables are used for text layers and variant properties. With string variables, you can change the headings in your design, flip text on different screens, change language modes, and so on.

For this article, we'll use string variables to change the headings on the screens for each mode we created earlier (light and dark).

As usual, our first step is to click on Local variables and select the type of variable we want to create.

Going to local variables to create a new variable

I'll choose String.

Choosing "String" out of a list of all variables

When I do that, the string variable I just created will appear on the list of variables.

Created String variable

If you noticed, the string variable has two columns for "string value", because I created the variable in the Modes collection. Following that, let's see if we can change the headings for each mode.

Note: The string value is the actual text you're trying to change.

So, for the first screen whose heading is "Transactions Made Easy", I want it to change to "Easy Transactions, Less Stress" for dark mode. For the second screen whose heading is "Pay Bills with Ease", I want it to change to "Paid Bills, Easier Life" for dark mode.

Since we're changing the headings for two different screens, we'll create another string variable.

Creating another string variable

Next, we'll input the different values for the different modes. To do this, just input the different texts for the two screens in both modes.

Inputing string value

Next, we'll tie the headings to the string variables we just created. To do this, click on the particular heading, and go to the Apply variable icon on the Text section.

Applying string variable

Next, scroll down and choose the string you're applying it to.

Choosing string variable

Once you're done, a string icon will come up, indicating that a string variable was applied to the text.

Applied string variable

Do the same for the second string:

Applying string variable to the second screen

Next, let's test to see if the string variable works. Select the screens which have the applied variable, go to Layers, and change the mode from light to dark.

Selecting screens which have the applied variables

Selecting dark mode

Mine works:

Screens changed to dark mode

How to Create Boolean Variables in Figma

Next up, we'll learn how to create Boolean variables.

Generally, boolean variables are variables that can only have two possible values – true or false. In Figma, boolean variables have the same function: they are used for variant properties or components with two values: true or false.

Remember the toggle in the design above?

Toggle in the design used for implementing number variables

I'll change that to a checkbox and use boolean variables to make it work.

To do this, I'll copy out the component and paste it on another frame. I'll then add the checkbox (and replace it in the main design screen later).

Checkbox on a blank frame.

Next, we'll make the selection a variant. To do this, double-click on the Create component icon on your Figma file header.

Double-clicking on "create component" icon

A variant will automatically appear:

Variant of the component

Next, I'll create different states for the checkboxes: default, hover, and filled.

Different states for the chechboxes: Default, hover and filled.

Now, we'll create the boolean variable.

To do this, go to Local variables as usual and select Boolean.

Opening local variables

Click on Create variable.

Next, we'll choose Boolean from the list.

Choosing "boolean" from the list

Created boolean variable

Next, we'll rename the boolean variable SaveFood since we're trying to create a function for saving a food choice for subsequent orders.

Renamied boolean variable

Next, we'll make the variable True by default. To do this, just click on the toggle icon by the side of the variable.

You've created a boolean variable!

We'll create an interaction for this boolean variable in the advanced prototyping section and check if it works.

How to Use Variables for Advanced Prototyping

In this section, we'll learn how to use variables for advanced prototyping in Figma, using the colour, number, string, and boolean variables we implemented earlier in the design.

N.B: You can only use advanced prototyping features on Figma if your file is on a paid team file. If you don't have a paid team version, you can apply for the Figma for Education plan. It's a way Figma helps learners and educators by giving them access to resources, and all benefits of a paid version, for free.

You can use advanced prototyping when you have a lot of screens to work on, and to simply make prototyping easier.

Advanced Prototyping with Number Variables

Starting with the number variables we created above, let's try to check if it actually works. But before we do that, we'll have to actually prototype the design.

Note that you can prototype number variables for designs where your user can increase or decrease the number of an item on the screen. Prototyping helps to show the functionality and how that particular feature would work.

To start with, I'll make the frame where the order count is a component. To do this, select the frame, and click on the component icon on your Figma file header.

Selecting the order count frame

Clicking on the component icon

The order count component

Click on the component icon again to make it a variant.

Making the order count component a variant

I'll make a frame outside the screen and drag the variant there, so I'll be able to work on the interactions well.

Making a frame outside the screen

Remember that we want to implement a function where the number of portions increases when the user clicks on the plus icon.

We'll start prototyping from here.

Now, click on the plus icon in the default variant and move to the prototype tab.

Clicking on the plus icon in the default variant

Next, click on the plus icon in the interactions area to add an interaction.

Adding an interaction

A tab will come up showing interactions. In this case, it's set to default On click, and no interaction has been added yet (None).

Adding an interaction

Now, click on the dropdown icon that says None.

Clicking on the dropdown icon

It'll bring up a list:

• Navigate to
• Change to
• Back
• Set variable
• Conditional
• Scroll to
• Open link
• Open overlay
• Swap overlay
• Close overlay

List following the dropdown

Choose Set variable.

A list of all variables in the file will come up, and you can then select the particular variable you want to implement. I'll click on OrderCount.

Choosing "set variable"

Clicking on Order Count (the first time)

Next, I'll click on OrderCount again to write a mathematical expression, and all the available mathematical expressions will appear:

Clicking on Order Count (the second time) and showing all mathematical expressions

I'll select Addition, because that's what we're trying to do.

Choosing the "addition" expression

You'll notice that an addition icon popped up to signify that the addition expression was given.

Next, I'll input 1 by the side of the addition icon to show that it's plus 1.

Adding number 1 to the expression

Done!

Now, we'll follow the same steps to do the same for the minus icon, making the expression subtraction instead of addition.

Added interactions for the minus icon

Done!

Note: We don't really need the variant we created earlier. You might only use the variant in cases where you want to create a hover state. I just wanted to show you how easy it would be to create a variant while doing this.

Next, we'll just copy the prototyped component and put it back in the main design.

Frame containing the prototyped variable

To put the prototyped component in the main design, click on Assets at the top of the left hand panel.

This section will show all the assets in the page you're currently on.

Showing all assets on the page

Next, I'll drag the frame to the design.

Dragged asset to main design

Note: If you don't want to follow the process above to place the prototyped component in the design, simply copy the component (CTRL + C), and paste to replace the frame on the main design.

Now, let's check our prototype out. To do this, you don't need to open the prototype on another tab. You can simply click on the asset and press SHIFT + space bar.

Clicked asset

Another frame will appear on your screen. It's interactive and you can test your prototype on it.

Interactive frame on your Figma screen.

Try clicking on the minus and plus icons on the frame to see if it carries out its function.

After checking the prototype, I'd like to implement some logic.

We don't want a scenario where the clicking on the minus icon continues till after 0 and now gives us a negative sign like -1 as you can see in the image below.

Minus icon giving us negative values

That wouldn't make sense, so we'll add a conditional.

A conditional is simply a condition that sets rules about how the interaction should work.

To do this, I'll move to the frame containing the component I made earlier.

Frame containing prototyped component

I'll be adding the conditional to the minus icon since that's the area that would give us negative values. So, I want the values to stop at 1 since that's the least a user can order (they can't order half or 0, for example).

So, we'll just zoom into the component to add our conditional. Make sure you're on the prototype tab as well.

Moving to prototype tab and zooming in on the prototyped component

I'll click on the variable icon by the minus frame.

Selecting the variable icon close to the minus icon frame

This will bring up the already set interactions:

Already made interactions on the minus frame

Next, I'll click on the plus icon by the 'x' on the interactions header.

Clicking on the plus icon in the interaction header

I'll choose conditional from the list of options which will appear:

• Navigate to
• Change to
• Back
• Set variable
• Conditional
• Scroll to
• Open link
• Open overlay
• Swap overlay
• Close overlay

Choosing conditional from the list of options

We'll then write the condition. To do this, click on Write condition by the if else statement.

Writing a condition for the interaction

When we click on Write condition, a list of all number variables will come up. I'll choose OrderCount.

Selecting ordercount

This will bring up a list of all available conditions:

• Equal to
• Not equal to
• Greater than
• Greater than or equal to
• Less than
• Less than or equal to

I'll choose Not equal to.

Choosing "Not equal to" condition

Next, the icon for the condition I chose will appear on the input field for writing the condition.

Condition appearing on the input field

Next, I'll input 0, which means the interaction is not equal to 0.

Inputing 0 (zero)

Next, I'll close the frame and try moving the Set variable section under the conditional section in the interaction. To close the Set variable section, click on the little dropdown icon.

Clicking on the dropdown icon to close set variable

When you click on the little dropdown icon, the Set variable section will be minimized, allowing you move the section under the Conditional section.

Closed set variable section

Next, I'll drag the set variable section under the conditional section. To do this, just hover on the set variable section and use your trackpad or mouse to drag it.

Dragging set variable under conditional

We just added a conditional to our interaction! The icon for the minus frame will change to a condition icon, showing that a conditional has been added.

Added a conditional to minus interaction

Now, you can test this new interaction to see how it works.

Mine certainly does! It doesn't go lower than 0 anymore.

How to implement cost per portion variable

Now, we want the other number values (cost per portion and total cost) to increase in response to the number of portions a user orders.

We'll start with the Plus icon frame:

Going back to the component we've been working on...

Frame with prototyped component

I'll click on the plus frame and go ahead to set variable.

Opening the interactions for plus frame

I'll click on the plus icon on the interactions header.

Clicking on the plus icon on the interactions header

Next, I'll select set variable.

Selecting set variable

A list of all variables that have been created in the file will come up:

• The color variables for text, buttons, headings, and so on.
• Number variables – OrderCount, Cost-Portion, and so on.

A list of all variables in the file

I'll scroll down to choose cost-portion, which is the cost per food portion a user orders.

Choosing "Cost-portion" (the first time)

An input field to write an expression for the variable will come up.

Write expression input filed

To write an expression, click on Cost-Portion again and select Addition.

Choosing cost-portion (the second time) and selecting addition

Addition icon coming up on input field

Next, I'll input 25, meaning that +25 should be added for every portion of food a user orders.

Inputing 25

Having added the interaction for the plus frame, we'll follow the same process for the minus frame. When you're done, the Set variable section should be under the Conditional section.

Adding interaction for the minus frame

Remember there's a conditional for the minus frame, so I'll just drag the new interaction inside the conditional.

Dragging the new "set variable" interaction inside the conditiona;

Now, try testing the new interaction you just added. Mine certainly works!

Testing the new interaction

Next, we still have one last variable to add (Total Cost).

Follow the steps above to recreate this interaction. Starting with the plus frame, implement the variable to make sure $25 adds when the order increases. It should show a placeholder – Total Cost + 25.

Implementing Total Cost variable

Now, do the same for the minus frame and test the interaction. Don't forget to add the new interaction inside the conditional.

Mine works!

Testing the interactions

You just learnt how to implement number variables with advanced prototyping in Figma. Congrats!

Advanced Prototyping with Boolean Variables

Next, we'll create an interaction for the boolean variable we created earlier in the article.

Note that you can prototype your boolean variables in designs where you have features like checkboxes and toggles. The prototype would show how the checkbox is supposed to function.

To create the interaction, move to the prototype tab and focus on the frame containing the boolean components.

Frame containing boolean components

Now, our main interaction will start from the hover state because that's when a user tries to click on the checkbox. But we still need to add an action that will take the user from the default state to the hover state.

To do this, I'll just click on the first variant and drag it to the second variant.

Connecting first variant to the second variant

I'll change On-click to While Hovering. To do this, just click on the On-click dropdown and select from the list that pops up:

• On click
• On drag
• While hovering
• While pressing
• Key/Gamepad
• Mouse enter
• Mouse leave
• Mouse down
• Mouse up
• After delay

Clicking on the on-click dropdown

Selecting "while hovering" from the list

Selected "while hovering"

I also want to change Instant to Smart Animate, so I'll click on the dropdown icon by Instant, and select from the list that appears:

• Instant
• Dissolve
• Smart animate

Changing "Instant" to "Smart Animate"

How the interaction looks

So, we're done with the first interaction and we'll get started on connecting the second variant to the third variant (Hover - Filled).

Just as we did earlier, we'll just drag the second variant to the third variant.

Connecting the second to the third variant

How the interaction looks

Like I said earlier, the main interaction starts from the second variant so we'll not be following the same steps we took to add the first interaction.

To continue, I'll click on the plus icon on the interaction header to add an action, and select Set variable from the list that pops up:

• Navigate to
• Change to
• Back
• Set variable
• Conditional
• Scroll to
• Open link
• Open overlay
• Swap overlay
• Close overlay

Clicking on the plus icon on the interaction

Choosing "set variable" from the list

Next, I'll click on Pick target variable to select the boolean variable.

Clicking on "pick target variable"

I'll scroll down the list of variables to choose the variable I want: SaveFood.

Selecting "SaveFood" variable

Now, to write the expression for this variable, we're going to say the value will be equal to true. So, I'll select True.

Writing the expression and selecting "true"

Having selected True, the expression (true) will go under the SaveFood variable, indicating that an expression was applied.

How the interaction looks

Next, we'll just copy the original component and paste it in our design so it can sync when we're checking the prototype.

Pasting the default component in the main design

To check the prototype directly on your Figma page, click on Shift + space bar.

Mine works!

But I noticed something; I can't un-check the checkbox. No interaction was provided for that. Now, we'll quickly add that interaction so our component works perfectly.

To do this, we'll go back to our components, making sure we're in prototype mode, and drag the connection from filled all the way back to default.

Dragging the connection from filled state to default state

Now, it's works perfectly!

How to Use Variables for Developers – Using APIs

Variables are very helpful for teams consisting of developers and/or designers.

Variables are now supported in Figma’s Plugin API—for building plugins and widgets—and in the REST API. Since variables is currently in open beta, features and functions may change as we respond to feedback. – Figma Docs

There are three documentations which contain support for variables for developers on Figma:

• For the REST API:

This API includes endpoints for querying, creating, updating, and deleting variables. – Figma docs

To be able to use this API, you must be a member of an enterprise.

• For the plugin API:

This API provides support for creating and reading variables, and binding variables to components. – Figma docs

• For the widget API: This API is connected to the plugin API. It is available to widgets by using the Plugin API the widget contains.

Widgets are interactive elements that can be used to create interactive prototypes. Widgets extend the functionality of design files and FigJam boards and are often part of the larger design system, which is a collection of reusable components.

Conclusion

Variables exist in Figma to make your designs better. They are easy to use and create, and are helpful in every design project. In order to save yourself time, make sure to incorporate variables into your design process.

The key is to practice and explore, and you'll get better as you go.

Thank you for reading this article, I hope you enjoyed it!