How to create a class in HTML and CSS


In CSS you need to be able to select something on the HTML page to be able to style it.  Let's take this HTML page for example: <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <title></title> </head> <body> <div>Style Me</div> </body> </html> On that page, we have a <div> that we want to style.  We want to turn the text red.  To do that we need to place a class on the div tag like so: <div class="colorMe">Style Me</div> We added the class of "colorMe" to this div so now we can select it and style it.  There are many ways to [...]

How to create a class in HTML and CSS2019-10-21T21:24:17-04:00

How to create an animated hover link using CSS


CSS has come a long way since it's early days.  Adobe Flash used to be the only platform that would allow you to get motion or anything animated on a web page.  Those days are long gone. In this tutorial, we will go over how to take a <a> tag, or link, created in HTML and animate it when we hover over it.  To start off let's create our HTML page like so: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Animated Link</title> </head> <body> <a href="">Hover Me</a> </body> </html> All this does is creates a new HTML document with a [...]

How to create an animated hover link using CSS2019-10-14T00:43:53-04:00

How to use relative position in CSS


Sometimes on a webpage, you need to tweak the position of something by a little bit.  Say you have an image that needs to move over a couple of pixels or a video that needs to be shifted over.  For that, we use a CSS position property called relative. Relative positioning moves something from where it used to be originally.  If I have something in my footer down at the bottom of the page, and I relative position it, it will move from where it used to be down at the bottom in the footer.  To show this, let's create two [...]

How to use relative position in CSS2019-09-23T16:05:54-04:00

How to use position fixed in CSS


Sometimes on a webpage, you'll want a part of it to never leave the screen.  No matter how much you scroll up or down, you'll want that piece of the page to always be in the same spot.  For that, we use a CSS position property called fixed.  To have this work we will need to create the HTML first like so: <div class="fixedPosition">I am not going to move</div> <div style="height:1200px;">I make the page scroll</div> Here we have a div tag with some text inside of it.  It also has the class called "fixedPosition" which we will use later in the [...]

How to use position fixed in CSS2019-09-23T15:50:29-04:00

How to create a tooltip using only HTML


Sometimes websites aren't very specific.  You see something on the page but have no idea what to do with it or what it's for.  Enter tooltips!  They are helpful little windows that pop up to explain what something is on a webpage.  They usually show up when the user hovers their cursor over the item.  There are many ways to implement tooltips using CSS, JavaScript, jQuery, etc.  But there's one simple way to do it using only HTML.  Let's say we have an image on a webpage that we want to use as a button.  It looks like this:     [...]

How to create a tooltip using only HTML2019-09-05T14:40:59-04:00

How to create a full screen background


In this post, we'll talk about how to create a full-screen background using CSS and HTML.  We are going to bypass all the CSS properties that exist for backgrounds to do this, so consider this a type of CSS hack (:  What we are going to do is insert an image to the page and then style it to act as a background.  So that is the first part, find the image you want to use and put it on the page like so: <img src="yourimage.jpg" class="bg" alt="Background Image"> You can use a .jpg, .png, .gif, or whatever image you want.  [...]

How to create a full screen background2019-09-05T14:41:47-04:00

How to redirect a HTML page


Sometimes in the web design world, you'll need to redirect a page.  Maybe it's because the page no longer exists, the page has been updated and moved, or it could be a page that you don't want the user to be on for very long.  There are plenty of ways to do this.  You could use a bunch of different languages like PHP or JavaScript but there's a way, in HTML, to accomplish this with the meta tag and here it is: <meta http-equiv="refresh" content="5;url=" /> Let's break this down.  It looks just like a normal meta tag but it has [...]

How to redirect a HTML page2019-09-05T14:45:00-04:00

How to create a placeholder on a select dropdown in HTML


In HTML there's this nifty attribute called the placeholder.  If you were to create an input text box like this: <input type="text" placeholder="Type Here"> It would create a text box with a placeholder in it which you can see below:     The text "Type Here" will disappear when you start to type anything into the box and it will re-appear when you delete it.  It's a useful way to prompt the user to do what you want and not lose any space by doing so.  But what about drop-down menus like this?       This is the HTML code [...]

How to create a placeholder on a select dropdown in HTML2019-09-05T14:52:03-04:00

JQuery Toggle Drop Down Effect


