Tribute Project - Simplistic to the Limit

I struggled a lot with the alignment of the elements. Started from scratch 3 times haha
Grid-area plus flex box saved me a lot of stress in third try.

I would love to get some feedback. I think it doesn’t look that good. Mainly because there is a lot of empty space to the sides.

1 Like

Hey @UmiKami!

Welcome to the forum!

I think your page looks good. One thing I noticed was the color for the link at the bottom is white. It doesn’t seem super obvious that the user should click on it so maybe change the color to blue since that is the standard color for links.

Hope that helps!

Happy coding!

1 Like

Overall this is a solid effort. The space on the sides is not necessarily an issue. You don’t want your text content to get too wide because then it becomes harder to read. So if you put a max-width on your content then there will be space on the sides as the view port gets wider and that’s OK. But if you narrow your browser as far as it will go you will notice that your content gets pretty skinny yet there is still space on the sides that could be used to allow the content to be wider. So for narrow view ports I think you need to get rid of most of that space.

The way to do this is to use a narrow-first approach when styling your page. Make your browser as skinny as possible and style it so it looks good. You can leave a little space on the sides, you don’t want the content going right up to the edge of the browser, but you should definitely allow the content to fill most of the horizontal space. This will be your default CSS.

Then you can gradually widen your browser and make adjustments to the CSS as needed for wider view ports. I think you might have over-engineered this page just a little using flexbox/grid. A page like this with a very simple content layout does not need either of those. If you want to use them just for the sake of learning then fine, but sometimes simplicity is best and you can definitely make this page look exactly like it is now without them.

1 Like

Thank you very much! Added a more visible link.

Thank so much to you too. Reduced the margins on smaller screens.

Also, thank you for the tips. Sometimes I forget most people nowadays have phones hence smaller screens haha

Welcome to the forums @UmiKami. Your page looks good. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Besides using it incorrectly in this instance, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

Thank you for the feedback. I’ll use that page from now on to verify the html. Ended up using margin-bottom to separate the lines.

Make sure you check in your code so we can see the changes.

Investigate the CSS property line-height. You may like it better than using a margin.

1 Like

Tried line-height but it does not look good when a line wraps into two, meaning it gives an equal distance to every line within the ul element. On the other hand, margin-bottom keeps the line-height within every li element the same but creates a space between the li elements.

Just in case here is an example (I want red, not blue):

<!DOCTYPE html>
<html lang="en">
    <head>
      <style>
         #line-height li{
         line-height: 6em;
         color: darkblue;
         }
         #bottom-margin li{
         margin-bottom: 6em;
         color: red;
         }
      </style>
      <title> Just a page</title>
    </head>
   <body>
      The content of the body element is displayed in your browser.
      <ul id="line-height">
         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
      </ul>
      <ul id="bottom-margin">
         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
      </ul>
   </body>
</html>

HI @UmiKami!

The line-height property specifies the height of a line.

1 Like

Your code is doing exactly what you told it to. One unordered list is blue and the order list is red. I guess I am confused on what you wanted here.

Did you want all of the text to be red?

1 Like

Oh no, sorry for the confusion. I meant the type of spacing I wanted is like the one on red. line-height makes it hard to read the timeline in small screens where a sentence occupies multiple lines. So, I used margin-bottom as a substitute of <br>.

My original goal was to add an additional space between every li element, in other words, larger space between a full sentence, not between lines.

The space I wanted to make bigger was the area where the blue lines are. That’s why I used margin-bottom instead of line-height because line height would space every line* evenly which is not what I was trying to achieve.

Yet again, sorry for the confusion, sometimes I forget line and sentence are two different things haha.

1 Like

Okay, I see what you’re going for. No worries. It was just a suggestion.

1 Like