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

HTML-CSS
1

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:

3 Likes
2

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
3

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
4

@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

2 Likes
5

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

6

Thank you @moshiurrahman92 for posting this question and thanks to all of the responders for posting the answers, it took me a few attempts to understand exactly what needed to go where, but when the penny dropped, it all made sense.

The bit I was confused about was where the <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> actually gets pasted, so if you’re new to FCC (like me, and never used CodePen before then follow these steps first.

  1. Create a CodePen account using the link posted above, and make sure you’re logged in
  2. In the top left corner of the CodePen page you will see the diamond shaped letter O, click there to open a side menu and select Create New Pen
  3. Name your Pen so that you will know what it is once you have a few
  4. Copy and paste the source details as your first line of HTML in the HTML pane (this is the bit I didn’t get for quite a while, not the pasting but the where!)
  5. Build your pen

Under the HTML pane is a button where you can test your work, get your results and see what’s missing.

Have fun.

2 Likes