My tribute page, feedback is welcome

My tribute page, feedback is welcome
0.0 0
#1

I finish my first tribute page

What do you think? Feedback welcomed.

Thank you guys,

Luka

#2

Hi @Luka85,

Is better not use the style attribute:

 <h1 class=" text-center "style= "color:black; margin-top:-10px;font-family:arial; font-style:normal;">Tina Maze</h1>
<h3 class="text-center"style="color:black; font-family:arial; font-style:normal">

Because, you have multiple styles sources (That’s make the page more difficult to review.):

  • Every element on the html with the style attribute

MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style

The style global attribute contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes.

  • This code is not correct( an empty, isolated, body element):
<div class="col-xs-12">
     <body style="background-color:grey; margin-top:55px; margin-bottom:20px"
      ></body>

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

Permitted parents: It must be the second element of an <html> element.

HTML inspector:

  • < is not a valid attribute of the <img> element:
 <img class=" img-responsive" ...  </img>

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

Tag omission
Must have a start tag and must not have an end tag.

  • Unclosed <em> element is affecting the rest of the code:
<h3 class="text-center"style="color:black; font-family:arial; font-style:normal">
   <em>"My life is my decision"</h3>
- This code is not correct: 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

How to use Bootstrap with codepen:

Cheers and happy coding :slight_smile:

#3

Thank you @erretres to your help, i really appreciate it…

What do you think now? i corrected my mistakes.

https://codepen.io/LukaK/pen/MJaLxv

Thanks again

#4

Hi @Luka85,

  • is better not use the <style> element, in codepen you can use the CSS tab.
  • Do not use lower levels to decrease heading font size:
<h1 class=" text-center ">Tina Maze</h1>
<h3 class="text-center">
  <em>"My life is my decision"</em></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.html

Cheers and happy coding :slight_smile: