Strong frontend projects are accessible, fast and responsive: semantic HTML pages, CSS components built without libraries, JavaScript widgets with keyboard support and a few small React apps with real data. Add a Lighthouse score and a keyboard-only demo to each one.
Anyone can copy a landing page. Each idea here carries a measurable upgrade: a Lighthouse score, a keyboard-only walkthrough or a small data feature.
- 1Semantic HTMLstructure first, no CSS
- 2Stylelayout, spacing, theme
- 3BehaveJavaScript, states, keys
- 4MeasureLighthouse, axe, devices
- 5Publishlive link and README
HTML and CSS
Single-page CV with a print stylesheet
BeginnerHTML and CSS
DataYour own details
Stand-outPrints to a clean one-page PDF and scores 100 on Lighthouse
Responsive pricing cards and comparison table
BeginnerHTML and CSS
DataSample plans
Stand-outAn accessible table with sensible keyboard focus order
Accessible contact form with validation
BeginnerHTML, ARIA
DataNone
Stand-outTested with a screen reader and keyboard only; clear error messages
Image gallery with CSS grid
BeginnerHTML and CSS
DataFree photo sources
Stand-outResponsive srcset images and a no-JavaScript lightbox
Theme switcher with CSS variables
IntermediateCSS, a little JS
DataNone
Stand-outRespects prefers-color-scheme and remembers choice without a flash
Documentation layout
IntermediateCSS grid, sticky sidebar
DataMarkdown content
Stand-outWorks on mobile and prints well
Testimonial and changelog components
BeginnerHTML and CSS
DataSample copy
Stand-outReusable with only custom properties
JavaScript components
Tabs, accordion and tooltip set
BeginnerVanilla JavaScript
DataNone
Stand-outCorrect ARIA roles and full keyboard support
Custom dropdown or combobox
IntermediateVanilla JavaScript
DataA country list
Stand-outArrow-key navigation and screen-reader announcements
Cookie consent banner
BeginnerJavaScript
DataNone
Stand-outBlocks analytics until the visitor accepts
Datepicker
IntermediateJavaScript
DataNone
Stand-outLocale-aware and keyboard accessible
Toast notification system
IntermediateJavaScript
DataNone
Stand-outQueue, timers and ARIA live regions
Character-limited textarea
BeginnerJavaScript
DataNone
Stand-outLive counter that screen readers announce at thresholds
Apps with a framework
Flashcards with spaced repetition
IntermediateReact or Vue
DatalocalStorage
Stand-outSM-2 style scheduling and a review streak
Weather app with geolocation
BeginnerReact
DataOpen-Meteo (free, no key)
Stand-outShows the last known weather offline with a service worker
Quiz app with timer and review
BeginnerReact
DataOpen Trivia DB
Stand-outReview screen for wrong answers
Pomodoro timer with statistics
BeginnerReact
DatalocalStorage
Stand-outWeekly focus chart and a notification when time is up
24-hour stories feature
AdvancedReact
DataSample images
Stand-outProgress bars, tap and hold to pause, swipe gestures
Kanban board with drag and drop
IntermediateReact and dnd-kit
DatalocalStorage or Supabase
Stand-outKeyboard-accessible drag and drop
Quality and performance
Core Web Vitals makeover
IntermediateLighthouse, WebPageTest
DataA slow public site you pick
Stand-outBefore and after numbers with a performance budget
Accessibility audit and fix
Intermediateaxe DevTools, a screen reader
DataA small public site
Stand-outA report with each fix verified
Turn any idea into a portfolio piece
- Pick one idea and write the one-line goal first.
- Build the smallest version that works end to end.
- Add tests for the rules that could silently break.
- Deploy it so there is a live link or a one-command run.
- Write the README: what it does, how to run it, one number, one limit.
Frequently asked questions
What frontend projects should a beginner build?
A CV page, pricing cards, an accessible form, then small JavaScript components, then one data-driven app such as a weather or quiz app.
Do I need React for frontend projects?
Not for the first projects. Build with plain HTML, CSS and JavaScript, then add React for one or two apps.
How do I make a frontend project stand out?
Add a Lighthouse score, test with keyboard only and a screen reader, and publish a live link.
Where can I host frontend projects for free?
GitHub Pages, Cloudflare Pages, Netlify or Vercel. See the portfolio website guide.
Learn this with mentors
Programmes for builders and engineers with admissions open: live classes, mentors and project work.
