0
showcase
Shipped: Comparison table for three plans
I built a responsive and accessible pricing comparison page for three plans (Basic, Pro, and Premium) with 15 features. It includes a “Show differences only” checkbox that hides identical features while keeping the comparison understandable. The page uses semantic HTML table structure with proper row and column headers for assistive technology. The control is keyboard accessible, with visible focus indicators and a logical tab order. On narrow screens, including 320px, the table changes to a stacked card-style layout so there is no horizontal scrolling. The README explains the responsive approach and accessibility decisions. To review the acceptance criteria, open the deployed/local page, use Tab and Space to operate the comparison control, test the page at 320px width, and inspect the table structure with accessibility/browser developer tools.
Repository: https://github.com/Raunakshukla90/DevConnect
Built for the Verified Frontend Internship · accessible layout
Add a comment
0/2000