First Project-- Tribute Page

Hi guys! I’ve just completed my very first coding project. Constructive feedback would be greatly appreciated. I would love tips and tricks for future projects and how I could improve this code and overall skills. Getting the page to respond was a struggle.

Thanks!

Tribute pen: https://codepen.io/mylliejohnson/pen/mdbPmBP?editors=0100

Very nice!!! I really liked the yellowish color scheme.

I just felt that the image is a bit too overwhelming. Setting a small bottom margin for said image and maybe giving it borders could also improve the layout.

1 Like

Hi @myllixn, welcome to the forums. Your page looks good. Some things you may want to revisit;

  • 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 font 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.
    • You have some issues in HTML that you should clean up.
  • try to not use the <br> element to induce spacing. For instance, between your header and your image. Use margin and/or padding in CSS instead.
1 Like

Thank you so much Roma! I’ll definitely go back into it and fix it up.

1 Like

Thanks for the advice Jonatas! I made the image width smaller and I’m probably going to add a thin border around it and the caption. I appreciate the feedback

Asking out moved by curiosity alone: are you completely new to coding? And do you have an art–related job/hobby?

Yeah i’m extremely new to coding but I want to make it a career once I’m good at it. And yes, i do art as a hobby. I draw, paint and do digital art.

It’s explained then :upside_down_face:

People with an artistic eye have a great asset in front-end.

Keep rocking!

1 Like

Thank you :slight_smile: :slight_smile: :sob: