Howdy Folks! In this tutorial you will learn how to convert Artthatworks (if you want to know how to create this design in Photoshop check here!) from PSD to HTML using Skeleton Boilerplate and make it responsive with media queries. As I mentioned in my last tutorial, I hadn’t tried using a framework until recently. I found the Skeleton Boilerplate Framework which makes it very easy to convert PSD files into HTML, by calling the right classes you can create a quick responsive layout. Sounds great right? Well then get ready and let’s get started.Read More
- Layered Sliders – This is the latest addition to sliders with parallax effect.
- Fade In/Out Sliders – These types of sliders do not have controls. Content just fades away one by one.
- Banner Rotators – These sliders rotate in a circular path.
There are many other types of techniques as well. Each type of slider is suited for a different purpose and location on your website. Hence the designer has to carefully choose sliders for different locations.Read More
Using CSS3 proficiently makes designing a lot more fun. With a good command of CSS3, you can create beautiful designs with great efficiency and ease. The tutorials are extremely helpful, not only for the professionals, but, also for the beginners.
Here we have put together a smart collection of useful CSS3 tutorials to help you learn the nitty-gritty of it so that you can use it to create more beautiful web sites. Enjoy!Read More
Howdy Folks! If you’re following the series, we have converted Burnstudio Design Agency from PSD to working HTML/CSS. We have discussed how we will markup the HTML and how we will style it using CSS. Now, in this tutorial I will teach you how to make it Responsive by using Media Queries. Media Queries will change the look of the website depending on the screen resolution of the device: desktop to a mobile resolution by tweaking the CSS for a variety of viewports.
By the end of this media queries tutorial you will learn how to convert any website into a responsive website.
Let’s get started!Read More
Twitter is a popular social networking service used by millions of users to share text-based content. It has been described as the “SMS of the Internet.” We love to tweet links and ideas we are interested as well as follow other people with similar interests. Everyone loves to follow a lot of people and hence there is a possibility of missing the most important tweets.
So in this tutorial I am going to create a stylish Tweet book to keep your best friends and view their Tweets. As you complete this tutorial you will gain knowledge in working with jQuery and CSS to create a stylish book design. You will also learn to work with the Twitter API using jQuery and AJAX. So let’s get started.
Once you open the demo click on the button with the arrow to open the book. Then click on a letter to load friends. Then click view button to get the recent tweets.Read More
In this tutorial we are going to create a Coming Soon page using HTML5 and CSS3 with a minimalist style and light colors. We will use the minimal Coming Soon page designed in Photoshop by Stelian a few days ago. If you’ve missed that tutorial be sure to check it out here:Read More
How do you feel when you see a long Sign Up form for a website or service? Generally, people get bored when the Sign Up form is too long. Ideally, you should keep the form as simple as possible with minimum fields, and if that is not possible, try using a multi-step form.
The reason why Facebook Connect and Sign In with Twitter has become so popular these days is because of their simplicity, since users can sign up just by logging into their Facebook or Twitter account.
If you are using normal Sign Up forms and still require a lot of data from your users, a multi-step form is the best solution. So the form is broken into small sections and the user only sees one section at a time. Also, multi-step forms reduces the space you need on the page.Read More
The buzz around responsive websites has been going on for several months now, and a lot of websites are already responsive, or underway. You know what that means? Today I will teach you how to create a responsive website.
If you follow 1WD on Facebook or Twitter, then you already know that we’re already preparing for an explosive design, which includes being responsive. Watch out for it!
- Tutorial Level: Beginner
- Skills Required: Basic knowledge in HTML and CSS
- Completion Time: Approximately 15 minutes
- Warning: This tutorial is targeted towards beginners, but it can also be for designers and developers who want to have fun!
By the end of this quick tutorial about responsive design, you will already be on your way to web stardom, and by that, I mean, you’ll be ready to convert and create responsive websites!
Are you ready? Show me your war faces! Roaaar!Read More