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

Mouad ASSEL

@Mouadasel100 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

  • Four Card Feature Section using Css Grid


    Mouad ASSEL•100
    Submitted 9 months ago

    I’d like help with further optimizing responsiveness, especially on very small or large screens, while keeping the layout flexible without advanced Flexbox or Grid properties. Additionally, feedback on improving color contrast for better accessibility and any tips on enhancing button styling for a more interactive user experience would be appreciated. Lastly, suggestions for organizing my CSS for easier maintenance would be helpful.


    1 comment
  • Product Preview Card


    Mouad ASSEL•100
    Submitted 9 months ago

    In this project, I'd appreciate help with fine-tuning the responsive design, particularly ensuring the layout remains balanced on smaller screens without sacrificing readability. I'd also like feedback on optimizing my CSS structure—specifically, how to make my styles more maintainable and reusable for future projects. Lastly, any tips for enhancing hover and focus states to improve user interaction would be great!


    1 comment
  • Pecipe Page


    Mouad ASSEL•100
    Submitted 11 months ago

    1 comment
  • social link profile


    Mouad ASSEL•100
    Submitted 12 months ago

    1 comment
  • blog preview card


    Mouad ASSEL•100
    Submitted 12 months ago

    2 comments
  • QR code component


    Mouad ASSEL•100
    Submitted 12 months ago

    0 comments

Latest comments

  • MARIO CARLAIBE DE ANDRADE•110
    @MarioCarlaibe
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    de ter usado o first mobile e tbm o flex grid.

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

    até eu ter terminado o mobile first, foi trankilo. Mas depois adaptar para a versão desktop onde eu tive que usar o flex grid, ai o trem ficou feio kkkk

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

    to safe

    Solução de seção de recursos de quatro cartas usando Flexbox e Grid

    1
    Mouad ASSEL•100
    @Mouadasel
    Posted 9 months ago

    This solution effectively uses semantic HTML, with tags like <header>, <section>, and <footer>, though wrapping each card in <article> elements could enhance structure. Accessibility is considered with clear headings, but color contrast could be improved for readability. Responsiveness is generally good, though the fixed width on .quadro may limit flexibility on smaller screens—max-width would enhance adaptability. The CSS is well-organized, with variables for easy updates, but consolidating repeated icon styles could reduce redundancy. Overall, the design aligns well with the original, with minor adjustments recommended.

  • Holloman777•50
    @Holloman777
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    One thing I am proud of is completing the project and getting a similar solution. I am still new to flex containers and still trying to navigate my way to creating successful layouts this project has helped me get a better understanding.

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

    One challenge I face was creating the card and having the content layout side by side in uniform with flex containers having all the content together is easy but when it comes down to styling the card and having the content in the right position going in the right direction is where I had trouble. I overcame my problem by doing research and using chatgbt for a better understanding on how to layout my content.

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

    Flex box and grid.

    Product preview card component

    1
    Mouad ASSEL•100
    @Mouadasel
    Posted 9 months ago

    There is a problem with card size compared to design

  • Bhavana Prabhu•80
    @prabhubhavanag
    Submitted 9 months ago

    Recipe page using CSS grid

    1
    Mouad ASSEL•100
    @Mouadasel
    Posted 9 months ago

    it is great

  • Supa-Thobile2•100
    @Supa-Thobile2
    Submitted 12 months ago

    Social Media Links

    1
    Mouad ASSEL•100
    @Mouadasel
    Posted 12 months ago
    • Semantic HTML: The site uses semantic HTML elements like <header>, <nav>, <main>, and <footer> effectively.

    • Accessibility: Positives: Includes alt attributes for images and good text contrast. Improvements: Ensure all interactive elements have discernible text, use ARIA roles, and verify smooth keyboard navigation.

    • Responsiveness: The layout adapts well across different screen sizes. Enhancements: Test on more devices and adjust text sizes for smaller screens.

    • Code Quality: Well-structured with clear class names and modular CSS. Suggestions: Use CSS preprocessors, apply BEM methodology, and refactor repetitive code.

    • Design Consistency: Aligns well with the design specifications.

    Overall, the project demonstrates strong technical and design skills with room for minor improvements in accessibility and code maintainability.

    Marked as helpful
  • Vitor Emanoel da Silva Nogueira•170
    @VitorEmanoelNogueira
    Submitted 12 months ago
    What specific areas of your project would you like help with?

    I would like to have some advice on the responsivity of the project and on how to adjust the image properly, since that in my mobile design the image is shorter than the one in the original design.

    Blog preview card solution

    1
    Mouad ASSEL•100
    @Mouadasel
    Posted 12 months ago

    this is a perfect project

  • Jose wallacy constantino correia•20
    @WallacyDev
    Submitted 12 months ago

    Componente de código QR

    2
    Mouad ASSEL•100
    @Mouadasel
    Posted 12 months ago

    the solution include semantic Html, He has to take down a little card until you apply the design.

    Marked as helpful

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