@BluordeSubmitted about 2 months ago
What are you most proud of, and what would you do differently next time?
I learnt the use of CSS Grid. Probably further familiarize myself with the layout techniques I'm yet to use.
P
Anamay
@anamaydevAll comments
- @anamaydevPosted about 2 months ago
Hey @Bluorde, congratulations on completing the challenge! I have a few suggestions I'd like to share.
HTML
- Consider using more semantic HTML elements where applicable like
<section>and<article>over<div>which enhances code clarity, accessibility, and SEO. Semantic tags improve navigation for screen readers and make code easier to read and maintain. - The use of multiple
<h1>tags is not recommended for SEO and accessibility. In your code you can use this
<h1> <span class="header-title-light">Reliable, efficient delivery</span><br> <span class="header-title-semi-bold">Powered by Technology</span> </h1>- On line number 35 you accidentally used
<P>instead of<p>
CSS
- Consider using CSS variables for colors used in multiple places. This makes future changes easier.
:root{ --red: hsl(0, 78%, 62%); --cyan: hsl(180, 62%, 55%); --orange: hsl(34, 97%, 64%); --blue: hsl(212, 86%, 64%); --very-dark-blue: hsl(234, 12%, 34%); --grayish-blue: hsl(229, 6%, 66%); --very-light-gray: hsl(0, 0%, 98%); }- CSS has significant redundancy, with repeated code across multiple classes. This can be simplified for easier maintenance and better readability. For example you have repeated styles for
.supervisor,.team-builder,.karma, and.calculator. You could create a shared class for common styles to reduce redundancy.
.card { background-color: #ffffff; padding: 10px 10px 25px 10px; border-radius: 5px; margin-bottom: 20px; box-shadow: 3px 5px 15px grey; } .supervisor { border-top: 3px solid #62d3d3; } .team-builder { border-top: 3px solid #dd5958; } .karma { border-top: 3px solid #f3af58; } .calculator { border-top: 3px solid #6ca7e7; }These are the mistakes I found in your project and made in my early projects. My peers provided feedback that helped me improve my code. Keep learning and working on new projects!
Marked as helpful0 - Consider using more semantic HTML elements where applicable like
- @CaplexWSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
Next time I wanna try 'mobile-first' aproach.
What challenges did you encounter, and how did you overcome them?I was really struggle with making flexbox working as I need to. But looks like tamed it for this time.
@anamaydevPosted about 2 months agoHey @CaplexW, I came across your CSS and it looked beautiful and super clean! I’d really appreciate it if you could take a look at my code and give me some feedback on where I can improve. Thanks so much!
0 - @apradaglezSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I've achieved the challenge focus the second time to desktop view instead of the first time that I tried to develop for the mobile view. I've tried reused styles to reduce the code amount and simplify it.
What challenges did you encounter, and how did you overcome them?The code is fighting with me because I know to centre a div in the screen but this challenge is impossible for me at this time, Can you help me and suggest a solution?
What specific areas of your project would you like help with?With the centre the main div (recipe). I will be very grateful
@anamaydevPosted about 2 months agoHey @apradaglez, I've reviewed your code, and you've done a great job! Don't feel demotivated. To vertically align the
recipe-card, we need to set a specific height for its parent, which is the<body>. Currently, since we’re not assigning a specific height, the<body>tag's height is determined by the content, which is the height of therecipe-card. To solve this issue, you can simply add a margin of 128px (or 8rem) to the top and bottom, which should center the card effectively.Marked as helpful0 - @Zeey76Submitted about 2 months ago@anamaydevPosted about 2 months ago
Hey @Zeey76 your project looks great, but I just checked your GitHub and found you were using symbols as commit messages. Using commit messages like
.or/isn’t a good practice because it doesn’t explain what changes were made. Clear commit messages help you and others understand what was done in each update. If you ever need to review or fix something, meaningful commit messages make it much easier to track and understand your changes.For example, if you use a meaningful commit message like
"Fixed card layout"and later realise there's an issue with thecard, you can easily find that commit and revert or review it. If you only used.or/, it would be hard to know what that commit was for. Clear messages help you track and fix things faster.0 - @wpittman06Submitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I was proud of the amount of work I was able to do without seeking assistance.
What challenges did you encounter, and how did you overcome them?My images weren't cooperating and kept changing sizes. I didn't realize I was using class names and so whenever I changed one they both changed. I gave them custom classes and it fixed itself.
What specific areas of your project would you like help with?Writing efficient code. Do I have too many custom class names?
@anamaydevPosted about 2 months agoHey there! Custom classes are super helpful for keeping your styles organized and specific. Remember, balance is key—aim for clarity and maintainability without adding unnecessary bloat.
Also, using Flexbox can really boost your layout's responsiveness and alignment, giving you more control over spacing. Plus, adding media queries helps your design adapt beautifully to different screen sizes, making the user experience even better!
I encourage you to dive into these techniques, and check out this awesome Flexbox video and Media Query to get started!
Happy coding!
Marked as helpful0 - @seburbandevSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
The background circle pattern was challenging but fun to work on.
What challenges did you encounter, and how did you overcome them?The background circle pattern was the most challenging but I got it working relatively quickly.
What specific areas of your project would you like help with?There is probably a better way of implementing the background pattern. Curious to see what that might be.
- @estacio24Submitted over 1 year ago@anamaydevPosted over 1 year ago
Congratulations on finishing the challenge!
When you download the starter file, you'll receive several files, including
style-guide.md. This document provides information on how to design the project, such as the font, background color, and layout size. It can help you achieve a design that closely matches the original project.Font
- As mentioned in
style-guide.mdfile you can useOutfitfont which can be found here https://fonts.google.com/specimen/Outfit - you can apply
font-family: 'Outfit', sans-serif;to thebodyinstead of applying it totitleand<p></p>tag.
Asset
- In the folder
imagesyou can find theassetsprovided by Frontend Mentor that are used in the project and you can use that in folder. In this case they have provided aimage-qr-code.png.
QR Container
- In
.qr-containeryou forgot to make corners soft and you can useborder-radiusproperty to make it round.
As Frontend Mentor is all about achieving the design as close as possible you have done great. Feel free to contact me if you require any further assistance.
0 - As mentioned in
