Skip to content
OverviewSolutions
7
Comments
3
Jack
@Damuzid

All comments

  • Jack•150
    @DamuzidPosted almost 2 years ago

    Nice solution for this challenge!

    But I would like to advise not randomly use a heading (in your case the h3). Always use a h1 first and after that h2, 3 etc. in ascending order. You should use the h1 only once per page, the others can be used more if needed.

    You should also take a look at semantic HTML (link) code, for example in your code put the <div class="card"> element between <main></main> tags. This combined with the right headings makes your webpage usable for screenreading software and such.

    Hope this was helpfull and happy coding!

    Marked as helpful
    1
  • Joachim van der Pol•60
    @JoachimvdPSubmitted almost 2 years ago

    Challenge number 3 done!

    In this challenge my goal was to use flexbox to create a responsive layout. However, I found that it made more sense to use media queries, because the cut-off point between the desktop and mobile layout was difficult to pinpoint. I am happy with how my solution turned out, but I do wish I could've written the css more concisely. I also wonder if it would be possible to create the layout using just flexbox (or grid), without media queries.

    The most difficult part for me was getting the image right. I was struggling becauce I kept having it overflow and cause unexpected side-effects (I tried using flex-wrap with disastrous consequence). The switch between desktop and mobile images was something I was wholly unaware of even being possible, so that turned out to be a good learning moment.

    Product preview card component challenge

    1
    Jack•150
    @DamuzidPosted almost 2 years ago

    Hi Joachim,

    Take a look at this codepen I made. I made a simple 2 column layout with flexbox that is responsive without the use of a media query. If you use flex-basis with a min-width you can get the desired cut-off point.

    For the image you could use the picture tag in your HTML to change the image at a certain resolution, for example:

    <picture>
  <source srcset="image-product-mobile.jpg" media="(max-width: 600px)" />
  <img class="product-image" src="image-product-desktop.jpg" alt="parfume-product" />
</picture>

    Some other things I saw in your code:

    • I see you used a h3 heading before a h2 heading and no h1 heading. Use a h1 (only one per page) when you are using headings and always use them in order. Headings are used to index your page and by screen reading software to navigate the page.

    • Put your "main" code in your HTML file (in this case the card) between the <main></main> tag and the attribution between the <footer></footer> this will solve your accessibility report error's.

    • Always use the alt attribute when using images, again for better accessibility of your page.

    • You should also use em/rem for your font sizes besides the padding and margins.

    Something that might be interesting is using a full css "reset" (I see your already doing a bit of resetting with box-sizing). Take a look at this reset from Josh Comeau which does alot with just a few lines to get a clean start with every project.

    Happy coding! en succes met de volgende challenge.

    Marked as helpful
    0
  • Moses Ventura•170
    @Moses2308Submitted almost 2 years ago

    I was wondering what was the best approach to styling an element. The method I usually see is to give it a class, and select it in css using the class name. Is this the normal way of doing it?

    I was also wondering if there were any other things I could've done better. I would like to know if there were any practices I didn't use that are recommended.

    Any other tips would be greatly appreciated.

    Static product card using grid

    3
    Jack•150
    @DamuzidPosted almost 2 years ago

    Hey Moses,

    I had the same question as you regarding styling elements when I started coding. I recommend to just use the class selector when styling with CSS. As stated by Bandaru you could use the id but this has some drawbacks. The same class can be used on multiple elements, but you can't do this with id's because they have to be unique.

    If you use the class selector for css than when you're ready to start using JavaScript you can add the id's for use with your Javascript. This makes your code alot more flexible and will not break your Javascript when changing classes when trying new layouts etc.

    Id's and classes can be used together without issues like this:

    <div id="yourid" class="yourclass">

    Hope this helped you! and good luck with your next challenge.

    Marked as helpful
    1