Jose Marti's Tribute page

This is my first page ever. I am a beginner on this. My page is kind of simple but to me it’s an accomplishment. Perhaps the picture is too big. I would like some feedback to improve the look of it.

Many thanks in advance!!!

It looks good. A little simple, but I would have been proud to call that my first page.

A few thoughts:

The code looks pretty clean, nothing jumped out at me. One thing though - you have the css:

.all-page {
  margin-top: 60px;
  background-color: #E1EAD1;
}

that you apply to the body. Why not just apply it directly to the body element?

body {
  margin-top: 60px;
  background-color: #E1EAD1;
}

For that matter, you don’t even need to put the body element in the HTML - codepen will insert it for you. Codepen works a little differently than building a “real” page.

The only other thing is the text of list section is a little too long. That is hard to read, to track from line to line. Usually you want to keep lines shorter than that. One option is to just limit the width of that section. Traditionally, width should be between 21 and 30 ems.

.list {
  width: 30em;
  margin: 0 auto;
  margin-top: 5%;
}

Another option would be to break it into columns:

.list {
  width: 80%;
  margin: 0 auto;
  margin-top: 5%;

  column-count: 2;
  -webkit-column-rule: 4px outset rgba(0, 180, 0, .2); 
  -moz-column-rule: 4px outset rgba(0, 180, 0, .2);
  column-rule: 4px outset rgba(0, 180, 0, .2);
}

There are also ways to have it change depending on the width of the screen, but I’m too tired for that.

But still, it looks good. Have fun on the portfolio page.

1 Like

Hello Kevin,
I really appreciate your input. I am going to apply your suggestions to my page.
I wish one day I can be as knowledgeable as you in the field. I know it’s hard work and it will probably take some years for me to get there, if I ever, but I am optimistic.

Your suggestion below is too difficult for me to understand at this time.

Another option would be to break it into columns:
.list {
width: 80%;
margin: 0 auto;
margin-top: 5%;

column-count: 2;
-webkit-column-rule: 4px outset rgba(0, 180, 0, .2);
-moz-column-rule: 4px outset rgba(0, 180, 0, .2);
column-rule: 4px outset rgba(0, 180, 0, .2);
}

So, I will leave it for “later”.

Thank you again!!!

Sure, it was just a suggestion.

As to me being “knowledgeable”, we’re on the same path, I’m just a few steps ahead of you. And not as far as you think. You’ll get there.

I’m waiting for someone, so just for fun:

width: 80%;

This of course sets the width at 80%.

margin: 0 auto;

This is a common way to get a column centered on a page. This is very useful.

margin-top: 5%;

This was originally your code. The margin is set to 0 above this, but since this comes after, it sets the top margin without affecting the others.

column-count: 2;

This tells it you want two columns.

column-rule: 4px outset rgba(0, 180, 0, .2);

This tells it you want a separator between the columns (a “rule”) and tells it to be 4px. and tells it the color should be medium green (0, 180, 0) and should only have 20% opacity. This is not necessary but it looks nice.

-webkit-column-rule: 4px outset rgba(0, 180, 0, .2);
-moz-column-rule: 4px outset rgba(0, 180, 0, .2);

Some browsers don’t use the column-rule, so this handles them.

1 Like

Hi Kevin,
Now it all makes more sense to me.
Whenever I apply a code I want to really understand what it means and the effect it has.
Thank you!!!

You will go far, young padawan.