Tribute Page Review :)

Code Feedback
1

Finally I completed my first project in FreeCodeCamp. It is a tribute page for William Burroughs.
I would really appreciate your feedback and any kind of comments.

Here is the link:
http://codepen.io/YolandaKok/full/jALbBB/

2

OK that’s amazingly good … and not just because my icon was drawn off-center after seeing a Burroughs photo. So I’m going to skip over the visuals and just look at the CSS code.

In General:

Make the property indentation more consistent

Bad

.amazing {
  padding: 0;
}

.awesome {
      padding: 0;
}

Good

.amazing {
  padding: 0;
}

.awesome {
  padding: 0;
}

Leave a space between the selector name and the opening bracket.

  • This will make the selector easier to read.

Bad

body{
  ...
}

Good

body {
  ...
}

The quote class is being used three times. It looks like they are doing the same thing?

Bad

    .quote2{
      font-family: 'Lobster', cursive;
      letter-spacing: 2px;
    }

    .quote1{
      font-family: 'Lobster', cursive;
      letter-spacing: 2px;
    }

    .quote3{
      font-family: 'Lobster', cursive;
      letter-spacing: 2px;
    }

Good

.quote {
  font-family: 'Lobster', cursive;
  letter-spacing: 2px;
}

Be careful with short variable names - they can be useful when you create the variable and use it in a few lines (in Geek terms we would say the variable had a small scope) but I’m not sure this is the case with the ‘n’ class. It is going to be confusing searching for ‘n’ in the code if you needed to change it or see what the effects are. I would suggest a longer, more searchable, name.

Bad

.n {
  opacity: 0;
}

Good

.describe-me {
  opacity: 0;
}

Also, a bit worried about the usage of important! - there is a time and a place for it but that time and place should be as little as possible. I could be entirely wrong, but sometimes their usage is a suggestion that there is an unmet underlying problem.

.row {
   padding: 0 !important;     <== is it really necessary?
   margin: 0 !important;
}

Anyway, excellent … and much better than my Tribute … well done.

3

Thank you for the feedback and your suggestions, which are really helpful :blush:. I’ll change some selectors names and organise my code better in the next project.