Frontend Mentor

@frontendmentor.io

164 Followers 117 Following

🧑‍💻 Build projects: https://www.frontendmentor.io 📈 Train your team: https://teams.frontendmentor.io 🤝 Hire top talent: https://hiring.frontendmentor.io

A map of London highlights personal restaurant rankings, showcasing top picks and locations for diners to explore.
Expense splitter interface showing group expenses for a "Trip to Japan," with detailed activities, amounts, and member balances displayed.
Expense-splitting app interface for a trip to Japan, showing total expenses, member balances, and settlement activities among users.
A code snippet displays CSS styles for the `:focus-visible` selector, highlighting accessibility for keyboard users.
Code snippet shows a CSS rule to remove focus outlines from elements, marked as a bad practice for accessibility.
Booking confirmation page for Maison Soleil, featuring details of stay, check-in, breakfast, and a welcome note from the host.
A hotel booking confirmation page featuring a welcome card, details about stay dates, payment summary, and additional services.
A hotel booking confirmation includes check-in details, a welcome note from host Margaux, and information on breakfast and Wi-Fi.
A code review document evaluates commit quality, highlighting strengths, suggestions for improvement, and areas needing attention in messages.
A dark-themed currency conversion interface shows live rates, an input for sending amounts, and a historical rate chart.
A sleek event website features a tech conference schedule, speaker profiles, and session details highlighting topics like accessibility and performance.
A website layout for a tech conference featuring speaker photos, session schedules, and tracks like frontend and accessibility.
A project review displays a score of 7.1/10, highlighting code quality and design, with specific feedback on accessibility improvements needed.
A dark-themed interface displays currency exchange rates and a graph showing USD to EUR rate history, highlighting current rates and changes.
A savings tracker interface displays total savings, monthly deposits, and progress on various savings goals with completion percentages.
A digital dashboard displays a list of curated articles with titles, authors, and summary snippets, emphasizing design and development topics.
Score summary shows 7.6/10 overall, with individual scores in Accessibility 7.7, HTML 6.4, CSS 8.7, and JavaScript 7.7.
Frontend Mentor's climate impact: 40,222 trees funded and 58.41 tCO₂e avoided, highlighting environmental contributions.
Scores for an AI-enhanced report show performance metrics: Accessibility 8.3, HTML 7.0, CSS 7.5, JavaScript 5.9, overall 7.2/10.
Progress tracker shows Level 3 with 378 out of 600 points. User is 222 points away from reaching Level 4.
New challenge points by difficulty level: Level 1 Newbie gives 10 points, Level 2 Junior gives 25 points, Level 3 Intermediate gives 50 points, Level 4 Advanced gives 100 points, and Level 5 Guru gives 200 points.
Text outlines a project utilizing GitHub Copilot for debugging CSS, HTML accessibility, JavaScript verification, and improving styles.
Typing speed test screen with highlighted passage about Bronze Age trade and archaeological findings.
An email input with aria-invalid="true" set and an aria-describedby attribute linking the input and the error via the error message's ID attribute.
A HTML email input field with an error message below. The input is missing aria-invalid and aria-describedby attributes that mark the field as invalid and associate the input with the error message.
Strength reads: All calculator keys are implemented as <button> elements, ensuring keyboard accessibility and semantic correctness.
AI-detected issue reads: Buttons like 'DEL', 'RESET', and '=' have visible text but lack accessible names or aria-labels that clarify their purpose. This causes screen reader users to struggle understanding button functions, reducing usability.
AI Analysis summary reads: You've done a great job using semantic buttons for calculator keys and providing a hidden heading for screen readers! To take it further, consider improving keyboard focus visibility and using native interactive elements for controls like the theme toggle to enhance accessibility. Priority recommendations: 1 Replace the theme toggle div with a <button> element to provide proper keyboard interaction and semantics. 2 Add visible focus styles to the theme toggle control to help keyboard users track focus. 3 Provide accessible names or aria-labels for action buttons like 'DEL', 'RESET', and '=' to clarify their purpose for screen reader users.
AI Analysis summary reads: You've done a great job using semantic buttons for calculator keys and providing a hidden heading for screen readers! To take it further, consider improving keyboard focus visibility and using native interactive elements for controls like the theme toggle to enhance accessibility. Priority recommendations: 1 Replace the theme toggle div with a <button> element to provide proper keyboard interaction and semantics. 2 Add visible focus styles to the theme toggle control to help keyboard users track focus. 3 Provide accessible names or aria-labels for action buttons like 'DEL', 'RESET', and '=' to clarify their purpose for screen reader users.