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.Read More
The design or theme of a website plays a vital role in its success. Recent changes in popular sites prompted me to write this tutorial. Facebook Timeline, Youtube Dark Theme and Gmail Clean and simple design are major changes made recently. Also 1stwebdesigner is going through its redesign process and the changes looks promising from a users perspective.
In this tutorial I am going to explain how you can dynamically switch WordPress themes based on various conditions allowing you to provide the best possible user experience. Before we dig into dynamic theme switching, let’s see how WordPress changes its menu in the admin dashboard.Read More
Front end engineering has always remained a niche skill, even with the burgeoning array of techniques and technology available. Today, as we witness the launch of newer frameworks and tools for better web development, on a regular and fast track basis, this domain too has undergone its own super fast makeover! But the core skills to build a solid career in front end engineering has always been the same – passion + HTML + CSS + JS + an unrelenting desire to learn!
Lets analyze and understand the hot and happening technique in the field of front end engineering – ‘CSS preprocessors’, which offers to add mind-blowing features to the Cascading Style sheet language, and equip the modern-day front end engineer with tons of nitro and increase productivity.Read More
Do you want to create beautiful slideshow presentations for the web using just HTML and CSS? That won’t be a problem with Impress.js, a powerful CSS3 transformation framework that lets you convert your HTML content into a slideshow with amazing effects.
Impress.js is a jQuery plugin created on github by bartez which uses CSS3 functionality to create presentations. All the modern browsers will support the stunning visualizations created by Impress.js.Read More
jQuery Mobile version 1.0 finally launched this past November. Don’t know if you heard about it, but if you are planning to do any mobile app or website development, it’s better to get started with it right now.
I’m sure you’ve heard about jQuery. So, its mobile version is pretty close to what you already are used to, but with a lot of enhancements for mobile screen events (like touching instead of click, and there is no hover) and browsers (this one is tricky since there are plenty of browsers and devices out there) and capabilities (pluggable components).
The crazy thing is how simple it is to initiate and build a fully working mobile site. Actually, we’ll be talking about concepts, tips, codes, and in the meantime you can build your own app, in no more than one hour. Yeah, noob to ninja in one hour, this is what you’ll get here :)
So, let’s rock!Read More
So, we started our dive into WordPress plugin development with the first part of this tutorial where we talked a little about planning, basic plugin structure, custom post types, metaboxes and how to add custom functions to WordPress’s defaults actions.
Today we will talk a little more about metaboxes and jQuery, shortcodes, and front-end functionality.
All these things with a pretty practical example of how to make a plugin that will relate posts as a series.
So, let’s rock!Read More
Oh, variables. Who doesn’t love them? They are such nice guys, you know. When you need something, just call $something and your value is there.
But something really cool is that you actually don’t need the name of the variable. You can use other variables to access a value of one variable.
For example, let’s say you have two variables
$jude = "hey" and
$hey = "jude". If you
echo $$jude $$hey(yeah, double “$”) your output will be “hey jude”.
But, as you might be thinking it is not just about variables. You can name dynamic functions, methods, arrays, and almost anything you want to.
This time we will see some uses for it, with arrays, functions, classes and how this technique can help you write better code.
So, let’s rock!Read More
Today our task is to create a simple WordPress plugin to relate posts as a series. With this, when you create a new post it is automatically listed in your series, so if a user is reading any post of the series he can jump to others, even posts created after that one he is reading.
It may seem a bit too simple, but with this we can learn a lot about:
1. Custom post types
2. Custom fields
6. Basic plugin structure for WordPress
7. Little bit of jQuery
So, let’s rock!
Today we will get a perfect and simple blurry menu effect via CSS. In addition to it, we will get a useful multiple borders effect. To achieve this effect you will need to have a basic understanding of HTML and CSS. We will work with IE filters and text-shadow, but there is no reason to worry if you have never used it, they’re all well and simply explained.
And the best part is that anything done here works almost anywhere, from IE6 to real browsers.
So, let’s work!Read More