Johnny Cash - Tribute Page

One of my dad’s favorite artists was Johnny Cash; this page was created in honor of my dad.

Johnny Cash is known as the Man in Black, so I chose to stay with a somber, gray/black/white color scheme.

I originally completed the Tribute Page in October 2017. That one was created with Bootstrap, did not follow any sort of best practice for the CSS, and did not include semantic HTML, just a bunch of divs.

For this redesigned version, I decided to work with Flexbox for the first time and… am attempting to implement BEM for the first time, and… am striving to properly use semantic HTML.

  • My implementation of Flexbox works, but I’m real sure it’s not super clean. (The use of ids is for the benefit of the FCC tests, with the exception of #cite which is used intentionally.)
  • Likewise, I’m sure the BEM can be refined.
  • Fingers crossed that the semantic HTML is well done.

Also - I couldn’t figure out how to get the WebAIM tool to work with CodePen, so I’ve been unable to analyze the page from that perspective.

I welcome big corrections and little tweaks. Thank you! --Janice

https://codepen.io/ConnectExtend/pen/eVNjXw

2 Likes

@ConnectExtend I love the design and layout of this tribute.

Some comments:

  1. I was wondering if you found this class_naming--convention anywhere else. It seems to me that it’s very much universally agreed to use only single dashes between words in CSS class names.
  2. By using px for .tribute's width, you made it non-mobile-friendly. I think you can use vw as you did with the .wrapper and add a max-width in pixels.
  3. You taught me a new set of HTML elements <dl>, <dd> & <dt>. Are these somehow preferred to <ul> & <li> elements for this kind of use?
1 Like

Hi Janice. I just started coding, so I can’t comment on any topics you mention.
Visually though, I really like how the page looks. The box with a few lines from his song is a nice touch.
Only thing I see is that the page is not completely responsive
(for example if I minimise my window below 550px). Don’t know if that was your intention. Also, if you want people to find you consider adding a link to one of your social media pages when you mention that you wrote and coded it.

I would definitely consider this project a success!

1 Like

Hey Yossi, Thanks for the feedback.

Regarding #2: I definitely struggle with fully understanding responsive images (mobile-friendly) and media_queries.
Pinned to my board is a list of “items-to-improve/research further” for the Tribute Page; one of the bullet points is "Make more responsive and add media_queries"
I’ll definitely try the vw and max-width: px you suggested.

Regarding #3:
I see the “dateline” as a type of index. IOW, a sequential arrangement of material, especially in alphabetical or numerical order. I didn’t want to place a bullet point in front of each year, so I could have styled with <list-style:none>.
However, I’m trying to be aware of accessibility and some have stated that a few of the screen-readers stop announcing list items when list-style:none is applied.
So the <dl> element became a workable option, but it might be wrong. Note to self: add this to “items-to-improve/research further”

Regarding #1:
Since I know that styling with raw html elements is not best practice and assigning classes is best practice, I looked and asked around.
There are a few methodologies for writing code that is easily readable, maintainable and reusable.
I’m following the BEM (Block, Element and Modifier) methodology. BEM can be used throughout full-stack webdev.
It uses 2 underscores and, when applicable, 2 hyphens. I may not be using it 100% correctly YET.

Here are some key links:
BEM Methodology and Community
BEM Naming Structure
BEM 101 article from CSS-Tricks
Medium article - CSS Naming Conventions that Will Save You Hours of Debugging
HTH.

Thanks again for taking a look at my Tribute Page.
– Janice

1 Like

Hi @Hlupi, Thanks for your kind words.

I absolutely struggle with fully understanding responsive images (mobile-friendly) and media_queries.
I keep working at it. :blush:

I feel like such a CodeNewbie and am shy to widely share my work. This is probably silly of me.
So I’ll take you up on your suggestion and add Twitter link.

Wishing you all the best in your coding journey!
– Janice

@ConnectExtend Excellent work here! :fireworks: I agree with @yoizfefisch and @Hlupi about your design. Also, great work with using BEM! Here are some thoughts for consideration:

  • CodePen Accessibility Checking:

    Here’s the CodePen documentation I use for checking CodePen accessibility. It’s not as nice, nor as complete as the WebAIM tool, but it catches the major issues:

    https://blog.codepen.io/2017/11/08/check-accessibility-pens/

    There are no accessibility errors when I add this to your project. :smile:

  • Main Element: If you use the main element instead of <div class="wrapper" id="main">, you can gain an interesting accessibility benefit, as mentioned in the Jump Straight to the Content Using the main Element challenge:

    The main tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you’ve ever seen a “Jump to Main Content” link at the top of a page, using a main tag automatically gives assistive devices that functionality.

    Also, take a look at the structure of Examples 40 and 41 in the W3C Main Element documentation. I think that shows a really solid way of writing the HTML markup.

  • cite ID selector: Why did you need to style the #cite id? The following seems to work for me in Firefox while removing the styles for #cite:

    .tribute__blockquote--cite {
      display: inline-flex;
      font-family: "Lato", sans-serif;
      color: #4a4848;
      font-style: italic;
    }
    
  • Two Header Sections: It looks like you have two header sections within one article section. Even though it passes HTML validation, it seems like a screen reader might have trouble determining which of those is the actual header for that article and that might be confusing to the person using the screen reader. This Stack Overflow question explains this a little as well as why one might not want to have two header elements at the same level.

  • Responsiveness: I think it’s best to approach responsive web design from a mobile-first approach. To me, and this is certainly not a comprehensive view of mobile-first methodology, I look at mobile-first design by:

    1. First, I create my site to look and behave correctly in a 320px viewport.

    2. Once I know it looks correct in that smaller viewport width, I’ll widen it to 768px to see how it looks on tablet-sized viewports.

    3. When that looks and acts correctly, usually after adding a media query like (@media only screen and (min-width: 768px)) and corresponding styles, I’ll widen the viewport to 1024px (and sometimes, depending on the project, to 2560px) to make sure it’s working in larger viewports.

    I personally find this approach to design much more intuitive and it helps me avoid difficult styling issues like things not collapsing and centering correctly on small viewports, etc…

    I was able to make your site responsive, but I had to change the various widths you have throughout the code, as @yoizfefisch mentions. If I change your width property for the tribute, tribute__timeline--story, and tribute__blockquote classes to max-width and add width: 100%; to the tribute class, the result looks like this:

    Screenshot 320px width

    It’s not perfect, but it’s a start. Here’s some more about mobile-first deisgn in case you’re curious and want to dig deeper.

Overall, this is really well done! I look forward to seeing your future projects. :sunny:

2 Likes

Janice,

I looked into BEM and it’s really interesting. I didn’t know about CSS methodologies at all and was stuck on a basic structure and naming convention. I could reallly relate to some of the issues BEM is trying to solve.

BTW, if you didn’t realize I am also a total newbie just trying to learn from everyone. You taught me a lot.

Thanks. Yossi

1 Like

Thanks for taking the time to experiment with the code and write-up details!
CAN’T WAIT to dig deeper into all this goodness! :dizzy:

BTW, did you share your Tribute page?

1 Like

@ConnectExtend I’m happy to help. :smile: Here’s my project: A Tribute to Raccoons - Feedback Requested.

1 Like

Agreed! I’m also learning a lot from the generous feedback.

Off the top of my head, here’s the start of a list of things to keep in mind when creating a webpage:

  • semantic HTML
  • accessibility
  • clean, maintainable code
  • version control
  • responsive design
  • compelling content
  • font choices
  • color choices
  • positioning of elements
  • interest points, like animation and interactivity

What else needs to be added to this list?!?!?!


Just thought of another:

  • separation of concerns (just say no to Inline Styling)
2 Likes

Oh, the raccoon tribute is yours!!!

These rascals steal all the sunflower seeds from my backyard feeders almost every night!

Okay, later today, I’ll take a look. :smile:

1 Like

@ConnectExtend I think that list covers most, if not all of it. Interestingly, I’ve noticed that there tends to be a few ways to implement each of those points. Some say one way is the best, others say another way. It can get complicated at times. :books:

1 Like