MST3k Tribute Page - Feedback Welcome!

MST3k Tribute Page - Feedback Welcome!
0

#1

Wow I’m nervous lol. So I’ve been working on this project off and on for a while now, trying to refine the design and push myself to make something clean, fun, and most importantly functional :laughing:

A few things for those who are interested:

1.) This is not built with Bootstrap. Mainly because I haven’t really learned it yet and I’m more comfortable doing things from scratch. I used a combo of fluid responsiveness, media queries, and I got to mess with flexbox for the first time (It’s a lot of fun to use btw! You can see it in action in the Episodes/Cast List area) That being said, if you notice anything wonky with the layout in whatever device you’re using please let me know! And if you can note your resolution size and what browser you’re using too.

2.) I used a tiny bit of jQuery, for the smoother slide animation on the accordion menu, noting super fancy but I liked how it turned out. I would LOVE to rework that part at some point so an opened menu closes when you click on another one. As it stands you have to close a menu individually.

3.) My code indentation is probably a mess but I tried to comment where helpful to myself and I’m trying to build a habit of organizing my css a certain way. Basically stacking style attributes in a particular order to help me locate things easier.

Any feedback on functionality, the design itself, code structure, if you want to shout quotes at me, all that good stuff is more than welcome.


#2

Hi @dlyons,

  • Do not use lower levels to decrease heading font size:
<h1 id="title">Mystery Science Theater 3000</h1>
  <h3 id="tagline">"That cowtown puppet show"</h3>

MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

Do not use lower levels to decrease heading font size: use the CSS font-size property instead.Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

http://w3c.github.io/html/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements

h2–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the §4.13 Common idioms without dedicated elements section of the specification.

Common Idioms
https://www.w3.org/TR/html5/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements


Cheers and happy coding :slight_smile:


#3

You know I’ve read it’s recommended not to use them together not too long ago, definitely an old habit I have to break :grin:
Thanks for the input @erretres, I’ll change it asap!


#4

That’s looks awesome @dlyons! Nice clear text, beautiful colours and fluid navigation. Well done!


#5

Thanks @Soupedenuit! I was a little worried about the white font color on the semi transparent background (especially with the stars right behind it) getting lost or muddled. But I’m super glad it’s reading clear.