Skip to content
OverviewSolutions
7
Comments
11
Yassin Amr
@justXeeZ

All comments

  • Gillian Oliveira•80
    @lia-oliveiraSubmitted 12 days ago
    What are you most proud of, and what would you do differently next time?

    It was very nice to center the card without using margin: 0 auto. Before starting a new project, I will look through all available resources before developing a solution, instead of relying only on the Figma files.

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

    The biggest challenge for me was the card shadow. I tried CSS documentation and some tutorials to understand how it works, but it only looked right after ChatGPT helped me get the transparency value that matched the example card.

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

    I've been researching accessibility, and I would really like to find materials created by people who use screen readers or have altered color perception. I’d also like to know how to test a page to ensure it meets accessibility requirements.

    QR Code Invitation Component Built with Semantic HTML5 and CSS Flexbox

    2
    Yassin Amr•120
    @justXeeZPosted 12 days ago

    good job! keep going and upload more solutions!

    1
  • Jérémy Mouzin•160
    @jeremymouzinSubmitted 12 days ago
    What challenges did you encounter, and how did you overcome them?

    I didn't do the shadows because it's a nightmare to retro-engineer and I don't have the figma file.

    Testimonials Grid Section

    1
    Yassin Amr•120
    @justXeeZPosted 12 days ago

    the pseudo classes approach is quite interesting, and you should have reverse engineer the box shadow without the figma files lol, anyway good job!

    1
  • Aurélien F.•80
    @aurelienfliegerSubmitted 12 days ago
    What are you most proud of, and what would you do differently next time?

    I got reacquainted with CSS Grid & used Sass for the very first time.

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

    I was not sure how to handle the cards' unusual placement, and I experimented with the number of columns/rows to include before setting for 3.

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

    Is clamp() the ideal solution for setting the cards sizes, or should I go with something else?

    Four Cards Section with CSS Grid, Sass

    2
    Yassin Amr•120
    @justXeeZPosted 12 days ago

    here are some tips:

    • always make h1 and h2 a bit bigger in size to make them stand out more
    • if you don't want the top border to take this weird curvature at the tips like a hook, make the border radius the same value as the border width like:
    .container{
 border-top: 5px solid yellow;
 border-radius: 5px;
}
    • another tip would be to use the gap property instead of margins to prevent the cards from cramming in smaller screen sizes before the page translates into the media query

    other than that you did a pretty good job.

    1
  • Yassin Amr•120
    @justXeeZPosted 13 days ago

    the card titles are a bit big other than that, good job!

    1
  • Anastasia•20
    @AnnaRoussSubmitted 14 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud of how I was able to understand better the spacing of my page, and trying to better understand Flexbox.

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

    I will be honest, the buttons caused issues for me. At first, I just couldn't figure out how to lengthen them or how to make it look the way it was supposed to.

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

    Need a little bit more practice with Flexbox, had to use a website to help me figure out which displays to use, and then how to style it.

    social-links-profile using Flexbox, CSS & HTML

    1
    Yassin Amr•120
    @justXeeZPosted 14 days ago

    I think you did something wrong when uploading the solution live, I'd recommend using vercel to upload your solutions, it is much user friendly to use than GitHub pages

    0
  • Yassin Amr•120
    @justXeeZPosted 15 days ago

    I'd suggest giving the container a max width like:

    .container{
width: 95%; /*to leave some space for margins */
max-width: 750px; /*change according to your needs */
}
    Marked as helpful
    1
  • frost3dWave•190
    @frost3dWaveSubmitted 15 days ago
    What are you most proud of, and what would you do differently next time?
    • starting to get hang of responsive & fluid terminologies and incorporating them naturally.
    • making use of logical properties instead of regular physical ones.
    What challenges did you encounter, and how did you overcome them?

    I had a bit of trouble with using srcset with the img tag & couldn't get my primary image to switch to other image after the specified media query but with the help of the kind folks from the discord server (@AlexKMarshall) I understood the use cases of img and picture element & in the end switched to using picture tag and resolved it.

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

    I'd very much like if someone could point out what i could do better in all cases/in much more efficient ways to do things or just in general, things I could improve in my code. But specifically I want help with responsiveness & fluidness of text ect. stuff related to responsive design.

    I'd appreciate any meaningful feedback. Thank you very much!

    Product-preview card component

    1
    Yassin Amr•120
    @justXeeZPosted 15 days ago

    solution on point! if you could, please let me how did you get the sizes so right?

    0
  • jedcanchola•130
    @jedcancholaSubmitted 16 days ago
    What challenges did you encounter, and how did you overcome them?

    I faced the challenge to style tables, I was not able to styling as I wanted but it look a lot like the solution, I tried different approaches to styling the table but not able to avoid unexpected behavior while editing the th elements.

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

    Styling tables to avoid undesired behavior in this case for desktop design it was not possible for me to add padding to th elements without having td elements moved.

    Also I would like to have advice on how can I handle font sizing to be responsive, how should I handle fonts sizes without using pixels and text to adapt to different sizes.

    Flexbox, Responsive design

    1
    Yassin Amr•120
    @justXeeZPosted 16 days ago

    good product, clean code, 10 out of 10

    0
  • Yassin Amr•120
    @justXeeZPosted 16 days ago

    definitely did the assignment but there is a couple of points if you want to perfectly match the design:

    • change the background color.
    • fix the profile name font size.
    • play with the margins till yo find the perfect match for the height.

    other than that, great job :)

    Marked as helpful
    1
  • Yassin Amr•120
    @justXeeZPosted 16 days ago

    Well Written Code!, but the author name could be a bit bigger.

    0
  • Yassin Amr•120
    @justXeeZPosted 16 days ago

    Solution exactly on point, good job.

    1