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!
