Table Of Contents
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
- Headover To Your CSS Section
- Click on the settings(wheel) icon
- Then Scroll Down and find the Add External Stylesheets/Pens
- 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)
Done Now You can use your linked stylesheet in your codepen project as usual now do same for javascript
How To add JS Libraries
- Headover To Your JS Section
- Click on the settings(wheel) icon
- Then Scroll Down and find the Add External Scripts/Pens
- 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)
Amazing! I don’t know this possibility of putting a same style sheet all over my project with code pen! Goodbye the ugly testing!!
What do you mean by ugly testing
Ugly trunk of code in the codepen ;) sorry my English is terrible and it s difficult to figuring out ideas ;)
No problem