Tech Novice Tools

Helpful Resources


Stuff we used to build stuff

It takes a village...right?!

We're always on the lookout for things that make our job easier. Some of our frequent haunts are listed below. Check them out!

Last update: 08/14/19

Sites we esteem:

TNT-Sandbox, our sister site

Before we bring things to Tech-Novice, we often try it out here first to see if it's working ok.

You can check out those app designs too...eventually we hope they will wind up here.

If you want to check out our code, remember, in Chrome you can RMC the browser window and ask to 'View Source' to see the underlying code. Links in the source code can be opened so you can see the source code for CSS and JavaScript as well.

W3Schools : an interactive tutorial site for (nearly) all web technologies

Having trouble? Need to learn a new technology? This should be your first stop. You can interact with snippets of code and in some cases, add your own twist to stuff

Because this site is run by the World Wide Web Consortium, the material here is up-to-date and trustworthy.

Udemy: online, up-to-date frequently inexpensive tech training

Join Udemy and search just about any tech topic of interest and you can find excellent training with relevant materials.

Online materials are offered so you can follow along. Mobile and tablet technologies are supported.

Stack Overflow: Many questions answered here

Unlike W3Schools, this is not a tutorial site, but answers abound here if you ask the right questions.

When googling for an answer to a technology question, preface your question with a context (like 'javascript' or 'CSS' then a short phrase with keyword that summarize your inquiry.

When you get your search results, give focused attention on any 'hits' from Stack Overflow. They are often right on target and a green checkmark on a response lends all the more credibility to an answer.

We Stack Overflow!

Google Chrome, and Google Chrome Extensions

You should check out your web designs on all modern browsers, but our lab environment lends itself well to using Google Chrome, so that's what we are mentioning here.

You can customize Chrome with some plug-in software tools called 'extensions' and we have found these particularly helpful:

  • Web Developer Toolbar by Chris Pederick
  • ColorZilla
  • Corporate Ipsum
  • Browser Width

When coding, you can use Chrome's 'Developer Tools' to check on various aspects of your page's performance. The console is particularly helpful when checking out errors or variable values.

Brackets, an IDE

An IDE is a platform where you can write, edit and run your coding designs all in one place! HTML, CSS, JavaScript and PHP are supported.

Although learning an IDE can be just as daunting as learning a coding language, it pays many dividends once you master one.

Brackets is free and utilizes Chrome as its integrated browser

Brackets offers extensions to assist with various tasks. Here are some that we found helpful:

  • Beautify
  • Documents Toolbar
  • HTML5 Template
  • Bootstrap Starter Template
  • Emmet
  • PHP Syntax Hint
  • RCH Bootstrap 4 Snippets

HTML Cleaner and More: A web-app to remove tags from HTML

Only used once so far, but was useful to extract a bunch of tags while retaining content so we could send desired 'copy' to our HTML5 structural engineers!

Cupcake Ipsum, an random text generator using common confection words

Sweet! Use phrases, paragraphs, etc generated randomly using this site. Since they are English words, they will not trigger your spell checker unlike traditional Lorem Ipsum.

Using 'filler' like this frees you to make your designs and test them with test content without having to generate your real content until you or your team is ready for it.

HTML and CSS Validators

How do you know your code is 'valid'?

Sites that validate both HTML and CSS are so important that we put links to them on every page, in our footer.

They help us find syntax errors which might cause our code not to work as expected.

Palettable, Color Pallete Design

Use this site to create a harmonious color palette with up to 5 colors

Favicomatic, Create 'favicons' easily on the cheap (free)

Favicons serve as 'branding' images that identify and personalize your site. They appear in the browser tabs to the left of your page names and also appear when you bookmark pages.

This site lets you create not only favicons but also imagery for mobile devices

Google Fonts: CDN for beautiful fonts

Find beautiful, thematic fonts you can utilize with CSS to enhance the quality of your pages

The Noun Project, a searchable source for downloadable icon image files

Icons from this site are available for free on a limited basis; more are available in multiple formats with an affordable membership.

Simply search for an image, customize its color, format and size, and drag it to your desired location. This app is also available on your mobile devices.

Font Awesome, a searchable source for stylable icons

Again, like Noun Project, icons from this site are available for free on a limited basis; more are available in multiple formats with an affordable membership.

These fonts are activated using JavaScript and CSS and can be styled; therefore they are more flexible than ones from the Noun Project.

Random User Generator to generate random user profiles/pics

Useful site for generating random profiles and pics for testing your site's 'look and feel' using realistic imagery and text

CSS Zen Garden: Inspirational uses of CSS

This site is no longer receving new designs, but the ones that are there are 'eye-popping' and the code can be viewed and studied (and copied!), perhaps for your purposes

Web Design Playground: Experiment with snippets of HTML and CSS

Author Paul McFedries offers a genius website (for free) for testing HTML and CSS code blocks. He wrote the book Web Coding and Development (All-In-One) for Dummies which has been a great resource for our wizards!

Learning Web Design by Robbins: Beginner's Guide to HTML, CSS, JavaScript and Web Graphics

An extensive, well-written, colorful introduction to web design. Readable and comprehensive while being comprehensible.

Eloquent JavaScript: A Free, online JavaScript textbook!

A readable, informative online guide to all things JavaScript!

It also provides a coding sandbox where you can experiment with code and attempt the book's exercises.

Processing: Exciting coding environment for JavaScript, Python and Java

Get this platform to visualize coding designs with animations

jQuery: JavaScript on steroids!

Download the platform and incorporate innovative functionalities with this slick platform

XAMPP Apache: A testing-server for PHP Development

PHP is a server-side language and you need to have a 'testing server' on your local machine to test your PHP designs. This is an easy-install solution that creates that 'sandbox' for you!

Am I Responsive?: A widget to test your site for responsiveness

Upload your site into this little app and it will show you what it looks like on various platforms

Embed Responsively: Put YouTubes on your site

Want to embed a YouTube? This little app will help you do it.

Character Entities: Get special symbols here

Need that 'special symbol' that isn't on the keyboard? Here's a site that lets you get it using special codes called 'character entities'

Wolfram Alpha: Math/Tech knowledge on steroids

A great resource for techies. There's an app for your iPhone as well. A must have!