CSS - Design

Jun 2, 2026 3:00pm UTC (Check your timezone)

Theory Review Quiz

Instructors: Jess, Carmen, and Eda

Design

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

User-Centered Design: What Is User-Centered Design?

The purpose of user-centered design is prioritizing the end user, the person using the application or viewing the website.

Some aspects of user-centered design include:

We may also use an analytics tool for measuring how users engage with our websites and understanding “user behavior.” However, we should be mindful of privacy considerations.

User-Centered Design: What Are User Requirements, User Research, and Testing?

User research is for measuring user needs, behaviors, and pain points.

One common measure is the Net Promoter Score (NPS). It measures the likelihood of users recommending your product to a friend. It’s measured on a scale from 0 to 10 (with 9-10 indicating that they’re most likely to recommend) through a survey during key milestones, like after 7 days, 30 days, or 90 days after using the product.

Exit interviews are also helpful for user research, and they’re the survey shown to users when they cancel their subscription or delete their account.

User testing is about gathering data from users as they interact with the application. One example is A/B testing, and it involves shipping a new feature to randomly selected users only. Then developers can determine if the feature is useful through analytics gathered from that data.

User requirements is the rubric that the application should follow. It’s dynamic, meaning that it changes as the user base changes.

User-Centered Design: What Are Best Practices for Designing a Dark Mode Feature?

With dark mode, we can define a dark color scheme for our websites and let users switch to it if they want to. It’s helpful to reduce eye strain and improve readability in low-light conditions.

There are some things to consider when designing dark mode:

User-Centered Design: What Are Best Practices for Designing Breadcrumbs?

Breadcrumbs are a navigation aid, showing the user where they are in the website’s hierarchy.

1<div class="breadcrumbs">
2  <span><a href="/">Home</a> &gt;</span>
3  <span><a href="/books/">Books</a> &gt;</span>
4  <span><a href="/books/genres/">Genres</a> &gt;</span>
5  <span><a href="/books/genres/horror/">Horror</a></span>
6</div>

Some considerations when using breadcrumbs are:

This page itself has breadcrumbs!

User-Centered Design: What Are Best Practices for Designing Cards?

Cards are used to convey information in a structured way, and they are usually common in e-commerce, social media, and news websites.

Some things to consider when designing cards are:

User-Centered Design: What Are Best Practices for Designing Infinite Scrolls?

Usually, social media sites include a design pattern called infinite scrolling, loading more content as the user scrolls down the page.

Pagination is another design pattern that breaks up the content into different pages. Infinite scrolling can sometimes be used instead of pagination.

Some things to consider when implementing infinite scrolling:

User-Centered Design: What Are Best Practices for Designing Modal Dialogs?

A modal is kind of a pop-up window. We can create modals using the HTML dialog element.

Usually, the content behind the modal is dimmed or blurred to draw attention to the interactive nature of the modal content. Also, it’s good practice to provide the ability to close the modal when the user clicks outside the modal area.

Modals usually have a call-to-action (CTA) button and should also include a close button.

User-Centered Design: What Are Best Practices for Progress Indication on Forms, Registration, and Setup?

With progress indication, we can make sure that it’s clear for users where they are in a process such as registration, forms, or a setup process.

Some things to consider when designing progress indication:

User-Centered Design: What Are Best Practices for Designing Shopping Carts?

A shopping cart is an important part of e-commerce websites.

Some considerations for designing a shopping cart:

It should also be easy to find the total cost of all the items in the cart.

We should also provide a call-to-action (CTA) button to guide the users to proceed to the checkout.

Here is an example from the freeCodeCamp lesson page:

 1<div class="shopping-cart">
 2  <button id="cart-btn" aria-label="Shopping cart">
 3    <svg
 4      xmlns="http://www.w3.org/2000/svg"
 5      width="28"
 6      height="28"
 7      fill="none"
 8      stroke="currentColor"
 9      stroke-width="2"
