If you are a web or software developer, you probably already know CodePen. That's why at Neoteo we're going to share the best tips to get the most out of this platform, so you can edit and create HTML, CSS, and JavaScript projects in real time.
For those who don't know CodePen's features, let's do a quick overview. CodePen is a platform that you can incorporate into your development tools, ideal for testing, editing, practicing, and sharing small web or frontend projects (pens) in HTML, CSS, and JavaScript (it supports preprocessors). That way, you and the community can make improvements in real time.
Run Button
If you are one of those users who is not satisfied with the output of the code while you're developing, you can disable the Auto Update Preview option and get a Run button instead. That way, every time you update the design, you can click the button and refresh the preview.
Settings – Behavior – (Disable) AUTO UPDATE PREVIEW
This is recommended for heavy projects with a large amount of code and a mix of languages.
Export
Once your Pen is saved, you can export it as a ZIP file with all the languages (HTML, CSS, and JS). But there is also an option to save it as a GitHub gist.
Export - Save as GitHub Gist
This way you'll have your work as a GitHub repository.
Find and Replace
Find and replace is one of the most important actions on the platform, because developers change names, variables, and other elements very frequently.
Ctrl + Shift + F (enable search) – Type the word to replace in Replace – Enter – Write what you want to insert in With – Enter – Then click Yes and All.
Get Individual Code Files
If you export a Pen the conventional way, you get all three files (HTML, CSS, and JS), but if you need only one of them, use this action.
Change View – Direct Code Links: here you choose the language you want – And you can save it from a browser tab.
Pen as Template
If you use almost all of your Pens with the same template, you can activate each Pen you create with the template you usually use. But first you'll have to save it as a template.
Settings – Give the Pen a title – Select the Template option
We hope that with the tips we've given you to optimize your work in CodePen, you'll be able to get more out of the platform and improve your developments.
If you want us to do a second part of the article, we look forward to your comments.
