Design comparison
Solution retrospective
I'm most proud of the perseverance and dedication I showed while learning to code. It wasn't an easy journey, but overcoming challenges and seeing my projects come to life has been incredibly rewarding. If I could do something differently next time, I would focus more on seeking help and collaborating with others earlier on. I realized that sharing ideas and getting feedback from others can accelerate learning and lead to even better results.
What challenges did you encounter, and how did you overcome them?I faced numerous challenges during my coding journey, particularly with understanding complex concepts and debugging errors. One of the most significant challenges was staying motivated when I hit roadblocks. To overcome these, I broke down large problems into smaller, manageable tasks and celebrated small victories along the way. I also joined coding communities and forums where I could ask questions and learn from others. This support network was invaluable, providing both technical assistance and encouragement to keep going.
What specific areas of your project would you like help with?I would like help with optimizing the responsiveness and layout of my website across different devices. Ensuring that the content looks great and is easily navigable on both desktop and mobile devices is crucial. Additionally, I'd appreciate guidance on improving the overall performance of the site, such as reducing load times and enhancing accessibility for a broader audience. Any tips on best practices for maintaining clean and efficient code would also be highly beneficial.
Community feedback
- @Mageshwari-BalaguruPosted 4 months ago
Hi, congratulations! you have completed the challenge.
I've some suggestions I am sure it will make your design more look a like a template design.
- Font-family : h1 ,h2 elements are young-serif, body content are outfit.
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Young+Serif&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Young+Serif&display=swap" rel="stylesheet">- Image border radius : on your .recipe-image class add the below .recipe-image{ border-radius:10px; }
preparation time : It has background color and border radius.
- list items have some space on the left.
.prep-time{ background-color:#fff5fa; border-radius:5px; } .prep-time ul{ padding-left:50px; line-height: 2.5rem; list-style-type: square; }
- list-style-type : All the ol, ul having list-style on the template. on your code, only ingredient's part reflecting the CSS. use list-style-type instead list-style. .prep-time ul, .ingredients ul, .instructions ol { list-style: none; padding: 0; }
- Font-color : Kindly review readme file and use the text colors.
- Table : inside tr element add two td elements like below. -also use class to bold the second td element. -add only border bottom to all your td elements. -Wrap the second td content in strong element.
<tr> <td></td> <td class="bold"><strong>content</strong></td> </tr>.bold{ color:brown; } td{ width:40rem; border-bottom: 1px solid grey; }
I hope it will help. kindly feel free to contact.
Happy coding:)
0 - @alzwo1Posted 4 months ago
Your solution is much different than front end mentor project. Layour for mobile phones should be diffrent than the desktop version.
I suppose you should put much more attention to details like fonts, color of fonts, font weights, padding, margins etc.
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