10      stroke-linecap="round"
11      stroke-linejoin="round"
12      class="feather feather-shopping-cart"
13      viewBox="0 0 24 24"
14      aria-hidden="true"
15      focusable="false"
16    >
17      <circle cx="9" cy="21" r="1"></circle>
18      <circle cx="20" cy="21" r="1"></circle>
19      <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
20    </svg>
21    <span id="item-count">3</span>
22  </button>
23  <div id="cart-details">
24    <ul id="cart-items">
25      <li>T-Shirt x2 - $40.00</li>
26      <li>Hat x1 - $15.00</li>
27    </ul>
28    <div id="cart-total">
29      Total: <strong>$55.00</strong>
30    </div>
31    <button id="checkout-btn">Proceed to Checkout</button>
32  </div>
33</div>
 1:root {
 2  --primary-color: #007bff;
 3}
 4
 5.shopping-cart {
 6  position: fixed;
 7  top: 20px;
 8  right: 20px;
 9  font-family: sans-serif;
10  width: 280px;
11  background: white;
12  border: 1px solid #ccc;
13  padding: 10px;
14  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
15  border-radius: 6px;
16}
17
18#cart-btn {
19  background: none;
20  border: none;
21  cursor: default;
22  position: relative;
23  display: flex;
24  align-items: center;
25  padding: 4px;
26  color: #333;
27  font-size: 28px;
28}
29
30#item-count {
31  background: red;
32  color: white;
33  border-radius: 50%;
34  padding: 2px 7px;
35  font-size: 14px;
36  position: absolute;
37  top: -6px;
38  right: -6px;
39  min-width: 18px;
40  height: 18px;
41  line-height: 14px;
42  text-align: center;
43  font-weight: 700;
44  user-select: none;
45  box-sizing: border-box;
46}
47
48#cart-details {
49  margin-top: 10px;
50}
51
52#cart-items {
53  list-style: none;
54  padding: 0;
55  margin: 0 0 10px 0;
56  font-size: 1rem;
57}
58
59#cart-items li {
60  padding: 5px 0;
61  border-bottom: 1px solid #eee;
62}
63
64#cart-total {
65  font-size: 1.2rem;
66  font-weight: 700;
67  text-align: right;
68  color: #111;
69  margin-bottom: 15px;
70}
71
72#checkout-btn {
73  width: 100%;
74  background-color: var(--primary-color);
75  color: white;
76  border: none;
77  padding: 12px 0;
78  font-size: 1.1rem;
79  font-weight: 700;
80  border-radius: 6px;
81  cursor: pointer;
82  transition: background-color 0.3s ease;
83}
84
85#checkout-btn:hover,
86#checkout-btn:focus {
87  background-color: #0056b3;
88  outline: none;
89}

User-Centered Design: What Is Progressive Disclosure?

With progressive disclosure, we can show users only the relevant content based on their current activity and hide the other elements. It’s helpful for reducing cognitive load.

An example is providing a “More details” button for items on an e-commerce website.

Some things to consider when designing progressive disclosure elements are:

User-Centered Design: What Is Deferred and Lazy Registration?

Lazy registration is the name of a design pattern that lets users browse and interact with the content of the application without registering for an account.

An example is the ability to add items to a shopping cart on an e-commerce website and only having to register/login when proceeding to checkout.

Another example is YouTube. Without having to register/sign in, users can watch the videos, but for other features like commenting, they need to register/sign in.

Common Design Tools: What Are Design Briefs and How Do Developers Work with Them?

A design brief is a document that outlines the goals and requirements of a project. It guides the design process.

Usually, it’s the client that writes the design brief.

Some things to include in a design brief are:

We should be realistic about the timeline and budget and make sure to add these constraints to the design brief.

Once the design brief is reviewed and approved by all the stakeholders, designers can start with their work.

The developer’s role here is to review and understand the design requirements and create a working product.

Common Design Tools: What Are Some Common Tools Developers Should Know About That Are Used by Designers in the Industry?

There are two important features that most design tools offer:

Some common design tools are:

Design Fundamentals Review

We’ve learned a lot about design fundamentals in this section! Here are some of the things we’ve looked at: