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

Fehmidatanzeel

@Fehmidatanzeel570 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • coding bootcamp testimonial slider

    #accessibility

    Fehmidatanzeel•570
    Submitted 4 months ago

    This project helped me strengthen my CSS skills, especially in layout techniques like grid and flexbox. I also learned the importance of attention to detail when recreating a design. Additionally, I realized how crucial it is to test the design on different screen sizes to ensure responsiveness.


    0 comments
  • product priviw card

    #accessibility

    Fehmidatanzeel•570
    Submitted 4 months ago

    This project helped me strengthen my CSS skills, especially in layout techniques like grid and flexbox. I also learned the importance of attention to detail when recreating a design. Additionally, I realized how crucial it is to test the design on different screen sizes to ensure responsiveness.


    0 comments
  • stats preview card component

    #accessibility

    Fehmidatanzeel•570
    Submitted 4 months ago

    This project helped me strengthen my CSS skills, especially in layout techniques like grid and flexbox. I also learned the importance of attention to detail when recreating a design. Additionally, I realized how crucial it is to test the design on different screen sizes to ensure responsiveness.


    0 comments
  • 3 column card component

    #accessibility

    Fehmidatanzeel•570
    Submitted 4 months ago

    This project helped me strengthen my CSS skills, especially in layout techniques like grid and flexbox. I also learned the importance of attention to detail when recreating a design. Additionally, I realized how crucial it is to test the design on different screen sizes to ensure responsiveness.


    0 comments
  • tip calculator app

    #accessibility

    Fehmidatanzeel•570
    Submitted 4 months ago

    This project helped me strengthen my CSS skills, especially in layout techniques like grid and flexbox. I also learned the importance of attention to detail when recreating a design. Additionally, I realized how crucial it is to test the design on different screen sizes to ensure responsiveness.


    0 comments
  • ecommruce product page

    #accessibility

    Fehmidatanzeel•570
    Submitted 4 months ago

    This project helped me strengthen my CSS skills, especially in layout techniques like grid and flexbox. I also learned the importance of attention to detail when recreating a design. Additionally, I realized how crucial it is to test the design on different screen sizes to ensure responsiveness.


    0 comments
View more solutions

Latest comments

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

    I am proud that I successfully completed this project using only HTML and CSS. It was a great experience that helped me improve my front-end development skills. If I were to do this project again, I would add JavaScript to make the component more interactive and enhance the user experience.

    What challenges did you encounter, and how did you overcome them?

    i faced some challenges with CSS positioning and properly aligning the elements. Responsive design and button interactions were also a bit tricky. To overcome these challenges, I studied documentation, watched online tutorials, and used CSS Flexbox and Grid to fix the alignment issues.

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

    Through this project, I learned how to design interactive UI elements and gained a better understanding of advanced CSS concepts like Flexbox and Grid. Additionally, I realized the importance of proper spacing and alignment for a good user experience. In the future, I plan to integrate JavaScript to add more interactive features.

    rating preview

    2
    Fehmidatanzeel•570
    @Fehmidatanzeel
    Posted 4 months ago

    awesome

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

    I am proud of how I structured the NFT card using HTML & CSS. I used Flexbox to align elements properly and applied box-shadow to give the card a modern look. The hover effect on the image, where an overlay appears, enhances the user experience. Next time, I would like to improve accessibility by adding ARIA attributes and making the design more responsive for smaller screens.

    What challenges did you encounter, and how did you overcome them?

    One of the challenges I faced was centering the card on the page and making sure it remained responsive. Initially, I struggled with positioning, but I resolved it by using Flexbox with align-items and justify-content properties. Another issue was getting the hover effect on the image to work correctly, which I fixed by using position: absolute inside a relative container.

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

    This project helped me improve my CSS layout skills, especially in working with Flexbox and hover effects. I also learned how to use CSS transitions to make animations smoother. Additionally, I understood the importance of writing clean and maintainable code for future modifications.

    nft_card

    2
    Fehmidatanzeel•570
    @Fehmidatanzeel
    Posted 4 months ago

    superb

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

    I am most proud that I successfully completed this challenge using only HTML and CSS. It helped me improve my understanding of structuring a webpage and styling it to match the given design. Next time, I would focus on making my code more efficient by using CSS flexbox/grid more effectively and ensuring better responsiveness for different screen sizes.

    What challenges did you encounter, and how did you overcome them?

    One of the challenges I faced was aligning the elements perfectly according to the design. Initially, some sections were not positioned correctly, but I resolved this by carefully adjusting margins, paddings, and using flexbox. Another challenge was ensuring that the text and images were responsive. I overcame this by using relative units like percentages and rem instead of fixed pixel values.

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

    This project helped me strengthen my CSS skills, especially in layout techniques like grid and flexbox. I also learned the importance of attention to detail when recreating a design. Additionally, I realized how crucial it is to test the design on different screen sizes to ensure responsiveness.

    join our comunity

    1
    Fehmidatanzeel•570
    @Fehmidatanzeel
    Posted 4 months ago

    great...

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

    I am most proud of successfully implementing a responsive design using only HTML and CSS. It was a great learning experience to structure the layout properly and style it effectively. Next time, I would focus more on improving accessibility and adding small animations to enhance user experience.

    What challenges did you encounter, and how did you overcome them?

    One challenge I faced was aligning the content properly within the columns while keeping the design responsive. Initially, the layout was breaking on smaller screens. I solved this issue by using CSS Flexbox and Media Queries to ensure a smooth and adaptable design.

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

    Through this challenge, I learned how to structure content effectively using HTML and apply modern CSS techniques to create a visually appealing layout. Additionally, I improved my skills in handling responsive design and debugging layout issues.

    Calculator

    2
    Fehmidatanzeel•570
    @Fehmidatanzeel
    Posted 4 months ago

    v well done

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

    I am most proud of successfully implementing the FAQ accordion functionality with a clean and responsive design. I ensured that the UI is user-friendly and works well across different devices. The challenge helped me improve my understanding of JavaScript event handling and CSS animations.

    What challenges did you encounter, and how did you overcome them?

    Next time, I would focus more on optimizing the code structure and improving accessibility by adding better ARIA attributes for screen readers. I would also explore different animation techniques to make the transitions smoother.

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

    I would like help with improving the responsiveness of my project, especially for smaller screen sizes

    FAQS

    1
    Fehmidatanzeel•570
    @Fehmidatanzeel
    Posted 4 months ago

    mashallah v nice

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