These are "think pieces" that deal with topics other than coding

  • Reference Pieces

  • Getting Started with Vue.js

    Vue is a progressive framework for building user interfaces. Rob Gravelle examines the different ways to use Vue in your projects.

  • How to Use HTML Callouts and Quotes

    Learn more about how to use callouts and quotes in HTML to make your pages cleaner and more attractive.

  • JavaScript Prototypal Inheritance in 2018

    With somewhat lackluster browser support, it might be a tad premature to jump on the ES6 class syntax bandwagon. Instead, Rob Gravelle takes another look at Prototypal Inheritance, and explores its specific advantages and disadvantages.

  • Working with HTML Forms

    Learn how to create, implement and style HTML Forms via CSS.

  • Modify jQuery Autocomplete Widget Response Data

    Rob Gravelle shows us how to customize the jQuery Autocomplete widget's menu content and appearance using the response event and _renderItem extension point.

  • How to Get 10,000 Pageviews in a Week

    You've built your site, but how do you get traffic? Can you get 10,000 pageviews in a week? Bradley Jones goes over some things you need to do.

  • Enriching the Expressiveness of Web GUIs with CSS3 Transitions

    CSS3 Transitions allow you to change properties in CSS values. These transition effects can be applied to the CSS property range, namely background color, font, opacity, height, width, and so on. Cristian Ionescu shows you how to get started.

  • Advanced HTML Table Features

    HTML tables don't have to be boring. Learn how to make the tables on your dynamic web pages more unique and functional with various methods of displaying your data.

  • Create a File Uploader in WordPress

    Many WordPress sites include file upload fields in registration and data import forms. Learn how to add a file upload form to a WordPress page that is processed by a custom plugin on the server.

  • Display Cross-domain Data Using postMessage()

    Perhaps there is no greater bane to a web developer's existence than the same-origin policy. Rob Gravelle shares a relatively new technique for sharing data across two domains that utilizes the JavaScript postMessage() method.

  • How to Add Multiple Backgrounds and CSS Gradients

    Learn how to add multiple background images and how to create CSS gradients.

  • Best HTML5 Website Builders for eCommerce in 2017

    In previous articles, we listed just a few of the best online website builders in 2017. In this installment, Rob Gravelle focuses on sites specifically devoted to eCommerce.

  • How to Use CSS3 Hex Digits on Your Web Page

    The preferred way to set colors on your Web pages is via CSS or CSS3 and hex digits. Learn more about how to color your online world.

  • A Few of the Best Online Webmaster Tools

    One of the coolest trends is the emergence of online tools. In this follow-up, Learn about a few tools that are of particular interest to webmasters.

  • Create Case Studies to Impress Potential Clients

    Learn how build an image of trust in the minds of potential clients with case studies that show that you can solve their issues.

  • How to Animate Your Website with CSS3

    Learn how to use some of the most-used CSS3 animation properties to make your website more attractive.

  • A Designer's Guide to Getting Started with Web Development

    Your design options may be limited due to lack of technical skill. Designers who are capable of efficiently collaborating with developers will be able to open the doors to rewarding projects and lots of development in the future.

  • Exploit the Versatility of HTML Lists

    Learn how to create different types of lists: unordered, ordered, nested lists, menu, drop-down lists, etc.

  • How Your Website Can Help You Build an Online Reputation

    Looking for ways to build your online reputation? If you own a website, you can quite easily use it to build your online reputation. If you use your website in the right way, it can help you to boost your online presence.

  • Top 8 WordPress Social Media Sharing Plugins

    WordPress developers use a variety of WordPress social media sharing plugins. We will discuss a small subsection of the myriad WordPress social media sharing plugins.

  • Working with Cropper.js Previews

    The fengyuanchen Cropper.js library can provide a preview of the cropped image, thus providing real-time updates of the cropping container area. Learn how to modify a preview's size using a combination of CSS and JavaScript.

  • Crop Images Online using the Cropper.js Library

    Although certainly possible, writing code to crop an image within the browser is more trouble than it's worth, unless you are using a client-side image cropping library. Rob Gravelle describes how to select a local image and crop it using cropper.js.

  • The Responsive Breadcrumb Trail and Sitemap

    In the Building Responsive Web Page Headers article we learned how to construct our page header so that its optimized for both desktop and mobile devices. Rob Gravelle explains how to apply the same technique to the breadcrumb trail so that it switches from a horizontal layout to a vertical one depending on the viewport width.

  • 4 Over Thinking Errors that Can Destroy Website Creativity

    Exlore how creativity can be a intangible and subjective quality that forms the backbone of any website and best to leverage it.

  • Reference External Resources from your Bookmarklets

    In this tutorial, Rob Gravelle shows you how to reference external resources from a bookmarklet using a free tool.

  • Practical Guidelines for Monetizing your Website using Referrals

    There's more to making money online than building a website and throwing a few ads on it. Rob Gravelle shows you the right way to use referral links on your websites.

  • Make Site Content Available Offline using Service Workers

    More versatile that the maligned AppCache, the Service Worker gives control over caching and how requests are handled to the developer. Rob Gravelle describes how to implement our own application cache using a Service Worker.

  • Create a Django Python Project with PyDev

    The Django Python framework was created in order to encourage "rapid development and clean, pragmatic design". Rob Gravelle explains how to configure your development environment and create a new Django Python project in Eclipse using the PyDev IDE plugin.

  • Want to Know What an IDE is? Read Here

    IDE's have been around for decades, yet there are many people who simply are not clear on what an Integrated Development Platform, or IDE, really is. This slideshow will provide you with several great examples.

  • Dynamic Table Manipulation Using jQuery

    The Working with Tables Using jQuery article garnered many questions from readers about how to accomplish other operations on HTML tables. Rob Gravelle incorporated his answers into a new library. In today's article, he goes over some of its functionality, including how to insert rows and columns in a table at a given index.

  • Declare and Respond to a DOM Element Ready Event

    In this follow-up to the Respond to DOM Changes with Mutation Observers article, Rob Gravelle explains how to utilize Mutation Observers to tell us when particular elements have been added to the DOM.

  • Adobe Creative Cloud Update Review

    One of the most important software companies for web creation and design specialists is Adobe. In this article, we’ll take a look at some of the important updates to Creative Cloud and Adobe Stock as we attempt to install the latest version.

  • Expected New Features in HTML6

    In this article we look at a number of the proposed changes for HTML6. Some of these are stronger micro-formats, automatic image resizing in the browser, express tags, and more.

  • 10 Tips for Coding with Bootstrap

    In this article we look at 10 things you need to know before you decide to use Bootstrap.


  • How to Appropriate Custom Fonts from other Websites Demo

  • 10 Ways IoT Will Affect Your Life

    The Internet of Thing (IoT) is moving fast and its probably already in more places and embedded in more systems then you may realize. Take a look at this slideshow and see 10 unique ways this technology may effect you.

  • Easy Ways to Add Style to your HTML Lists

    Rob Gravelle shows how to style your HTML lists to stand out from the crowd.

  • 10 Tips to Improve Your Coding Workflow

    Programming is one of the most important IT skills in the world today. If you master programming in a variety of languages, you will have many work opportunities before you, now, and in the years to come. One down side is not learning or developing an effective workflow, which could play havoc with your productivity. In this article we look at ten ways to improve the workflow of your development project.

  • Nesting Templates and Layouts with Go Web Programming

    We take a look at some of the functionality in Go Web Programming. Go is a relatively new programming language created to be simple and efficient for writing backend systems.

  • An Introduction to Open Source Software

    in this article, Nathan Segal discusses the pro's and con's of introducing Open Source Software into your development projects.

  • Programming with Peripherals

    In this article we’re going to at programming with and for peripherals, including keyboard, mouse, as gesture devices such as Leap Motion and Windows Kinect as well as devices such as pens and microphones.

  • Intermediate Web Page Graphics

    Following on the previous article (Basic HTML: Adding Images), here is more information on the main web formats, which are JPEG, GIF, PNG, and PNG-8, along with examples of each. In addition you will learn more about SEO and some basic placement of images on your web pages with CSS3.

  • Inside Adobe Extract

    In this article, Nathan Segal takes a look at the latest features for developers in the new Adobe Extract, along with some basic tips on how to leverage some of these new features, and more.

  • 7 Tips to Make Your Websites Load Faster

    One of the most important considerations of building websites is to make sure they load quickly. Before you begin to optimize your site(s), it´s important to see how well they are functioning, in this story, Nathan explores 7 very useful tips for insuring this practice.

  • Big Data and Privacy Concerns

    The collection of big data has been around for quite some time, as are ways of sorting through that data, using techniques such as data mining. One major concern is the issue of data collection and privacy.

  • Establish Persistent HTTP Connections Using the EventSource

    Rob Gravelle resides in Ottawa, Canada, and is the founder of GravelleWebDesign.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses.

    In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92).

  • 8 Responsive Design Mistakes to Avoid

    In this article we look at 8 responsive design mistakes to avoid. Doing so will help you build better sites.

  • 7 Mistakes Developers Make When Using 3rd Party API's

    Following up on the last article on API's I spoke with Shawn DeWolfe again on seven mistakes that designers make when working with 3rd party API's. What you will read is the result of our conversation.

  • Responsive Design Cross-Platform

    In the last few years, responsive design has changed the way designers build websites and the way design programs work. In this article we look at how this has changed the workflow for designers and developers.

  • Receive Updates from the Server Using the EventSource

    The EventSource is part of the Server-Sent Events (SSE) API, which is a standard that includes to a mechanism for servers to push content to the client. In today's article, Rob Gravelle explains how to use the EventSource to establish a connection between the browser and server and initiate a data transmission.

  • Programmatic WordPress Post Creation

    While WordPress's built-in editor suffices for most applications, there are times when you need to create more complex posts or create them in bulk. For those jobs, it might be more economical to write code to take care of the post creation for you.

  • 10 Tips for Great Sliders in WordPress

  • Performing Batch DOM Operations Using jQuery

    jQuery's extensive collection of Document Object Model (DOM) methods' best feature is their ability to be applied to multiple objects at once and modify multiple object attributes within one function call. Rob Gravelle provides an overview on how to use jQuery's DOM functions to perform batch operations.

  • 10 Tips to Improve Your Coding Workflow

    Programming is one of the most important IT skills in the world today and one of the most important areas of opportunity for developers is to develop an effective workflow for your site. In this article, Nathan Segal discusses the 10 best ways to develop an effective and productive workflow for you site.

  • How to Configure the Generate Theme for WordPress

    In an earlier article we looked at setting up the Genesis framework and the Genesis sample. In this article we delve deeper into the process by using the Generate theme.

  • Essential Plugins for WordPress

    WordPress is a brilliant Content Management System, in fact it the single most popular CMS system in the world with a huge number of plugins and templates available for you to build just about any site you can imagine. This flexibility is one of the many items which make WordPress one of the best website development programs available, this article will highlight a few of the essential WordPress accessories for your site.

  • Working with Ranges in Your HTML5 Web Pages

    In this article, Vipul Patel walks you through the basics of working with ranges in your HTML5 web pages.

  • 10 Ways to Speed Up Your WordPress Sites

    WordPress is one of the most popular CMS’s (Content Management Systems) available and is widely used by many users. Unfortunately, a large variety of those users don’t realize that a slow site can cost them, not only in performance but loss of viewers. Here are ten things you can do to speed up your WordPress site.

  • Adobe Photoshop to Edge Reflow Tips and Tricks

    In this article we continue our exploration of Photoshop CC, Edge Reflow CC and the new Generator plugin with the intention of quickly exporting web layouts from Photoshop into Reflow in a web ready format. As you'll see, the process needs some work.

  • Handling Page Not Found Errors When Using Offline Caching

    Using a slash (/) in the Manifest files' FALLBACK section has the unfortunate side effect that typos in the URL path will cause the fallback resource to appear, instead of the 404/500 HTTP errors that should happen when online. Rob Gravelle presents one way of dealing with this issue so that the fallback resource does not come up when the user is in fact online.

  • Connecting Adobe Photoshop to Edge Reflow

    In this article we look at the process of connecting Adobe Photoshop to Edge Reflow with the Generator plugin. Note that this is designed for both Photoshop and Reflow within the Creative Cloud.

  • Awakening to Social Media Using APIs and Widgets

    This article walks readers through the rise of programmatic access to social media information and the evolution of social media as a result of platformizing their services.

  • What Makes a Great API?

    API’s are essential to the development of an interactive webpage, they play a major role in the World Wide Web today, this article discusses the necessary points of an API to which any respectable developer should understand and be familiar with.

  • A Look at OptimizePress 2.0

    In this article we take an inside look at OptimizePress 2.0, which is a theme/plugin which allows you to create squeeze pages, sales pages, a blog, integrate email marketing and more.

  • Review: Edge Animate CC for Dummies

    In this review, we look at Adobe Edge Animate CC for Dummies. Edge Animate is one of the programs available as part of the Adobe Creative Cloud.

  • A 5 Minute Overview of 'Uploadcare'

    Uploadcare is a new service that helps media creators, businesses and developers to easily store, process and deliver visual content to their clients and other team members.

  • Review: CSS Matic

    In this article we have a look at CSS Matic, a web-based tool that allows you to create custom CSS3 gradients, border radius effects, drop shadows and more.

  • WPTouch Pro 3 Advanced Settings

    We’ve already taken an overview at WPTouch Pro, so today we’re going dig-in and look at some of the more advanced features that allow you customize the look and feel of this program.

  • Review Duda Mobile

    This article is a review of Duda Mobile. A mobile website develop tool which allows you to create custom mobile websites.

  • Email Marketing: The Key to eCommerce Success

    In this article you'll find out why you need an email marketing list for your business and how it can serve you over the course of time. You'll also learn about five methods of list building.

  • Introducing the Maqetta HTML5 Editor

    Maqetta is an open source initiative of the Dojo Foundation that provides WYSIWYG web development in the cloud or locally. Moreover, it supports drag & drop assembly of live UI mockups, including HTML5 components. In today's article, Rob Gravelle gives Maqetta a once-over to test its design capabilities.

  • Review: Sencha Animator for CSS3 Animations

    Today we look at Sencha Animator, a program which allows you to create CSS3 animations. These animations are designed to have a similar look and feel as Flash, but with CSS3 and HTML5.

  • Review: WPTouch for WordPress

    In this review we look at WPTouch Pro 3, a WordPress plugin which allows you to create a customized mobile site from within WordPress, using your existing layout as the source material.

  • Accessify Quick Form Builder

    Building forms for you web page can be time consuming and code intensive, Accessify Quick Form Builder can help you to reduce the time it takes to develop the forms you need. In this article we have a look at the Accessify Quick Form Builder and some of its features.

  • HTML5 Attribute Change Reference for Web Developers

    With each iteration of HTML you would expect to see new attributes introduced. Well, HTML5 is no exception. In all there are over 40 attributes that have been added in HTML5, some of which that are totally new, and others that have been around, but have been added to more elements. In this reference for web developers we will discuss each of them, tell you how they are used and discuss various other aspects of HTML5 attributes.

  • So, You Don't Want To Cache, Huh?

    Is you want to disable browser caching for a specific page, you'll need to take some steps to make sure a page does not cache in all browsers. This tutorial will walk you through the steps of disabling browser caching for a web page. 

  • Top 10 HTMLGoodies Tutorials for Web Developers

    Web developers often have a hard time wading through the myriad of tutorials and articles available on the topic of website development. We'll do the wading for you in this article, and will show you 10 tutorials on HTML, JavaScript, CSS, mobile development and more!

  • Web-based Mobile Apps of the Future Using HTML 5, CSS and JavaScript

    The rise in the use of mobile devices has led many a developer to throw up their hands in frustration. Should a business require both a website and a mobile application? This report discusses why the future may be lie in HTML 5, CSS and JavaScript applications that work equally well on all mobile platforms.

  • iPhone Special Developer Report

    The iPhone's popularity is exponential, and developers are jumping on board to create apps for both the iPhone and its sister tablet, the iPad. In this report, we're going to look at the iPhone, its features, developer tools and support, costs, demographics, and how the iPhone shapes the future of mobile web development.

  • How Do I Create a Custom 404 Error Page?

    You have likely encountered the noted "404" page when you mistakenly typed in the wrong URL for a web page. This tutorial will show you how to create your own custom 404 page to keep your visitors on your site when this happens!

  • Everything You Don't Know About Flash

    Maybe you use Flash everyday to stream your videos online, but how much do you really know about it? Here's everything you need to know about how Flash started out and where it's going in the future.

  • The Origin of the Internet and Hypertext

    The Internet has been around for a number of decades, and what an impact it has had on modern society! Understanding the underlying concepts that led to the birth of the Internet can help us get an idea of what the future may hold. Read on for the full story!

  • So you want your site listed in search engines, huh?

    Once you've built your site, the next step is to get visitors to it. This article will show you how to do just that!

  • Charset

    Help those who may not be surfing with English as a default. Get this into your HEAD.

  • Copyright Questions and Answers

    Read some of the rules and regs that are in effect on the WWW, find out how to copyright your own stuff, and recognize what laws apply to you.

  • Database Basics: Part 1


  • Database Basics: Part 5


  • HTML Applications

    If you're going to offer pages as downloads, this may the way to go.

  • IE HTML Commands


  • So You Want To Get Them All The Same, Huh?

    Here are 21 tips to help you write pages that load equally on all browsers, on all screen settings.

  • So, You Want A Cookie, Huh?

    Like 'em or hate 'em, cookies are part of the WWW. Here's a description of what a cookie is and how you can use them to help keep track of your visitors.

  • So, You Want An "& Command", Huh?

    So, You Want Text Commands, Huh?

  • So, You Want Your Own Domain, Huh?

    So, You Want Text Commands, Huh?

  • So, You Want Your Pages to be Encrypted, Huh?

    Most everyone knows to look for the little padlock icon in the bottom of their browser to know when they are dealing with a secured page. Find out how you can secure your own site!

  • To Use or Not to Use a Database? That is the Question.


  • What Is PayPal?

    What is it? How in the world does it work?

  • What is XML?

    So, You Want Text Commands, Huh?

  • What With What? Body

  • What With What? Forms

  • What With What? List

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.

    By submitting your information, you agree that htmlgoodies.com may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with the Quinstreet Privacy Policy.

Thanks for your registration, follow us on our social networks to keep up-to-date