Why advanced styling creates polished UIs in Svelte - See It in Action

Why advanced styling creates polished UIs

📖 Scenario: You are building a simple user profile card for a website. The card should look neat and professional, with good spacing, colors, and fonts. This will help users feel confident and comfortable using the site.

🎯 Goal: Create a Svelte component that displays a user profile card with advanced styling using CSS variables, Flexbox layout, and responsive design. The card should have a polished look with proper spacing, colors, and font styles.

📋 What You'll Learn

Create a Svelte component with a user profile card structure

Use CSS custom properties (variables) for colors and spacing

Apply Flexbox to layout the card content horizontally

Add responsive styling so the card stacks vertically on small screens

Use semantic HTML elements and accessible attributes

💡 Why This Matters

🌍 Real World

User profile cards are common in social media, team pages, and dashboards. Polished styling improves user trust and engagement.

💼 Career

Front-end developers use advanced CSS and responsive design daily to build attractive, accessible, and user-friendly web interfaces.

1

Create the basic user profile card structure

Create a Svelte component with a section element having class profile-card. Inside it, add an img with alt text "User avatar" and class avatar. Also add a div with class info containing an h2 with text "Jane Doe" and a p with text "Web Developer".

Svelte

Hint

Use semantic tags like section, img, h2, and p with the exact class names and text.

2

Add CSS variables for colors and spacing

Inside a <style> block, define CSS variables --card-bg as #f9f9f9, --primary-color as #333, and --spacing as 1rem. Then set the .profile-card background color to var(--card-bg), padding to var(--spacing), and border radius to 0.5rem.

Svelte

  
  
    Jane Doe
    Web Developer
  



  /* Define CSS variables and style .profile-card background, padding, and border radius */

Hint

Use :root to define variables and apply them inside .profile-card.

3

Use Flexbox to layout avatar and info side by side

In the <style> block, add CSS to make .profile-card a flex container with horizontal layout and center alignment. Set .avatar to have fixed width and height of 100px and rounded corners with border-radius: 50%. Add left margin of var(--spacing) to .info. Set the text color of h2 and p inside .info to var(--primary-color).

Svelte

  
  
    Jane Doe
    Web Developer
  



  :root {
    --card-bg: #f9f9f9;
    --primary-color: #333;
    --spacing: 1rem;
  }

  .profile-card {
    background-color: var(--card-bg);
    padding: var(--spacing);
    border-radius: 0.5rem;
    /* Add flexbox styles here */
  }

  /* Style avatar and info here */

Hint

Use display: flex and align-items: center on .profile-card. Style .avatar and .info as described.

4

Add responsive design for small screens

In the <style> block, add a media query for screens with max-width 400px. Inside it, set .profile-card to have flex-direction: column and center align items. Also add bottom margin of var(--spacing) to .avatar inside this media query.

Svelte

  
  
    Jane Doe
    Web Developer
  



  /* Existing styles above */

  /* Add media query for small screens below */

Hint

Use a media query with max-width: 400px to change flex direction and spacing for small screens.