The Best Sites to Find Pre-Written Code Snippets

If you’re thinking about learning to code or you’re new to the programming scene, one of the most intimidating parts of getting started is the sheer enormity of it all—unlike building things in the physical world where you don’t usually produce basic building components yourself, building a website is an exercise in creating something out of nothing using only coding language. Where do you even begin and how can you possibly get it all done in a reasonable amount of time?

One secret of the programming trade is that building websites or other applications isn’t all that different from building in the real world—just like most contractors don’t manufacture their own bricks, or cabinet boxes, or flooring, coders don’t always need to build everything from scratch, either. The more you learn about coding, the more you’ll start to see that certain basic and repetitive functions—for instance building menus, tables, or forms on a website—don’t need to be reinvented each time you sit down at your computer. You’ll write code along the way that you’ll be able to call on again in the future (rather than rewriting it), but—on top of that—there will be times when you won’t even have to write the code yourself to begin with.

No, we’re not talking about plagiarism, we’re talking about the open source, collaborative nature of tech—the fact that websites and forums exist all over the internet where coders who’ve come before you share their solutions to coding problems in the form of short bits of code called code snippets. Other programmers are then able use those snippets themselves, possibly even adding to or improving on them.

In order to shed more light on the fact that you’re not alone, coding doesn’t always have to start from the ground up, and that there’s a whole world of resources out there ready to provide you with inspiration, guidance, and shortcuts, we’re giving you a roundup of four solid sites for finding code snippets. You can study these snippets, incorporate them into your own development projects, and eventually even start sharing snippets you’ve written with other coders.

1. Stack Overflow

If you’re looking for examples of code to help you puzzle through a dev problem or tackle a routine function that doesn’t need to be rebuilt from the ground up, Stack Overflow should be at the top of your resource list. Stack Overflow is an online forum for programmers built around a question and answer format—making it an ideal starting place for beginners, but it’s no less useful as you level-up your skills.

The Stack Overflow model is incredibly simple—users post questions and other users post answers. Popular answers are upvoted by users viewing the question, and the original poster can choose to check off the answer they find most helpful as “accepted.” The guidelines on Stack Overflow include limiting questions to specific programming problems, software algorithms, coding techniques, and software developer tools. Posters are also asked to try to find a solution themselves before posting a question, and to include examples of those attempts in their post.

Because many of the questions posted on Stack Overflow are specific to coding issues (and are publicly searchable), answers often take the form of sample code, making it a great repository for practical code snippets. In the case of reusing material from Stack Overflow, the site administrators ask that developers attribute their sources. Notes attributing code snippets to their original posters can be easily added to your own code with HTML comment tags (e.g. ).

Participating in a forum like Stack Overflow isn’t just a great launching pad for learning basic coding tricks and finding code snippets to use, it’ll also help you plug into the larger programming community, and that kind of active participation can be a helpful talking point when you’re networking or interviewing for jobs.

2. CodePen

CodePen is a favorite resource with our Skillcrush dev team, and for good reason—with a robust set of features and a community-based approach to sharing and presenting code, CodePen is a premiere site for picking up coding tips and tricks from other users, and returning the favor when you make your own programming breakthroughs.

“Pens” refer to sets of HTML, CSS, and JavaScript code that users upload to their CodePen profile, where they can receive feedback on their code and continue to edit it after it’s been posted. CodePen has a free to use, built-in text editor for creating Pens, which includes helpful, code-centric features like syntax highlighting (displaying text in different colors and fonts based on its coding categories), Emmet (a coding efficiency tool that autocompletes code and expands shorthand into full-fledged code), and find and replace (allowing you to zip through lines of code without struggling to keep or find your spot). CodePen’s editor also has a live preview area on-screen that updates and displays the results of your code as you edit it.

Publicly posted Pens can be searched and viewed by anyone, which means that if you come across a particularly helpful piece of code you can add it to your own toolkit—public pens are considered open source, so it’s perfectly legal (and ethical) to use them, share them, and alter them as you see fit. For instance, if you want to create a “swinging image” effect with CSS and need some inspiration or pointers to figure out how, it’s fine to incorporate this effect by Christopher Mlalazi into your own site, and to use it (or add your own tweaks to it) in future situations—that’s the spirit of open source. However, don’t forget to also be a good community member—CodePen allows you to “heart” Pens you find helpful, and their “fork” feature for copying code helps maintain a trail of borrowed code back to its original programmer. Be sure to use both of these features when you borrow code.

3. Code My UI

Whether you’re looking for inspiration to breathe life into a dull user interface or have an idea in mind for your site that you can’t quite pull off, Code My UI is a treasure trove of code snippets that can help take your design to the next level. Unlike CodePen or Stack Overflow, Code My UI isn’t a user community—you won’t find any social media features or community forums—but what it lacks in interaction, it makes up for in being a straightforward listing of practical code applications.

Code My UI’s snippets aren’t posted directly by users—instead they’re curated by the site’s admins from other code repository sites, But—unlike repository sites that involve wading through Q&A’s or forum posts—Code My UI’s snippets are presented in an easy-to-browse layout that lists the snippet’s name and description, a link to its original source, and—most helpfully—an example of the code in action.

Rather than presenting the description “Pure CSS Gradient Color Slide Puzzle Style Loading Animation” with no context other than the raw source code, you’ll see an image of the loading animation as it will appear on a site using the code. This can be particularly helpful if you’re still getting your tech legs underneath you and a description alone doesn’t automatically conjure an image of the finished product—and, even if you’re a seasoned vet, it’s still nice to be able to see a working example of the code you might be using.

Code My UI regularly adds new code snippets to its site, and has a search bar that helps you zero in on the topics and functions you’re looking for.

4. GenerateWP

If you’re working with WordPress—a widely used content management system that lets you write, edit, and publish content on the web—GenerateWP is a tool you need to get familiar with ASAP. GenerateWP is a website that generates code for WordPress site features—menus, toolbars, sidebars etc.—using online forms that give specifications for the feature you’re trying to build. Your completed forms produce code that meets the latest WordPress coding standards and that you can then cut and paste onto your own site.

In addition to using GenerateWP to generate WordPress code yourself, you can also browse code generated by other users—by clicking on the homepage’s “Snippets” menu you’ll be able to search all generated code or specify your search by subcategory. As part of GenerateWP’s terms of service, snippets produced by their generators are public (unless you want to make them private through GenerateWP’s premium service), meaning you can download them, copy them, improve them, or share them with your own developer community.

By eliminating the need to code simple menus or toolbars on your site, or coming up with code for upgrades to features you’ve already built, you’ll have more time to focus on your WordPress site’s overall content, layout, and functionality, and you’ll be able to complete WordPress projects quicker and more efficiently.