Articles > HTML

What Are Semantic HTML Tags and How to Use Them

Semantic HTML tags allow you to add meaning to your markup so that search engines, screen readers, and web browsers can make sense of it. By default, when a user agent reads your content it doesn't understand the context and meaning. Semantic HTML tags let you serve structured content to your users, which is especially important for on-page SEO and accessibility. Although semantic tags existed in earlier HTML versions, the HTML5 specifications added several new semantic elements to the syntax—both...

How to Add Custom Google Forms to Your Static Site

Websites created with static site generators like Jekyll or Hugo are on the rise. Their popularity is not surprising. They're fast and secure, as there's no data on the server side. The web server builds and serves web pages on the fly. You don't have to worry about databases and server-side security. You can write your posts in Markdown or HTML that gets rendered nicely with the help of templating engines (Jekyll uses Liquid, while Hugo uses Go Templates). Everything is fine until you want to add dynamic...
CSS

A Customizable WordPress Weather Widget

In this weeks tutorial we'll be creating a WordPress widget to display the current weather for a specified location. To do this we'll be using the great Weather Underground API. You can sign up for a free developer account here, or sign up for a professional account to get increase request rates. Signing Up ... Once you've signed up and registered for your API key, you should see something like the following. To actually query the API we just need the API key. The Wunderground API does not use OAuth to authenticate...
CSS

HTML5 and CSS3 Form Validation

In HTML5 forms got a major upgrade with the addition of some simple, yet flexible validation attributes. To support these added attributes CSS3 also added several new pseudo selectors styling controls based on their validation state. Adding validation ... To illustrate the new attributes and some of the new input types, we'll be building up a simple sign up form. Every sign up form is essentially the same, you fill in your details and click submit. How many times has the form been reset on you after you've...
CSS

Automatically generating a table of contents with a smooth scroll effect

Ever written a long article worthy of a table of contents and decided not to do it because it's just too much hassle? This week we'll be writing a jQuery plugin that will automatically search for your headings and create a table of contents based on them for your blog post. We'll also be adding a smooth scroll effect, so that when a user clicks on an entry they are brought to the right section. I know a table of contents is a bit of an unusual topic for a tutorial, but if you're writing a help file for your product,...
CSS

Using jQuery to add a dynamic “Back To Top” floating button with smooth scroll

Ever read a really long blog post or article and then had to scroll all the way up to the top of the screen to get to the menu? It can be a little frustrating. It's easy to fix, you can have a fixed menu or as you'll see here you can provide a quick and stylish way to get back to the top. Getting Started ... HTML wise all we need to do is add a "back to top" link at the bottom of the blog post <a href="#" class="back-to-top">Back to Top</a> We then need to style and position it. Here I'm setting its position...

OAuth2 and the LinkedIn API – A WordPress CV/Résumé plugin

Continuing on from last weeks introduction to OAuth 2.0 using the Twitter API, this week we're going to focus on an alternate implementation of OAuth 2.0 used in the LinkedIn API. This implementation requires that you manually authorize the application before you can get a token. This implementation is a more complex as it requires you to be re-directed to the authentication server, which then re-directs you back to your own site with the approved token. This allows LinkedIn to add additional permissions...

Adding an admin or settings page to WordPress

A few weeks ago in my Google Maps Shortcode for WordPress tutorial I covered how to create a basic shortcode. All of the settings required for the Google Maps API where included as configurable attributes for the shortcode. It was discussed in the comments that perhaps it would be better to set some of those options globally. One option discussed was modifying the wp-config.php file, this I don't think is a great idea. It would mean that it could be potentially overwritten by upgrades and is not easily...
Load more
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress