Skip to content
OverviewSolutions
8
Comments
7

Jasper

@jaspervo91130 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Jasper•130
    @jaspervo91Posted 3 months ago

    Hi Aj,

    I need to leave some feedback on your solution to continue a learning path. Know that I am aware that the commit was 3 years ago.

    The code is well-structured and readable, but could be improved by including more semantic HTML. For the quotations the blockquote element could be used.

    Greetings, Jasper

    0
  • Jasper•130
    @jaspervo91Posted 3 months ago

    The solution web page is missing.

    0
  • P
    ComputerEnjoyer•160
    @ComputerEnjoyerSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    Took me a while to figure out how to handle the change in grid layout and to render the correct image depending on the viewport width. I was initially trying with srcset inside the img, but ended up needing to use instead.

    What specific areas of your project would you like help with?

    I would have preferred to solve this with grid-auto-columns/rows, but I ended up having issues with the image sizing, where the image would just be way too big.

    I wonder if there is an elegant way to use grid-auto-columns/rows or if grid-template-columns/rows is just the way to go when managing full-bleed vs padded content.

    Product Preview Card HTML/CSS

    1
    Jasper•130
    @jaspervo91Posted 3 months ago

    Hi ComputerEnjoyer,

    It's possible to achieve the fifty-fifty layout pattern without a media query using flexbox or CSS grid.

    The Fifty-Fifty Split and Overflow

    Also I’m curious why the hover state is wrapped in a media query.

    Greetings, Jasper

    Marked as helpful
    1
  • Jasper•130
    @jaspervo91Posted 3 months ago

    Hi EnzoCarvalho,

    Your code includes multiple <table> elements. Try using table rows defined with <tr> elements instead.

    For example:

    <table>
  <tr>
    <th>Calories</th>
    <td>277kcal</td>
  </tr>
  <tr>
    <th>Carbs</th>
    <td>0g</td>
  </tr>
  <tr>
    <th>Protein</th>
    <td>20g</td>
  </tr>
  <tr>
    <th>Fat</th>
    <td>22g</td>
  </tr>
</table>

    You can learn more about the Table element on MDN Web Docs.

    0
  • P
    Erika Peterson•90
    @erika-codesSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of being able to look things up when I do not know how to do something.

    What challenges did you encounter, and how did you overcome them?

    The challenge I encountered was centering the top info and the unordered list. I overcame those challenges by searching online and playing around with the code.

    What specific areas of your project would you like help with?

    The specific area of my project that I would like help with is, I am not sure what I am doing wrong/correct, so any help and advice is appreciated.

    Social links profile using HTML/CSS

    1
    Jasper•130
    @jaspervo91Posted 7 months ago

    Neat code Erika!

    Why did you choose to make the <li> element look like a button instead of the <a> element?

    0
  • Jasper•130
    @jaspervo91Posted 7 months ago

    Hi Claudia,

    Your solution looks good on a range of screen sizes!

    Are you using heading elements to resize text? Try to use the CSS font-size property instead. Also avoid skipping heading levels.

    See Heading elements usage notes on MDN Web Docs.

    0
View more comments