Tribute Page (first project in FCC course)

Web Development Bootcamp
1

Hey everyone I just wanted to share the “Tribute Page” I did for the first project: https://codepen.io/jjplant/full/yLXgagj

This page is meant to demo some basic HTML/HTML5 and plain CSS which I believe we just covered in the course up to now.

If you’re wondering where this project is from, go here for more info and start making your own! https://www.freecodecamp.org/learn/responsive-web-design/#responsive-web-design-projects

9 Likes
2

Hey @jayj …, your work was awesome. I really loved your work, as we all are beginners but you have done it with perfection. Great…!

1 Like
5

How did you get your Codepen link to display as a text link? Mine open in Pen windows.
Thanks.

6

Thanks Sachin! I have a creative background and some experience with programming but I still very much consider myself a beginner with writing raw HTML/CSS. I haven’t had much exposure to front end web stuff until now, so I feel this course is a good opportunity to focus on fundamentals.

7

Nice work David!

To remove the codepen preview, I used a markdown link like so:

[link text](http://your.url)

1 Like
8

Great job, love it! I like the font choice and the subtle gradient on the background.

1 Like
9

Great work and design! I was wondering if you might explain the purpose behind using h5#quote and h2#schedule-header in your CSS. Would using #quote in that particular h5 tag and #schedule-header in that h2 tag accomplish the same thing? Is it more of a code style thing? Thanks & cheers!

1 Like
10

Hi Mo thanks for your kind words! You are right that in this example a h2#element would achieve the same visual effect as a #element selector. However, in this case it made sense to be more specific as it goes in line with how I perceive the underlying structure of the HTML doc. It’s important for h1…h5 tags which are processed by screen readers, indexers, used to generate a TOC, etc.

All I’m really saying is:

/* 
This schedule header is pretty important so I made it an h2 tag.
The font size is inherited from h2 which is large enough as is, 
  and the default styling of h2 mostly works but is tweaked a bit 
  in this instance.
*/
h2#schedule-header {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}
/*
The opening quote is also important, 
  but it's not quite part of the main body of text so it can
  still work as some kind of header / sub title / caption.
h5 isn't commonly used so I can override more styling here 
  but still distinguish the element from the unwashed plebian
  #quote without a header. Ugh, how uncouth!
*/
h5#quote {
    font-weight: 200;
    font-size: 1.1em;
    font-style: italic;
    max-width: 75%;
}

If I were to put them outside of the headers they wouldn’t seem as important… which is weird to me because they are styled with large text, bold, uppercased etc. (This is all just my reasoning though, not a hard and fast rule for web dev or design)

Additionally, with CSS I try to be as specific as possible so I don’t get any unintentional side effects. The scenario is bound to happen when importing libs (such as the JS test suite used by FCC) or nesting the page in other apps, frames, etc. There are some debates on whether specificity affects performance but in reality the difference is negligible - I’d prefer a page that loads slower but is correct vs. a speed loader that looks wonky.

2 Likes
11

Thanks for the thoughtful explanation! I can definitely see why being specific would help here, as I’m finding it difficult to keep track of the various style rules and priority or inheritance.

Maybe need to look and see if there’s a CSS debugger that shows which styles are getting preference in particular code. Will also be interesting too to learn more about how screen readers process our code.

1 Like