Skip to content
OverviewSolutions
10
Comments
51
Illyaas
@Illyaas4Show

All comments

  • Illyaas•700
    @Illyaas4ShowSubmitted 5 months ago
    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

    1
    Illyaas•700
    @Illyaas4ShowPosted 5 months ago

    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.

    0
  • Illyaas•700
    @Illyaas4ShowPosted about 2 years ago

    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! :)

    0
  • Illyaas•700
    @Illyaas4ShowPosted about 2 years ago

    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!

    0
  • Illyaas•700
    @Illyaas4ShowPosted about 2 years ago

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

    0
  • Illyaas•700
    @Illyaas4ShowPosted about 2 years ago

    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
    0
  • Fat•910
    @FahatmahSubmitted over 2 years ago

    Hello Everyone! This is my second attempt but with SASS making more my self less frustrated and efficient while I was making this.

    Happy Testing!

    Product Preview Card with SASS

    1
    Illyaas•700
    @Illyaas4ShowPosted over 2 years ago

    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.

    0
  • Illyaas•700
    @Illyaas4ShowPosted over 2 years ago

    Hi, welcome to the community

    This is an amazing solution you've got here. It is almost identical to the design, well done! All you need to do is reduce the width of the card and it will be awesome!

    Hope this helps, Happy coding!

    1
  • Illyaas•700
    @Illyaas4ShowPosted over 2 years ago

    Hi and welcome to the community!

    This is an amazing start to your journey. Your solution looks very nice :)

    I think you should increase the padding right of the container to allow the title and paragraph wrap more and look more like the design.

    I hope this helps, Happy coding!

    0
  • Shihab•100
    @adnansaimSubmitted over 2 years ago

    I made the rock paper scissors project and it was really fun. it took more than 8 hours to complete.

    there was some point where I had to think a little bit. first thought I can append and make changes. but this made the project more problematic. then decided to make rps buttons by an array. and the thing worked. everyone should follow some best practices like commenting and writing clear code.

    overall the project was fun and I enjoyed a lot

    Responsive Rock ,Paper,Scissors game

    1
    Illyaas•700
    @Illyaas4ShowPosted over 2 years ago

    Hi Adnan, actually love your project and it was so much fun!

    I think it would be better if you add transition: .7s all ease; to some of your elements so that it can smoothly transition to it's hover state. Where it says 'all', you can put specific attributes like colour or width or margin etc. This will make your project a lot more smooth.

    Find out more about transition here.

    I hope this helps! Happy coding!

    Marked as helpful
    0
  • Illyaas•700
    @Illyaas4ShowPosted over 2 years ago

    Hi sandrex, good solution you have here. Well done!

    • You should add margin-bottom: 1rem; to the top card instead of using position absolute.
    • You should use flex-box to center the container as it is a lot easier and works a lot better. Like this
    body {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
}

    • You have forgotten the line after the graph. You could add a border-top to the bottom section of the card to look like a horizontal like.

    • Document should have one main landmark - Your page should have one and only one <main> tag to help screen readers navigate the page.You can wrap the whole card in a main tag.

    Hope this helped! Happy coding!

    Marked as helpful
    1
  • Illyaas•700
    @Illyaas4ShowPosted over 2 years ago

    As Salaamu Alaykum, Aya. Welcome to the community!

    You should try to:

    • Increase the padding of the card.
    • Make the border-radius of the QR-code half of the border-radius of the card itself to make it aligned.
    • Add text-align: center; to the card to make the title and paragraph stay in the center at all screen sizes.
    • Make the shadow more subtle.

    Hope this helped! Salaam! :)

    Marked as helpful
    0
  • Lukas•50
    @Lolex3366Submitted over 2 years ago

    My second Challange !

    Flex

    3
    Illyaas•700
    @Illyaas4ShowPosted over 2 years ago

    Welcome to the community @Lolex3366

    Just need to fix a few things:

    • You should use the colour given in the starter file for the background so it looks more like the design.
    • You should also reduce the padding and add text-align: center; to the card element.

    Hope this helps and Happy coding!

    Marked as helpful
    0