frontend-task-layout
Shipped: Recipe with adjustable servings
ReciPo, a recipe repository. It is extendable, searchable, and serving-adjustable. I even show images of the food. Only one dish so far, but it's easy to add new one. Repository: https://github.com/MedicMedic/Recipe-Repo Built for the Verified Frontend Internship · accessible layout
Shipped: Conference schedule
I built a responsive two-day conference schedule with three parallel tracks: Product, Technology, and Design & Culture. Each session is keyboard accessible and opens a details dialog. Reviewers can use Tab to navigate through the interface, Enter/Space to open a session, and Escape to close the dialog and return focus to the selected session. Focus indicators are visible on interactive elements. On narrow screens, the three tracks stack vertically within each time slot instead of remaining side-by-side, preventing horizontal scrolling at 320px. The README explains this responsive accessibility decision and includes a keyboard testing checklist. Repository: https://github.com/mutyalaraghavendra/conference-schedule.git Live: https://mutyalaraghavendra.github.io/conference-schedule/ Built for the Verified Frontend Internship · accessible layout
Shipped: Recipe with adjustable servings
Built a responsive recipe page with adjustable servings and accessibility in mind. I focused on keyboard navigation, visible focus states, responsive behavior at 320px, and making ingredient quantity changes accessible to screen readers. Repository: https://github.com/Ahmed6770/Recipe-page Live: https://ahmed6770.github.io/Recipe-page/ Built for the Verified Frontend Internship · accessible layout
Shipped: Recipe with adjustable servings
Built an accessible responsive recipe viewer with serving scaling, screen-reader announcements, keyboard/focus support, and independently scrollable mobile sections; reviewers can verify everything directly in the UI at 320px and with keyboard/screen-reader testing. Repository: https://github.com/abbasg-dev/recipe-accessible Live: https://recipe-accessible.vercel.app/ Built for the Verified Frontend Internship · accessible layout
Shipped: Comparison table for three plans
I built a responsive and accessible plan comparison page using React. It compares Basic, Pro, and Premium plans across 15 features and includes a “Show differences only” control. A reviewer can verify the acceptance criteria by: Opening the GitHub repository and running npm install and npm run dev . Checking the desktop view to see the semantic comparison table. Resizing the browser to 320px and verifying there is no horizontal scrolling. The layout changes to stacked plan cards. Using the keyboard Tab key to reach the “Show differences only” checkbox and Space to toggle it. Verifying that the checkbox has a visible focus indicator. Enabling “Show differences only” and checking that only features with different values between plans are displayed. Inspecting the semantic table structure using table , caption , thead , tbody , th , td , and appropriate scope attributes. Reviewing the screenshots and demo recording included in the README for a quick visual demonstration of the responsive layout and functionality. The README also documents the accessibility, responsive design, and keyboard-testing decisions. Repository: https://github.com/AteefaAzhar-Syed/accessible-layout Built for the Verified Frontend Internship · accessible layout
Shipped: Recipe with adjustable servings
Built a responsive, keyboard-accessible Chicken Biryani recipe page with adjustable serving quantities. Reviewer can verify: Tab through all interactive elements and check visible focus. Use the serving buttons with keyboard. Test at 320px with no horizontal scrolling. Change servings and verify quantities update and are announced to screen readers. Check the README for accessibility and responsive details. Repository: https://github.com/hassannnn13/Accessible-layout.git Built for the Verified Frontend Internship · accessible layout
Shipped: Conference schedule
Built a responsive, accessible two-day conference schedule with three parallel tracks. On desktop, the three tracks are displayed side-by-side to make the parallel schedule easy to compare. On narrow screens, the parallel tracks are replaced with a track selector so sessions remain readable without horizontal scrolling at 320px. The interface is keyboard accessible throughout, with visible focus indicators and interaction order matching the visual order. Sessions can be opened using the keyboard, with details presented in an accessible dialog that can be dismissed using Escape or the dialog close control, with focus returned to the triggering session. The project was tested at a 320px viewport, and the production build and Oxlint checks complete successfully with no warnings or errors Repository: https://github.com/kiths-bit/conference-schedule Live: https://conference-schedule-lilac.vercel.app/ Built for the Verified Frontend Internship · accessible layout
Shipped: Comparison table for three plans
I build a Cloud Flow plan comparison data table using HTML,CSS,JavaScript and Readme. You can check throught netlify. Repository: https://github.com/aungmyintmyatmaggie129/CloudFlow Live: https://cloudflowcompareplan.netlify.app/ Built for the Verified Frontend Internship · accessible layout
Shipped: Comparison table for three plans
I built an accessible pricing plan comparison table for three plans across 15 features with a "Highlight differences only" toggle control. How to verify acceptance criteria: 1. Keyboard Navigation & Visible Focus: Press 'Tab' to navigate through interactive elements. The toggle and table container display a clear visible focus outline. Use 'Space' or 'Enter' to operate the toggle. 2. Highlight Differences Logic: Toggle "Highlight differences only" to hide rows with identical values ( data-same="true" ). The remaining features are clearly legible while active. 3. Responsive & No Overflow (320px): On mobile viewports down to 320px, the page has no horizontal scrolling. The table is housed in an accessible container with horizontal scroll ( overflow-x-auto ). 4. Accessibility (A11y): Built with semantic HTML ( <table , <caption , <thead , <tbody , <th with proper scope attributes) for screen-reader support. 5. README: The reasoning behind the narrow-screen horizontal scroll approach is documented in the repository's README.md. Repository: https://github.com/naramirova/internship-plan-comparison Live: https://internship-plan-comparison-76juam26y-naramirovas-projects.vercel.app/ Built for the Verified Frontend Internship · accessible layout
Shipped: Conference schedule
Built a responsive, keyboard-accessible single-page conference schedule for a two-day conference with three parallel tracks. Sessions can be opened and dismissed using the keyboard, all interactive elements have visible focus, and the layout was tested at 320px with no horizontal scrolling. On narrow screens, the three tracks switch from columns to a single vertical sequence, and this decision is documented in the README. Repository: https://github.com/rajatpandey14/Conference-Schedule Built for the Verified Frontend Internship · accessible layout
Shipped: Conference schedule
What I Built I built a responsive, accessible single-page conference schedule for a two-day conference with three parallel tracks. The interface allows visitors to: Switch between Day 1 and Day 2. View sessions across three conference tracks. Open individual session details. Navigate the complete interface using only a keyboard. Use the schedule comfortably on narrow screens, including a 320px viewport. How a Reviewer Can Verify the Acceptance Criteria 1. Keyboard Operation The reviewer can start at the top of the page and use only: Tab to move forward. Shift + Tab to move backward. Enter or Space to activate buttons. Arrow keys to switch between the conference day tabs. Escape to close the session details dialog. Every interactive element uses native HTML controls such as <button and <a , so all controls are keyboard reachable. The DOM order also follows the visual order, ensuring that keyboard navigation follows the same logical sequence as the page. 2. Visible Focus Indicators When navigating with the keyboard, every focused interactive element displays a clear focus indicator using :focus-visible . css :focus-visible { outline: 4px solid f59e0b; outline-offset: 4px; } The focus indicator is not removed, ensuring that keyboard users can always see where they are on the page. 3. Responsive Behavior On desktop screens, the three conference tracks are displayed side by side so visitors can compare sessions happening at the same time. On narrow screens, the three parallel columns are replaced with a single chronological vertical layout. This prevents horizontal scrolling and keeps every session readable and accessible. 4. 320px Testing The reviewer can open the browser's responsive/device mode and set the viewport to: text 320px wide At this width: The three tracks become a single vertical list. Session cards fit within the viewport. Text wraps naturally. Navigation adapts to the available width. No horizontal scrolling is required. 5. Session Details Every session has a native button: html <button type="button" View session details </button The reviewer can: 1. Tab to any session. 2. Press Enter or Space . 3. Verify that the session dialog opens. 4. Navigate through the dialog using the keyboard. 5. Press Escape to close it. 6. Verify that focus returns to the session button that opened the dialog. Therefore, the complete session-details interaction can be performed without a mouse. 6. Parallel Track Decision The three tracks remain side by side on larger screens because this makes simultaneous sessions easy to compare. On narrow screens, keeping three columns would make the content too narrow and could introduce horizontal scrolling. Therefore, below the responsive breakpoint, the tracks are converted into a single chronological list. This was chosen to prioritize: No horizontal scrolling. Readability. Chronological understanding. Keyboard accessibility. Access to all sessions. 7. README Documentation The repository README documents: Keyboard operation. Focus behavior. Session dialog behavior. Responsive behavior. The reason parallel tracks are changed on narrow screens. 320px testing instructions. Accessibility testing checklist. A reviewer can therefore verify both the implementation and the design decisions directly from the repository. Repository: https://github.com/techtuber9988/conference-schedule Live: https://conference-schedule-rust.vercel.app/ Built for the Verified Frontend Internship · accessible layout
Shipped: Comparison table for three plans
Acceptance Criteria Responsive 3 plans are compared across 15 features. Desktop uses a semantic comparison table. At 320px and other narrow widths, plans switch to stacked cards. No horizontal scrolling is required on mobile. Accessibility The comparison uses semantic table markup with column and row headers. The “Show differences only” control is a native keyboard-accessible checkbox. All interactive elements are reachable using the keyboard. Focus indicators are clearly visible. A skip link allows keyboard users to jump directly to the comparison. The comparison remains understandable when differences-only mode is enabled. Interaction “Show differences only” hides features where all three plans have the same value. A live status message communicates how many features/differences are currently displayed. Verification Tested at: 320px mobile 375px mobile 768px tablet Desktop Keyboard test: Tab → Space/Enter → Tab through all interactive elements with no keyboard traps. Repository: https://github.com/Zainab-Ashraf-786/Comparison-Table/tree/main/my-app Live: https://my-app-six-opal.vercel.app/ Built for the Verified Frontend Internship · accessible layout
Shipped: Comparison table for three plans
I built an accessible, responsive plan comparison table with a keyboard-operable toggle that highlights feature differences across three plans. A reviewer can test it by tabbing through the page to confirm the toggle has a clear visible focus outline and operates with the spacebar. Resizing the browser to 320px shows that the layout automatically stacks into card blocks without any horizontal scrolling. Additionally, inspecting the code or using a screen reader will show semantic table tags and hidden contextual labels, while the README file details the complete design strategy for narrow screens. Repository: https://github.com/ghazlsinjab80/accessible-layout Built for the Verified Frontend Internship · accessible layout
Shipped: Comparison table fo three plans
I built a responsive and accessible comparison page for three plans: Basic, Pro, and Premium. It compares around 15 features and includes a “Show differences only” checkbox that hides rows where all three plans have the same value and highlights rows where the plans differ. The acceptance criteria can be verified as follows: Keyboard operation: The “Show differences only” checkbox can be reached with Tab and operated with Space. Visible focus: The checkbox has a clear visible focus indicator when using the keyboard. No horizontal scrolling at 320px: The desktop table changes to a stacked layout on narrow screens. I tested the page at 320px and confirmed there is no horizontal scrolling Assistive technology: The comparison uses a semantic HTML table with a caption, table headers, row headers, and scope attributes so the table structure is properly conveyed. Narrow-screen treatment: The README explains why the table changes to a stacked layout on small screens and how this keeps the comparison understandable without horizontal scrolling. The reviewer can open the repository, run the page, test the checkbox using only the keyboard, and resize the viewport to 320px to verify the criteria. Repository: https://github.com/likhitakarri22/accessible-plans-comparison Built for the Verified Frontend Internship · accessible layout
Shipped: Comparison table for three plans
I built a responsive, keyboard-accessible comparison table for three plans with around 15 features and a “Show differences only” control. A reviewer can verify the acceptance criteria by: Using only the keyboard: Tab through the interface and use Enter/Space on the comparison button. Focus indicators are clearly visible. Checking the Tab order, which follows the visual order. Testing the page at 320px width; the layout switches to a stacked mobile presentation with no horizontal scrolling. Inspecting the table with accessibility tools or a screen reader; it uses semantic <table , <caption , <thead , <tbody , and properly scoped row/column headers. Activating “Show differences only” and confirming that identical features are hidden while the feature names and remaining plan values stay understandable. Reviewing the README for the keyboard-operation details and the reasoning behind the narrow-screen treatment. Repository: https://github.com/vanshika2723/Accessible-Plan-Comparison.git Live: https://vanshika2723.github.io/Accessible-Plan-Comparison/ Built for the Verified Frontend Internship · accessible layout