Skip to content
OverviewSolutions
16
Comments
20

Muh Suryadi Triputra Rahman

@msuryaditriputraRIndonesia400 points

JavaScript Enthusiast ~ Front-End Developer

I’m currently learning...

HTML (PUG), CSS / SASS, Javascript ,React, SEO and Accesibility

Latest solutions

View more solutions

Latest comments

  • Muh Suryadi Triputra Rahman•400
    @msuryaditriputraRPosted over 2 years ago

    Hi There 👋

    Congrats on finishing this challenge 🥳

    The place-items: center only works when the element is a grid, so just change the body's display to grid with display: grid, and don't forget to set the min-height of the body to 100vh;

    for your Accessibility report ⚒

    • Wrap all of the content with <main>tag, All page content should be contained by landmarks.
    • If you just have one heading, you have to use h1 tag for semantic meaning and you can change its style but not the tag. The page should contain a level-one heading. change your h2 tag to h1

    I hope this is helpful😊 after you fix the accessibility issues, don't forget to generate a new report! 📖

    keep it up your good work, Happy Coding ☕

    Marked as helpful
    1
  • Muh Suryadi Triputra Rahman•400
    @msuryaditriputraRPosted about 3 years ago

    Hi Julieta Perez 👋

    Firstly, I wanna congrats you on your success finish this challenge 🎉

    However i have some feedbacks for u 🌼

    Accessibility 👀

    • Wrap all of your content with the main tag. All page content should be contained by landmarks.
    • For heading text use h1 instead of h3 if you just have one heading on your page. Page should contain a level-one heading.
    • Wrap attribution div with footer and place it at the bottom of your page for a better experience, or if you want to keep it at the top wrap it with header.

    Code & Design 🛠

    • If you want to place your div at the center of the page with position property. You should use transform: translateX(-50%) when you set the left with 50% and transform: translateY(-50%) when you set the top with 50%. or you just need to use transform: translate(-50%,-50%) for shorthand. learn more about translate
    • For best practice and easy way to make content centered is use grid layouting ⚡
    main{
    display: grid;
    place-content: center;
    min-height: 100vh;
}

    and trada it's magic ☃ . learn more about grid layouting.

    I hope this helps, keep it up your good work and Happy Coding ☕

    Marked as helpful
    0
  • Muh Suryadi Triputra Rahman•400
    @msuryaditriputraRPosted about 3 years ago

    Hi Icekid35 👋

    You have amazing work.. Good job 🙌 then adding a copy feature and adorable icons are an impressive idea. Nice! 🤘

    However, i have some suggestions for u

    • You should wrap the advice title with h1 to fix your accessibility issue do you have. Page should contain a level-one heading
    • Add some padding in the copy element and add border-radius too.
    • For Divider, actually you can use the image assets but it's no big deal. Nice try to build your own divider style 😁

    I see you have fixed your code according to the suggestion of the previous comment, but you forget to Generate a new report. Please update them 🛠

    I hope this helps. Keep it up your good work 🔥💥

    Happy Coding ☕

    0
  • Muh Suryadi Triputra Rahman•400
    @msuryaditriputraRPosted about 3 years ago

    Good Work, Nice Animations !

    1
  • Muh Suryadi Triputra Rahman•400
    @msuryaditriputraRPosted about 3 years ago

    Hi Shane Pinder 👋

    You have an interesting idea to make an image purple with a linear-gradient. But I think the best practice and easier is to use the filter property. check the explaination about the filter property. And you can also use css filter generator to make it easier 😄

    For the Accessibility issue do you have, you should wrap the attribution div with footer tag

    I hope this helps and happy coding ☕

    Marked as helpful
    0
  • Muh Suryadi Triputra Rahman•400
    @msuryaditriputraRPosted about 3 years ago

    Hi TheCoderGuru 👋 You have as good work as always 💪🔥

    However, I think you didn't notice some detail from this challenge:

    • Background-color of the card content is white.
    • The one that should have background-color : very-pale-blue is the card-lower.
    • The icon doesn't have to have alternative text, just leave it blank.
    • The button should have cursor: pointer when it hovers.
    • You forgot to handle the button's state when it hovers.
    • IMHO on this challenge, since the anchor link doesn't point to any page, the best practice is to assign the href="#" attribute to it. so that when it is clicked the page does not reload.

    Actually we can't access your repo, I just look at your code through DOM element. so, i hope you can update it later.

    last but not least, i hope this feedback can help you 🙌

    Keep up your Good Work 🛠 and Happy Coding ☕

    2
View more comments