Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

A mobile-first approach showcasing responsive design using only CSS

@mudasirNadeem

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P

@tomwinskell

Posted

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

@mudasirNadeem

Posted

@tomwinskell Thanks

1

@suleman1412

Posted

fun

0

@mudasirNadeem

Posted

@suleman1412 Thank you for your feedback

0

Please log in to post a comment

Log in with GitHub
Discord logo

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