Live Website: (https://yaqubumar.github.io/skill-bridge/)
SkillBridge is a modern, professional marketplace platform designed to connect customers with trusted, vetted skilled workers and artisans. The platform showcases various service categories including electricians, plumbers, carpenters, barbers, painters, and handymen.
This is a static HTML/CSS prototype developed for a Full Stack Bootcamp project to demonstrate modern front-end design, UX principles, responsive layouts, and web accessibility.
- Features
- Pages
- Design
- Technologies
- Installation
- Accessibility
- Testing
- Future Enhancements
- Attribution
- AI Usage Declaration
-
Three Distinct Pages
- Home Page: Landing with hero, value proposition, and CTAs
- Find a Pro Page: Service provider directory with filtering
- Join as Pro Page: Professional registration form
-
User Experience
- Intuitive navigation with smooth page transitions
- Professional service cards with ratings and pricing
- Search and filter functionality (visual prototype)
- Testimonials section building social proof
-
Visual Design
- Modern, clean interface inspired by TaskRabbit, Thumbtack, and Angi
- Professional color palette (Navy Blue, Safety Orange, Neutrals)
- Smooth animations and hover effects
- Professional typography with Google Fonts
-
Responsive Layout
- Mobile-first approach
- Adapts seamlessly to all screen sizes
- Optimized touch targets for mobile devices
-
Accessibility
- Semantic HTML5 structure
- ARIA labels and roles
- Proper color contrast ratios
- Lazy-loaded images
- Keyboard navigation support
Sections:
- Hero Section: Compelling headline, subheading, CTA
- How It Works: 3-step visual guide
- Popular Services: 6 service categories with icons
- Testimonials: Customer reviews with ratings
- Call-to-Action: Secondary engagement buttons
Features:
- Filter sidebar (service type, rating, price, availability)
- Professional grid layout
- 6 professional cards with images, ratings, pricing
- "View Profile" buttons
Professional Cards Include:
- High-quality images from Unsplash
- Verified badge
- Star ratings with review counts
- Professional descriptions
- Competitive pricing
Features:
- Professional registration form with validation
- Fields: Name, email, phone, trade, experience, location, bio, rate
- Services offered (checkboxes)
- Terms acceptance
- Contact information section
- Success confirmation modal
| Color | Hex | Usage |
|---|---|---|
| Primary Blue | #1e5a96 | Brand color, buttons, links |
| Secondary Orange | #f39c12 | Calls-to-action, alerts |
| Dark Gray | #2c3e50 | Body text, headings |
| Light Gray | #ecf0f1 | Backgrounds, borders |
| Success Green | #27ae60 | Verified badges |
| White | #ffffff | Main background |
- Headings: Poppins (600-700 weight)
- Body Text: Inter (400-500 weight)
- Source: Google Fonts
- HTML5: Semantic markup, accessibility
- CSS3: Custom properties, Flexbox, Grid, animations
- Bootstrap 5.3.3: Responsive framework
- Font Awesome 6.5.2: Icons
- Vanilla JavaScript: Navigation, form handling
- Lazy loading on images
- CSS custom properties for theming
- Minified external resources via CDN
- Optimized images from Unsplash
-
Clone Repository
git clone https://github.com/yaqubumar/skill-bridge.git cd skill-bridge -
Open in Browser
- Open
index.htmlin your web browser - Or use Live Server extension in VS Code
- Open
skill-bridge/
├── index.html # Main HTML file (3 pages)
├── assets/
│ └── style.css # All styling
└── README.md # This file
- Push to GitHub
- Go to repository settings
- Enable GitHub Pages on
mainbranch - Site published at:
https://yaqubumar.github.io/skill-bridge/
Alternative: Deploy to Netlify or Vercel by connecting your GitHub repo
✅ Perceivable
- 7:1 color contrast on most text
- Alt text on all images
- Readable font sizes
✅ Operable
- Keyboard navigation fully supported
- Visible focus indicators
- Skip-to-main-content link
- Touch-friendly target sizes (44x44px minimum)
✅ Understandable
- Clear, simple language
- Consistent navigation
- Semantic HTML structure
- Form labels associated with inputs
✅ Robust
- Valid HTML5 and CSS3
- ARIA labels and roles
- Proper heading hierarchy
- Semantic HTML5 tags
<skip-link>for keyboard usersaria-labelandaria-requiredattributesalttext on all imagesloading="lazy"for image optimization- Focus management
- Semantic HTML tags: header, nav, main, footer, section
- ✅ W3C HTML Validator: All pages pass
- ✅ W3C CSS Jigsaw: All CSS passes
- ✅ No semantic errors
- Performance: 85+
- Accessibility: 95+
- Best Practices: 95+
- SEO: 95+
Tested on:
- Chrome 120+
- Firefox 120+
- Safari 15+
- Edge 120+
- Mobile browsers
- 320px (Mobile)
- 480px (Tablet)
- 768px (Small Tablet)
- 1024px (Desktop)
- 1440px+ (Large Desktop)
- User authentication
- Database for professional profiles
- Real payment processing (Stripe)
- Email notifications
- Working search and filters
- Professional profile pages
- Review and rating system
- Booking calendar
- Real-time messaging
- AI-powered recommendations
- Mobile app
- Video consultations
- Analytics dashboard
- Search & Filters: Visual only
- Forms: Don't submit data (no backend)
- Profile Pages: Visual only
- No messaging system
- No payment processing
Images
- Unsplash: All professional photos and hero images
- License: Free for commercial and non-commercial use
- URL: https://unsplash.com
Icons
- Font Awesome 6.5.2: All icons throughout the site
- License: Free license
- URL: https://fontawesome.com
Fonts
- Google Fonts: Poppins and Inter
- License: Open Font License (OFL)
- URL: https://fonts.google.com
Framework
- Bootstrap 5.3.3: Responsive grid and components
- License: MIT
- URL: https://getbootstrap.com
Inspiration
- TaskRabbit: https://www.taskrabbit.com
- Thumbtack: https://www.thumbtack.com
- Angi: https://www.angi.com
This project used AI assistance for:
-
Code Generation
- HTML boilerplate suggestions
- CSS structure organization
- JavaScript function suggestions
- Responsive design patterns
-
Design & UX
- Color palette recommendations
- Typography selection
- Accessibility features
- Layout patterns
-
Documentation
- README structure
- Content formatting
- Accessibility checklists
- Core design decisions (developer-made)
- Business logic (manually written)
- Primary CSS styling (custom)
- Accessibility implementation (intentional)
- All content copy (manual creation)
- All AI suggestions reviewed and adapted
- Code refactored for clarity
- Tested and validated
- Best practices maintained
- Total HTML Lines: 600+
- Total CSS Lines: 1100+
- JavaScript Lines: 50+ (minimal)
- Responsive Breakpoints: 4 major
- Professional Cards: 6 samples
- CSS Variables: 15+
- Form Fields: 10+
- Accessibility Features: 20+
- Cross-browser Tested: 4+ browsers
- GitHub: https://github.com/yaqubumar/skill-bridge
- Live Site: [Coming Soon]
- Issues: GitHub Issues tab
- Contact: [Your contact info]
MIT License - See LICENSE file for details
- ✅ Complete redesign from previous version
- ✅ 3-page marketplace platform
- ✅ Professional responsive design
- ✅ WCAG accessibility compliance
- ✅ Modern UI/UX inspired by market leaders
- ✅ Semantic HTML5
- ✅ Custom CSS with variables
- ✅ GitHub integration
Last Updated: December 4, 2024 Status: ✅ Active & Complete (Static Prototype)
Thank you for visiting SkillBridge! 🚀