Skip to content
Submitted about 3 years ago

Mobile first site using SASS and Parcel

Nikolay Nikolaev•20
@N-Nikolaev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

During this challenge I came across a problem:

What do I do when there is no clear "header" to use for the H1 tag.

I considered creating a hidden H1 tag containing a header that would wrap the content of the component into one cohesive bundle, but after a bit of research I found out it wasn't really good practice to do so. Instead I slapped the H1 tag onto one of the "sub-headings" and called it a day.

My question is, what should I do in this kind of situation? Do I search for the closest approximation of a page header, do I create a hidden header to tie everything together, or is there something I missed?

Community feedback

  • darryncodes•6,390
    @darryncodesPosted about 3 years ago

    Hi Nikolay.

    Love the solution, nice work.

    I'm just about to attempt this challenge and have thought about the lack of an obvious H1. I decided that this type of the component will form one small part of a full website and the site would contain the H1 somewhere else. So I wouldn't worry too much about it. Good that you're mindful of it though.

    A few quick observations for me:

    • you could consider cursor: pointer; on your .btn hover state
    • using !important is considered bad practice, I don't think you actually need it in this instance

    Happy coding!

    0
    Nikolay Nikolaev•20
    @N-NikolaevPosted about 3 years ago

    @darryncodes

    Thank you very much for your insight with regards to my question. I do suppose this might be more of a design-centric question as opposed to developer one, and would probably be something that should be brought up with the designer if it ever comes to that.

    As for your observations:

    • Forgetting about the pointer change upon hover was an oversight on my part and I'm thankful that you pointed it out.
    • The use of the "!important" property was something I decided upon when I was considering whether or not the btn class would be considered a utility class and thus have priority over other classes. I often saw this done in Bootstrap, but I do agree that it's best not to use it when possible.

    Thank you for all of your input, it is greatly appreciated.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord