DEV Community 👩‍💻👨‍💻

Nishtha Neeraj Kushwah
Nishtha Neeraj Kushwah

Posted on • Updated on

How To use libraries and framework in Codepen

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)

Top comments (4)

Collapse
 
planet_cbx 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
 
planet_cbx 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

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!