In this tutorial we'll be dealing with some basic HTML5 additions and their uses. We'll also be creating a simple animated gallery using just CSS3 and HTML5 In making the gallery, we'll also try and deal with responsiveness and scaling the gallery for different resolutions and devices. Throughout this tutorial JavaScript will not be used! Step 1: Understanding the HTML5 additions ... http://www.w3.org/TR/html51/ There are lots of new tags in HTML5; today we'll be dealing with the some of the most...
There is no doubt that Web design can sometimes be a little intimidating, not only is there so much to learn but the environment is ever changing and it seems as if every day there is something new that you need to learn if you want to stay up-to-date. Don't know where to start? Don't worry we have compiled some of the best resources on the web for learning web design. Some of the suggestions offered here are free while some come at a small cost. Some focus only on HTML while others will teach you anything from HTML,...
In this tutorial we will be creating a login form using only CSS3 and HTML5, we will be recreating Orman Clark’s Elegant Login Form. We will create this login form in three separate steps, the first step will deal with the HTML Markup, while the second step will focus on the positioning of the elements, finally the third step will focus the styling of the different elements. Next week we will show you how to add a sign up page to your login form so be sure to check back. Step 1: The HTML Markup ... The first...
As a developer I am always on the hunt for time saving resources, anything that can save me just a few minutes of time is a great help in an already hectic schedule. Compiled here is a list of 25 resources that are bound to make your life a little bit easier. I have added different CSS3 grid systems, as well as several code generators, whether you need a button or a pattern there should be something here for everyone, I have also added some font generators, if you are having problems with your code then you will...
When it comes to design the key is to do more with less. Too much makes a page look cluttered, too little makes it look like you are back in the 90s. Luckily web developers can do some amazing things with CSS3 that give a page, or content within a page, that extra "pop" needed to make things stand out and look great without making the site look busy and thrown together. The next time you need to call attention to something on a page, try this cool effect in CSS3 that makes it look like an element has been sewn onto the...
In this article we're going to design and implement a unique page layout. Our main logo and navigation bar will be locked and fixed onto the left side of the screen, and the larger right side of the screen will be scrollable and hold our main content. Before we start, check out the demo here. Ok, now that you've seen it, let's get started! Our first step will be to set up our sticky sidebar. Sidebar HTML ... Here's the HTML we'll use, place this right under your <body> tag: <div class="sidewrap">...
Here's a cool CSS technique that we can use to give a hover effect to a group of divs, and then an additional effect to the element being hovered on! Twitter uses this effect with their sharing links on a tweet. When you hover over an individual tweet, the reply, retweet and favorite links appear, like this: But then when you place your cursor over one of the links, it becomes underlined, while the others remain revealed, but not underlined, like this: In this example we'll create the same effect. We'll use...
Speed. It’s an important factor in the recent Olympics, the Paralympics and even our day to day lives. Speed is also an important factor when it comes to Google. Their ethos concerns the provision of accurate, relevant search results delivered as quickly as possible to the user. To quote their Webmaster Guidelines: “Monitor your site's performance and optimize load times. Google's goal is to provide users with the most relevant results and a great user experience. Fast sites increase user satisfaction...