Total amateur in need of help

HTML-CSS
1

So I created this tribute page and I think I passed the test because the 20% there loaded without any problem. After I finished it, I wanted to go on and experiment more and animate something using the template I created today. After some hours I achieved to have a bouncing ball which was naturally not included in the original tribute page. I wanted to create it right above the footer so I reasoned it is best I delete the footer and than add it again after I finish the animation. Bear with, its only my fifth day of coding :smile: and it’s only today that I ever heard of ‘codepen’. After I finished the animation I added the same code of the footer I used earlier but that goes on top of the animation. Naturally I would like that to be under the animation and the distance between the two not to be related. I tried many things but probably my brain is foggy and I can’t seem to figure it out how to do it. If someone could explain what am I doing wrong? How to have some rows space between the box of the animation and the footer. It must be simple but it is frustrating me a lot and I imagine it is hard to believe but I have been trying for hours now :frowning: Ignore the colors- they are momental
Also any general advice is super welcomed
Thanks a lot

https://codepen.io/toooortoise/pen/vYXBRbG

2

The 20% means you did one project out of five. So 20% of the projects are done.

When creating the projects you are given a link to fork in codepen. This will give the test scripts that you run to ensure the user stories have all been met.
The test script should be included, with all tests passing, when you submit your projects.

  • Your page passes 9/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.

You can up your knowledge of codepen by reading their official documentation

I know you didn’t ask for feedback yet but I noticed some things that you should correct;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • 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 one for CSS is good. Use it and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Get back to the ball later.

https://devdocs.io/html/element/br

1 Like
3

Thank you for taking the time to respond. I will take in consideration all of your advices. Time to code :thought_balloon:

4

Just noticed I didn’t include the test script for you. Here it is;
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

Copy and paste it at the top of the HTML section in codepen.
After doing so you’ll see a hamburger menu. Expand it and select the appropriate test to run.

1 Like
5

Hey Roma thanks again for taking the time & I am already into it. The thing I find really hard is to validate my code. I think I am trying to brute force my way through it which does not seem such a smart idea. But something that took my attention is that when I try to validate some random public or famous web pages (by the URL) they show constantly a lot of errors and warnings. Sometimes up to 200. Their pages seem to work just fine. Is this normal and if it works perfectly fine where is the importance of validation? Also would you suggest I keep trying to validate my code or just go to the next test and create a survey ( hopefully validated)?

6

Just copy your HTML code and paste it in the W3C validator link that was given in my previous post.
As mentioned, since you’re copying/pasting from codepen you can ignore the first warning and first two errors.
The rest of the errors should be addressed. Being new to HTML you should be aware of syntax errors you make when writing your code and correct them.

Not quite sure what “brute force my way through it” means. The validator will show each line that has an error and a brief explanation. For instance, the first error shown is because the h2 element is not properly closed.

I don’t know what “public or famous web pages” you’re looking at. For now focus on your code. It is important that you know how to write code that conforms to the published standards.
Moving on to the next project will only increase the odds that you’ll make the same errors. It’s important to learn how to code correctly now and adhere to standards as programming languages are not as forgiving as HTML and CSS.