Project 1: Build a Tribute Page Feedback

Hello,

I’m Liz and this is my first project for which I would love to get some feedback on.
I’m not a fan of DiCaprio but I needed something to work on.
What should I change and what should I fix? etc
Thank you in advance!

Hi @liz8,

CSSlinter

  • Invalid value(center):
.textbg {
  position: center;
...
}

MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/position

Values

  • static
  • relative
  • absolute
  • fixed
  • sticky (experimental)

HTML

  • Do not use lower levels to decrease heading font size:
  <div class="container text-center">
    <h2>Leonardo DiCaprio</h2>
      <h3>Notable Films</h3>
    </div>

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.


This code don’t comply with Bootstrap

<div class="container-fluid section-leo-cover col-xs-12">
    <div class="container text-center">
    <h2>Leonardo DiCaprio</h2>
      <h3>Notable Films</h3>
    </div>
  </div>
  
  <!--Start body area-->
  <div class="films text-center col-xs-12">
    

Bootstrap documentation:
http://getbootstrap.com/css/#grid

Content should be placed within columns, and only columns may be immediate children of rows

http://getbootstrap.com/css/#grid-example-fluid

Example: Fluid container
Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Cheers and happy coding :slight_smile:

@Diego_Perez
Please be as aggressive with my page.

@liz8
I’ll have to check it out on pc, but it doesn’t work that great on mobile. The pictures don’t scale, or at least doesn’t scale properly. Otherwise “The Wolf of Wallstreet”!

I can remember 10 years ago when only teenage girls were allowed to be Leo fans. Thank God, it’s a new era.

Sorry for the late reply.

I will start fixing it as soon as I can. Thank you for everything!

1 Like

Thank you for mentioning that! I think I fixed it, now the images are responsive. But my page still looks funny in 1x…

@liz8
Sorry for taking so long to respond. I learned something new, that might shed some light on the design conversion problem. People have been saying it for long but its the first time I understood it.

Bootstrap is a mobile first design framework. This means that you style the elements for mobile, tablet, PC, and maybe even TV.

http://getbootstrap.com/css/#grid-intro

This makes designing out of your head difficult. So try to sort out your designs out on a piece of paper first in future.
Hope this helps and makes sense.

Enjoy,
Jan