Skip to content
OverviewSolutions
41
Comments
13

Josh Javier

@joshjavierPhilippines930 points

I'm a freelance frontend developer based in Manila 🇵🇭 I love learning technologies for building fast, responsive, and accessible websites and user interfaces. Follow me on my coding journey!

I’m currently learning...

Svelte, Next.js, React, Web Components, Accessibility, CSS Animations, Design Systems

Latest solutions

View more solutions

Latest comments

  • P
    Aydan•680
    @AydanKara
    What are you most proud of, and what would you do differently next time?

    ✅ Proud of:

    • Accessibility and Semantic Markup: I made sure to use semantic HTML elements (like <section>, <article>, <h2>, and <button>) along with ARIA attributes to create an inclusive experience.
    • Interactive and Smooth Transitions: Implementing the CSS transition for expanding and collapsing the FAQ sections really enhanced the user experience.
    • Dynamic Icon Updates: Updating the icon (switching from plus to minus) with descriptive alt text provided clear visual and accessible feedback on the accordion's state.

    🔄 What would I do differently next time?:

    • Dynamic Height Calculation: Instead of using a fixed maximum height for the accordion content transition, I would implement a dynamic calculation using JavaScript (e.g., setting max-height based on scrollHeight). This would make the solution more robust for varying content lengths.
    What challenges did you encounter, and how did you overcome them?

    🏗️ Challenges:

    • Balancing Accessibility with Custom Interactions: Ensuring that the interactive elements (especially custom accordion buttons) remained accessible with clear ARIA attributes and keyboard support was a key challenge.

    • Smooth Transitions for Collapsible Content: Animating the height of an element whose content is dynamic (using height: auto) is inherently tricky, as CSS transitions don't work directly on auto values.

    🎉 How I Overcame Them:

    • ✅ Accessibility: I leveraged native elements (like <button>) to handle keyboard interactions and added ARIA properties to communicate the current state to assistive technologies. This minimized the need for custom keyboard event handling.
    • ✅ Transition Issue: I used a CSS trick with max-height and a predefined large value to simulate smooth transitions. Although this approach works, it highlighted the need for dynamic calculations, which is something to explore further in future iterations.
    What specific areas of your project would you like help with?

    • Dynamic Height Calculation for Transitions: I would appreciate suggestions on how to implement a dynamic solution that calculates the actual height of the accordion content (using properties like scrollHeight) to create smoother and more adaptive transitions.

    • Code Refactoring: Feedback on structuring the JavaScript code in a more modular or scalable way would be beneficial. For instance, should I encapsulate the accordion behavior in a class or use a particular design pattern?

    • Cross-Browser Compatibility: Any insights or testing recommendations on ensuring that the CSS transitions and ARIA attributes work seamlessly across different browsers and devices would be valuable.

    FAQ accordion - HTML, CSS, JavaScript

    #accessibility
    1
    Josh Javier•930
    @joshjavier

    Hi Aydan!

    Good job on using semantic HTML elements and making accessibility a priority in your solution. 🤓👍

    Here are some ideas you could apply in this solution or in future ones:

    • Setting a max-height cuts the content when viewed on mobile. In my case, I can only see four lines of text inside each accordion. You can fix this by implementing dynamic height transitions using CSS Grid. Check out Kevin Powell's video on the topic - it will blow your mind 🤯

    • In addition to toggling aria-expanded when the accordion button is pressed, you may also add aria-hidden to the .accordion-content container so that a closed accordion's content is not only hidden visually, but also to screen readers, thus providing a consistent user experience to everyone. You can read more about this topic here.

    • For your icons, I suggest setting aria-hidden="true" and alt="". Why? Since the accordion button already contains text (the questions) then that effectively becomes the label of the button. Screen readers will also see the aria-expanded attribute and let users know that they can expand or collapse the button, so no need to indicate this manually in the icon. For example, when I tested using VoiceOver in my iPhone, the second item reads:

    Is Frontend Mentor free? Expand section. Button. Heading level 2 article. Landmark. Collapsed. Double-tap to expand.

    Setting the icon to aria-hidden="true" and alt="" will remove the "Expand section" phrase, leading to a more concise description.

    You can also look into inlining SVGs for your icons if you want to add simple transitions like animating a plus into a minus and vice versa. Save this article on accessible icon buttons and this video on inline SVGs for future reference!

    Hope that helps. Happy coding!

    Marked as helpful
  • Rizky•480
    @thomasshelbyyy
    What are you most proud of, and what would you do differently next time?

    I was able to make the tricky and quite complicated flip animation, and I improvise by separating the tens and ones section and i will improve the style next time

    Launch Countdown Timer

    1
    Josh Javier•930
    @joshjavier

    Your implementation of the countdown is really neat. You could look into refactoring this into a web component, say <countdown-timer>, to encapsulate the logic in a single file that you can easily reuse in other projects.

    In terms of accessibility, your social links in the footer doesn't have an accessible label, so I recommend adding an aria-label attribute in your <a> tags, or using any of the techniques in the article Accessible Icon Buttons. Make sure to add aria-hidden="true in your SVGs as well.

    Anyway, once you improve the style, your solution would be perfect. Cheers!

    Marked as helpful
  • Josh Javier•930
    @joshjavier

    Hello fellow 11ty fan 😁

    Awesome work on this solution! If you want to gain a deeper understanding of 11ty's features, I suggest checking out the course Learn Eleventy From Scratch. It's a bit outdated, but it still teaches solid principles on how to structure project files (partials, data, etc.) and accessibility.

    Happy coding, my friend!

    Marked as helpful
  • Josh Javier•930
    @joshjavier

    Hello Anthony! I got curious myself and I found this: Solving Sticky Hover States with @media (hover: hover)

    tl;dr You have to move the hover style in a media query so it will only get applied to devices that have hover capability.

    To preserve the glow effect when we actually tap the button on mobile, we need to add a rule that applies the same style to the :active state:

    .btn:active {
box-shadow: 0 0 25px 1px var(--neon-green);
}

