How codepen.io works? should I need to sign up in this app

Tell us what’s happening:
**how to build projects in it? I have no idea what is the codepen. How codepen.io works?
** Can anyone describes me how to code in the app… And pass the challenge… I haven’t seen this thing before.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

1 Like

You shold sign up, because if not you cant save and persist changes

Use this as reference https://codepen.io/uwemneku/pen/vYNodXa

I believe this part is a key:

Put this in html
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

Orin Settings where you can put the link to cdn https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

Read all code and open Settings to see more info

2 Likes

Just go to codepen.io create a new pen and add links @qant has mentioned
you will be able to test if your web-page passes the test cases .
after passing all the test cases submit the pen link in the assignment section and done .
you will get hang of it after some while .

1 Like

@moshiurrahman92, in addition to what the others have said you can read codepen’s official documentation to learn more about how it works.
Also, while FCC calls them “projects” in codepen you will create a new pen.

  • The free version of codepen allows only one project, but an unlimited number of pens. For this reason freeCodeCamp suggests the use of pens to do the projects for the first certification (note that the examples are in pens, and the test suite is also in a pen you can fork)

Hello there.

Some things to note when using CodePen:

  1. CodePen does not expect any content outside the body tags.
  2. All meta, link, and script information must be put in the :gear: settings section of the HTML editor.
  3. You do not need to/cannot link the CSS in your HTML, if you place the CSS in the appropriate section.
  4. The editors offer the ability to format and analyze your code, providing useful information about forgotten closing tags etc.

If you are still confused with how to use CodePen, please read the official documentation.

Hope this helps

1 Like

Thank you all…
this information really helps…:slight_smile: