Web-Dev-For-Beginners/7-bank-project/2-forms/assignment.md

Style Your Bank App with Modern CSS

Project Overview

Transform your functional banking application into a visually appealing, professional-looking web app using modern CSS techniques. You'll create a cohesive design system that enhances user experience while maintaining accessibility and responsive design principles.

This assignment challenges you to apply contemporary web design patterns, implement a consistent visual identity, and create an interface that users will find both attractive and intuitive to navigate.

Instructions

Step 1: Setup Your Stylesheet

Create your CSS foundation:

1. Create a new file called styles.css in your project root
2. Link the stylesheet in your index.html file:

   <link rel="stylesheet" href="styles.css">
   

3. Start with CSS reset and modern defaults:

   /* Modern CSS reset and base styles */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     line-height: 1.6;
     color: #333;
   }
   

Step 2: Design System Requirements

Implement these essential design elements:

Color Palette

• Primary color: Choose a professional color for buttons and highlights
• Secondary color: Complementary color for accents and secondary actions
• Neutral colors: Grays for text, borders, and backgrounds
• Success/Error colors: Green for success states, red for errors

Typography

• Heading hierarchy: Clear distinction between H1, H2, and H3 elements
• Body text: Readable font size (minimum 16px) and appropriate line height
• Form labels: Clear, accessible text styling

Layout and Spacing

• Consistent spacing: Use a spacing scale (8px, 16px, 24px, 32px)
• Grid system: Organized layout for forms and content sections
• Responsive design: Mobile-first approach with breakpoints

Step 3: Component Styling

Style these specific components:

Forms

• Input fields: Professional borders, focus states, and validation styling
• Buttons: Hover effects, disabled states, and loading indicators
• Labels: Clear positioning and required field indicators
• Error messages: Visible error styling and helpful messaging

Navigation

• Header: Clean, branded navigation area
• Links: Clear hover states and active indicators
• Logo/Title: Distinctive branding element

Content Areas

• Sections: Clear visual separation between different areas
• Cards: If using card-based layouts, include shadows and borders
• Backgrounds: Appropriate use of white space and subtle backgrounds

Step 4: Enhanced Features (Optional)

Consider implementing these advanced features:

• Dark mode: Toggle between light and dark themes
• Animations: Subtle transitions and micro-interactions
• Loading states: Visual feedback during form submissions
• Responsive images: Optimized images for different screen sizes

Design Inspiration

Modern banking app characteristics:

• Clean, minimal design with plenty of white space
• Professional color schemes (blues, greens, or sophisticated neutrals)
• Clear visual hierarchy with prominent call-to-action buttons
• Accessible contrast ratios meeting WCAG guidelines
• Mobile-responsive layouts that work on all devices

Technical Requirements

CSS Organization

/* 1. CSS Custom Properties (Variables) */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  /* Add more variables */
}

/* 2. Base Styles */
/* Reset, typography, general elements */

/* 3. Layout */
/* Grid, flexbox, positioning */

/* 4. Components */
/* Forms, buttons, cards */

/* 5. Utilities */
/* Helper classes, responsive utilities */

/* 6. Media Queries */
/* Responsive breakpoints */

Accessibility Requirements

• Color contrast: Ensure at least 4.5:1 ratio for normal text
• Focus indicators: Visible focus states for keyboard navigation
• Form labels: Properly associated with inputs
• Responsive design: Usable on screens from 320px to 1920px wide

Evaluation Rubric

Criteria	Exemplary (A)	Proficient (B)	Developing (C)	Needs Improvement (F)
Design System	Implements comprehensive design system with consistent colors, typography, and spacing throughout	Uses consistent styling with clear design patterns and good visual hierarchy	Basic styling applied with some consistency issues or missing design elements	Minimal styling with inconsistent or conflicting design choices
User Experience	Creates intuitive, professional interface with excellent usability and visual appeal	Provides good user experience with clear navigation and readable content	Basic usability with some UX improvements needed	Poor usability, difficult to navigate or read
Technical Implementation	Uses modern CSS techniques, organized code structure, and follows best practices	Implements CSS effectively with good organization and appropriate techniques	CSS works correctly but may lack organization or modern approaches	Poor CSS implementation with technical issues or browser compatibility problems
Responsive Design	Fully responsive design that works beautifully across all device sizes	Good responsive behavior with minor issues on some screen sizes	Basic responsive implementation with some layout issues	Not responsive or significant problems on mobile devices
Accessibility	Meets WCAG guidelines with excellent keyboard navigation and screen reader support	Good accessibility practices with proper contrast and focus indicators	Basic accessibility considerations with some missing elements	Poor accessibility, difficult for users with disabilities

Submission Guidelines

Include in your submission:

• styles.css: Your complete stylesheet
• Updated HTML: Any HTML modifications you made
• Screenshots: Images showing your design on desktop and mobile
• README: Brief description of your design choices and color palette

Bonus points for:

• CSS custom properties for maintainable theming
• Advanced CSS features like Grid, Flexbox, or CSS animations
• Performance considerations like optimized CSS and minimal file size
• Cross-browser testing ensuring compatibility across different browsers

💡 Pro Tip: Start with mobile design first, then enhance for larger screens. This mobile-first approach ensures your app works well on all devices and follows modern web development best practices.