Skip to content
Submitted about 1 month ago

A mobile-first approach showcasing responsive design using only CSS

Mudasir Nadeem•290
@mudasirNadeem
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I’m most proud of successfully completing a challenging project where I led a team, overcame obstacles, and delivered results that exceeded expectations.

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

I encountered challenges with tight deadlines and differing team opinions during a project. To overcome these, I prioritized open communication and facilitated regular check-ins, ensuring everyone was heard and we could collaboratively find solutions. This approach helped us stay on track and ultimately deliver the project successfully.

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

Code Efficiency: Are there any parts of my code that could be optimized for better performance, especially in the data-fetching functions?

UI/UX Design: I’d like input on the user interface layout. Does it provide a good user experience, or are there aspects that could be improved for better accessibility?

Responsive Design: How well does my application respond to different screen sizes? Are there specific elements that break or look unprofessional on mobile devices?

Error Handling: I want to ensure robust error handling throughout the application. Are there any areas where my error handling could be improved or made more user-friendly?

Community feedback

  • Tom Winskell•130
    @tomwinskellPosted about 1 month ago

    Nice work!

    Here's some suggestions that might help.

    • It's helpful for those looking at your code to call your css file style.css, standard.css or default.css. It can also be helpful to put your stylesheet into a folder called stylesheets.
    • Nice reset with the use of * in your css. There are also pre-prepared CSS resets https://meyerweb.com/eric/tools/css/reset/.
    • Organizing your CSS into sections with comments as headers can help. For example:
    // Font-styles
h1{
    font-size: 21px;
}

p{
    font-size: 15px;
    color: hsl(216, 15%, 48%);
}

    Happy coding!

    0
    Mudasir Nadeem•290
    @mudasirNadeemPosted about 1 month ago

    @tomwinskell Thanks

    1
  • Suleman Karigar•30
    @suleman1412Posted about 1 month ago

    fun

    0
    Mudasir Nadeem•290
    @mudasirNadeemPosted about 1 month ago

    @suleman1412 Thank you for your feedback

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord