Skip to content
OverviewSolutions
7
Comments
5
Anna
@Anq92

All comments

  • Anna•130
    @Anq92Posted over 2 years ago

    Hello!

    Very nice solution :)

    I have few tips:

    • you could make the solution more flexible, so the container would be bigger for desktop sizes and smaller for mobile, use max-width, max-height, media-queries or clamp() method for it
    • use relative units instead of px wherever you can, using rems makes websites more accessible for users with different browser setups

    For reference you can check my solution here

    Marked as helpful
    1
  • Anna•130
    @Anq92Posted over 2 years ago

    Hi!

    Nice work with the challenge!

    There are few things you can improve:

    • use max-height and max-width instead of fixed size of main container Check your solution on mobile devices in browser's dev tools - because the element don't change its size part of it goes outside the screen area. There are few other methods to adjust elements for different screen sizes like media-queries or using clamp() method
    • I don't know if it was on purpose, but you missed hover effects. If you don't know how to do it check out pseudo-classes
    • There is something weird happening with the background image on desktop screen sizes with use of center/cover. It would be better if you used media-queries and switch between desktop image and mobile image.

    For reference you can check my solution here

    0
  • Anna•130
    @Anq92Posted over 2 years ago

    Hello,

    Nice work with the challenge!

    I have few tips:

    • use headings <h> in your html, it's important for SEO
    • it's good to use rem units also for fonts, margins, etc., because some people might have different setup for font sizes in their browsers and in such case the proportion of some elements will be different, which might not look very good
    • it would be better if you used also relative width for main container, because it doesn't look good on smaller screens when the element's borders hit the edge of the screen
    • check your solution on screens with smaller height to width ratio, because on some there might be an overflow and "cancel order" goes outside the main container area

    You can check my solution of this challenge here

    Good luck with the next challenges!

    0
  • Anna•130
    @Anq92Posted over 2 years ago

    Good job with your first challange!

    I have few tips:

    • use semantic html elements, there always has to be <main> tag and <h> tag in your code => semantic html
    • use "alt" attribute for images, it's important for accessibility, learn about accessibility here
    • use rem units instead of px in your CSS => CSS units

    The most important thing is that your solution is not responsive, so it doesn't work properly on smaller screens, check it in your browser's dev tools. You can achieve a responsive behaviour by using max-width or max-height instead of width and height or with media queries In my case I wanted to keep the ratio of the main element in this challenge, so I used clamp() method The decision how to do it is yours :)

    You can check my solution here

    Good luck with the next challenges!

    0
  • Hardik Rajak•20
    @HardikRajakSubmitted over 2 years ago

    Your feedback is always welcome. Please provide your views on this solution and feel free to point out any mistakes or improvements that I can make. I just had a few doubts, please answer if you know:-

    1. how could I add that background shadow?
    2. how could I make the whole component small to match it the same(I took the same dimensions as instructed).

    NFT-card solution using flexbox

    2
    Anna•130
    @Anq92Posted over 2 years ago

    Hello!

    According to your questions:

    1. For bg shadow you use box-shadow property box-shadow
    2. Resizing elements for smaller screens can be done in a flexible way e.g. with clamp() function. You can resize containers, as well as fonts. clamp method You can also use media-queries to switch between different screen sizes media queries

    Other things:

    • it's good to use semantic elements like <header> <main> <footer> in your html semantic elements

    • it's better to use rem units than px in CSS => rem units

    • you missed hover effects in your solution, use pseudo-classes for it pseudo-classes

    • don't use fixed dimensions like you did for margin-top in .box selector, because it doesn't look good for smaller screens, use flexbox instead and place the element in the center of the screen. guide to flexbox

    Keep good work and good luck with the next challenges!

    Marked as helpful
    1