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: https://codepen.io/Mikelevra/pen/JjYdXBx
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.
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.
#tank:hover{
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;
}
}
Your page looks okay @mikelmendibe99. Some things to revisit;
Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></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.
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.
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).
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: https://codepen.io/Mikelevra/pen/bGVpXZM
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.
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.
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.
