Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
17
Comments
17

Alfi Zain

@AlfiZain280 points

Computer Science | React & Javascript | Learning until dying

I’m currently learning...

Right now, I am learning React, focusing on components, props, state management, lifecycle methods, routing, styling, API integration, testing, and design patterns.

Latest solutions

  • Bookmark Landing Page with Tailwind CSS 4

    #tailwind-css

    Alfi Zain•280
    Submitted 3 months ago

    I want to improve the structure of my code to make it cleaner and easier to maintain. I also want to ensure that I follow best practices in implementing Tailwind CSS, including performance optimization and maintaining design consistency throughout the application. If there are ways to further improve efficiency, performance, or scalability, I am open to suggestions and feedback.


    1 comment
  • Room Homepage with SCSS

    #sass/scss#smacss

    Alfi Zain•280
    Submitted 4 months ago

    I would like to get some suggestions for you guys, feel free to comment


    1 comment
  • Loopstudios Landing Page with SCSS

    #sass/scss#smacss

    Alfi Zain•280
    Submitted 4 months ago

    Everything


    1 comment
  • NFT Preview Card

    #sass/scss

    Alfi Zain•280
    Submitted 4 months ago

    everything


    1 comment
  • Faq Accordion with SCSS

    #sass/scss

    Alfi Zain•280
    Submitted 4 months ago

    Everything


    1 comment
  • Interactive Rating Component with SCSS

    #sass/scss

    Alfi Zain•280
    Submitted 4 months ago

    Everything


    1 comment
View more solutions

Latest comments

  • Daniel king•510
    @thedanielking
    Submitted 4 months ago

    Bookmark-landing-page

    #tailwind-css
    1
    Alfi Zain•280
    @AlfiZain
    Posted 3 months ago

    Great job! However, I noticed that the transition of the hamburger menu doesn’t feel very smooth and has a slight delay. It would be great if the animation could be faster and more fluid.

    Also, the animation for the "Features" section takes a bit too long to appear. Reducing the delay would make the user experience feel more natural and engaging.

    Overall, it looks really good—just a few tweaks to make the animations feel more seamless! 😊

  • Atomico333•240
    @Atomico333
    Submitted 4 months ago

    room home-page

    #sass/scss
    1
    Alfi Zain•280
    @AlfiZain
    Posted 4 months ago

    Awsome, it's look like the design

  • Dadv-a11y•550
    @Dadv-a11y
    Submitted 4 months ago

    loopstudio landing page with sass/css

    #bem#sass/scss
    1
    Alfi Zain•280
    @AlfiZain
    Posted 4 months ago

    Nice work

  • P
    roswell•520
    @welpmoz
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Assimilating CUBE CSS is more complex than BEM, but I think that CUBE is more reusable and could be more efficient.

    Responsive and Interactive NFT preview card component

    #accessibility#bem#cube-css#sass/scss
    1
    Alfi Zain•280
    @AlfiZain
    Posted 4 months ago

    Nice work

  • zeegu•430
    @zeegu
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    ❤Things I've tried

    Accessibility

    • Used aria-controls, aria-expanded for Accessibility
    • Added proper alt text on image button ex.Expand answer/Collapse answer
    • Tested WCAG evaluation tool on WAVE
    • Checked HTML Markup on Validator

    Others

    • Scored 99% on Google PageSpeed Insights
    • Responsive for Mobile, Desktop devices
    • Tried smooth transition on buttons

    💪Things I should improve

    Javascript

    • At first, clicking the button to open FAQ, it unfolds well depending on the content. However, resizing the screen display cuts the text area of the answer. I have no idea how to solve this😂

    Please let me know if there are any areas of improvement! Thanks :D

    FQA Accordion

    #accessibility#sass/scss
    1
    Alfi Zain•280
    @AlfiZain
    Posted 4 months ago

    nice work

  • Junier Bolívar 🕷•710
    @Junbol
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?
    • creating all the logic in Javascript to do the seletion of the buttons dynamically using the forEach method.
    • Using javascript to add the logic to make the modal panel show up
    // Show the modal on submit button click
    mySubmitBtn.addEventListener('click', (e) => {
      e.preventDefault(); // Prevent form submission
    
      // 🚩Ensure a rating has been selected before proceeding
      if (selectedRating) {
        // Update the modal content with the selected rating
        myRatingSelection.innerHTML = `You selected ${selectedRating} out of 5`; // this
    
        // Hide the rating panel and show the modal
        myRatingPanel.style.display = 'none';
        myModal.style.display = 'flex';
      } else {
        // 🚩don't forget to add an alert if the user didn't select a rating
        alert('Please select a rating before submitting.');
      }
    });
    
    
    
    What challenges did you encounter, and how did you overcome them?

    same as above

    What specific areas of your project would you like help with?

    none

    Interactive Rating Component

    #sass/scss
    1
    Alfi Zain•280
    @AlfiZain
    Posted 4 months ago

    Good work

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub