5 Tools to Help Beginner Web Devs

I start my fourth week of bootcamp at Viking Code School today and thought I should share a few of the resources that have been helping me along the way. There are a ton of great free learning materials online (I’m a diehard fan of The Odin Project) and many posts about them, so this post is instead meant to highlight 5 wonderful sidekick tools.

1. Regular Expressions 101

This site blows away any of the other regular expressions helper sites I’ve seen. They explain the meaning of each symbol you put in the expression, show all of it’s capture groups (if applicable), highlight the expression as you type to show errors, and have a quick reference list to jog your brain as you look for the perfect pieces to stick together. If you need to do anything with a regex, check this site out!

2. Python Tutor

I think their description says it best:

Python Tutor, created by Philip Guo, helps people overcome a fundamental barrier to learning programming: understanding what happens as the computer executes each line of a program’s source code.

Walk through your Python, Java, JavaScript, Ruby, TypeScript, C, or C++ code line by line, watch whats happening to all of your variables along the way, and really get an understanding of what the heck it’s doing.

3. Digital Color Meter

This is not a website, but a built in utility on Macs. If you have a Mac, you can pop open this handy-dandy tool and see the color values of anything on your screen. It has been extremely useful when trying to pick colors for a quick project!

4. Atom

Again, I’ll use their description here:

Atom is a text editor that’s modern, approachable, yet hackable to the core — a tool you can customize to do anything but also use productively without ever touching a config file.

Out of the box you can use Atom pretty much exactly like you would any other text editor, many of the hot keys are the same, but when you decide to go turbo — you can take your pick from thousands of open source packages. Two useful packages to start out with are script (to build your code in Atom) and atom-terminal-panel (to open up a terminal session in the bottom panel of Atom. I would be remiss if I didn’t also mention cmd-shift-p to open the command palette and search all the available hot keys.

5. W3Schools

W3Schools is an HTML/CSS/JavaScript learning mecca. I often go to them to get refreshers on HTML elements and CSS options because they have well laid out examples, simple explanations, and keep all the extra stuff to a minimum so you don’t get distracted. They also have Bootstrap materials that I’ve found extremely useful.