First ever project tribute page

Here is the link to my first project. So is this visually okay for a first time? I got bogged down trying to use grids at first so I erased all that and went to something a lot simpler. I watched a video where I was explained that using id="" should only be done when something is unique and to use class="" whenever possible. I actually added the id’s that were needed at the end mostly to pass the tests.

Any feedback is appreciated. I used W3C and nothing showed up.

It looks good.

One thing that caught my eye:

a:hover {
	color: blue;

What is that doing?

The other thing I’d say is to be more consistent with your indenting. It’s not bad, but the more you develop the habit to clean it as you go, the better.

I watched a video where I was explained that using id="" should only be done when something is unique and to use class="" whenever possible.

Yes, that is important. You should only use ids if it is one of a kind. Only id something as “header” if it is the only header. It can also have a class of header. You can have multiple things that have a class of “image”, but if you apply and id, it has to be unique.

It makes it blue when you hover over the link at the bottom of the page. I tried giving it a class and/or an id but didn’t get around to it.

Page looks good @berubenic.
I think the point @kevinSmith was trying to make was what color is the link before you hover over it?

Just as an aside, if you visit the link it will not be blue, it will be whatever color is set for the visited state (purple on most browsers I believe).

Not bad for a first page.

  1. The image is a bit big. You can set a max-width on it with some fixed px value and give it width: 100%. Or you can use a smaller version of it (you can pick the versions on the wiki page)

  2. Speaking of max-width, I’d suggest giving the list a max-width to make the text more legible. Or using a container element and giving everything a max-width (remember to center with margin auto).

  3. Add some vertical spacing between the image and the list and give the list a bit of left/right padding.

  4. Even though a list does not absolutely have to be made with list elements it would be a bit better semantic to use the ol/ul/li elements for it. It can also have some accessibility benefits for screen readers.

  5. Arial and Helvetica are by no means bad fonts but they do tend to look a little plain. Maybe go to google fonts and pick a font you like. Or if you want to use system fonts try a more modern stack, like for example the native font stack use by Bootstrap. That is also what is used on the example project BTW.

Good job, keep it up.

1 Like

Right, I guess it changes the color if you hover after going to the link.

But the bigger point is that I don’t think we should mess with that. How links behave and respond are part of the language of the web. People expect certain behaviors from it. True, this isn’t so bad. I’ve seen people remove the underline and blue and you can’t tell what is a link. But I also think that it’s best to leave as is. If you want something else, make it a button. Let links be links, consistent with the UX people have grown to expect.

1 Like

What do you think of this page’s links? I actually like the style on these. I guess it comes to personal preference in the end. I don’t see how it could go in conflict with something else.

I like the CSS-Tricks link style, but you have to keep in mind the target audience as well.

You can style links, but the more they look like what a link is expected to look like the more accessible they will be (and the more clicks they will get). You can look into the UX of it some more (article, google search).

Those links to which you linked - I find the hover event fine, but I don’t like that they messed with the “visited” prop. There are often times when I’m “recursively” going through a web site and I want to be able to see links that I’ve already visited. They’ve taken that piece of information, in the interest of “being cool”. I also don’t like that they’ve faded the underline on links - it makes it difficult to see, especially if on a mobile device outside. There may be accessibility issues.

I don’t think we should try to redefine the language that a billion people have been using for decades. But I wasn’t saying that your page was doing that. I just commented on it - it can be a slippery slope that I’ve seen many learners slip down.

How your page functions is more important than how it looks. And part of its function is how it communicates with the user. There are certain UI elements that have been programmed into what people expect. We should be very careful about messing with that.

I will look into links more that’s for sure. Lots I don’t know about. Thanks for the feedback too!

Good points, some of which I didn’t consider. Thank you for your input.