Skip to content
OverviewSolutions
6
Comments
9

Praise Immanuel

@PraiseImmanuelMinnna, Nigeria250 points

Hi! 👋 I'm Praise Immmanuel, and I'm passionate about web programming. I'm currently studying to become a full-stack developer 🚀, and I'm excited to share my projects with you !

I’m currently learning...

I’m currently learning... 🔹Next.js 🤖🔸React.js 🚀🔹Framer Motion 🎬🔸Tailwind CSS 🎨🔹Accessibility 💎

Latest solutions

Latest comments

  • Praise Immanuel•250
    @PraiseImmanuel

    Hello Charis 👋. Good job on completing the challenge ! I just have a few recommendations:

    -In order to create an amazing site that is very responsive and compactible across devices. You might have to take the mobile-first approach. Visit this url to learn more and I am always available to answer your questions. Responsive Design at w3schools

    -In order to make your implementation of the UI screens more similar to the UI design. Try to pay more attention to details and change your size ratios they seem a bit large especially the font sizes. Instead of using the value you use for the font size try to use values in px or rem. The reason is that every browser render large, normal, bold differently

    p {
    letter-spacing: 8px;
    font-weight: 900;
    font-size: large;
}

h2 {
    line-height: 1.8;
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: normal;
}

    But I will like to commend your efforts. Keep coding!

    Marked as helpful
  • Praise Immanuel•250
    @PraiseImmanuel

    Hello there 👋. Good job on completing the challenge !

    Your solution looks so sleek. I wanna acknowledged the fact that you have good eyes for design and keen attitude to details.

    Happy coding!

  • Praise Immanuel•250
    @PraiseImmanuel

    Hello Rose U+1F60A, Great job your did here. I would like to suggest your add this to your button css:

    .summary-btn button{
    background: hsl(224, 30%, 27%);
    color: white;
    width: 100%;
    border-radius: 35px;
    height: 3.5rem;
    /* margin:15px 0 0 0 ; */
    font-family: 'Hanken Grotesk', sans-serif;
}

    .summary-btn button{
    background: hsl(224, 30%, 27%);
    color: white;
    width: 100%;    
    border: transparent;
    border-radius: 35px;
    height: 3.5rem;
    /* margin:15px 0 0 0 ; */
    font-family: 'Hanken Grotesk', sans-serif;
}

    This will help take off the default border and make the button match the UI design better.

    Marked as helpful
  • Praise Immanuel•250
    @PraiseImmanuel

    Great Job Micheal! You nailed it. But I will like you to check your css and make this correction if you see it neccesary:

    .cont {
    height: 100vb;
    display: flex;
    justify-content: center;
    align-items: center;
}

    Change your b on the height property to :

    .cont {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    Keep soaring, Happy Coding!

  • Praise Immanuel•250
    @PraiseImmanuel

    Hello Kaushai Joshi, You did a really nice job. But I just have a few corrections you can improve with. You should put a lang attribute in your <html> tag like <html lang="en"> because of accessibility issues. I would advise you to use your developers tool (F12 on your browser) in order to view the responsiveness of your web app on different devices. Happy Coding!

    Marked as helpful
  • Praise Immanuel•250
    @PraiseImmanuel

    Hello Junwei! I really love your solution, it's nice and well constructed. I will just suggest some ways to get rid of the HTML(20) and Accessibility issues(11). The issue with img tags is that you must always add an alt text even if it for an icon. So instead of omitting it when it doesn't seem to be necessary like in the case of an icon, you just have to add it with an empty string. for example <img class="logo" src="./images/logo.svg"/ alt=""> or <img class="logo" src="./images/logo.svg"/ alt="logo">.

    Next is about the landmark issues, since you are working with HTML5, you are expected to use header, footer, nav, article, or section when necessary. So keep coding and keep flying!

    Marked as helpful
View more comments