Have you ever come across a beautifully designed website and wished you had X-ray vision to see how all those HTML elements on the site work? Have you ever wanted to see how a certain design might look on your site without actually changing the underlying code? Well, you don’t have to wish or think anymore because a powerful and really useful browser extension called Firebug can help you do all that. Any designer or developer looking to experiment with different styles on a website in real-time needs...
The rising global popularity of smart phones and other small-screen Internet devices has created a number of dilemmas for web developers. Among the most pressing is the issue of serving the proper image files for widely divergent screen sizes. The industry has responded with a variety of solutions, including separate mobile websites that are much leaner in terms of shown images. A new attribute, <img srcset>, has the potential to resolve some of the issues by enabling the desired image size,...
I recently completed a seven part series on Learning LESS, and we had a lot of commenters who requested a similar series on Sass (Syntactically Awesome Stylesheets). While there is a lot of discussion out there as to whether or not LESS or Sass is better, both have their place, both accomplish the same overall goal, and both can make your life (and your coding) much simpler and easier. What is Sass? ... Sass, which stands for Syntactically Awesome Stylesheets, is a "meta-language on top of CSS that’s...
HTML5 introduces a range of new form elements and functions, including the range input type. With the range input element, you can create sliding controls for your site users. There are a number of options to choose from in terms of configuring your range inputs, such as defining the range values and steps. With a little JavaScript, you can capture and respond to user interaction with the range slider control. In this tutorial we will create a basic HTML5 range input slider to resize an image, with a JavaScript...
Web developers are increasingly being asked to build sites that cater to smartphone Internet users, or to recast existing sites into user-friendlier formats for mobile devices. By 2015, statistical research by eMarketer predicts that more than half of the persons who access the Web will do so through a smartphone or other small-screen device. This paradigm shift represents a challenge to the established Web development community, which now has a mandate to configure Web content previously optimized...
HTML5 includes a host of new input elements, such as the output tag. Using the output tag in conjunction with the "oninput" event listener, you can create simple or complex Web page calculators, giving the user instant results. The output tag allows you to build forms using semantic markup, since the element is specifically designed for displaying calculation results. In this tutorial we will create a simple Web page calculator to demonstrate using the output element. Many of the new input elements...
We continue on our journey of Learning LESS today as we take a look at Nested Rules in LESS, which will help you write extremely clean code. If you haven't read our first three posts on the topic, check out Learning LESS: An Introduction, Learning LESS: Variables and Learning LESS: Mixins. Blog Series Roadmap ... An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action Now we jump into Nested Rules, a topic that can be somewhat difficult...
The Wordpress platform allows you to modify, customize and enhance your existing website easily. You don’t need to change the core program but rather you can create or modify existing plugins to add the extra functionality that you need. This flexibility in customizing your Wordpress installation is provided by the Wordpress Plugin API. There are already hundreds of Wordpress Plugins on various Wordpress Plugin repositories on the Web where you can download and install. If you cannot find a plugin...