Posts for HTML

google maps address link

How To Make A Google Map Address Link

Here is how to make a link open a Google Map with a specific address. Start with an href of http://maps.google.com/?q= and add the address. So you end with something like this… <a href=”http://maps.google.com/?q=1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003″>…</a> This will open a Google map…

css card flip

CSS Card Flip Animation

In this post, I will share how to create a card hover flip animation with only CSS. For an example of this effect, hover the card below. See the Pen Card Flipping Effect by Steven Stromick (@sstromick) on CodePen. Let’s start with the HTML for the card, card…

css card overlay

CSS Card Overlay

In this post, I will show you how to show a card overlay when a card is hovered. Hover the card below to see an example. See the Pen card overlay by Steven Stromick (@sstromick) on CodePen. First let’s start with the HTML. Now for the CSS for…

Create a Home Page Hero Area

How To Create a Home Page Hero Area

In this post I will show you how to use several CSS features to create a nice looking hero image area for your home page. Here are some of the different CSS features we will be using to accomplish this: image covering entire background area color gradient overlay…

5 Tips For Optimizing Your Images For The Web

5 Tips For Optimizing Your Images For The Web

A picture is worth a thousand words…. well not if it causes your site to load slowly. Poorly optimized images are often the cause of a slow loading sight. But images and image optimization also plays an important role on your blog: they make the content more enjoyable…