Tribute Page - Fransisco De Goya

Code Feedback
1

Hello there, i’ve just finished the first version of my tribute page and i’d like to be provided with some feedback. First of all, i have to say that i really enjoyed the whole process ,even the struggling at times and i am looking forward to improve my draft further and further.

All i did is play with the div selectors, positioning and centering and displaying. Although i believe it’s not so responsive and looks an amateur work i’m somehow satisfied with the results. It’s a bit sloppy and i accept critisism and advice on how to fix my sloppy style of writing code.

Only thing is, i really dont know why the 3rd TD in the table doesn’t align vertical with the others, i’ve played with it a bit and it only changes when i put on more text.What’s the way to prevent it from disaligning no matter how much text i add?

LINK: http://codepen.io/Getawitcha/pen/ZpGVQL

2

Hi
This code belongs to the CSS tab (not js):

h3{
  font-family: 'Raleway';
 
}
h4{
  font-size:20px;
  background-color: #780707;
  color:white;
  padding: 10px 0px 10px 0px;
  display: inline-block;
}

Errors:

<!-- empty </a>  -->
<h1 class="title">Fransisco De Goya</a></h1>

...

<!-- The <p> element cannot be a child of the <ul> element. -->
<UL>
 <li>1777</li>
 <p>Goya began to establish a reputation as a portrait artist, winning commissions from many in royal circles. Works, such as "The Duke and Duchess of Osuna and their Children",illustrate Goya's eye for 
<li>1779</li>
 <p>He first painted tapestry cartoons, which were artworks that served as models for woven tapestries, for a factory in Madrid. These works featured scenes from everyday life, such as "The Pottery Vendor".
Goya wins an appointment as a painter to the royal court. He continued to rise in status, receiving admission into the Royal Academy of San Fernando the following year.</p>
...
<!-- The <div> element cannot be a child of the <ul> element.-->

<Ul id="dates">
 <div class="fact">NAME:</div>
<li> <h5>Francisco De Goya Lucientes</h5></li>
                          
<div class="fact">
  <h4>OCCUPATION:</h4>
</div>
                          
 <li>
   <h5>Painter, Illustrator</h5>
  </li>
 <div class="fact">
   <h4>BIRTH DATE:</h4>
 </div>

Cheers and happy coding :slight_smile:

3

It’s a nice design, colours and layout looks well thought out.

I’d suggest that you don’t use tables for layout - it’s semantically incorrect. You could either a lot spend time writing your own css styles for this, or use Bootstrap like we were introduced to, which gives you a really convenient grid system. This will help you with making the page responsive too.

4

Thank you for your reply and apologies for my late response.

I do understand that LI’s are childen of UL’s but you say that the <p> is not supposed to be there, then what should i replace it with? I need some sort of text in between the <li> 's . I’ve tried closing the<UL> and then put the <p> but it didnt solve the problem.

5

Hi
Your code is like this:

<Ul>                     

<li> <!-- in between --></li>                 

<p></p>    <!-- outside <li></li> -->

</ul>

In your code the <p> elements are outside the <li>'s (not in between).

Cheers and happy coding :slight_smile: