Skip to content
OverviewSolutions
17
Comments
10

Jonah Ssegawa

@devjhex240 points

A Full Stack Engineer who is passionate about tech and loves open source. In my free time I'm bash scripting.

I’m currently learning...

Currently building projects so as to get better.

Latest solutions

View more solutions

Latest comments

  • Jonah Ssegawa•240
    @devjhex

    Great work @eduardotejeda, congrats on completing your challenge. And without doubt an answer to your question. I built this project twice. First with HTML and CSS and second with Tailwind CSS and to be honest with plain CSS, it was a pain for me especially when dealing with the gradients of the results circle in the component yet I was still looking for perfection. But it's so great that you managed to complete it. Happy coding 👌👌

  • Jonah Ssegawa•240
    @devjhex

    @judgemongcal Congratulations on completing this challenge, it really shows that you put a lot of effort into it, keep it up and keep on practicing. On the side of suggestions though I just wanted to talk about the position of the component itself which could be centered more like the design by adding the following lines to your body styles.

    body{
padding: 0;
font-family: 'Outfit', sans-serif;
background-color: #0D192C;
/*Add the following lines to your code*/
displaty:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
}

    Otherwise to be honest, You really did a great job. Happy coding👌👌👌

  • Jonah Ssegawa•240
    @devjhex

    Hello @7Wall you've really done an excellent job on this challenge it really show that you push in a lot of effort into it, Great work. As a suggestion, in your HTML instead of using a div for the container class it is recommended to use more accessible elements like the article element which will be so helpful for accessibility most especially screen readers to understand how your code is structured, other than that you have really done it well. Happy coding!!

    Marked as helpful
  • Jonah Ssegawa•240
    @devjhex

    @Edmiro-Cacoma This is a well-built solution, you really put in the effort to make it excellent, Keep it up. I just hoped that this would also be helpful. To center the preview card vertically also.

    body {
  display: flex;
  align-items: center;
  font-family: "Inter", sans-serif;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--main-bg);
  justify-content: center;  /*Add this to the body styles of the preview card*/
}

    Otherwise, you really did an excellent job on this solution. Hope this is helpful to you. Happy coding!

    Marked as helpful
  • Jonah Ssegawa•240
    @devjhex

    Hello @Scazee, you have done a really great job with this solution. Thanks for putting in the effort until it's completed. Hope these suggestions will help in your solutions too! In your code, I think it's better to use tags that are more accessible like <section> and <article> which increases its availability to your audience.

         <section class="flex-container"> instead of <div class="flex-container">   
     <article class="qr-container"> instead of <div class="qr-container">

    This makes it accessible to screen readers hence so that they know what the elements mean Hope this helps, otherwise Great solution and Keep it up!

  • Jonah Ssegawa•240
    @devjhex

    @Algka You have done a very great job on this component, It shows that you put in a lot of effort completing it, Well done. I hope this suggestion would help in the positioning of the component in the center of the page.

    body{
     background-color: var(--Very-dark-blue1);
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     height: 100vh;
}

    Otherwise, you have done an excellent job. Keep up with the code!!

View more comments