Skip to content
OverviewSolutions
10
Comments
10
P
Steven
@stevensuna

All 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•360
    @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.

  • P
    Steven•180
    @stevensuna

    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:

    1. Use dvh for better handling of dynamic toolbars on mobile.
    2. 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 helpful
  • P
    Steven•180
    @stevensuna

    Semantic HTML:

    You could use a <header> element to wrap the img, h1, and h2 elements. This would group the introductory content of the profile card.

    The p tag with the bio could be placed inside an <article> or <section> to group it with related content.

    The links could be placed inside a <nav> element, as they represent a navigation menu.

    Heading Hierarchy: The h2 for "London, United Kingdom" is semantically a bit odd. It might be better to use a div or span with specific class or p tag since it's not really a heading that introduces a new section.

    Link Classes: The repeated use of class="main__a" is not very maintainable. It would be better to use more descriptive and reusable classes if you plan to style other links similarly later.

    Attribution Links: The link in the attribution could also have a more specific class for styling purposes

    Marked as helpful
  • Elvis Espinoza Navarrete•50
    @elvisEspinozaN
    What are you most proud of, and what would you do differently next time?

    I’m proud of implementing semantic HTML effectively and using media queries to create a responsive design. Next time, I would focus more on refining hover effects and ensuring a smoother scaling experience across all screen sizes.

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

    I initially found media queries challenging, especially when stabilizing elements like the card and header image. I overcame this by experimenting with different breakpoints and testing with max-width and responsive techniques like object-fit.

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

    I would like feedback on improving my CSS, especially with structuring styles for better readability and scalability. Suggestions for enhancing hover effects and responsive design patterns are also welcome.

    Mobile-first workflow, CSS custom properties, media queries, and flexb

    #materialize-css
    1
    P
    Steven•180
    @stevensuna

    Code Optimization: Consider reducing redundancy in padding and margin values by using shorthand properties.

  • P
    rainbowsurfer137•180
    @rainbowsurfer137
    What are you most proud of, and what would you do differently next time?

    I’m most proud of simply completing the challenge as a complete newbie. It was fun to learn how to use GitHub for the first time and see this challenge come together. Next time, I’d focus on finding more efficient ways to approach the process, from managing my code to refining my workflow.

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

    One challenge I encountered was dealing with a divergent branch. I researched the issue and was able to resolve it by learning how to reconcile the branches.

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

    I’d love feedback on how to make my code more efficient and streamlined. Suggestions for improving responsiveness and best practices for structuring CSS and HTML would be helpful.

    QR Code Component using Flexbox

    1
    P
    Steven•180
    @stevensuna

    I noticed the margin on this <p> tag differs slightly from the design guidelines.