P

Chris

@Chris94Lee
UK
190Points

QA engineer who is adventuring into the world of Web development. Spent the last 5 years as a QA engineer working on Web and Mobile projects. Looking to make the shift over to Frontend eventually.

Latest Solutions

  • Desktop design screenshot for the Single price grid component coding challenge
  • Desktop design screenshot for the Stats preview card component coding challenge

    Stats preview card - Mobile first

    • HTML
    • CSS
    0
    P
    Submitted
  • Desktop design screenshot for the Order summary component coding challenge

    Order summary component - Mobile first

    • HTML
    • CSS
    0
    P
    Submitted

    Any feedback would be really helpful please.

  • Desktop design screenshot for the Equalizer landing page coding challenge

    Mobile first Equalizer landing page

    • HTML
    • CSS
    0
    P
    Submitted

    Any feedback is welcome! This was the first time I've done a mobile first approach and wow it definitely helps a lot. I'm sure I could tidy up my CSS quite a bit, but that's for the next challenge. I just realised I forgot to add the hover states to the social media icons so I'll add those in. And I'm sure this will throw some accessibility errors at me when I submit.

  • Desktop design screenshot for the NFT preview card component coding challenge

    NFT - Html + CSS

    • HTML
    • CSS
    2
    P
    Submitted

    Been a while since my last submission so thought I'd start with this new one.

    Can someone please explain why my .imageContainer class has a height of 306px which causes the extension at the bottom when hovering over the image? As far as I'm aware the height of this div should be that of its contents? The largest element inside this div is the image, so why is there this extension at the bottom?

  • Desktop design screenshot for the Fylo landing page with two column layout coding challenge

    Fylo landing page with two column layout

    • HTML
    • CSS
    0
    P
    Submitted

Latest Comments

    • HTML
    • CSS

    Order Summary component

    4
    P
    Chris190 | Posted 5 days agocommented on Vincent Ferraro's "Order summary component" solution

    Hey Vincent, looking good!

    One thing I noticed is that you're missing a background colour. What I'd do is add background-color: #E0E8FF to your body in the CSS file. Also, to make the background image fit like the designs, you can add background-repeat: repeat-x; and then remove the background-size style you have on the body. Let me know if this works for you!

    Also regarding px for size, I try to avoid pixels for accessibility reasons, and tend to stick to either em or rem. Check out: https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

    Looking forward to seeing your future work!

    1
    • HTML
    • CSS

    single price grid component

    2
    P
    Chris190 | Posted 4 months agocommented on devansh's "Single price grid component" solution

    Hey Devansh,

    I believe the reason why it's showing the mobile design in the preview, is because of your media query: @media (min-width:375px) and (max-width:1440px). So here you're using the 3 stacked containers on screen devices between 375px and 1440px. I'd recommend having the max-width as 1000px. And also to remove the min-width, because on devices smaller than 375px, it's reverting back to the web layout.

    If i'm incorrect here then someone else feel free to correct me.

    0