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

Youssef

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

  • REST Countries App 🌍 – React + API + Dark Mode + Country Detail Page

    #react#react-router#tailwind-css

    Youssef•250
    Submitted 17 days ago

    I’d appreciate feedback on how I manage state, especially in the country filtering and search functionality.

    Are there best practices I’m missing in how I’ve implemented useEffect dependencies or conditional rendering?

    Suggestions for improving the accessibility and performance of the app would be really helpful.

    I'd love tips on how to better structure CSS in large React projects, especially with Tailwind.


    0 comments
  • Four card feature section ⬜ [ Grid + CSS ]


    Youssef•250
    Submitted 11 months ago

    1 comment
  • Calculator app 🟪 [ SCSS + BEM + JS + Accessibility ]

    #bem#sass/scss#accessibility

    Youssef•250
    Submitted 11 months ago

    If you could help me with handling division by zero, please do so.


    0 comments
  • Age calculator app 🟪 [ CSS + JS + BEM ]

    #bem#accessibility

    Youssef•250
    Submitted 11 months ago

    0 comments
  • Intro component with sign-up form ⬜ [ CSS + JS + Flexbox ]


    Youssef•250
    Submitted 12 months ago

    0 comments
  • Interactive rating component 🟧 [ CSS + JS ]

    #pure-css#animation

    Youssef•250
    Submitted 12 months ago

    0 comments
View more solutions

Latest comments

  • sankiss55•200
    @sankiss55
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    tal vez de que ahora si tenia bien la idea de como iba a ser el diseño

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

    creo un poco de como deveria cambiar la apariencia

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

    en los estilos de css y como se puede hacer ara que los diseños se vean bien aque se sigan achicando

    nada

    1
    Youssef•250
    @DORMODO
    Posted 12 months ago

    Mejora tu estilo CSS:

    1. Adopta unidades relativas para mayor flexibilidad

    • Porcentaje (%): ¡Domina las cuadrículas fluidas y los diseños adaptables con facilidad!
    • Em (em) y Rem (rem): Desbloquea la tipografía y el espaciado escalables. em escala con el tamaño de fuente del elemento principal, mientras que rem escala con el elemento raíz. ¡Tus diseños se adaptarán a la perfección!

    2. Aprovecha el poder de Flexbox y los diseños de cuadrícula

    • Flexbox: Perfecto para crear diseños dinámicos unidimensionales.

    • Cuadrícula CSS: La herramienta definitiva para diseños sofisticados y bidimensionales, que te brinda un control preciso sobre filas y columnas. ¡Prepárate para impresionar!

    3. Aprovecha las consultas de medios

    • Adapta tus estilos sin problemas para diferentes tamaños de pantalla. Por ejemplo:
    @media (max-width: 600px) {
    /* Estilos personalizados para pantallas más pequeñas */
    }
    
  • Michael Johnson•110
    @msjohn41
    Submitted 12 months ago

    Recipe Page Main

    1
    Youssef•250
    @DORMODO
    Posted 12 months ago

    Hi Michael, Great job on completing the challenge! 🎉 Your attention to detail.

    I wanted to offer a suggestion for enhancing the accessibility of our recipe page:

    1. Accessibility Improvements: Add alt text to the <img> tag to describe the image content, making it accessible to screen readers. For example, for the main image of the omelette, we could use: alt="A golden omelette with fresh herbs, served on a white plate".

    2. Semantic HTML: Use <main> and <article> elements appropriately for better semantic structure and accessibility.

    You’re doing an incredible job, and each project you complete is a step forward. 🚀 Keep pushing your limits and experimenting with new techniques.

    Keep up the fantastic work! 👏

  • Roni Tovar•270
    @ronitzdev
    Submitted about 1 year ago

    Social links css vanilla

    #accessibility#bem
    1
    Youssef•250
    @DORMODO
    Posted about 1 year ago

    Hi Roni, Great job on completing the challenge! 🎉 Your attention to detail.

    A couple of suggestions for improvement:

    1.Use Semantic Elements: Consider replacing the div with nav for the social links section. This could enhance the accessibility and structure of your code. 👍

    <nav class="social-links">
        <ul class="menu-links">
          <li class="link__social"><a class="link" href="#">GitHub</a></li>
             ...
          <li class="link__social"><a class="link" href="#">Instagram</a></li>
        </ul>
    </nav>
    

    2.Use figcaption for Descriptive Text: Moving the h1, location, and description into a figcaption within the figure tag can improve semantic meaning and accessibility. 💡

    <figure class="presentation__figure">
          <img src="">
          <figcaption class="presentation__caption">
                   ... 
          </figcaption>
    </figure>
    

    You’re doing an incredible job, and each project you complete is a step forward. 🚀 Keep pushing your limits and experimenting with new techniques.

    Keep up the fantastic work! 👏

  • Shamuskado22•140
    @Shamuskado22
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    For the quickness of thinking and already knowing what to do

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

    Honestly, I thought I would have it but I didn't.

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

    Feedbacks are welcome

    3 Column Preview Card

    1
    Youssef•250
    @DORMODO
    Posted about 1 year ago

    You can focus on several areas such as accessibility and overall user experience.

    1 . Semantic HTML and Accessibility:

    • Changed div elements to section for better semantic structure.
    • Added lang attribute to the <html>.

    2 . Consistent Button Styling:

    • The buttons use the same class learn-more, making the styling consistent across all buttons.

    keep pushing to make things even more awesome!

    Marked as helpful
  • ljmanayon•90
    @ljmanayon
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?
    • I get to know more about flexbox and apply it correctly in this challenge.
    What challenges did you encounter, and how did you overcome them?
    • I thought margin and padding are easy as ABC, but it's not. I have to read the documentation again.
    What specific areas of your project would you like help with?
    • More on flexbox
    • Margin and Padding

    Blow Preview Card Challenge

    #accessibility
    1
    Youssef•250
    @DORMODO
    Posted about 1 year ago

    Here you can use Figma file to see the margins and padding.

  • Francisco Israel da Silva•80
    @israeljrx
    Submitted over 2 years ago
    What are you most proud of, and what would you do differently next time?

    I'm proud to have started, to have taken the first step.

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

    Nothing special

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

    None in specific

    QR code component Html and CSS

    #accessibility
    1
    Youssef•250
    @DORMODO
    Posted about 1 year ago

    ........

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