@Luca-SousaSubmitted 9 months ago
Latest comments
- @TomekWojakSubmitted about 1 month agoWhat challenges did you encounter, and how did you overcome them?
Positioning of elements on the website was a little bit challenging, but I did my best. I will improve some things in the future
P@stevensunaPosted 25 days agoYou're on the right track using Flexbox! To improve positioning further:
- Master Flexbox: Explore
justify-content, understandalign-contentvs.align-itemsfor multi-line layouts. - Learn
positionProperty: Understandrelative,absolute,fixed,sticky, and when to use each (vs. defaultstatic). - Use Margins & Padding Wisely: Choose between them to control spacing effectively.
- Consider CSS Grid: For complex, two-dimensional layouts, Grid can be very powerful.
To practice:
- Do layout challenges.
- Experiment with
positionvalues in small code examples. - Use browser dev tools to visualize layouts.
- Refer to MDN documentation.
Keep practicing – positioning skills improve over time! You've got a good foundation.
0 - Master Flexbox: Explore
- @ariel172Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I'm proud to have (finally) finished the project, I had completely abandoned it x months ago. I'm also glad to have learned the css grid. Next time I'll try to do a better job with the code and in a much shorter time, I'll also try to make my code look as good as possible in the mock-up (without figma :) ).
What challenges did you encounter, and how did you overcome them?I had difficulties with css grid to overcome this I did some research on youtube and AI.
What specific areas of your project would you like help with?I don't understand the css grid, but I hope that with practice it will get better. If you can give me some resources to learn that would be cool thank you in advance
P@stevensunaPosted about 1 month agoFinishing the project after pausing and learning CSS Grid are both achievements to be proud of. Recognizing areas for improvement in code quality and speed is excellent – that shows growth. Using YouTube and AI to overcome CSS Grid challenges is a smart approach.
To deepen your CSS Grid understanding, here are some concise and effective resources:
- MDN CSS Grid: Official documentation, comprehensive and accurate. (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
- CSS Grid Garden: Fun and easy game to learn CSS Grid. (https://cssgridgarden.com/)
- Scrimba CSS Grid (free): Interactive course, learn directly in your browser. (https://scrimba.com/g/ggrid)
- Kevin Powell (YouTube): Clear and practical CSS Grid explanations. Search his channel for "CSS Grid". (https://www.youtube.com/c/KevinPowell)
Advice: Start with CSS Grid Garden to get familiar, then check out Scrimba or Kevin Powell. Use MDN for reference. Most importantly, practice regularly.
Keep up the great work! Ask anytime you need more help.
Marked as helpful0 - @sd3u16Submitted about 1 month agoP@stevensunaPosted about 1 month ago
You've built a functional and reasonably well-structured component. To take it to the next level, focus on:
- CSS Organization: Use an external stylesheet and consider CSS variables.
- DRY Principle in CSS: Reduce redundancy by creating reusable classes and modifier classes.
- Semantic HTML: Explore using more semantic HTML5 elements where appropriate.
- Accessibility: Pay attention to alt text for meaningful images and consider further ARIA attributes if needed for more complex interactions (though likely not necessary for this component).
- Performance: Use <link> for fonts, optimize images.
0 - @Gbw699Submitted about 1 month agoP@stevensunaPosted about 1 month ago
This is a well-executed solution! You've demonstrated a good understanding of HTML, CSS, SCSS, and responsive design principles. The code is generally clean, well-structured, and accessible.
1 - @JuniorGodoyOrtegaSubmitted 3 months agoP@stevensunaPosted 2 months ago
Your code is generally well-structured, and you're using best practices like BEM and CSS variables. However I highly recommend considering these two changes:
- Use dvh for better handling of dynamic toolbars on mobile.
- Explicitly define a media query for the 375px breakpoint to improve code clarity and control. These changes will make your code more robust and maintainable in the long run.
Marked as helpful1
