First challenge : tribute page to Paris (the city ;) Thanks for your feedback and advice!

First challenge : tribute page to Paris (the city ;) Thanks for your feedback and advice!
0

#1

Hi ! It was my first test in coding. I’m very interested to have your feedback et all advice to improve my practice. Thanks you ! It’s here…


#2

I like the layout of the site a lot. The page is broken up really nicely, which makes it very easy to view. And your comments in the HTML make it just as easy to find the relevant code for each part!

I never would have thought to use dt and dl tags for the timeline, and I can’t actually work out how you managed to format it so that the date is in line with the centre of the description, vertically speaking. Could you explain that? I think it looks great!


#3

@Alright75 - J’aime bien votre choix de police! Super chouette!

I also think you made a great use of the column feature of bootstrap.


#4

@ayrenay Thanks for your comment. Indeed, the column feature of bootstrap required many tests, especially to center the content , especially to center the content ! :wink:


#5

Hi! I like the desing. I had a brief look at the code. Why you use strong tag to wrap the image? It’s responsive which is cool. But at some breakpoints - the image from the header gets tooo large and I get horizontall scrolling. Try to make the image also responsive


#6

Thanks for your comment. It’s encouraging to me !

To answer to your question about the centered date, I’ve made research on web et I found a good solution :
< div class=“col-sm-2 vertical align”>
< dt>blabla< /dt>< /div>< !---->< div class=“col-sm-10 vertical-align”>
< dd>blabla
< /div>

What is important, it’s the between the 2 div. If you add a space between them, the css with the class vertical-align will not work :
.vertical-align{
display: inline-block;
vertical-align: middle;
float:none;}

My english is bad, so read this solution on stack overflow : http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3

Try et say me if it works !


#7

Thanks so much for taking the time to explain! I wasn’t familiar with the vertical-align property. I also thought you had aligned the dt to the dd, when in fact they’re both aligned relative to the parent element. I’ve learned a lot :slight_smile:

My tribute page project doesn’t actually use a timeline, so I won’t get chance to try it there, but it’s a cool trick to know for the future!