Skip to content
OverviewSolutions
5
Comments
4
jl-stephenson
@jl-stephenson

All comments

  • jl-stephenson•100
    @jl-stephensonPosted 3 months ago

    Hi AnDev,

    Great solution again - it's very close to the design.

    A couple of things that jump out:

    • Using pixels for font sizes makes the website inaccessible, here's an article explaining why;
    • You use a tags for the interactive elements - did you imagine clicking would take the user to another page? If these elements open modals / trigger a download but don't take the user to another page/section, I think it's clearer if they are button elements instead.

    Keep up the great work!

    Marked as helpful
    0
  • jl-stephenson•100
    @jl-stephensonPosted 3 months ago

    Hi AnDev,

    Great work on this project, your solution looks really close to the design!

    One suggestion:

    • Your HTML doesn't follow the heading hierarchy. You have an h1 element for the name on the first card all of the following names are h2 elements. This makes the succeeding names sub-headings of the first name and could cause confusion. To include an h1 tag you could make it an overview heading and make it visually hidden with CSS like this.

    Great work!

    0
  • LG•170
    @newbieDesignDevSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    In this challenge I'm trying to apply the CUBE CSS principles as much as possible. I'm proud of being able to make my website more responsive and able to change depending on the screen sizes.

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

    trying to replicate the border-radius was kind of tricky for me and took me quite sometime to make my site the same. Was able to read documentation and implement it on my own.

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

    I realize that I'm not really familiar with the syntaxes on CSS. Which I read on about that I really wouldn't be able to memorize it all. What I need to develop and get better at is able to read documentation and figure out how to apply it.

    Four Card Feature -- Mobile First and responsive

    1
    jl-stephenson•100
    @jl-stephensonPosted 3 months ago

    Hi LG,

    Your solution looks good. A couple of thoughts/questions:

    • You use float: right to position the icons. I think float has fallen out of favour because it can be unpredictable. You could use margin-left: auto instead to put all available space to the left of the icon;
    • Setting a fixed pixel width for your cards means that they don't grow and shrink with the screen size, it might cause issues. You could use the flexboxes you have to determine the width of the cards across different screen sizes instead.

    I'm having a similar struggle to memorize stuff enough to implement it! Kevin Powell is great at explaining CSS, often by implementing it on projects. He has a walkthrough of two solutions to this challenge here.

    Marked as helpful
    0
  • jl-stephenson•100
    @jl-stephensonPosted 3 months ago

    Hi Daniel,

    This looks like a really accomplished solution!

    A couple of questions/thoughts:

    1. Below 600px the two-column layout begins to look quite squished. You've set the breakpoint to 460px - what is the reason for that? I think the transition would be smoother with the min-width set wider.
    2. Why did you choose to use <article role="main"> rather than the <main> element? Is there any advantage to doing this?

    Hope that's useful!

    0