DEV Community

Nadim Chowdhury
Nadim Chowdhury

Posted on

🎨 MODULE 7: UI/UX Understanding

#a11y #frontend #ui #ux

They mentioned UX sense — that means they’re not just hiring a coder.
They want someone who understands user experience, usability, and polish.

Let’s break it down properly.

✅ 1️⃣ Responsive Design

Your UI must work on:

  • Mobile 📱
  • Tablet
  • Desktop 💻

Core Techniques:

  • Flexible layouts (Flexbox / Grid)
  • Media queries
  • Fluid typography
  • Relative units (%, rem, em)

Example:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}
Enter fullscreen mode Exit fullscreen mode

🔥 Interview Tip

Explain:

  • Mobile traffic is dominant
  • Layout must adapt without horizontal scroll
  • Touch-friendly buttons (min 44px height)

✅ 2️⃣ Accessibility (ARIA Basics)

Accessibility means making your app usable for:

  • Screen reader users
  • Keyboard-only users
  • Visually impaired users

🔹 Basic ARIA Concepts

ARIA = Accessible Rich Internet Applications

Example:

<button aria-label="Close menu">X</button>
Enter fullscreen mode Exit fullscreen mode

Important attributes:

  • aria-label
  • aria-hidden
  • role
  • aria-expanded

🔹 Keyboard Accessibility

Ensure:

  • Tab navigation works
  • Focus states visible
  • Buttons accessible via Enter/Space

🔥 Why This Matters?

Accessibility = professionalism
Many companies legally require it.

✅ 3️⃣ Semantic HTML

Bad:

<div onclick="submit()">Submit</div>
Enter fullscreen mode Exit fullscreen mode

Good:

<button type="submit">Submit</button>
Enter fullscreen mode Exit fullscreen mode

Use:

  • <header>
  • <nav>
  • <main>
  • <section>
  • <article>
  • <button>

Benefits:

  • Better SEO
  • Better accessibility
  • Cleaner structure

✅ 4️⃣ Mobile-First Design

Design for small screen first.

Then scale up.

Why?

  • Forces simplicity
  • Prioritizes important content
  • Better performance

CSS example:

/* Mobile default */

.card {
  width: 100%;
}

/* Desktop enhancement */

@media (min-width: 1024px) {
  .card {
    width: 50%;
  }
}
Enter fullscreen mode Exit fullscreen mode

✅ 5️⃣ Design Consistency

Consistency improves usability.

Keep consistent:

  • Spacing system (8px grid)
  • Colors
  • Typography
  • Button styles
  • Border radius

Avoid random design changes across pages.

Use design tokens or theme system.

✅ 6️⃣ Loading States

Never leave user confused.

Instead of blank screen:

  • Show spinner
  • Show skeleton loader
  • Disable button during submit

Bad UX:
User clicks → nothing happens.

Good UX:
Button shows “Loading…”

✅ 7️⃣ Error Feedback

If login fails:

❌ Don’t just show alert
✅ Show clear inline error message

Example:

  • “Invalid email format”
  • “Password must be 8+ characters”

Good UX principles:

  • Clear
  • Actionable
  • Non-technical language

✅ 8️⃣ Skeleton Loaders

Better than spinners.

Instead of:

⏳ Loading…

Use grey placeholder UI blocks.

Why?

  • Feels faster
  • Shows layout preview
  • Reduces perceived waiting time

Example:

[Image Placeholder]
[Title Placeholder]
[Text Placeholder]
Enter fullscreen mode Exit fullscreen mode

Modern apps (YouTube, Facebook) use skeletons.

🧠 UX Interview Question

They may ask:

How would you improve this login page?

Good answer includes:

  • Proper validation
  • Clear errors
  • Loading state
  • Accessible labels
  • Mobile responsive layout

🧪 MODULE 8: CODING TEST SYLLABUS

Expect 1–2 hour test.
They test clarity, logic, and structure — not just speed.

✅ Section A: JavaScript Problem Solving

🔹 Array Manipulation

Examples:

  • Remove duplicates
  • Flatten array
  • Group by property
  • Sort objects
  • Find max/min

🔹 Object Transformation

Example:

Input:

[
  { id: 1, name: "A" }
]
Enter fullscreen mode Exit fullscreen mode

Output:

{
  1: { id: 1, name: "A" }
}
Enter fullscreen mode Exit fullscreen mode

They check:

  • Reduce usage
  • Clean transformation logic

🔹 Closure-Based Problem

Example:

function counter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
Enter fullscreen mode Exit fullscreen mode

They may test:

  • Private variables
  • Scope behavior

🔹 Async Handling

They may ask:

  • Fetch multiple APIs in parallel
  • Handle Promise.all
  • Fix async bug
  • Convert promise to async/await

✅ Section B: Frontend Mini Task

They may ask you to build:

🔹 1️⃣ Login Page

Should include:

  • Controlled inputs
  • Validation
  • Loading state
  • Error handling
  • Clean UI

🔹 2️⃣ Fetch API Data

Expect:

  • useEffect
  • Axios/fetch
  • Loading state
  • Error state

🔹 3️⃣ Pagination

Either:

  • Client-side
  • Server-side

Must handle:

  • Page change
  • Limit
  • Edge cases

🔹 4️⃣ Search Filter

Should implement:

  • Debounce
  • Case insensitive match
  • Possibly server-side filtering

🔹 5️⃣ Protected Route

Example logic:

if (!token) {
  return <Navigate to="/login" />;
}
Enter fullscreen mode Exit fullscreen mode

Must understand:

  • Auth state
  • Route guards
  • Token validation

✅ Section C: Debugging

This is where many fail.

🔹 Fix Closure Bug

Example:

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1000);
}
Enter fullscreen mode Exit fullscreen mode

Output:
5 5 5 5 5

Fix:
Use let or IIFE.

🔹 Fix Async Bug

Example:

const data = fetchData();
console.log(data);
Enter fullscreen mode Exit fullscreen mode

Should use:
await

🔹 Optimize Re-render Issue

They may test:

  • Missing dependency array
  • Unnecessary state updates
  • Memoization (useMemo, useCallback)
  • Component re-render loop

🎯 How to Prepare Smartly

Practice:

  • Build login + dashboard mini app
  • Implement pagination + search
  • Solve 20 array problems
  • Practice debugging broken code

Time yourself:
60–90 minutes mock test.

🧠 Final Advice

If you combine:

  • Strong JS fundamentals
  • Async mastery
  • Clean architecture
  • Security awareness
  • Performance understanding
  • UX sense

You are ready for serious frontend / full-stack interviews.

Top comments (0)