7.1 KiB

Raw Permalink Blame History

Style Your Bank App wit Modern CSS

Project Overview

Change your functional banking application to one wey fine to look, professional web app using modern CSS techniques. You go create one system wey go make design dey solid, improve user experience plus still keep accessibility and responsive design principles.

Dis assignment dey make you use contemporary web design style, do consistent visual identity, and create interface wey users go find attractive and easy to waka.

Instructions

Step 1: Setup Your Stylesheet

Create your CSS foundation:

Create one new file wey go be styles.css for your project root

Link the stylesheet inside your index.html file:

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

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

Put these important design elements:

Color Palette

Primary color: Choose one 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 difference between H1, H2, and H3 elements
Body text: Font size wey you fit read well (minimum 16px) and correct line height
Form labels: Clear, accessible text styling

Layout and Spacing

Consistent spacing: Use one 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 particular 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

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 you dey use card-based layouts, include shadows and borders
Backgrounds: Correct use of white space and subtle backgrounds

Step 4: Enhanced Features (Optional)

Think about adding 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 wit plenty white space
Professional color schemes (blues, greens, or sophisticated neutrals)
Clear visual hierarchy wit prominent call-to-action buttons
Accessible contrast ratios wey meet WCAG guidelines
Mobile-responsive layouts wey work well 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: Make sure say e get at least 4.5:1 ratio for normal text
Focus indicators: Visible focus states for keyboard navigation
Form labels: Properly linked with inputs
Responsive design: Fit work for 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

Put inside your submission:

styles.css: Your complete stylesheet
Updated HTML: Any HTML changes wey you do
Screenshots: Images wey dey show your design for desktop and mobile
README: Brief description of your design choices and color palette

Bonus points for:

CSS custom properties for mother way you fit maintain theming
Advanced CSS features like Grid, Flexbox, or CSS animations
Performance considerations like optimized CSS and small file size
Cross-browser testing to make sure e fit work for different browsers

💡 Pro Tip: Start wit mobile design first, then improve for bigger screens. Dis mobile-first approach dey make sure your app work well for all devices and follow modern web development best practices.

Disclaimer: Dis document na wetin AI translation service Co-op Translator translate. Even though we try make am correct, abeg sabi say automated translation fit get wahala or mistakes. The original document for im own language na the correct one wey you suppose trust. If na important info, better make human professional translate am. We no go take blame if person no understand well or if dem use am wrong.

7.1 KiB Raw Permalink Blame History