Musashi Tribute Page

Project Feedback
#1

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 w3schools.com. 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.

https://codepen.io/SamuraiArtGuy/full/geRWMM/

1 Like
#2

It’s interesting, it’s nice!

#3

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.

#4

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

1 Like
#5

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
#6

Hi @SamuraiArtGuy,

HTML

  • 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:
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

  • The ‘align’ attribute is no longer valid on the <img> element and should not be used
<img class="img-responsive m-b-5" src="https://www.fantastic-realities.com/projects/codecamp/images/miyamoto-musashi-by-tigerjordan.jpg" align="right" alt="The Iconic Musahi">

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

Attributes

align Deprecated since HTML4.01, obsolete since HTML5

CSS

  • Error

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

body {
...
  line-spacing: 125%;
}

MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

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:
https://developer.mozilla.org/en-US/docs/Web/CSS/background

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

background-clip,
background-color,
background-image,
background-origin,
background-position,
background-repeat,
background-size,
and background-attachment

MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

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:

note:

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