Skip to content
OverviewSolutions
10
Comments
51

Illyaas

@Illyaas4Show700 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Illyaas•700
    @Illyaas4Show
    What are you most proud of, and what would you do differently next time?

    I was able to get a performance score of 100 on the Google speed test which was my aim. Now I will still try to get 100 across the board on everything else. I only got accessibility left but I can't do much about that unless I deviate from the design of the challenge.

    What challenges did you encounter, and how did you overcome them?

    For the first time, I did a mobile-first styling and I found it a little difficult to make it look similar to the design for desktop as it seems like the designs aren't consistent because the spaces are all different for mobile and desktop on the images, at least it looked different anyway. It may have just been a fault from me. It felt like the typography was off as well, I tried my best to match it but not all of it matched, unfortunately.

    What specific areas of your project would you like help with?

    I struggled a little with making the top image responsive as the text overflows above the image. Thinking about it now, I'm thinking I should have just used position: absolute; but it feels like that wouldn't be responsive.

    I would like tips on how to make the website closer to the design.

    Clipboard landing page

    #accessibility
    1
    Illyaas•700
    @Illyaas4Show

    Also, I just remembered, that the image of the Mac on the desktop version of the design is different from the image on the mobile design but only the desktop version of the image was added to the images folder.

  • Illyaas•700
    @Illyaas4Show

    Welcome to the community @Kobi-Okiti

    This is a great attempt, Well done! You even added your own tingle :)

    Just some accessibility issues...

    • Document should have one main landmark - You should wrap your card element in a <main> tag to allow screen readers to navigate your content. You should also wrap the attribution tag in a <footer> tag for the same reason.

    • Page should contain a level-one heading - You should also have one, and only one header per page, again to help navigate your page.

    Hope this helped, Happy coding! :)

  • Illyaas•700
    @Illyaas4Show

    This is an amazing solution, Well done!

    I think you should make the card a little wider and make the text a little bigger so it looks more like the picture.

    You should also change the colour of the text to the dark blue that is given in the style guide.

    Hope this helps! Happy coding!

  • Illyaas•700
    @Illyaas4Show

    Well done, this looks great! You should just increase the padding in the middle section as the buttons should be a bit less wide.

  • Illyaas•700
    @Illyaas4Show

    Hi tomas and welcome to the community!

    This is an amazing solution well done!

    Just one thing, All page content should be contained by landmarks, meaning your page should have one and only one footer in the page. You should wrap your attribution div in a footer tag to help screen readers navigate through your page.

    Hope this helps, happy coding :)

    Marked as helpful
  • Illyaas•700
    @Illyaas4Show

    This is amazing! How do you get your solution so close to the design? What browser do you use?

    There is only one difference, you should make the card smaller.

View more comments