Nudle

Basic End User Computing site

Comment

Nudle

Basic End User Computing site

Nudle Basic End User Computing Course Website

Project Overview

A comprehensive 3-page responsive website for Nudle's Basic End User Computing Course, designed to be modern, inclusive, and simple for first-time tech users.

Pages Included

  1. Home Page - Course value proposition, highlights, and strong call-to-action
  2. Course Overview Page - Detailed curriculum breakdown, benefits, and testimonials
  3. Partners & Impact Page - Social mission, success statistics, and partner information

File Structure

Core Application Files

  • App.tsx - Main application component with routing
  • Guidelines.md - Project guidelines and design system rules

Page Components (/components/)

  • HomePage.tsx - Landing page with course highlights and CTAs
  • CourseOverviewPage.tsx - Detailed course information and curriculum
  • PartnersImpactPage.tsx - Impact metrics and partner information
  • Navigation.tsx - Responsive navigation header

Styling

  • styles/globals.css - Tailwind V4 global styles and design tokens

UI Components (/components/ui/)

Complete shadcn/ui component library for consistent design

Protected Components (/components/figma/)

  • ImageWithFallback.tsx - Image component with fallback handling

Key Features

  • Responsive Design - Works on desktop, tablet, and mobile
  • Accessibility Focus - High contrast, readable typography, clear navigation
  • Inclusive Design - Designed for first-time computer users
  • Modern UI - Clean, professional appearance using shadcn/ui components
  • Performance Optimized - Efficient loading with image fallbacks

Technology Stack

  • React 18 with TypeScript
  • React Router for navigation
  • Tailwind CSS v4 for styling
  • shadcn/ui component library
  • Lucide React for icons
  • Unsplash for placeholder images

Design Principles

  • Simplicity First - Clean layouts without clutter
  • Clear Actions - Prominent CTAs and easy navigation
  • Trust Building - Success metrics and testimonials
  • Inclusivity - Welcoming design for diverse users

Setup Instructions

  1. Install dependencies: npm install
  2. Run development server: npm run dev
  3. Build for production: npm run build

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

Contact Information

For questions about this project:

Created for Nudle's mission to transform communities through digital literacy education.

Built With

Share this project:

Updates