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
As a front-end engineer, I was always excited to be a part of an assignment where I got to code the markup and CSS from the scratch. Like any other professional, the prospect of implementing my own ideas and exploring fresh techniques, on a fresh project, used to make me euphoric. As time passed by, the number of fresh projects that I was handling increased substantially, and the concept of starting all over again no longer remained an exciting business.
It was a pain to start coding the UI components all over again in each and every project (though I maintained snippets and reused the code, it was not an effective solution for the rework!). It was then I realized the need of maintaining an extensive library of reusable components which could be used across any projects. The idea seemed to be interesting, but the fact was such an effort needed a lot of detailed analysis and extensive testing across multiple platforms and browsers, to be rest assured that, the code be reused without any hiccups across any projects. The idea was to create a framework which was reliable and flexible enough to be reused.Read More
Almost everyone, at one point during childhood, has played jigsaw puzzles. Today I am going to show you how to create a jigsaw puzzle using jQuery and PHP.
Lets start creating puzzles. I know that you must be waiting to see the puzzle in action. I am not going to keep you guessing. Here is the sample demo of the puzzle and download of tutorial files.
Now you got your wish. So lets move onto creating the puzzle.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
Creating a restaurant website can be very challenging for a developer because there is not a single product to sell or show and they have to promote the real feeling of the restaurant’s environment as well. Also, the responsiveness and flexibility of restaurant websites have become the most distinguishing factor in getting reservations, as customers tend to book only if the process hassle-free. Are you in the process of developing a restaurant site and in need of some valuable recommendations from us? Read on and discover the convenience WordPress plugins and PHP scripts can provide you in developing a professional-looking restaurant site.
So, are you drooling to create a restaurant website right now? It only takes a few minutes!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
The first two things web developers consider when they need to create an extremely stylish and trendy website are CSS3 and HTML5. The reason for this is the functionality and features they offer and why HTML5 and CSS3 are a major topic for web designers.
Taking this into account, we thought to compile another fresh and cool collection of some professional HTML5 and CSS3 templates. So, here we are with 45 free, but fresh, templates that you can download.
So, enjoy this collection and have more fun in making the web experience more pleasurable and gratifying. Let us have a close look!
Have you refrained from using CSS Gradients because either you didn’t understand them, or thought the browser support for them wasn’t good enough to consider using them in your projects?
Well, it’s time to kill those 1px wide images, my friend.
If you’re just curious about how to use CSS Gradients, this is the place for you. We’ll start with the basics of syntax to very advanced effects with lots of tips and examples.
Remember, learning about CSS gradients is really important since browsers are getting better and better every day. Mobile browsers have good CSS3 support by default.
So, let’s rock!Read More
Everyone wants to be a programmer and design their own web based startups. 1WD is your one stop resource for web design, programming, inspiration and everything else that’s related. So, we thought why not compile a one stop article for those who are beginning to learn coding. Without further ado, let us all learn how to program.Read More