freeCodeCamp
freeCodeCamp copied to clipboard
freeCodeCamp
Html and css validation for projects
Is your feature request related to a problem? Please describe.
Sometimes users are able to submit projects that pass all the tests even if they have invalid html.
Describe the solution you'd like
It could be an idea to add an extra validation step in which the html and css are validated, and users are unable to submit invalid html and css - like it happens with JavaScript, as that just stops everything
Describe alternatives you've considered
I imagine the alternative would be to just live it like this.
Additional context
No response
Hey Ilenia,
Are you able to share an example of invalid HTML?
The tests test the output (rendered) HTML. So, if the browser can understand what the Camper meant to do, then it will parse it as such. We specifically do not test the user code, where we can, because there are millions of permutations of valid code, and writing RegEx to capture all of these cases is difficult.
I will find an example of code that passes all tests but have issues with validity
I mean validation like this does https://validator.w3.org/
This is an interesting idea. I'm on the fence about it. I passed all the projects on .dev - I put the code I used into two different validators: https://www.freeformatter.com/html-validator.html & https://appdevtools.com/html-validator - I got quite a few errors. One found 13 issues, the other found 10:
This was all code that passed the tests. If this were required, it may make it impossible to pass all the tests because we ask for specific things, like maybe put a p inside a label or something - which the validator is complaining about. That particular validator says: "Error - An error in your HTML code that's against the W3C standards. You're encouraged to fix it." So I suppose this "validator" may be a little too picky. Most of the code is likely valid as far as having all the tags closed or whatever - but it has a number of things against W3C standards. Perhaps if we found one that only checked the syntax of the HTML or something.
I never had to nest a p in a label, I think the projects can all be passed with satisfying all of that I think it will make campers ask more for help but it would also mean they have to better more their skills to pass
I think it will make campers ask more for help but it would also mean they have to better more their skills to pass
Isn't this too complicated? I remember the intention is to teach the basic so someone can get a job, for me w3 validator isn't required to get a job.
But it does improve the skillset we can add a note about it, or make a "hardcore mode" which uses it
I do wish I had run the code for all my projects through something like this - I would have learned a lot. If we were to do this for the practice projects, I'm guessing there would be a lot of issues. Perhaps we could make adjustments and have better content. Actually, it probably wouldn't work very well for those - certain issues would show up on a step, and then get fixed later on. I just ran the last step of the cat photo app through it, and it says there's not DOCTYPE - the last step adds it. One thing we could maybe do it run the final code of the practice projects through them and see what issues we have and make adjustments - it could be a lot of work.
One thing we could maybe do it run the final code of the practice projects through them and see what issues we have and make adjustments - it could be a lot of work.
I volunteer @Dario-DC for that!
I think it's something to keep in mind, also to raise quality of finished projects from campers, as a small thing going toward the university degree thing.
Project validation done We have created issues for the projects that had issues
- [x] #46537
- [x] #46538
- [x] #46539
- [x] #46541
- [x] #46540
I was initially on the fence about this but I'm starting to lean more toward validation, or at least making them aware that validation is available and that their HTML should validate, as I have seen many examples lately in the forum of HTML that passes all of the HTML tests for a project but has a lot of errors in it. Perhaps we could add a link to the W3C validator and remind them that they should paste their HTML in the validator and fix any errors?
@ShaunSHamilton, you asked for an example, here you go :-) This passes all of the HTML tests for the portfolio project.
<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" href="styles.css"></head>
<nav id="navbar">
<ul>
<li><a href="#welcome-section">Welcome</a></li>
<li><a href="#projects">Projects</a></li>
</ul>
</nav>
<div id="welcome-section">
<h1>welcome section</h1>
</div>
<link rel="stylesheet" href="styles.css">
<project id="projects">
<div class="project-tile"><a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page">Build a documentaion page</a></li></div>
<footer><a id="profile-link" target="_blank" href="https://www.freecodecamp.org/learn">profile page</a></footer>
</project>
<body></body>
</html>
Perhaps we could add a link to the W3C validator and remind them that they should paste their HTML in the validator and fix any errors?
We can remind them, but we can't add tests to assert it validates - because we can't break projects that previously passed.
The W3 validator is certainly helpful, but it's also an external link which we have been working to avoid in our curriculum.
Update: all the new RWD practice projects have been validated and changes applied - so the rest of the discussion here can revolve around the certification projects.
I am saying this is an option, but I am highly against it. Although the projects are made for certifications and they aren't made for real world commercials, I think it's overkill.
About strict HTML, we can ask the editor to parse the Markdown file content as xhtml+xml, this is an old HTML spec from w3 when people thought that strict HTML is a good idea.
This will make HTML act as JavaScript, as it will display an error and stop the element from being parsed if it isn't in the right syntax.
In the example below, the main won't be parsed.
<head>
<meta http-equiv="content-type" content="application/xhtml+xml" charset="utf-8" />
</head>
<body>
<main>
<p>random</p>
<a href="link/url">navigation</a>
</body>
I have no idea how we parse the editor code, so I can't say if this will actually work.
Although I am against it, here are the links from my notes about it
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/XHTML https://www.w3docs.com/learn-html/xhtml-extensible-hypertext-markup-language.html https://www.w3.org/MarkUp/ https://developer.mozilla.org/en-US/docs/Glossary/XML https://en.wikipedia.org/wiki/XHTML
One of the articles mention that it doesn't check validation, so thankfully, I am speaking nonsense.
XML parsers do not typically check documents for validity
http://www.webdevout.net/articles/beware-of-xhtml/#myths
Sorry about that
This is still a cool idea, but not manageable. We would need to conform with every HTML standard ruling while solving issues and making new projects. Which will ultimately be forgotten and make projects unsolvable or perhaps very frustrating to complete.
