Archives For HTML/CSS

Responsive layouts are rapidly moving towards being the standard and as more and more responsive CSS frameworks have been cropping up on the web and with a huge variety of frameworks available that includes every single one of them employing a different grid properties and techniques, it can be sometimes be difficult choice to make when to choose the right one.

You can always choose what I think the four main and popular ones are and these are the 1140 CSS Grid, Less+ Framework, Twitter Bootstrap and Zurb’s Foundation. But you won’t find any of them below today as this post features 12 lightweight frameworks that will quickly help you get going with your next project.

1. RWD Grid

The RWDgrid is just another Grid system based on popular 960grid , which is responsive and ranges from mobile, tablet, laptops and wide screen displays. Naming convention of this grid system is similar to 960 grid system, where underscore is replaced by hyphen (increases readabilty).

RWDgrid is having different Grid system made for 1200px+ Displays, 960px+ Displays, 720px+ Displays and Mobile screens. This can be used as a base grid system that will help you to build responsive webdesign with your existing proficiency over popular grid systems.

Continue Reading…

With devices like Smartphones and Tablets and bigger and bigger monitors introduced a concept in web design that has risen up during the late year of 2011 and that is responsive web design.

But what does responsive web design means? Let`s say that you have to build a website for a client and you want to do it based on a standard grid system, for example 960 grid system. And the client also wants versions of the website that fits smartphones such as iPhone and tablets like the iPad. You`re not going to build 3 different websites, instead you`re going to use a responsive grid system which adapts the website for all types of screen resolutions.

It’s all about adapting the dimensions of the website ( font-size, columns, images, etc) to different screen resolutions. The things which make all the magic are the CSS media queries. They’re the ones which tests which resolution the screen has and according to it, are changing the CSS to fit the screen.

Continue Reading…

With a few line of code, CSS3 can replicated many fancy effects like logos, interfaces, icons that you once only could have of done in Photoshop. In today post you’ll find some 14 handpicked css3 experiments. These handpicked items will work in most modern browsers like firefox, google chrome, safari.

1. Bender from Futurama

bender css3

Continue Reading…

The web industry is always in a state of constant flow of changes such as new JavaScript frameworks, web and other useful apps for working with client include a few great new showcases/inspiration sites.

Many of the resources below are free or very low-cost, and are sure to be useful to a lot of designers and developers out there. If i missed something that you think it need to be included in this post, please post your comments

1. batman.js

batman-js

batman.js is a full-stack microframework extracted from real use and designed to maximize developer and designer happiness. It favors convention over configuration, template-less views, and high performance by simply not doing very much. It all adds up to blazingly fast web apps with a great development process; it’s batman.js.

Continue Reading…

HTML5 is an effective and increasingly used language for both developers and designers to use to structure and present content. Whether to make websites more functional and user-friendly, deliver video faster, or even build desktop level web applications. Here are 8 simplified tools for HTML5 coding:

1. Initializr

initializr2

Initializr is an HTML5 templates generator to help you getting started with an HTML5 project. It is built on HTML5 Boilerplate, a powerful HTML5 template created by Paul Irish and Divya Manian. Initializr will generate for you a clean customizable template based on Boilerplate with just what you need to start.

Continue Reading…

Validation of your code is often overlook in the benefits that provides developers and designers. It’s possible to code HTML and have websites to initially work properly. But all coding languages have rules for properly syntax, grammar and vocabulary and browsers problems could arise in times when the browser receives new updates to keep with the online advances.

Those who don’t take their time to validate their HTML websites may find that their newly website may work well initially but problems will arise later to the design code being 100% right plus validating your code will make you a better coder in the later in your career. Today we will be going through the reason why you should always validate.
Continue Reading…

It’s important to have a good set of tools to speed up and simplify your CSS development and we always see new and approved ones  being created. The tools featured in today post will help you improve your workflow whether it be solving validation or debugging, taking care of those repetitive tasks that we see on a daily basis or just simply offering a better solutions to many time-consuming items like sprites or CSS3 animations

1. CSS Lint

CSS Lint

CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.
Continue Reading…

For some of our readers we are getting back to the very basics form in this post. But if you are about to pursing web design either a career or just for a hobby, you must be able to do more than just simply design a pretty page. Today web designers aren’t just the designer anymore they need to become some what a experts in coding as well.

Today there are plenty of different web design standards that one must master to become a web designer. The two most important in the industry today are HTML and CSS because these can be a stepping stone. Continue Reading…

The momentum of CSS3 is gaining even further despite the efface that the standard hasn’t been finalised. But we see already there are hundreds of tutorial already made to teach designers how to use it. Also unfortunately a lot of them just cover the same ground and of the tutorials teaches us to do things that they may might be not useful. though these techniques can be adapted to fit a project perfectly. Manly in this post I will be featuring only Pure CSS3 tutorials that only used CSS and HTML

Have i missed a tutorial that haven’t been included above, please share yours in the comments.

Continue Reading…

The element is one of the awaited feature in HTML5.  It now is easier to embed videos into web pages without any plugins. The element is supported by most popular browsers (including IE9), how ever one of the problems is if you want any version of IE under 9 to accept this element you can’t, it’s simple like that. Until now with the aid of JavaScript it’s easy to allow the have the element to work as it sits on top of the tag to provide better controls and fallback to flash for old browsers.

Here are 12 brilliant HTML5 video players which allow you to embed video into web pages and ensure backwards compatibility

1. SublimeVideo – HTML5 Video Player

SublimeVideo is designed to be super simple to integrate: by just adding a single-line-of-code to enable it in your web page.

Continue Reading…