jQuery is a pretty amazing JavaScript library.  It allows you to do things with JavaScript that were, back in the day, pretty tough to pull off.  Today I want to show you how to do a simple toggle drop down effect using jQuery.  The first thing you'll want to do is create a basic HTML page like so: <!DOCTYPE html> <html> <head> <title>jQuery Toggle Drop Down</title> <meta charset="utf-8"> </head> <body> <p> <span id="s1"> Click to slide panel up and down </span> </p> <div id="d1"> This part slides up and down </div> </body> </html> This sets up a span and div tag that [...]

JQuery Toggle Drop Down Effect2019-09-05T15:11:56-04:00

How to autoplay a video using HTML 5 in Chrome


Chrome is a great browser but sometimes it has a lot of security features that end up conflicting with your code and what you're trying to do.  For example, they added a feature that won't play a video on a website if the sound is enabled.  It will block it because it doesn't want the user hearing an unwanted video.  Using the HTML5 video tag, if I were to add a video to a page that has the controls visible, autoplays, and loops the code would look like this: <video controls autoplay loop> <source src="movie.mp4" type="video/mp4"> </video> The issue with this is Chrome [...]

How to autoplay a video using HTML 5 in Chrome2019-09-05T15:16:49-04:00

Create unselectable instructions in a HTML select drop down menu


Today we are talking about how to create unselectable instructions in a HTML select drop down menu.  In HTML, when you create a drop down menu using the <select> tag, there will be times when you'll want to give the user instructions inside the menu itself but not allow them to select the instruction option.  For example, let's say we want to give the user the ability to select what shipping they want for an item they are ordering.  Our select tag would look something like this: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Select Tag</title> </head> <body> <select> <option>USPS</option> <option>UPS</option> <option>FedEx</option> [...]

Create unselectable instructions in a HTML select drop down menu2019-09-05T15:26:16-04:00

What does the DOCTYPE do in HTML?


What is the DOCTYPE?  When coding in HTML you will see this really weird looking line up there at the top.  It usually looks like this: <!DOCTYPE html> Simply enough, this line tells the browser what version of HTML is being used to create the website.  Back in the day, with HTML4, DOCTYPES were really long lines of text that were almost impossible to remember because they looked like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> and <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> and <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" ""> Depending on if you wanted the language to be [...]

What does the DOCTYPE do in HTML?2019-09-05T15:34:00-04:00

How To Center Content in a Div Horizontally and Vertically


This little snippet of code will show you how to center content in a div horizontally and vertically using HTML and CSS.  This, in the past, used to be semi-difficult.  Now, using CSS flexbox display property, it's actually quite easy.  First, we'll create a simple HTML skeleton with a div that has a class called "centerMe" inside the body tag: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Center Content Horizontally and Vertically</title> </head> <body> <div class="centerMe"> I will be centered in the div horizontally and vertically </div> </body> </html> Now that we have the starting HTML, we can add the CSS inside [...]

How To Center Content in a Div Horizontally and Vertically2019-09-05T15:43:53-04:00

HTML5 Basics – How to create a basic HTML5 document


Video of this tutorial: Hello everyone!  In this post today I'll be showing how to create a basic HTML file using my favorite text editor Brackets.  Brackets is great because it's free, cross-platform, and has some really nice features when using HTML5.  Here is what their home page looks like:   Click here to download Brackets The first thing you'll want to do is download and install Brackets or whatever editor you want to use.  If you really wanted to, you could use good ol' Notepad in Windows and that would work fine.  Once it's finished installing, open it [...]

HTML5 Basics – How to create a basic HTML5 document2019-09-05T15:48:32-04:00

HTML: A Brief History


Long ago in the far off land of Switzerland something very interesting began, and Al Gore wasn’t there. 1989 Tim Berners-Lee proposes an Internet based hypertext system for sharing documents between disparate operating systems while working as a contractor at CERN (European Organization for Nuclear Research). If you’re interested CERN is derived from Conseil Européen pour la Recherche Nucléaire. 1991 The first publicly available description of HTML. It consisted of 18 elements greatly influenced by SGML (Standard Generalized Markup Language). 1993 First proposal of HTML as a specification to the IETF (Internet Engineering Task Force). At the same time Dave Raggett [...]

HTML: A Brief History2016-12-30T12:14:23-05:00

The HTML q Tag


Somewhere in the neighborhood of 18 to 20 years ago I sat down one weekend with a book, a computer, and a few images and put together my first basic website. It was about artists from the Impressionist movement and was not anything to brag about with one exception, I built it myself, using Notepad. That was the era of HTML 3.2 moving toward HTML 4.0. Netscape was my browser of choice and most pages used tables for layout. A lot has changed in the following years but one thing remains…most people don’t know that HTML has a q tag to [...]

