Skip to content
OverviewSolutions
2
Comments
9
Taner
@tanereren

All comments

  • Maxsuel Silva•80
    @maaxgSubmitted almost 2 years ago
    • I felt confused about the responsivity of each element and the component in general, there is any way to do it better than media queries?
    • There any CSS best practices that I could follow?

    Product preview card component

    2
    Taner•190
    @tanererenPosted almost 2 years ago

    Hey, well done on completing the project!

    The easiest way to make the img responsive would be to use the <picture> HTML element - it's a really useful tool that allows you to have multiple images that changes with the viewport width. It saves on writing loads of CSS media-queries for the image!

    <picture>
  <source media="(min-width:750px)" srcset="images/image-product-mobile.jpg">

  <img src="images/image-product-desktop.jpg" alt="">
</picture>

    The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute).

    The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags match

    You can find more information: here - w3schools and here - MDN

    Let me know how you get on!

    Marked as helpful
    1
  • Simon•20
    @simonmatt89Submitted almost 2 years ago

    I found it very difficult to create a mobile version of this site. I have also noticed that the live site is displaying a 404 error for the images.

    I'm still wrapping my head around github and uploading files.

    Product Preview Card

    2
    Taner•190
    @tanererenPosted almost 2 years ago

    Hey! Well done on completing the project

    I noticed that you forgot to upload the images onto github, that along with editing the links may solve the issue - usually the image src will be written as: images/image-product-desktop.jpg - with images being the folder name

    Please check out this really useful free course by Kevin Powell - Conquering Responsive Layouts - this will help with creating mobile friendly layouts

    Please let me know how you get on or if you need anymore help!

    Marked as helpful
    1
  • Taner•190
    @tanererenPosted almost 2 years ago

    Hey, well done on completing the project!

    Your CSS looks pretty good to me. An improvement you could make is incorporating CSS variables into your code. With complex websites, you could have a lot of repeated values - CSS variables make it much easier to change all of them quickly. Using them is considered best practice.

    I also noticed that you repeat the code below quite a few times, you could instead create custom class, call it flex and add it to your HTML with the same CSS

    display: flex;
justify-content: center;
align-items: center;
    0
  • Stathis Renieris•30
    @Stathis-RenierisSubmitted almost 2 years ago

    What is the proper way of switching images when media queries are activated when I use only html and CSS? How do you structure your CSS file for better readability and performance? Is it ok to use img { content: url() } to change an image based on media queries?

    Responsive product card component (only html and CSS)

    1
    Taner•190
    @tanererenPosted almost 2 years ago

    Hey, well done on completing the project!

    The easiest way to change the picture would be to use the <picture> HTML element - it's a really useful tool that allows you to have multiple images that changes with the viewport width. It saves on writing loads of CSS media-queries for the image!

    <picture>
  <source media="(min-width:750px)" srcset="images/image-product-mobile.jpg">

  <img src="images/image-product-desktop.jpg" alt="">
</picture>

    The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute).

    The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags match

    You can find more information: here - w3schools and here - MDN

    Marked as helpful
    2
  • Tumelo Mosomane•60
    @Tumelo4Submitted about 2 years ago

    How can i change image without using javascript when it comes to responsive design? I tried to use background-image and it wan't giving me desired result.

    Product Preview Card

    2
    Taner•190
    @tanererenPosted about 2 years ago

    Hey, well done on completing the project!

    The easiest way to change the picture would be to use the <picture> HTML element - it's a really useful tool that allows you to have multiple images that changes with the viewport width. It saves on writing loads of CSS media-queries for the image!

    <picture>
  <source media="(min-width:750px)" srcset="images/image-product-mobile.jpg">

  <img src="images/image-product-desktop.jpg" alt="">
</picture>

    The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute).

    The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags match

    You can find more information: here - w3schools and here - MDN

    Let me know how you get on!

    0
  • Taner•190
    @tanererenPosted about 2 years ago

    The Fetch API call was introduced with ES6 in 2015. It's currently the most clean and easiest to use. It's native to the browser (doesn't need to be loaded from an external source)

    There are other methods of API callbacks though, for example:

    • XMLHttpRequest - which is the oldest one and the syntax isn't that great
    • JQuery's .ajax method - JQuery is a JS library that was very popular and helped manipulate the DOM with less code

    Other promise based Ajax libraries:

    • Qwest
    • SuperAgent
    • Axios
    Marked as helpful
    1
  • Cristina•360
    @cr1deg0Submitted about 2 years ago

    Hi,

    Another great challenge, I enjoyed working on it to practice API integration and CSS grid. I decided to add a theme toggler to the design and also a typewriting effect to the text, I hope you like it. Feedback welcome!

    Cheers

    Advice generator - CSS Grid, Vanilla JS

    1
    Taner•190
    @tanererenPosted about 2 years ago

    Hey!

    An improvement that you can make is your .theme-toggler button has uneven padding which makes clicking on it quite awkward

    .theme-toggler {
    border: none;
    background-color: inherit;
    color: var(--primary-300);
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 700;
    padding: 2em 1.5em 0 0; <-- change this to 2em only
    cursor: pointer;

    Also when you click the dice button the words aren't being rendered correctly - they're illegible so you may want to check the function - the typewriter effect is good idea though!

    Let me know how you get on

    Marked as helpful
    0
  • Taner•190
    @tanererenPosted about 2 years ago

    Hey, the project looks great - well done!

    In order to optimise the image and make it mobile responsive the first step would be to use the <picture> element - it's a really useful tool that allows you to have multiple images that changes with the viewport width. It saves on writing loads of CSS media-queries for the image!

    You would replace your <div class="card__image"></div> with:

    <picture>
  <source media="(min-width:750px)" srcset="images/image-product-mobile.jpg">

  <img src="images/image-product-desktop.jpg" alt="">
</picture>

    The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute).

    The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags match

    Let me know how you get on!

    Marked as helpful
    0
  • Taner•190
    @tanererenPosted about 2 years ago

    Hey! The project looks great, well done

    If you remove the display: block from img tag the elements will line up again and if you also remove the margin-left: 80px they'll be centered

    img{
    max-width: 100%;
    display: block; <-- REMOVE THIS!
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.cart_icon {
    margin-left: 80px; <-- REMOVE THIS!
    padding-top: 0px;
}

    The default value is display: inline, display: block will make it so that the element starts on a new line and take up the whole width - not what we want here

    Add padding to the button after too!

    Happy coding! :)

    Marked as helpful
    0