Quick Guide to Bootstrap for Building Responsive Websites

Bootstrap

The legacy of Twitter will be twofold. First is the bastardization of keyword tagging with hashtags now ubiquitous in almost all social media platforms and even some business applications. The other is Bootstrap, an open source front end framework widely used for building responsive websites. Bootstrap takes care of the legwork involved in developing websites that are compatible across devices and screen resolutions. The framework may seem daunting at first with all of its specific rules and conventions, but once you get a grasp of how things work it becomes a very effective tool. Here is a quick guide to get you started if you […]

Read Full Article »

How to Use ID and Class Selectors in HTML, CSS and jQuery

HTML elements are frequently labeled with an ID and/or class(es). ID and class names are not part of HTML syntax so many people are often perplexed by these attributes. What is the purpose of IDs and classes and how should they be utilized? IDs and classes are used to label HTML elements allowing them to be selected and formatted with CSS. Therefore they are called CSS selectors. CSS selectors are essential for tableless web design. However with the popularity of jQuery and the continual sophistication of Javascript CSS selectors are no longer exclusive to just CSS. jQuery also relies heavily on CSS […]

Read Full Article »

Create Maps with Custom Markers Using the Google Maps API

You can achieve some amazing things with the Google Maps API. The most common and practical task for many websites is creating a small-scale map for a designated location. For such a simple task you don’t even need to leverage the Google Maps API. You can visit the Google Maps website and type in your desired location. A map is then generated with the corresponding share and embed code. You copy that code onto your website and adjust the sizing of the map using CSS. But what if you wanted to personalize this map a bit with your own logo as a […]

Read Full Article »

Five Features in Photoshop You Can Do with CSS3

Adobe Photoshop is one of the most useful programs for graphic design and web development, not to mention one of the most expensive! As web browsers evolve to support HTML5 and CSS3 we can finally take advantage of some useful features in CSS3. Before we could only do things in Photoshop utilizing images and a combination of CSS and/or Javascript coding. Now modern browsers allow us to achieve the same effects with just pure CSS! Modern browsers include Internet Explorer 10 (IE 9 for some things) and most versions of Chrome, Firefox and Safari. You can double-check on http://caniuse.com/ to […]

Read Full Article »

Media Queries and Viewport Metadata for a Responsive Website

Web browsing on smartphones climbed dramatically after the original iPhone was introduced in 2007. The iPhone was revolutionary because it was the first phone that displayed websites decently. People used finger gestures to zoom in and out to read text on a website. But navigating full websites by zooming in and out became a nuisance. It was only a matter of time before smartphones needed smarter websites. The concept of responsive web design is to create website layouts that accommodate multiple device sizes ranging from desktop computers to smartphones and everything in between. By utilizing a fluid grid system responsive […]

Read Full Article »

Easiest Ways to Embed Custom Fonts on a Website

I remember when web developers and graphic designers used to fight over the usage of fonts on website layout designs. Developers stressed that they could only work with web safe fonts. Web safe fonts are a small collection of fonts that are most likely to be present in a wide range of computers and browsers whether it be a Mac, PC or Linux system. And when I say small collection I mean small! There are probably about 10 fonts to choose from give or take. CSS Font Stack offers the best selection but not all the fonts are guaranteed to […]

Read Full Article »