Frontend Fun: Meet the Fantastic Four Dev Tools for Open Source Contributions
Tags: beginners, opensource, webdev, productivity
Published: 2023-03-05 22:31:44

---
title: Frontend Fun: Meet the Fantastic Four Dev Tools for Open Source Contributions
published: true
date: 2023-03-05 03:21:39 UTC
tags: #beginners #opensource #webdev #productivity 
canonical_url: https://chrissycodes.hashnode.dev/frontend-fun-meet-the-fantastic-four-dev-tools-for-open-source-contributions
series: Chrissy’s Open Source Survival Guide
---
![In a blue background, the post's title, " Frontend Fun: Meet the Fantastic Four Dev Tools for Open Source Contributions" is written in white text with the Fantastic Four log, a number 4 in a black circle, shown on the lower right hand side.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9cf9mkatvje9xqksglof.jpeg)
## We Meet Again!

Welcome back, open sourcer! Oh, your utility belt feeling light? Don't worry, I got you covered. As you gain experience with open source contributions, it can be challenging to choose the right tools. That's why I've compiled a list of 4 frontend dev tools that can help you power through your issues and pull requests. So sit back, grab some snacks, and prepare to wield your wand (or in this case, keyboard) with ease!

![The ladies from the Avengers walk](https://media.giphy.com/media/VIul6kR8mDHzXoVMLv/giphy-downsized-large.gif)

## 1. CodePen

If you're like Reed Richards (aka Mr. Fantastic) and are constantly experimenting with new ideas for your open source contributions, then [CodePen](https://codepen.io/) is the perfect weapon of choice for your utility Not only can you prototype and test frontend code quickly and easily, but you can also create folders for your rough code, which are like the first draft of your college essays, but in code. I tend to do this when Im struggling to develop the idea that I or someone else proposed in an issue request. Its also web-based so if youre constantly on the go, you to code & save your ideas on your phone on your way to your next class and continue coding on your computer after a long day of beating foes like Dr. Doom. Pretty Fantastic huh? Now CodePen is only one of the many tools in your utility belt. So, without further ado, let's meet number two!

![Mr. Fantastic in a fighting stance with stretched limbs](https://cdn.hashnode.com/res/hashnode/image/upload/v1677983768809/7415a62b-3485-4fef-829d-f2355f35fb2b.png)

## 2. GitHub

If you're like Johnny Storm (aka Human Torch) and love keeping up with the latest repositories or just want to connect with other contributors, then [GitHub](https://github.com) is your go-to weapon. It's like Google Drive for coders, but cooler. You can store all your code in one place, collaborate with others on projects, and even show off your superpowers skills with some sweet KOs, I mean stats and a killer profile page. Plus, who doesn't love a good "fork" every now and then(fork basically means copying a projects repository. Think of it as making a duplicate of your essay on Google Docs)? GitHub definitely deserves its spot in your utility tool kit, but theres still more you need to know.

![Johnny Storm aka Human Torch](https://media.giphy.com/media/l0HlBZC4NGBsNrGi4/giphy.gif)

## 3. Bootstrap

If you can adapt to any programming language with no fear like Benjamin Grimm (aka The Thing), then [Bootstrap](https://getbootstrap.com) is for you. All you need to do is copy the activation link to the <head> area of your HTML file, refer to the Docs section to pick any of the components you want, and use it to create anything you want. Want a navigation chart? Boom! Want a snazzy profile card? Bam! 😊 Possibilities are endless! Now theres only one more tool you need to make your utility kit as awesome as Thors Mjolnir(its a magical hammer that can catch thunder).

![The Thing, a man covered in rock is ready to fight](https://media.giphy.com/media/21RwHpDY8UbBkK0Ca8/giphy-downsized-large.gif)

## 4 Visual Studio Code (VS Code)

If you're looking for a tool that's simple yet reliable, like Susan Storm (aka The Invisible Woman) recommends [Visual Studio Code](https://code.visualstudio.com). It's like having your own trusty sidekick with a utility belt, because not only can you save your code, it's packed with so many extensions that can make your contribution process so much easier. Here are a few of my favorites:

- [GitHub Pull Requests and Issues](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github): This extension makes the PR and IR creation process faster than The Flash high on sugar(Non-comic book fans: The Flash is a superhero who runs fast. He is also the co-founder of the Justice League).

- [GitHub Repositories](https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub): With this extension, you can fork repositories without even leaving your cozy coding cave. Its like having your own Jarvis but silent(Non-comic book fans: Jarvis is Tony Starks virtual assistant.).

- [GitHub Codespaces](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces): For those moments when you just don't feel like going on GitHub, this extension lets you access a codespace without even opening your browser. It's like having a secret apartment at the Baxter Building(Non-comic book fans: this is the Fantastic Fours headquarters).

![Susan Storm in a training session](https://media.giphy.com/media/3oKIP8UgW4JbfzbYEE/giphy.gif)

## Mission Complete

Congratulations, you now have your Open Sourcer toolkit. Before I let you go, I want you to remember this: Open source contributions begin and end with you, so use your powers wisely. If youre still hungry for learning more tricks, follow me on [Hashnode](https://chrissycodes.hashnode.dev/) and my other socials via [Linkfree](https://linkfree.eddiehub.io/CBID2). Now go forth and save the open source world! 😊

![Follow mini Dr. Strange through his portal](https://media.giphy.com/media/l0HlxJMw7rkPTN8sg/giphy.gif)

## Credits

Avengers Assemble GIF by [Marvel Studios](https://media.giphy.com/media/VIul6kR8mDHzXoVMLv/giphy-downsized-large.gif)

Lets Go GIF by [Marvel Studios](https://media.giphy.com/media/l0HlxJMw7rkPTN8sg/giphy.gif)

Fantastic Four Move GIF by [20th Century Fox Home Entertainment](https://media.giphy.com/media/3oKIP8UgW4JbfzbYEE/giphy.gif)

Fantastic Four Logo by [Marvel Cinematic Universe Wiki](https://marvelcinematicuniverse.fandom.com/wiki/Fantastic_Four/Illuminati_Assembled)

Fantastic Four Power Levels GIF by [Power Levels](https://media.giphy.com/media/kgyLlpe3YCkmI/giphy.gif)

Image of Reed Richards by [Marvel Database](https://marvel.fandom.com/wiki/Reed_Richards_(Earth-12131))

The Thing GIF by [Marvel Contest of Champions](https://media.giphy.com/media/21RwHpDY8UbBkK0Ca8/giphy-downsized-large.gif)