Why do the Responsive Web Design Project examples not contain what is supposed to be the standard format for a web page? Are we supposed to include it in the code we create? Is that part of the test for the project?
Hello~!
If you are looking at the example projects on CodePen, the boilerplate is provided behind the scenes. The HTML editor should only contain that which goes inside the <body> tags. The content for the <head> tags is added by clicking the gear icon at the top of the HTML editor and adding to the “Stuff for Head” input.
1 Like
So do I have to put all that “boilerplate” stuff:
Titlein that “Stuff for Head” manually? How would we know to do that? Nothing is mentioned in the instructions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
</body>
</html>
You don’t need to add any of that boilerplate. In fact, I don’t think I once used the “Stuff for Head” box while working through the projects.
As a point of curiosity, have you started (or used) GitHub? It sounds like you’ve got a strong grasp on this. Developing the pages locally is an option, and GitHub offers free hosting for static pages. You could avoid using CodePen entirely if you’d like, as long as you submit a link to a live version of your project. 
Thanks for your help. I don’t know Github. I have heard of it, and know it is some kind of collaboration site, but it is mostly a mystery to me. The boilerplate I just cut and pasted from Shay Howe’s site I found thru"The Odin Project". I noticed in the instructions they said Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js . I cut and pasted that link into a browser to see what it would do and it produced a lot of gibberish code.
That CDN link loads the test suite into your page. You can insert it into a script tag in your HTML editor on CodePen:
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
Thanks again. This was the first time I had even heard of Codepen. You sound like you have a lot of experience. Again, thanks for the help.
1 Like
Always glad to help! Happy coding! 
Thought I’d expand on this a little more. If you look at the FCC examples on codepen, click on the “change view” button and select “editor view”.
You’ll notice the HTML section doesn’t contain any of the boilerplate elements. As mentioned, codepen does that for you.
If you’d like to see all the elements that make up the page click on the “export” link (bottom right of the page) and choose “export.zip”. When you unzip the resulting file, in the “SRC” folder you’ll find the HTML file with that boilerplate elements that codepen provides behind the scenes.
For more on codepen you can read their official documentation.
1 Like
Thanks! Something else not Codepen related, that surprised me about some of the projects is how much the “id” tag is used. Is that normal? I just don’t know.
Also, I was surprised to find that “user stories” are actually some kind … formal syntax object, I guess they could be called . Maybe I should not call it an “object” since that has a specific meaning. In the instructions their first mention leads to an actual Wikipedia page. I am an old guy. To me “user stories” is just a phrase, but you coders seem to be taking over and remaking language and grammar.
In general, an id is typically used when you want to target HTML elements with JavaScript. A class is used to style the page. You can use an id to style the page if you want but know that it has more weight than a class does and the id will override a class targeting the same element.
In your own personal projects that you create outside of freeCodeCamp some people recommend only using a class to style the page and an id if using JavaScript in your project. However, JavaScript can target a class too, so you may not need id’s that much in your personal projects.
1 Like
Thank you very much, I appreciate the explanation of the distinction btw id and class.
Hope you don’t mind my picking your brain a bit more. Can you tell me what we are supposed to learn in the five projects we are to complete? The Project Titles are self-explanatory, but when I look at the examples code, I don’t see the point. I guess the method is just to copy the code in the example code and replace the content with different content, and, in the process, will learn code by staring at it and thru muscle memory (I will not cut and paste the example code, but will manually type it) the understanding will grow. Experience. So is that the main point of the Projects? Thanks.
absolutely not
you should learn to do a project from scratch, writing your own code, without an example to reference to, but just instructions of what you should include and the tests to tell you if you are adding the right things
starting from a blank page and bulding a thing
do not look at the examples code. Show what you can do, make your own projects. Learn new things, research what you do not remember, ask for help if you get stuck. DO NOT COPY the code from an other project.
also, if you want to include all the boilerplate stuff, if you want the practice, you could use an editor like repl.it instead of codepen.io
2 Likes
@dmconway, I can only echo what ieahleen stated above.
Also, you can review this for an understanding of the HTML boilerplate tags
1 Like
That is the ideal. But I wonder how many resort to the method I described, because as I mentioned in another post complaining about waiting until the very end of approximately 300 hrs of lessons to provide projects to consolidate what you have learned, instead of having periodic projects throughout the lessons, much understanding is lost. People freak out confronted by “the blank page” after spending all this time zipping thru the lessons and then a project which sends them to some other cryptic site they may never have heard of without much explanation. But, I guess FCC is not meant to be a site that you can expect everything is explained, but, I just think there is a big gap between the pedagogy of the lessons and the Projects. I suppose some can complete the projects in the ideal way you described but I would imagine a lot of projects are completed in the manner I described. The method here is kind of like teaching a spoken language, but totally thru grammar rules, with little actual practice using the language with a final test where the students are asked to write a short story.
1 Like
the freeCodeCamp curriculum is being overhauled, moving to a project based curriculum, exactly to answer to these issues.
It has been awhile since I was here, I had some other priorities that arose and am now just returning to this and hope I can remember enough to continue.
I am finding I don’t understand how to use CodePen. I know I should RTFM but now, just don’t have time to wade thru it all.
The first problem I found was after I put some code in CodePen editor view and wanted to check how it appear in a browser, I selected to open the pen in “Full Page View” an error msg appeared stating that I would be leaving the page and my work would be lost. So how can I check the appearance of the page and keep my work? I don’t see a “save” button anywhere.
And I don’t understand your answer about using "this CDN link use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js: Where it says “run the tests in any environment you like” does that mean I can use it in another editor like Atom? l looked up what a “CDN” is and found that it is a “A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content.”
And I did read the CodePen docs for Full Page View but my issue is not addressed.
do you have an account? if yes, have yoo created a new pen? or forked (button in the bottom right corner) the pen so that it’s copied to your account?
to save the work you need to own the pen
The answer to this is yes, but you need to submit a live working version of your project. So you can develop locally in Atom and host the site elsewhere (like GitHub pages) and avoid CodePen entirely if you choose.