Skip to content
OverviewSolutions
10
Comments
10
P

Steven

@stevensuna180 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    LuRouFan•160
    @angel-retry
    What are you most proud of, and what would you do differently next time?

    This time, I specifically learned about the <picture> tag, which allows me to display different images without relying on CSS to specify which image appears on different devices. It's incredibly convenient!

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

    none

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

    none

    Using CSS Flexbox for layout, incorporating accessibility design.

    #sass/scss
    1
    P
    Steven•180
    @stevensuna

    This is a good solution overall, and I really appreciate the effort put into the documentation—it’s clear and well-written, which makes it easy to follow.

  • P
    Steven•180
    @stevensuna

    Great solution!

  • Tomek Wojak•700
    @TomekWojak
    What 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

    Project made with flexbox & media.

    #sass/scss
    1
    P
    Steven•180
    @stevensuna

    You're on the right track using Flexbox! To improve positioning further:

    • Master Flexbox: Explore justify-content, understand align-content vs. align-items for multi-line layouts.
    • Learn position Property: Understand relative, absolute, fixed, sticky, and when to use each (vs. default static).
    • 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 position values 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.

  • Yamien Ariel•210
    @ariel172
    What 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

    testimonials section page with css grid by Yamien Ariel

    #accessibility
    1
    P
    Steven•180
    @stevensuna

    Finishing 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:

    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 helpful
  • P
    Steven•180
    @stevensuna

    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.
  • P
    Steven•180
    @stevensuna

    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.

View more comments