Articles > HTML5

CSS

Creating a Responsive Website: The Footer Part 2

We’re going to pick up where we left off in our last tutorial on creating our responsive web design footer. In the last tutorial you may recall that we laid out the large version of our footer and inserted a Twitter feed as well.  In this tutorial we’re going to finish off our footer by making it responsive and plugging in the jQuery necessary to make our Twitter feed work. If your dog ate your work up until this point, you can download the source code here. Before we get started, let’s take another quick...

Using HTML5 to Determine User Location

Geolocation is one of the most exciting features offered by HTML5. Using some relatively simple JavaScript code, you can create Web applications that determine various aspects of the user location, including longitude, latitude and altitude plus more. Some Web applications can even provide navigation functionality by monitoring the user position over time, integrating with map systems such as Google Maps API. As with all HTML5 functions, you cannot yet rely on browser support. Where browser...

Developing a Responsive Website: The Homepage Portfolio Slider

We are going to continue on with our designing a responsive website tutorial where we have already learned about the background images, the site's navigation and the content. This week we’re going to work on adding a little more content to our homepage. At this point you should have a site that looks similar to this. You should have a full-screen background image that changes in size to match the viewers screen resolution, a main navigation bar, and a little blurb that will grab the attention of the viewer...
CSS

Developing a Responsive Website Part 2: Navigation and Content

Now that we’ve got our background images squared away and set to break themselves down nicely across various devices and screen resolutions we can look in to populating our home page with some content. Let’s begin with our header. I always like using a separate file for all the things that will stay uniform throughout my site, header, logo, navigation, etc. That way if I need to make a minor edit down the road I just have to edit the header file, which is then pulled in to every page with a simple PHP include...
CSS

Developing a Responsive Website: Background Images

A while back we took A Look at Responsive Web Design and how different designers utilize it in different ways.  Now that we’ve seen a few examples in action, let’s create a responsive website of our own.  In this installment we’re going to set up the structure of our homepage and add in a few media queries that will help the site load quicker, navigate better, and keep our desired appearance across multiple devices, platforms, and resolutions. Before we dive in to the HTML, let’s cover the “viewport”...
CSS

A Look at Responsive Web Design

Responsive web design is widely thought of as a design trend, but it’s much more than that. It is an approach to web development that allows a website to break itself down smoothly across multiple monitor sizes, screen resolutions, and platforms, be it a computer, tablet or mobile device.  It allows the developer to create a site that is optimized for each platform, both in navigation, readability and load time. In this tutorial, we take a look at what responsive web design entails for the developer....

The Usefulness of the document.createElement()

The new HTML5 Markup Language has introduced several new element features not available in HTML4, for example elements like header, section, nav, footer, aside, and article. Where these new tags will work in Opera, Safari, Chrome or Firefox they will not function in Internet Explorer (version 8 and earlier). The problem is that due to the way parsing works in IE, these elements are not recognized properly. This tutorial explains how to get HTML5 tags to work in IE8 and its earlier releases. It is possible...
CSS

Designing a Clean Website Part 2: The Layout

Last week we discussed how important navigation is to a website and how developing an interactive navigation system will help give a clean, minimalist website a bit of character and make it feel modern and current.  It’s too easy to make a clean website look dated and as though it were developed in the 90’s, so by injecting modern user interfacing techniques that are popular today you’re able to put the viewer at ease and reassure them that the content is fresh and up to date. We’ll pick up where...
Load more
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress