Let’s Get Basic:

Some (Free) Tools and Websites for Html, CSS, Design +More That EVERYONE Should Know About

⓵ W3Schools

W3Schools. They don’t call themselves “the world’s largest web developer site” for nothing. Super clear and simple tutorials, references, code explanations with illustrations, and even an online in-browser “Try it yourself” editor. Makes testing out a small piece of code a snap!

Try it Yourself feature on W3Schools.com

⓶ Canva!!!!

Canva is THE BEST. There is literally nothing you can’t design on Canva. A basic free account (there’s a paid premium version as well) gives you access to loads of images, templates, font layouts and more. There are templates for EVERYTHING. SoundCloud banner, InstagramStory, Zoom background, YouTube thumbnail… they’ve got a template and loads of designs for any type of content you can think of. Even just using the blank template option for any type of content is super helpful, since it gives you the exact size dimensions. Awesome for design beginners who get the heebie-jeebies from Adobe Creative Cloud (illustrator, photoshop) 😜.

Example usage of Canva’s “website” template.

⓷ Pixlr

Pixlr is a free online photo editor (Pixlr X is free). Perfect for quick and simple edits, like removing the background of a photo and making it transparent. Kinda like a very scaled-down version of photoshop. Great for general design and content creation as well.

Using Pixlr to remove a background.

★ Gimp and Inkscape are two more photoshop alternatives- they are available for free download (are not in-browser like Pixlr or Canva).

⓸ Your Chrome DevTools (obvious…but maybe not?)

Chrome DevTools. Use them, ‘nuff said. Chrome DevTools are built directly into the Chrome browser, just right click anywhere on your screen and click ‘inspect’ to bring it up. It can be a lot to look at…read more here about the different DevTools tabs.

Inspecting a button with DevTools to see what attributes/selectors it has (some default assigned by a Rails “form_for” , some additional ones added) and what CSS styles it is currently inheriting.

⓹ Browser Extensions

This deserves it’s own digest, but I’ll mention two pretty simple and practical color & font related extensions:

*ColorZilla- Basically an eyedropper/color picker for getting an exact color reading off of anything on a webpage.

*WhatFont?- Does for fonts what ColorZilla does for colors. See a font you like on a website? Use WhatFont to roll over it and find the exact font-name, font-size, and font-weight used.

Example of font information returned by WhatFont?

⓺ CodePen

CodePen is “the best place to build, test, and discover front-end code.” CodePen’s online editor (HTML, CSS, and JavaScript) allows you to quickly try out or test isolated features, elements, or animations. You can also browse “pens” created by other developers to get inspired and find ideas, as well as open those pens in the editor to see the code they used. You won’t believe the things some people have created with just pure HTML/CSS.

A fun “send” button created by Aaron Iker on CodePen

⓼ Moqups

Moqups is a great tool for throwing up quick wireframes, charts, graphs, user story mapping, and all that good product visualization+development stuff. (downside is …the free version is somewhat limited).

⓼ YouTube

My favorite online learning platform 😎. Seriously, there are video tutorials for almost anything.

That’s it! These are just a couple websites and tools I find myself using on a weekly, if not daily, basis.