Skip to content
OverviewSolutions
11
Comments
20

Kingsley Agu

@didyouseekyngPort Harcourt285 points

I'm on a mission to create pixel-perfect designs. 🚀

I’m currently learning...

JavaScript

Latest solutions

View more solutions

Latest 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
View more comments