First try at HTML & CSS - Tribute Page; feedback much appreciated

Code Feedback
1

Hi everybody,

I have only very recently started following the fCC tutorials. I am currently about halfway in the Responsive Web Design Certification learning tree (the first main category of the curriculum). Because there is a lot of new information one is confronted with on a daily basis I thought it would be a good idea to already do minor private projects whilst learning the subject matter. I am very much enjoying the process of learning and applying all this new information and I look forward to sharing future projects with all of you as well as looking what you are all making!

My first private project is a tribute page dedicated to my favorite artist.

Pretty basic for now. I will try to add a little bit more complexity each time I start up something new, but also take it slow.

Your feedback is much appreciated. Thank you for taking the time.

https://codepen.io/mpavcell/full/JjdNbeO

Mpavcell.

2

Just a thing or two to note about Codepen. When you’re coding, it already creates the boilerplate code for you! For example:

<html>
  <head></head>
  <body>
    <!-- This is where your code ends up -->
  </body>
</html>

You can see Codepen has the settings button near the top. There, it’ll give you the option to put your things like <link> and <script> tags in appropriately. If you would like to be extra thorough, you can run your code through:
https://validator.w3.org/#validate_by_input

You just need to copy and paste your HTML code. It’ll give you an output of things you can improve upon.

Great job with the responsive css and design! It works well on desktop and mobile!! Looking forward to seeing what you create next.

2 Likes
3

Welcome to the forums @Mpavcell. Page looks good, just a couple of things;

  • don’t use <br> to force spacing. If you want two paragraphs, then make two paragraphs.
  • your timeline has bold dates. Maybe do away with the bullet points.
  • Review the lesson about giving meaningful text to links
    • what you have isn’t accessible

Like the responsiveness on both desktop and mobile but think it could be a little wider. Especially on smaller screens. Just seems a bit too narrow.

2 Likes
4

Indeed. For smartphones the margin between the actual content and the end of the screen could be small without problems.
From desktop and big display tablets looks awesome.

1 Like
5

@Roma Thanks a lot for pointing these things out. Valid points and fully agree. Just made some adjustments to correct these issues and it seems a lot better now.
@caleb-mabry thanks for linking that resource! Will def be using that in the future. :slight_smile:

1 Like
6

Nice job, the choice of color gives the needed vibe for the content of your web page.

Texts are aligned center so that’s a plus.

Your sectioning of content makes it very easy for the user to scam through your page and understand the overall points.

Good luck with the future projects :call_me_hand:t4:

1 Like