Lance• 1,580
@IzykGit
Submitted
lazydroide
@lazydroide
All comments
- lazydroide• 110
@lazydroide
Posted
The layout looks good but the position of the context/modal menu or whatever they want call it it's not correct. The issue can be fixed using as relative reference not the button but the 'social-share' container. You can apply the size of the relative container to the context menu in small screen sizes and then make it visible by clicking the button.
0 - lazydroide• 110
@lazydroide
Posted
Nice job, everything looks good.
0 - PThiago Rodriguez• 120
@thiagorodriguezdev
Submitted
What challenges did you encounter, and how did you overcome them?
Meu maior desafio foi nos cards, tentei usar grid mas nao obtive exito, consegui deixar igual o Figma usando flexbox
What specific areas of your project would you like help with?
Gostaria de ajuda nos cards se tem algum jeito melhor de desenvolver
lazydroide• 110@lazydroide
Posted
Pretty good solution, you use semantic html, variables, mobile first, etc. Two small details to improve, your karma and calculator cards are in wrong position, and the colored part of the cards is not a border-top (they have no curvature). You can make them straights with a linear-gradient.
In any case, great job.
0 - louahabi79• 10
@louahabi79
Submitted
lazydroide• 110@lazydroide
Posted
Looks the same but smaller. You should use semantic HTML instead of divs, it would improve your code in a very easy way and since you use classes in your CSS code it would not be a problem for you.
0 - Salima-Laidi• 40
@Salima-Laidi
Submitted
lazydroide• 110@lazydroide
Posted
Looks good. To add something, your code would be easily improved by using semantic html instead of "divs". So the div “recipe-page” would be the main and the divs “preparation-time”, “ingredients”, “instructions”... would be sections. That makes the browser's job easier. It would also allow you to simplify your css code, for example in the media query using the selector “section” to apply the code that you repeat in five classes.
In any case, nice work.
0 - cyber-m• 80
@cyber-m
Submitted
lazydroide• 110@lazydroide
Posted
I love your solution. I like how in CSS you define elements inside other elements and how you define variables based on the value of another variable. It makes the code easy to read and easy to maintain.
0 - Mufth• 20
@Mufth
Submitted
lazydroide• 110@lazydroide
Posted
Hi Mufth. Pretty good although using flex to center the card on the screen would have made your life simpler than using position absolute
Best regards.
0 - Prime127• 10
@Prime127
Submitted
What are you most proud of, and what would you do differently next time?
What I'm most proud of in this project is how effectively I applied Flexbox to center the QR code component and create a clean, responsive design. It was rewarding to see the layout adapt smoothly across different screen sizes while maintaining its visual integrity. If I were to approach this challenge again, I would focus more on improving accessibility, such as implementing ARIA labels and ensuring a better color contrast ratio for users with visual impairments. I would also explore using CSS Grid to see how it compares with Flexbox in terms of layout flexibility and responsiveness.
What challenges did you encounter, and how did you overcome them?
One of the main challenges I encountered was getting the QR code component perfectly centered on the page across different screen sizes. Initially, the layout would shift slightly depending on the viewport dimensions, causing it to look unbalanced, especially on mobile devices. To overcome this, I applied Flexbox to the container and used justify-content and align-items properties to center the content both vertically and horizontally. I also added min-height: 100vh to ensure the container took up the full height of the viewport, which resolved the issue of shifting content. Another challenge was maintaining a clean, minimal design while ensuring readability and good contrast between text and background colors. I tweaked the font size and color choices, referring to accessibility guidelines, until I found a balance that worked well for both design and usability.
What specific areas of your project would you like help with?
I would like help with the following specific areas of my project: Accessibility Enhancements: I want to improve the accessibility of the project, such as implementing ARIA roles and ensuring the color contrast ratios are optimal for all users, especially those with visual impairments. Responsive Design: While the layout works well on most devices, I'd appreciate guidance on refining the mobile responsiveness, particularly on very small screens, to make sure the design scales perfectly. Code Optimization: I’d like feedback on how I can refactor my CSS to be more efficient and maintainable. Specifically, I’m curious if there are better ways to handle layout and spacing across different screen sizes without duplicating code. Design Consistency: Suggestions on improving the visual design of the QR code component, particularly balancing the whitespace, would be helpful. I’m aiming for a clean, modern look, but I feel it could be refined further.
Any tips or resources on these aspects would be greatly appreciated!
lazydroide• 110@lazydroide
Posted
Hi Prime127, i'm going to try to review your challenge although I don't think I have knowledge enough to advise anybody XD. Improving accessibility: Instead use "divs" use semantic html (main, article, section, etc). A good way to make the CSS code more efficient and maintainable is using variables especially in more complex projects. Also putting your CSS code in a separate file would be useful. And finally the dimensions are a little off, didn't you use the figma file with the design information? Also you used Arial instead Outfit typography. Reviewing your project make me realize how many things I have done wrong in mine. Best regards.
Marked as helpful
0
