Tribute page with tank animation!

Hello everyone!

I am new to html (and programming in general), it’s my third day on the topic and I have started to make a tribute page for a Spanish Civil War hero:

This is my first web page, really simple. I would love to hear from you any suggestion, recommendation or the pointing of any error.
I had some difficulties with the spacing of the paragraphs, as I don’t yet understant completely the differences between padding and margin, and it at the end it was quite trial and error.
I also introduced an animation for the tank, as it moves when you place the poiinter over it, pretty cool.
I think it is also important to explain which is my progress in the syllabus:
I am coursing the Responsive Web Design Certification, and I just finnished the applied visual design topic.

Thank you a lot, I am very excited with all this

1 Like

I’m still new to all this as well but one thing I noticed is that your tank animation snaps back after its 2 second duration. This could be a bit jarring so you might want to make the tank’s final position the same as its initial position. I also changed the animation duration and the animation timing function for slightly more natural movement for your tank.

   animation-name: move;

   /* changed duration and added timing function */
   animation-duration: 3s;
  animation-timing-function: ease-in-out;

@keyframes move {
  0% {
    right: 0px;

   /*  moves tank forwards */
  50% {
    right: 120px;
  /* moves tank back to initial position */
  100% {
    right: 0px;
1 Like

Thank you so much! it definitely looks much more natural now :slight_smile:

Your page looks okay @mikelmendibe99. Some things to revisit;

  • Keep the test script when forking the pen (<script src=""></script>).
    • Your page passes 1/10 user stories.
    • The test script should be included, with all tests passing, when you submit your project.
    • You can click on the red button to see each of the failing user stories and an explanation of why it failed.
  • Do not use <br> to force spacing. Use margin and/or padding in CSS.
  • Why provide a link to “the Spanish Civil War” that goes nowhere? Don’t make it a link.

Since you’ve said you haven’t completed the lessons yet maybe it’s a good idea to finish the lesson before starting any of the projects. Especially if this is all new to you.

Edit: Some other things to revisit;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are some coding errors you can clean up.
  • 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.
    • The HTML one misses a lot of errors and gives false positives which is why I recommend the W3C validator.
    • Use the CSS one that’s provided. You have a spelling error that will affect how your page displays.
1 Like

First of all thank you so much for your time and the feedback, I appreciate it a lot.
The tools for debugging are a real blessing!

In truth I feel kind of dumb, as I didn’t even fulfill the user stories, but your comment has helped me a lot. I didn’t even know that there was a script…
I am currently working on the form project (respecting the script), and as soon as I finish it I will rebuild the tribute page, with a little bit more logic I hope.
Once finished I will post the tribute page here, so you guys can see the progress (I hope that there will be progress, I don’t like going backwards like a crab).

Stay safe :smile:


I have been looking at the tribute page I did, and I didn’t like it at all. It was messy and it looked terrible.
So, I have created a new tribute page about a band I love:
I would love you to check it out, the page and maybe even the band (if you like nice music).
As always, I am willing to learn and open to any correction, suggestion or feedback.

Thank you so much! :smile:

Stay safe.

I forgot to mention that the page fulfills 9/10 tests. I can’t manage to make the last one work The element should responsively resize, relative to the width of its parent element, without exceeding its original size.
I have tried to use the same model as in the example, but I can’t make it work…

Check the error messages when a test fails. Click on the red button to see what’s failing and why.
If you do that, it says;
Try using the "max-width" style property : expected 'none' to not equal 'none'
So set max-width: 100%; and run the tests again
Now the failing message says;
Use the "display" style property with a value of "block" for responsive images.: expected 'inline' to equal 'block'
So what do you think will happen if you set display: block;

The messages are your friend. Much like Google is your friend. Rely on both of them to help you in your journey.

Overall the page looks good @mikelmendibe99. Just a couple of things;

  • Review the lesson about giving meaningful text to links.
  • If you had already submitted your Tribute page project don’t forget to update it with this new link since you did this one in a different pen. Just get that last test case to pass as per the post above.

Good job!