First Project: "Rubik's Tribute". Feedback please! :P

Code Feedback
1

Hi everyone,

I’m MaNu and here my first tribute page is. I’ve been struggling with accents and aligning the image. However I think it’s mostly done.

I know I’ve still got so much to learn, that’s why I do appreciate your feedback. Please :slight_smile:

http://codepen.io/manukempo/pen/jVzoRy

Thanks in advance,
MaNu

2

Hi @ManuKempo,

  • Is better not use the style attribute:
<h3 style="color:gray"><i>Father's <br><span style="color:white"><span style="color:green">M</span>a<span style="color:red">g</span>i<span style="color:blue">c</span> C<span style="color:orange">u</span>b<span style="color:yellow">e</span></span></i></h3>

Because, you have multiple styles sources (every element on the html with the style attribute ) and that’s make the page really difficult to review.

HTML inspector:

  • unclosed <ul> element:
    I count 6 <ul>
    and only 5 </ul>

Cheers and happy coding :slight_smile:

3

Hi @Diego_Perez,

Thanks for your feedback, and sorry for the delay (I’ve been out for a couple of weeks).

I tried to do everything inline, that’s why the style attribute. However, if I had done it with an external css I would have had a similar problem with the class attribute since I use a different color for every word, wouldn’t I?

Concerning the unclosed ul element. That’s right I didn’t know the nested list should be inside the li element of the list in which it is nested. Thanks a lot! Even I didn’t know about HTML inspectors, that helped me too. Thanks! :wink:

4

http://codepen.io/manukempo/pen/yVEjRZ

5

Hi, that line of code is only an example of the style attribute in your code, the problem is this:

When you use the style atribute I need to check every element (to know if that element has a style rule). For example, if there are 6 h1 elements I need to check the 6 (all of them).

But, when you use an external file I only need to check one rule, for example:

h1 {
 font-size: 35px;
}

Now I know that every h1 has font-size of 35px . Is easier.

You also can use a “css lint” in codepen (analyze CSS):

Your updated web tribute looks good :thumbsup: .

Cheers and happy coding :slight_smile: