Design an Awesome Product Page with CSS Background Attachments

Posted in Coding, HTML & CSS, JS & AJAX, Tutorials2 years ago • Written by 7 Comments

Today I am going to show you how to create a product page for your website with awesome CSS effects. We will be using CSS background attachments and jQuery to create these effects. There are 2 commonly used techniques using this effect. First method is creating the before and after effect of an image. I am going to create the second method which will change the product’ as we scroll down. Take a quick look at our demo product page to get an idea about the effect we are implementing in this tutorial.

Design an Awesome Product Page with CSS Background Attachments Read More

Create a Stylish Tweet Book with Jquery and CSS

Posted in Coding, HTML & CSS, JS & AJAX2 years ago • Written by 11 Comments

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.

Create a Stylish Tweet Book with Jquery and CSS Read More

Create a Minimal Coming Soon Page using HTML5 and CSS3

Posted in Coding, HTML & CSS, Tutorials2 years ago • Written by 26 Comments

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:

Create a Minimal Coming Soon Page in Adobe Photoshop.

Create a Minimal Coming Soon Page using HTML5 and CSS3 Read More

Create a Sliding Navigation Menu with jQuery

Posted in Coding, HTML & CSS, JS & AJAX2 years ago • Written by 11 Comments

Having a sliding navigation menu helps users to find the important pages of your website in a cool way. It is important to keep your navigation menu simple and user-friendly while keeping it attractive.

Consider a situation where you include your blog categories in a navigation menu. If you have a long category list, a drop down navigation menu will exceed the page height and the user might need to scroll to navigate to the last part of the menu. These small things are enough for a user to navigate away from your site.

To solve that, we are going to create a complete navigation menu using jQuery. I will explain how to compress large menus using sliding panels to keep the depth of your menu to a minimum level. Take a look at the demo before we get started. You can see that sub level menu items are hidden initially and displayed as sliding panels on click.

Create a Sliding Navigation Menu with jQuery Read More

How to Create a Multi-Step Form Using RhinoSlider

Posted in Coding, HTML & CSS, JS & AJAX2 years ago • Written by 18 Comments

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.

How to Create a Multi-Step Form Using RhinoSlider Read More

How to Create a Responsive Website in about 15 Minutes

Posted in Coding, HTML & CSS, Tutorials2 years ago • Written by 50 Comments

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!

How to Create a Responsive Website in about 15 Minutes Read More

How to Build a Website Using Twitter Bootstrap and SASS – Part 2

Posted in Coding, HTML & CSS, Tutorials2 years ago • Written by 5 Comments

This is the second part of my tutorial on How to Build a Website Using Twitter Bootstrap and SASS where we shall be customizing the Twitter Bootstrap-based web page using SASS. Just to set the context right, we will be starting out where we left off in the previous tutorial. If you haven’t seen it yet, please check it out and work through it. There you will learn how to setup your system for TBS, Ruby, and Compass.

In this tutorial we will be furnishing our webpage from the last tutorial using SASS. By the end of this tutorial you will be at the next level of developing beautiful websites and applications!

How to Build a Website Using Twitter Bootstrap and SASS – Part 2 Read More

Image Tagging Tutorial Using jQuery and CSS

Posted in Coding, JS & AJAX, Tutorials2 years ago • Written by 10 Comments

There is a popular saying that a picture is worth a thousand words. Images are a great way of catching our attention instantly. But sometimes its necessary to tag or link specific parts of images to provide information. Popular social media giants like Facebook and Google Plus use image tagging to identify the people and places in images.

In this tutorial I am going to show you how to create a simple image tagging system using jQuery and CSS. Lets get started.

Image Tagging Tutorial Using jQuery and CSS Read More

35 Excellent jQuery and CSS3 Navigation Menus

Posted in Coding, HTML & CSS, JS & AJAX2 years ago • Written by 14 Comments

Navigation is one of the most important elements of web design. Poor navigation will always take away from great content. Good navigation must possess both aesthetics and usability. That’s where jQuery and CSS3 navigation menus come handy.

With the features and customization level that jQuery and CSS3 offers, you can easily create the perfect navigation for your website. Yet it’s kind of difficult if you aren’t familiar with these. Fortunately there are people who have already written the code for you.

For this roundup we’ve prepared 35 fresh (most of them are from 2012), beautiful and straight away usable jQuery and CSS3 navigation menus. All you have to do is customize them for your specific needs!

35 Excellent jQuery and CSS3 Navigation Menus Read More

How to Build a Website Using Twitter Bootstrap and SASS – Part 1

Posted in Coding, HTML & CSS, Tutorials2 years ago • Written by 12 Comments

Having covered one of the best web development frameworks (Twitter Bootstrap) and a super fast CSS coding technique with tons of goodness (SASS), in my previous posts, it is time to burn some rubber and get some work done. We will get our hands dirty and code a web page right from scratch using Twitter Bootstrap and SASS.

This will be a 2 part tutorial, with detailed steps and a comprehensive overview on the processes and concepts behind them. The first part will cover the details of building the folder structure and creating markup using TBS for the layout. The second part will have a detailed walk through on the customization of the layout using SASS.

How to Build a Website Using Twitter Bootstrap and SASS – Part 1 Read More
54.196.69.56 - unknown - unknown - US