Tribute Page (code review)

Code Feedback
1

Hi, everyone!
I’m a self-educator, l’m doing my first steps in front-end. I’ ve just finished my first page and I really need your help. Please, could you look through the code, and say if there are some mistakes or things that can be done better. Here is the link for my tribute page: https://codepen.io/Alifanna/pen/KKPzPJG
Thanks in advance!

2

Congrats on your first page. I’m gonna assume you didn’t code this in CodePen itself as within CodePen all tags within the head tag go in the html setting section of the Pen and you don’t require a html or body tag as your code is automatically inserted into one. Other than that, which isn’t really a problem, your code seems fine. There is a css selector oddity as why is chronology a class and also some other css selectors I question but these are more of a personal design choice.

On the design side I would look at media queries as your page falls apart on smaller widths. I also think you go do with more white space on the right hand side of much of your text as it is too close to the edge of the respective parent containers.

I hope this helps.

1 Like
3

Hi @Alifanna, welcome to the forums. Your page looks good but there are a few things you may want to revisit. Some of the things I mention have been brought up in the previous post, some are different.

  • Please verify your email address with codepen so we can see the full page view.
  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to the <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.
    • The link to your fonts would go in the box labeled ‘Stuff for <head>’
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • something you can clean up in HTML
  • Your page meets 9/10 of the user stories. If you click on the red button it will show you the failing test and tell you how to fix it.
  • You need to work on making the page responsive.
1 Like
4

Thanks for your comments and remarks! Yes, I have written the code in Visual Studio Code because there is a butify function, I guess that It also exists in CodePen but I haven’t found it yet. I’d better transform chronology class to chronolohy id (I have no idea why I have done it in such a way first time). I just don’t know what is better to use classes or id. As for design I will change it a little bit accorging to your advice and I will try to make it responsive.

Thanks a lot.

5

Hi, Roma! Thank you for your comments.
Ok, I have verified my email. Thanks for the hint about the usage of CodePen, I will make the corrections and validate the whole code. I agree with your view to make it responsive and I will do it.
All the comments helped me, many thanks for your attention.