DEV Community

loading...

How To use libraries and framework in Codepen

Nishtha Neeraj Kushwah
I Love stuff about web dev
Updated on ・2 min read

Table Of Contents

  1. What is Codepen?
  2. How To add CSS Frameworks
  3. How To add JS Libraries

What is Codepen?

Ans. CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers can create code snippets, called "pens," and test them.

How To add CSS Frameworks

  1. Headover To Your CSS Section Step1
  2. Click on the settings(wheel) icon Step2
  3. Then Scroll Down and find the Add External Stylesheets/Pens Step1
  4. And then in the input section add your style sheet url or search for any style sheet in searchbox (for example:bootstrap's css link https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css) Step1

Done Now You can use your linked stylesheet in your codepen project as usual now do same for javascript

How To add JS Libraries

  1. Headover To Your JS Section
  2. Click on the settings(wheel) icon
  3. Then Scroll Down and find the Add External Scripts/Pens
  4. And then in the input section add your script sheet url or search for any script in searchbox (for example: bootstrap's JavaScript link https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js)

Discussion (4)

Collapse
charlenebx profile image
Charlène Bonnardeaux

Amazing! I don’t know this possibility of putting a same style sheet all over my project with code pen! Goodbye the ugly testing!!

Collapse
nishthaneeraj profile image
Nishtha Neeraj Kushwah Author

What do you mean by ugly testing

Collapse
charlenebx profile image
Charlène Bonnardeaux

Ugly trunk of code in the codepen ;) sorry my English is terrible and it s difficult to figuring out ideas ;)

Thread Thread
nishthaneeraj profile image
Nishtha Neeraj Kushwah Author

No problem