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

Responsive Landing Page Using CSS Grid

@Solataiwo-15

Desktop design screenshot for the Recipe page 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?

Attention to Detail: "I’m particularly proud of the attention I paid to the small details in the design, like choosing the right colors and fonts, which made the layout look more polished." Commitment: "I stayed committed to finishing the task despite it being my first time handling a complete HTML and CSS project."

Planning: "Next time, I’d spend more time planning the layout before jumping into the coding part. I realized that having a clear structure in mind could make the process more efficient." Organizing Code: "I would also focus on organizing my CSS better by using classes and IDs more efficiently. This would help improve readability and make future adjustments easier."

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

Understanding Layouts: "One of the biggest challenges I encountered was figuring out how to properly structure the layout of the webpage. It was tricky at first to get the elements to align the way I wanted." CSS Styling Issues: "I also faced challenges with styling elements using CSS. Sometimes, the styling didn’t apply as I expected, especially when dealing with padding, margins, or centering content."

Trial and Error: "To overcome the layout issues, I used a trial-and-error approach, tweaking the HTML structure and CSS properties until things started to make sense visually. Each adjustment helped me understand how small changes affect the entire design." CSS Documentation & Tutorials: "I referred to CSS documentation and online tutorials to understand the properties better. When I couldn’t figure out how to make things work, I researched specific problems and found solutions."

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

Responsive Design: "I’d like help with making my design more responsive, especially for mobile devices. I struggled with making sure the layout adjusts smoothly to different screen sizes without elements overlapping or breaking." CSS Best Practices: "I would also appreciate guidance on CSS best practices, like how to better organize my styles and optimize the use of classes, IDs, and selectors to keep my code clean and efficient."

Community feedback

Sherzod 150

@SherzodToshpulatov

Posted

Looks good! But the Background color is not the same. you should use; hsl(30, 54%, 90%)

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