Feedback on Tribute page on The Velvet Underground

Hey all! I’ve finished my Tribute page on The Velvet Underground. I’d love to receive any feedback you want to give. Thanks!

https://codepen.io/33P/pen/ZEbvbNX

1 Like

I think you should make the albums larger and center them.
Also put some margins on each side so the text doesn’t get cut off by the edge of the screen.
If you don’t know how to do these things, feel free to ask!

2 Likes

@Imstupidpleasehelp I saw the entire text, justifying was a cool thing to me but I still can add some margins. You’re right about the size of the albums. You’re not stupid at all. Thanks .

Don’t worry my name is just a joke because I am always asking for help.

1 Like

You have a lot of information which is good. However think about your layout :

  • Text is overflowing
    *Your album titles and paragraphs have almost the same font size which does not visually appealing for readers. Also think about spacing - you may want to add some spaceing betweein each album so it’s distinctively clear.
  • The hyperlink at the bottom at the bottom of the page is not reader-friendly. Maybe change its colour to white?

As a tip - wrap each section in a div so it helps to space each section and style better (in my opinion.

2 Likes

@ibrahim_aq Thank you! Cool ideas. I’ll take those into account as soon as I get my hands on the fork again.
What I’ve already done is putting divs for each section, even the titles! Thanks

On your code, I’ve seen a couple of </img> end tag. Images does not need an end tag. So you can just put it as a starter tag:

<img src="source.jpg" alt="this is an image">

What you can try to do is go to the W3C Validator, copy and paste your code and address the problems. You can ignore the first to problems, because you are using CodePen.

3 Likes

@Catalactics Thank you. You’re right about the img being self-closing. I’m 46 and having memory problems that will surely wear off as I gain practice on the matter!

1 Like

Hi people! The page looks so much better with the changes you suggested! The only thing I couldn’t do was changing the final hyperlink color to white. So if you have the time please people tell me what you think of it now. I think your suggestions worked real fine. Thanks.

1 Like

Don’t use <br> to force spacing. Use margin and/or padding in CSS.

2 Likes

@Roma Thank you, I’ll change that and have it in mind for future works.

My suggestion would be to think about your page in terms of the hierarchy of information begin provided and then think about some of the elements you learned about in the fCC Basic HTML and HTML5 lessons. Then rethink some of the elements being used throughout your page.

The default styles used in browsers do a good job of visually showing hierarchy of a page. If you temporarily comment out your stylesheet and view your page without your styles, letting the browser style it with it’s defaults, you will not see much of a visual hierarchy to the page.

My advice would be to markup the page first and only use the browsers default styles so you get a sense of the hierarchy of the page first. When that looks good, then go in with your own styles to tweak and customize things.

If you revisit the sections Say Hello to HTML Elements, Headline with the h2 Element, Inform with the Paragraph Element and Introduction to HTML5 Elements you’ll be reminded of some of the tags that provide semantic structure to a page.

The content of your page (with images replaced just so I could screen cap the entire contents of the page) modified to use sections, headings, and paragraphs without any styling (left). Compare to your content, as is, without any styling (right). Note the contrast in visual structure—though more importantly there is now a semantic structure to the page on the left that isn’t there for the page on the right.

Just something to consider, if not for this project for future projects. Maybe at the very least, follow the other suggestions left before mine regarding running your markup through a validator and modifying the text sizing/spacing through your current styles to improve the layout a bit.

2 Likes

@robertgroves Maybe I should dedicate myself to other things since I can’t even write the simplest of codes for a page. Thank you.

Don’t take my advice the wrong way. Take my suggestions as what they are meant to be, it’s all part of the learning process.

You’re doing fine. You created a web page. You are literally doing the thing you set out to learn.

Today you created something. You will continue learning. Tomorrow you will create something better. If you continue that pattern you’ll do great.

2 Likes

@robertgroves I have to say thank you. I was very sad and I read your words once and again until it made sense (for me).
Let us see whether I understood what you were telling me.
Here’s the page with the changes you suggested. Again thank you!

https://codepen.io/33P/pen/ZEbvbNX

P.S.: I also took away the line breaks as @Roma told me to.

1 Like

You’re doing great. You definitely improved upon your first draft.

Good use of paragraph elements, replacing the line break (br) elements you originally had.
Nice use of heading tags to give the page hierarchy—one thing to note, you can use the heading level tags more than once, meaning you could have multiple h2 tags if the sections you use them for have the same “weight” (or importance) to them. In general you should only have one h1, but beyond that I think you could use h2 for all of the album section headers.

Nice job! I’m so glad you persisted. I felt bad that you were discouraged by my original comment and I’m so, so, so happy that you were able to regroup and revise your page. Keep being persistent and you’re going to end up doing great things. You got this!

1 Like

@robertgroves Thank you so much for your understanding and for being so glad that I persisted! I’m glad too and it’s because of you. First thing I’ll do as soon as I can is replacing the h headers for each album to be h2. It’s so wonderful that people as generous and empathic like you help us go along! Once again thank you!

1 Like