Skip to content
OverviewSolutions
23
Comments
50

Thomas Hertog

@thomashertog915 points

When graduated in 2011 I started as a software engineer Java. Always been passionate about front-end and currently shifting into a more front-end oriented role.

I’m currently learning...

NodeJS/NPM/Webpack but also accessibility

Latest solutions

View more solutions

Latest comments

  • Thomas Hertog•915
    @thomashertog

    Almost there!

    Without looking at the code (just yet) A few points you can improve upon:

    • the questions do get different styling when hovered (but not on focus) however they aren't clickable
    • the background-color at the bottom is missing making the card indistinguishable from the background

    When looking at your code:

    • there's no semantics in your HTML (yes, you have a section but it's not connected to a heading via aria-labelledby making it just the same as a <div>
    • you've used ARIA to ensure there's accessible interactivity but this is not enough (as said before)
    • it feels weird that you have elements that clearly indicate you're listing things, but you're not using a list element
    • the toggle buttons are inaccessible because they don't have an accessible value

    you may want to look up the <details> and <summary> elements to get a feel on how the progressive disclosure thing (the accordion) should work

  • Vojtěch Kotěra•90
    @Kotis541
    What are you most proud of, and what would you do differently next time?

    To finally make it responsive

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

    To make img look nice :D

    Responsive product page - HTLML, CSS

    1
    Thomas Hertog•915
    @thomashertog

    There is still a horizontal scrollbar available within a viewport width of 650-750px so not completely responsive yet.

    I think you've gone overkill with semantics in your HTML. the price and category doesn't feel like heading information to me. Consider the heading levels to be relevant when creating a table of contents. In this example that would be a bit odd.

    1. Gabrielle Essence Eau De Parfum
1.1. $149.99
1.1.1. PERFUME

    Also, the use of del seems superfluous as it is not necessarily information that is being removed from the document (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/del)

    Regarding your CSS:

    • you seem to be using em and rem very inconsistently, be aware of the differences between the two, as it may look like only a little nuance, but it can have very big consequences
    • your container has a fixed height (in px even), be aware that when content changes, this may cause issues with overflow. Therefor it's better to use min-height instead
    • you could look into CSS custom properties to make your CSS code more readable and maintainable
  • MoSu1248•180
    @MoSu1248
    What are you most proud of, and what would you do differently next time?
    • I was able to finish the task within a good amount of time.
    What challenges did you encounter, and how did you overcome them?

    -understanding query selectors

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

    -making sure the functionality of JavaScript is written well . -making sure the code is legible.

    Article-Preview-Card

    2
    Thomas Hertog•915
    @thomashertog

    There are some weird things going on with the responsiveness at certain widths where there is a horizontal scrollbar available (probably has something to do with the overlay of the sharing buttons)

    You're lacking landmarks, don't respect heading order (you start off with an h3 and don't even have an h1, you're not including alt texts for the icons which makes this thing completely inaccessible. You're also including the share menu twice which feels unnecessary because of duplicate information (and you notice yourself that you have to do duplicate things when adding the JS code)

    You're working with height in your CSS. Be aware that this is a bad practice because if your content changes or gets translated and needs a different height you already have it with fixed dimensions which can cause problems with overflow. Therefor it's better to work with min-height

    I also feel you've included a lot of code in your media query which can be perfectly outside of the media query as well

  • Piyush Rajput•270
    @Piyush-Rajput7
    What are you most proud of, and what would you do differently next time?

    I'm most proud of completing the layout to closely match the original design for both mobile and desktop views. This challenge helped reinforce my understanding of Flexbox and Grid, especially in aligning cards responsively.

    If I were to do this again, I would start by planning the layout more thoroughly using a wireframe or box model before writing code. I would also use utility classes and CSS variables more consistently for spacing and colors to make the code more scalable and maintainable.

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

    One challenge I faced was making sure all four cards had equal widths and heights across different screen sizes, especially in the mobile view. Initially, they appeared inconsistent due to padding and content length. I solved this by:

    Setting a consistent max-width for all cards

    Using min-height and Flexbox to align the content inside each card

    Applying box-sizing: border-box to ensure padding didn’t affect sizing

    Another issue was vertically centering the entire layout on the page, which I fixed using Flexbox on the container with justify-content and align-items set to center.

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

    I'd appreciate feedback on the following:

    Are there better or more modern ways to structure the layout than what I used?

    Is my approach to responsive design optimal, or is there a cleaner way to write the media queries?

    Do my styles follow good accessibility and semantic HTML practices?

    Any advice on improving maintainability, readability, or best practices for layout structuring would be super helpful!

    Four-card-section

    #pure-css#accessibility
    2
    Thomas Hertog•915
    @thomashertog

    There's little differences here and there with the design provided (but that's me being a nitwit)

    I like your HTML code, it's clean and accessible, however

    • I feel it's a bit overkill to use article elements for the cards (article elements are mostly used for things that deserve their own page and I don't see that happening here).
    • The alt texts may also be improved upon. They may not be relevant as the icons are purely decorative, but if you do include alt texts make them a bit more descriptive. Try to think how you would read/describe them yourself if you were to explain what is on the page to somebody who's not seeing the page themselves (whether or not because they have vision impairments; e.g. you're sitting in a car and the driver wants to know what the page looks like)

    For CSS

    • you can improve maintainability/robustness by using logical properties (e.g. inline-size instead of width)
    • I'd try to minimize even further the use of px
    • for better maintainability, I'd get rid of the nth-child(n) and replace them with a class (it's more readable that way and doesn't rely on the order of your HTML elements); you can also refactor this into a single declaration and just switch the border-color (maybe even by using the power of custom properties)
    • for better readability, I'd look into grid named areas for the desktop view
    • I prefer having my media queries inline with the part they're affecting (and since it's possible to nest media queries now, there's no reason for me to put all of the media query code at the end)
    Marked as helpful
  • MoSu1248•180
    @MoSu1248
    What are you most proud of, and what would you do differently next time?

    -Able to do it within a good amount of time

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

    -figuring out if should use grid or flexbox for the layout of the cards

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

    -making sure everything looks visually good as well as the code is legible

    four-card-feature-section

    1
    Thomas Hertog•915
    @thomashertog

    It feels a bit weird that you used flexbox yet the solution is not really responsive (because you still used fixed widths as well)

    Things you can do to improve:

    • one should only use a single h1 on their page
    • think of h1-h6 as the elements you use for a document outline (like a table of contents). it wouldn't make sense to include 1. and then go straight to 1.1.1.1.1.1. as you are using h6 for the card headers
    • you're not using landmarks to ensure content is easily scannable
    • be aware that using height may cause problems if your content is more extensive and takes up more space, you may get into overflow issues, it's better to use min-height instead (or even min-block-size if you're going to use logical properties)
    • try to look for more reuse in your CSS code as well (e.g. you have supervisor-container, team-container, karma-container and calculator-container using the same border properties, you could put them all in one style rule (even making better use of custom properties by adding --border-color and then switch that for each of the separate containers)
    • you've shown this design is implementable with flexbox, though i feel grid is a better match (at least for the overall page layout with the cards)
  • Thomas Hertog•915
    @thomashertog

    solution is not compliant with the given design. this challenge is part of the accessibility learning path and i feel there's a lot of things that can be improved on that part as well e.g. no <div> for doing the rating, including landmarks, ...

View more comments