Musashi Tribute Page

So, first project for CodeCamp - I’m an odd man out.

As a working pro that’s been at this since the Desktop Publishing wars, and came to Web Design from the Graphic Design side, I jumped into FreeCodeCamp as a refresher, and to see about rounding out gaps in my personal ”code base“. So I figured I need to do a pretty decent job, fulfill the assignment and show a little good taste in design.

Shout out to the useful Bootstrap reference material at This is in Bootstrap 3, but I straight-up stole a good idea from Bootstrap 4, and built a quick-and-dirty CSS Library of handy spacing classes. Fancy header. Preety peecturz. A bit of digital calligraphy. Banzai.

1 Like

It’s interesting, it’s nice!

That’s very good work. It looks and works great. :sparkles: :+1:

I had a look at your code and I noticed a few things.
You have defined a lot of styles for setting the margins and padding but you don’t seem to be using all these.
Then you are often setting inline styles for the same job?
I would try to avoid using inline styles in future but I suspect it may be to do with overriding BootStrap classes(?)
The reason is for “separation of concerns”.
However for a small project like this it doesn’t really matter.

Nice work. Nice site. A refreshing break from the usual Tribute page layout.

1 Like

Spot on, Johnny.

I noted that I wanted more granular control over spacing than the Bootstrap defaults, and was thinking - tweaking them inline was swiftly becoming a PITA, so whipped up the ad hoc spacing class library - and no, I didn’t use them all. But a useful exercise none the less, since I may reuse them in future projects, and adopt a syntax that is easy to use and extend.

But I also didn’t bother go back and code swap out a bunch of the inline stylings. - i.e. scale of the project.

Sirush, owel – thank you! Appreciate it.

1 Like

Hi @SamuraiArtGuy,


  • Do not use lower levels to decrease heading font size:
<h1 class="white">Miyamoto Musashi</h1>
    <h3 class="white normal zero-spacing">Japan's Greatest Swordsman</h3>

MDN documentation:

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.

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

  • The ‘align’ attribute is no longer valid on the <img> element and should not be used
<img class="img-responsive m-b-5" src="" align="right" alt="The Iconic Musahi">

MDN documentation:


align Deprecated since HTML4.01, obsolete since HTML5


  • Error

Unexpected unknown property “line-spacing”
( maybe you can use: line-height )

body {
  line-spacing: 125%;

MDN documentation:

The line-height CSS property sets the amount of space used for lines, such as in text.

  • Error:

Unexpected unknown property “background-opacity”
( maybe you can use: opacity)

#top_banner {
 background-opacity: 0.3;

MDN documentation:

The property is a shorthand that sets the following properties in a single declaration:

and background-attachment

MDN documentation:

The opacity CSS property specifies the level of transparency of an element, that is, the degree to which the content behind the element is visible.

Cheers and happy coding :slight_smile:


  • Tool used:
    • Codepen’s html inspector
    • Codepen’s css linter