Project Tribute Page: Sinn Sisamouht (Iconic Cambodian Musician)

https://codepen.io/hong06ty/pen/MWgJoRB?editors=1100

For Sinn Sisamouth’s birthday tomorrow, I thought I’d create a tribute for him. He is an iconic Cambodian musician. Please review my code and provide feedback.

This is my first page, so go easy.

Thanks! :v:

Good start :slight_smile: Have a look on a small screen, the timeline overflows the background.

You’ve also embedded what looks like an entire YouTube page. Just embed the specific videos that you want to show.

And PLEASE don’t let them autoplay. I think it’s safe to say that the majority of people are annoyed when they open a site and it suddenly starts playing sound without them expecting it to.

1 Like

Hi @hong06ty, your page looks good. Along with what was mentioned above, you may want to revisit;

  • 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.
    • in CSS you have a couple of media queries that aren’t referenced correctly
    • in HTML you have a typo, and you have a couple of instances where you use an id more than once.
  • there is a stray closing blockquote before the youtube links and a stray opening blockquote among the youtube links. Maybe the links were an afterthought and broke up your blockquote somehow.

As an aside, I noticed you set the font to Georgia which is a serif font but as a backup you went to non-serif fonts.

1 Like

@michel-z Thank you for your feedback. I am going to look into the timeline overflow issues. Right now, I believe, that I need to reconfigure my @mediatype values. For the autoplay, I tried setting the shutting the autoplay like the following example. However, it seems to not be working as I intended. <iframe id="youtube-link-champa-battambang" src="https://thclip.wiki/video/CLOW4P7tMwk?autoplay=0">Champa Battambang</iframe>.

@Roma I wasn’t aware of the ‘Analyze’ link capability. Thank you for letting me know.

I will update the id to be unique and replace it with class wherever I can. I will close the blockquote too.

What is your code reviewing techniques?

I think I fixed all of the errors, and made some updates. How do I test my page to see if it passes all the requirements?

https://codepen.io/hong06ty/pen/MWgJoRB

You can drag the border between the code and the page to make the page smaller and see how it responds to that. You now have issues with the embedded video’s overflowing the background.

As for passing the requirements, paste this code into your html

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

It will create a hamburger menu that you can use to open a menu where you can test for the requirements. Your page currently passes 9/10 tests.