@media (hover: hover) {
.btn:hover {
box-shadow: 0 0 25px 1px var(--neon-green);
}
}

    Hope it helps :)

    Marked as helpful
  • Josh Javier•930
    @joshjavier

    Hello @mandriva19!

    First off, the layout looks really great on mobile. But when I switch to my desktop (I have a 1920x1200 monitor) there are white gaps on the side as shown here: https://ibb.co/J5ymzh9

    In this particular case, you can easily fix this by removing the max-width rules in your main wrapper. But usually, the common pattern is to have a .wrapper div inside each of the sections whose sole responsibility is to center the content and limit its width. The background rules will stay on the parent tags unaffected by the wrapper, so the background can stretch to either side of the page. I used this pattern in my Workit landing page solution if you need a reference. :)

    Nice job on making your code well-structured and very readable. One CSS tip I recommend is using logical properties to make your code more DRY. For example:

    padding-top: var(--spacing-20);
padding-bottom: var(--spacing-20);
/*↓*/
padding-block: var(--spacing-20);

/* Also works for margins! */
margin-left: auto;
margin-right: auto;
/*↓*/
margin-inline: auto;

    Hope that helps, happy coding!

    Marked as helpful
  • Josh Javier•930
    @joshjavier

    Hello Rain 👋

    First of all, congrats on submitting your first solution! You're off to a good start; the layout looks good on both mobile and desktop, and your code is well-structured and readable.

    Some ideas on what you could improve:

    • Use semantic HTML tags to improve accessibility and help with SEO. For example, you can put the container div inside a <main> tag and the attribution div inside a <footer> tag.

    • I also recommend adding an H1 because it tells search engines and screen readers what your page is about. In this case, the H1 can be <h1>QR code component</h1>. You can use a .visually-hidden utility class to add the H1 without showing it visually so your code remains accessible without deviating from the design.

    Hope it helps, happy coding!

    Marked as helpful
View more comments