Skip to content
OverviewSolutions
17
Comments
7

Fritz

@fritzadelbertusIndonesia300 points

An enthusiastic first-year college student. Have an immense thirst to learn web development skill

I’m currently learning...

ReactJS and SCSS

Latest solutions

View more solutions

Latest comments

  • Fritz•300
    @fritzadelbertus

    Hello @Aishaakin. First of all, congratulations on finishing this challenge!

    Here are some few suggestion I can give:

    • I think w3schools explanation of media queries is easy to digest. I recommend you to start learning media query from there. You can visit their documentation here

    • I see you haven't use the <picture> tag. The <picture> tag helps you display different image source for different medias. You can see how to implement it here. It will make you easier to apply responsive images.

    I hope it's helpful and happy coding!

  • Fritz•300
    @fritzadelbertus

    Hello @rezajaber. First of all, congratulations on finishing this challenge!

    Here are some few suggestion I can give:

    1. For the hover effect you can add an additional overlay in front of the image and change the opacity during hover. I use a <div> containing the eye icon for the overlay. You can see how I implement the styles here in the /* Hover Effect */ section
    2. The index.html structure is clean. The card content could be wrap in an <article> tag to create a cleaner structure but the current structure is already good.
    3. The layout is good. Although I prefer using flexbox for 1 dimension layout, grid is also a good solution.
    4. There are no 'unusual sightings' in your code. At least in the index.html and styles.css file so it's fine in my opinion.

    I hope it's helpful and happy coding!

    Marked as helpful
  • Fritz•300
    @fritzadelbertus

    Hello @Ripra87. First of all, congratulations on finishing this challenge! Here are some few suggestion I can give:

    • The rounded border problem, to implement better rounded border use units in pixel. Using percentage in border-radius is useful to create ellipse looking element but not recommended to create rounded borders. try changing the border-radius:10% to border-radius:20px, it should solve that problem.

    • I see your css styles haven't implement display: flex or display: grid yet. I recommend you start using them. Margin and padding is useful to create spaces between element but flexbox and grid are powerful tools to create complex layouts.

    I hope it's helpful and happy coding!

    Marked as helpful
  • Fritz•300
    @fritzadelbertus

    Hello @devgobind. First of all, congratulations on finishing this challenge!

    Here are some few suggestion I can give:

    • Using <picture> tag is a better practice in this challenge where the image source change according to the screen width. See this on how to use it.
    • The <h1> tag is used for the main header of the document so I suggest changing the
    <div class="price btm-pad">
       <h1 class="d_price">$149.99</h1>
       <p class="o_price">$169.99</p>
</div>

    to something simpler like this:

    <p class="price">$149.99<span class="o_price">$169.99</span><p>

    I hope it's helpful and happy coding!

    Marked as helpful
  • Fritz•300
    @fritzadelbertus

    Hello @Shun-planet. First of all, congratulations on finishing this challenge!

    Here are some few suggestion I can give:

    • Using <picture> tag is a better practice in this challenge where the image source change according to the screen width.
    • Learn how to use flexbox or grid or both. These two provide simple ways to arrange your elements. Here is a link that will help you understand how to arrange elements properly. After learning it, you can easily apply different arrangements based on the media queries.

    A Complete Guide to Flexbox

    I hope it's helpful and happy coding!

    Marked as helpful
  • Fritz•300
    @fritzadelbertus

    Hello @AbibGuardian50. First of all, congratulations on finishing this challenge!

    I'm also a newbie but here are some suggestion I can give:

    • Using <picture> tag is a better practice in this challenge where the image source change according to the screen width.
    • I recommend using semantic HTML such as <main> to wrap up the main content.
    • The spacing in PERFUME can be easily modified in css using the letter-spacing property

    To get a better grasp in creating layouts and position items I recommend understanding the box model (padding & margins) as well as how to use flexbox. W3Schools also provide clear documentation to learn basic CSS

    I hope it's helpful and happy coding!

    Marked as helpful
View more comments