The HTML q Tag2016-10-31T16:06:10-04:00

HTML5 Form Date Attribute


Getting corporate America to make the move to HTML5 seemed to take longer than any other transition we’ve seen in the past. In part I’m sure due to the long development process. From first working draft in January of 2008 to stable recommendation in October of 2014, that’s almost 7 years. There are many compelling reasons to make the change but the one we will focus on today deals with forms and an easier way of inputting a date. Early on the primary means of capturing a date was supplying a simple textbox and a visual example of the formatting. It [...]

HTML5 Form Date Attribute2016-10-31T12:18:30-04:00

Styling the Humble Checkbox Using CSS


The checkbox has been a staple in the world of HTML forms since day one and for the most part has remained unchanged. HTML 4 introduced the label tag which can be associated with a checkbox using an id attribute in the checkbox and the for attribute within the label. That way you don’t have to click directly on the checkbox, simply clicking the label will select or deselect it. If the checkbox looks any different today compared to 20+ years ago it’s only because the browser renders it that way. A typical form with several checkboxes would look like this: [...]

Styling the Humble Checkbox Using CSS2016-10-29T22:46:49-04:00

Using a CSS Reset


One of the frustrations designers have been feeling for some time now stems from web design by committee, or design via theme. Many web sites today are WordPress sites with a theme and some content. Just add words and you have an instant site. Then comes the task of modifying the site and trying to make heads or tails of the built-in CSS. Have fun! And we won’t talk about accidently removing content that hoses the database that breaks the site…Arg! But I digress. Sometimes that frustration can come from the browser itself. Did you know that your browser, user-agent, has [...]

Using a CSS Reset2016-05-31T18:48:44-04:00

Is It Time for a New Browser?


       When it comes to the topic of web browsers one phrase comes to mind, oh how the mighty have fallen. In the 23 years since the release of Mosaic, “the world’s first popular browser”, we have seen several major contenders rise to the top. In 1994 the same people that developed Mosaic started a company named Netscape and released Netscape Navigator. Its growth was phenomenal as the popularity of the web was just taking off. Microsoft jumped on the band wagon in 1995 with Internet Explorer. During these early years Netscape dominated with as much as 90% of [...]

Is It Time for a New Browser?2016-04-30T14:15:23-04:00

CSS3 Multiple Columns


Doing a basic web page text layout using more than one column has been much more of a chore than it ever should have been. In the early days of web design almost everything was built using tables. Actually tables inside tables inside tables. Along comes HTML 4.0 with its companion CSS but we still continued using tables. Why, because our browsers weren’t compliant. It should have been easy because CSS introduced the float property. Take two div tags and float them side by side and we have the basic design concept of two columns. Eventually browsers did embrace CSS and [...]

CSS3 Multiple Columns2016-04-28T20:09:11-04:00

Cropping Images with CSS


There are times when you want to focus on a specific area of a photograph but don’t need a separate, cropped version of the picture. CSS offers an approach that will maintain the complete, original image but allow you to crop, mask, or clip your picture. Let’s begin with a simple example. This page includes a full-size image of a young lady sipping a cold beverage on a beautiful spring day. […]

Cropping Images with CSS2016-03-29T12:09:30-04:00

Using CSS3 Instead of JavaScript


CSS3 has been in development since 1998, that’s right, 1998. Both CSS1 and CSS2 became standards in quick succession, December of 1996 for CSS1, and May of 1998 for CSS2. One of the main differences between CSS3 and its predecessors is the use of documents or “modules” to contain different components of the specification. Some examples would include media queries, level 3 selectors, level 3 color, and multi-column layout. These modules progress at different rates and are largely dependent on browser support. There are two specific modules we are going to take a look at today: transforms and transitions. Transforms can [...]

Using CSS3 Instead of JavaScript2016-02-22T13:59:03-05:00

10+ Web Resources for Front End Developers


Things on the web move so fast they make the idea of “time flies” seem slow. The World Wide Web has been available to the public since 1991, 25 years this fall. Most people today couldn’t imagine life without the web. Developers are faced with a tremendous challenge today. The web is a moving target. So much so that WHATWG (Web Hypertext Application Technology Working Group) has chosen to refer to HTML as a “living document”, meaning it is constantly being edited and updated. This means the tools we use and the items we refer to change constantly as well. This [...]

10+ Web Resources for Front End Developers2019-08-07T15:20:17-04:00