Submitted 8 months ago

A mobile-first approach showcasing responsive design using only CSS

Mudasir Nadeem•430

@mudasirNadeem

A solution to the QR code component challenge

Preview Code

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?

Code

Please log in to post a comment

Community feedback

P
Tom Winskell•180
@tomwinskell
Posted 8 months 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%);
}
```
- Using the !important tag isn't usually the best way to apply a CSS property. Style sheets are cascading and so there are many ways to apply the style without using the important tag. Read more here https://learn.shayhowe.com/html-css/getting-to-know-css/.
Happy coding!
Suleman Karigar•30
@suleman1412
Posted 8 months ago
fun

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