Skip to content
OverviewSolutions
11
Comments
20
Kingsley Agu
@didyouseekyng

All comments

  • Kingsley Agu•285
    @didyouseekyng

    Hey Catherine, this is a really nice work. What I would like to know is how you make the transition between different media queries stay the same. It's one thing I'm having issues with, trying to make my design stay the same when I resize my screen from 1440px down to 768px. Please how do you handle such situations?

  • Kingsley Agu•285
    @didyouseekyng

    Hello Ahmed! Nice to meet you here. Great job completing this challenge. I bet it was an exciting one to complete. Let me just chip in one or two suggestions based on your accessibility issues:

    1. If you run through my code, most times I've been able to solve issues regarding labels by using the aria-label which creates a descriptive text for screen readers.

    2. You should always have one h1 tag on your page as this is the most important heading tag on your page and it helps too for SEO. Read more about the importance of the h1 tag

    Marked as helpful
  • Kingsley Agu•285
    @didyouseekyng

    I seriously don't know where I'm getting these HTML issues from cause I've validated my code elsewhere and it's giving me no issues here. I really hope someone can explain this to me. @mattstuddert

  • Kingsley Agu•285
    @didyouseekyng

    Hey Deola, Nice work completing this challenge!! let me just chip in some suggestions:

    1. border: .2px solid hsl(303, 10%, 53%); this line of code on the main tag wasn't needed for this design.
    2. I think on your ratings class, you can use display: flex; flex-direction: column;, so that the star icon and the text can be on top of each other for the mobile design.
    3. The paragraph tag in the boxes class should actually be aligned to the left on the mobile design and desktop design. So I think you can use text-align: left; in the boxes class.
    4. Have you thought about using a naming convention for your classes to make it more understandable? Currently I'm using BEM, you can check this on YouTube. Trust me when I say it makes structuring your code way better and organized.
    • Overall you have done a nice job trying to get through this challenge. Kudos! Keep it up! 🙌🏾
    Marked as helpful
  • Kingsley Agu•285
    @didyouseekyng

    Good evening Tee, I see you've done a great job here, the design is really great I have to be very honest with you, I can imagine how long you had to stare at your screen trying to complete this challenge. I see you looked up the BEM naming convention and trust me it made your class naming much much better than it used to be. I see you still had some accessibility issues again, believe me you'll get over it soon with more research. I'm currently working on a challenge now where I had to work with icons that are clickable, and using the Accessibility inspector with my Firefox developer tools, I encountered this "Links having discernible text" issue, so I used aria-label="Link to my (social media name)" to actually add a descriptive text to the links containing the icons and it actually solved that problem for me. You can check more on that.

    Marked as helpful
  • Kingsley Agu•285
    @didyouseekyng

    Halo!! I'm back again..I see @laceeder has given some helpful feedback already so i'll chip in one or two:

    1. Considering how you name your classes, I believe you can improve that aspect by learning a naming convention. Currently I use the BEM Naming Covention which helps me name classes easily. Surf YouTube for more content. It's worth the time.

    2. I noticed your code was covered with a whole lotta div tags, which doesn't help semantically. That's probably why you have more accessibility issues here compared to the Four-card Feature challenge where you used semantic HTML tags like your main, header and footer. I think this just needs a more conscious effort when writing code for your next challenge.

    • Anyway, you've done well completing this challenge, but the aim is to make the next code better! Kudos 🙌
    Marked as helpful
  • Kingsley Agu•285
    @didyouseekyng

    Good morning Tee, I see you have some accessibility issues here, so to help you with that:

    1. You need to include an h1 tag in your html file.

    2. I think you also need to change the attribution div tag to a footer tag. This would also help.

    And then to finally answer your question about the difference between flexbox and grid in the way I've come to understand it:

    • Flexbox can be used for layouts that are one-dimensional, if I'm dealing with a layout that has one row and column, what's the essence of grid? while Grid can be used on layouts that seem two-dimensional, a situation where in a layout you have things stacking on top of each other. I hope this helps, we could talk more about it if there's anything. Overall, It's nice to see you've completed this challenge. Kudos!!
    Marked as helpful
  • Kingsley Agu•285
    @didyouseekyng

    Hey bro, How you doing? You've done a great work attempting this challenge.

    .cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

    1. I think this gap of 20px is not necessary on the card as a whole, so the card1, card2 and card3 would merge.

    2. I also noticed that on mobile, the cards don't have a margin which I suggest you add.

    3. From what I learnt from a few mentors here on FEM, I think the display:flex, align-items: center, justify-content: center and min-height: 100vh does the centering trick. You can apply it to the body or the card. Just work your way around and see which one works well for your code.

    4. Also learnt from others too that it's not best practice to actually have more than one h1 tag in your code. I do hope you find this helpful. Cheers bro! Anticipating your feedback.

  • Kingsley Agu•285
    @didyouseekyng

    @samadeen, @Sdann26, @vanzasetia, @Kamasah-Dickson, @FluffyKas, @grace-snow

    I know you might be busy with certain things but I would appreciate it if out of your busy schedule you run through my code and help me identify areas I need to strengthen.

  • Kingsley Agu•285
    @didyouseekyng

    @grace-snow, @ApplePieGiraffe please I need your review based on the accessibility side of this challenge.

  • Kingsley Agu•285
    @didyouseekyng

    you actually have to tweak the position property for the popup-box, here is a link to the screen shot [Link] (https://ibb.co/gt1BbvJ)

  • Kingsley Agu•285
    @didyouseekyng

    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; }

  • Kingsley Agu•285
    @didyouseekyng

    Honestly I really admire your work, especially what you do with animations, I'm getting there someday and you're juss motivating me to get there. I love the dark and light theme, well done APG!! Mobile design is pretty solid.

  • Kingsley Agu•285
    @didyouseekyng

    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.

  • Kingsley Agu•285
    @didyouseekyng

    Hey @Yevgeniy-hup, how you doing? nice to see you submitting your first challenge but I feel there's more to be done especially with your Font Family, and also the spaces inside the box(e.g Padding ). I think the boxes would be better arranged if you possibly used CSS Grid and Flexbox which is going to be useful in your Web Dev career instead of the absolute positioning. We all have to keep improving and I believe you can do it. 👍

  • Kingsley Agu•285
    @didyouseekyng

    I think if you had given the '.down' class a margin, all the boxes would space out accordingly, same thing I did with mine, feel free to check it out. You can also work on the 'border-radius' of your cards and also the 'border-width' so it can match the design. It's nice to complete a challenge, and there's more to come from you. Keep it up. we all need this encouragement. 💯

  • Kingsley Agu•285
    @didyouseekyng

    @grace-snow I would really love a review from you, I love how you mentor people. please do me this favour

  • Kingsley Agu•285
    @didyouseekyng

    Hey, Adding to the great review from @AgataLiberska, I was going to talk about using media queries to work with the mobile design first, and also some things I noticed on the desktop design which I'll list now which you can probably work on:

    • The width of your border top could possibly be reduced. • Adding a margin bottom of about 5px to the image inside the card just to give it a little bit of space at the bottom of the card. • Try using box-shadow on the cards. • Try adjusting the font-weight of the headings (team builder, supervisor e.t.c) inside the card since they're actually bold on desktop.

    I hope this helps you improve, we learn every day of our coding career. 💪🏾