Kingsley Agu

@didyouseekyng
Port Harcourt
125Points

A Front-end Web developer always working on client side code, I'm looking for opportunities which would help me grow professionally.

I'm currently learning...

JavaScript

Latest Solutions

  • Desktop design screenshot for the Profile card component coding challenge

    Profile Card Component Using CSS Positioning

    • HTML
    • CSS
    Submitted

    Good day everyone, I noticed I'm not the only one having issues with the background images, I've tried everything within my knowledge to get it fixed, but no way!! Please I need your help on fixing this issue, I anticipate your response as you review my code. Thanks

  • Desktop design screenshot for the Testimonials grid section coding challenge

    Testimonial Grid Section Using CSS Grid and Flexbox

    • HTML
    • CSS
    Submitted

    I really enjoyed this challenge because I realized quite alot of things especially with the BEM-like naming convention which made it easier for me to work on each component. I tried making it look very close to the design with some tweaks here and there, but I'm always open to constructive criticism on how I code. I really have to thank @grace-snow for her review once again, her key points helped me work on my code better and I believe I can improve more. 😎

  • Desktop design screenshot for the Four card feature section coding challenge

    Mobile First Four Card Feature Section Using HTML and CSS(Flexbox)

    • HTML
    • CSS
    Submitted

    This challenge was very useful for me in terms of building my confidence when laying out elements. Please I would like to know if I picked the best approach to aligning the cards and make them re-align down to mobile screen size. Your feedback is very important for my growth. That being said, if you could take a minute to review my work, I would really appreciate it. Thanks so much for your time.

  • Desktop design screenshot for the Single price grid component coding challenge

    Responsive Single Price Grid Component Using Flexbox and CSS Grid

    • HTML
    • CSS
    Submitted

    A review of how I code would be nice....Thanks for your time!!

  • Desktop design screenshot for the Social proof section coding challenge

    Responsive Social Proof Section Using HTML & CSS(Flexbox)

    • HTML
    • CSS
    Submitted

    I noticed I had some accessibility issues regarding my img element which I'll definitely improve on, What I would like to know is if I properly used the Max-width and Min-width properties for the design?

Latest Comments

    • HTML
    • CSS

    Mobile WorkFlow, CSS flex, HTML5

    4
    Kingsley Agu125 | Posted 6 months agocommented on Omar eduardo ascanio arias's "Huddle landing page with a single introductory section" solution

    Hey @Omared250,

    The essence of the mobile workflow is all about the user experience, their wants, giving them the content that is actually necessary, juss to add to that, most web users operate with mobile.

    It's challenging on the mobile design cos you have to be really detailed about your coding, but good things take time, the more we practice, we get better at the mobile first approach.

    1
    • HTML
    • CSS

    Fylo Storage component using power of CSS grid

    3
    Kingsley Agu125 | Posted 6 months agocommented on Akshay Meshram's "Fylo data storage component" solution

    Hi, Akshay

    Great job done for the desktop size, but the layout is quite off on the mobile, as the popup-box is positioned to the right which is a great fit, but not on mobile, I suggest putting this particular class code inside a media query for desktop. other than that, you've done very well. .popup-box { padding: 0.8rem 2.3rem; background-color: #fff; position: absolute; top: 0; right: 3.5rem; z-index: 1; border-radius: 1rem; border-bottom-right-radius: 0; }

    0
    • HTML
    • CSS

    Profile Card using CSS

    3
    Kingsley Agu125 | Posted 7 months agocommented on Deborah Odion's "Profile card component" solution

    Hey, Debbie... Good morning I actually like how you made your background image fixed, honestly... I struggled with the background positioning, I'm hoping you can help me look at what I did and actually help with the background positioning by creating a pull request on Github. So back to your code, I've gone through it, and this is what I have to say;

    1. I noticed you didn't use the semi-colon here which is something you have to watch out for when there's an error. background-size: 700px, 700px; background-color: hsl(185, 75%, 39%)

    2. It's something I learnt recently but I wouldn't mind if you learn it too, and it's based on naming of classes, I had to learn how to use the BEM naming style in order for me to name classes better, the class names are long but it actually makes it easier for you to work with and for people to understand your code easily. You can try it out and see if it works for you.

    3. Regarding font size units, which is also something I'm guilty of but I'm changing now, You'd have to use rem for font size, like what I do now is that I downloaded an extension in my code editor which converts px to rem. So you could actually do the same.

     <div class="figures">
              <div> 80K </div>
              <div> 803K </div>
              <div> 1.4K </div>
            </div>
    
    
             <div class="info">
              <div id="followers"> Followers </div>
              <div id="likes"> Likes </div>
              <div id="photos"> Photos </div>
            </div>
    
    1. Maybe you didn't need the div with the info class, it could have been inside the div with figures class and then you use display flex on them. I know we can learn from each other, so feel free to look at how I code, tell me what you think, I'll be expecting a positive response.

    2. Before I forget, try to always use the alt attribute with your img tag for accessibility. I've gotten used to this now, you will also have to do the same.

    3. Try to actually limit your usage of the ID selector as you know it is very unique. Try using classes instead.

    0