Category: Coding

First, solve the problem. Then, write the code.

How To Compare Strings In PHP

During any sort of programming you will always get situations where you need to compare values with each other, if the values are boolean or integers then the comparison is simple. But if you want to compare strings or parts of strings then there can be more to the comparison such as case of the string you are comparing.

Foundation for Beginners: Custom Forms and Switches

Following on from our look at buttons in Zurb’s Foundation, let’s now take a look at custom forms and switches. During this tutorial we’re going to work on an exercise; a contact form which you can add to your projects or just play around with. Once we’ve built that, we’ll move onto other form elements.

20 Useful CSS Snippets Which Can Help You A Lot

CSS is extremely used when it comes to web development because it helps creating a lot of things with ease. Using CSS means that you will not only be able to create a great web site but it also means that you can optimize it very well. If you combine it with HTML5 and jQuery… Continue reading 20 Useful CSS Snippets Which Can Help You A Lot

Create An Animated CSS Box Menu

In this tutorial were going to play with CSS transitions to create a new style navigation menu. The effect we are aiming for is having a number of navigation boxes, and when the mouse hovers over a box this will grow and shrink the other boxes. We can even add an icon to animate into… Continue reading Create An Animated CSS Box Menu

The Best Free Books, Videos, Tutorials and More for Learning jQuery

jQuery is undoubtedly the most popular JavaScript library on the web today. It is used by 70% of the top websites and is becoming a defacto standard in web development. If you are looking for a programming job, knowing the library is a big plus. Things have progressed as well in terms of the quality and availability… Continue reading The Best Free Books, Videos, Tutorials and More for Learning jQuery

Responsive Retina-Ready Menu

Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game. The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to… Continue reading Responsive Retina-Ready Menu

10 Useful Tools for Quick CSS Development

CSS development is a major part of web design; however, it takes a significant amount of time and effort for a web designer to develop CSS from scratch. The good thing is, there are some great tools out there which make this tedious task much simpler. These CSS Development tools will help you in simplifying… Continue reading 10 Useful Tools for Quick CSS Development

Create a Quick, Sticky Menu

  During this quick tutorial we’re going to implement a sticky menu with CSS, toggling its visibility with jQuery. It’s the perfect way to give visitors social links, additional places within a network of sites, or even personalize settings. Step 1: Setting up the Page Let’s start out by making a basic HTML page. We’ll… Continue reading Create a Quick, Sticky Menu

Simple YouTube Menu Effect

Today we’ll show you how to recreate the little menu effect that you can see in the left side-menu on YouTube when watching a video (where it says “Guide”). The menu is made of a little menu icon, a label and a list of menu items that appears when the label or menu icon is… Continue reading Simple YouTube Menu Effect

Promised-Based Validation

The concept of “Promises” has changed the way we write asynchronous JavaScript. Over the past year, many frameworks have incorporated some form of the Promise pattern to make asynchronous code easier to write, read and maintain. For example, jQuery added $ .Deferred(), and NodeJS has the Q and jspromise modules that work on both client… Continue reading Promised-Based Validation

11 Useful CSS Tools To Speed Up Your Design Process

Here we are presenting 11 extremely useful CSS tools that will help you quicken your design process. CSS is the most popular and most widely used programming language that has been used for the website development. This is mainly because CSS is relatively easy to learn as compared to other programming languages. Another reason is… Continue reading 11 Useful CSS Tools To Speed Up Your Design Process

The Best Way to Learn CSS

CSS works hand in hand with HTML; HTML sorts out the page structure, CSS makes it look pretty and adds subtle levels of interaction. As a web designer you should really get to grips with both these languages. Even if you don’t do the coding yourself, understanding how they work will help you design for… Continue reading The Best Way to Learn CSS

70+ Must Have jQuery Tutorials

Welcome to day 7, the last installment of tutorial week on Designrfix. Today we have assembled an awesome collection of some wicked jQuery tutorials from around the Web. I am confident that these web design and development tutorials will arm you with all the necessary techniques in-order to achieve those latest web design trends. Lastly,… Continue reading 70+ Must Have jQuery Tutorials

Create a Responsive Website Using HTML5 and CSS3 – Video Tutorial

A few weeks ago we released two different introductory articles about HTML5 and CSS3, and I promised you we’d do some cool stuff together in the upcoming months. Well, I have been working hard on this video tutorial and I really hope you enjoy it. In this tutorial I will teach you how to create a… Continue reading Create a Responsive Website Using HTML5 and CSS3 – Video Tutorial

App Showcase with Grid Overlay

Today we will be creating a little app showcase with a neat effect. The idea is to show a mobile device with a screenshot of an app and when clicking on the device, a grid appears, showing some more screenshots. The effect is very subtle: the device moves back and the grid fades in and… Continue reading App Showcase with Grid Overlay

Magically Turn Your Photoshop Layers Into CSS3 With CSS Hat

Today I’m going to show you a Photoshop plugin which aims to greatly improve your workflow. It’s called CSS Hat and it turns your Photoshop layers directly into valid CSS3. Further Information Download: You can grab CSS Hat from its homepage. Compatibility: CSS Hat is compatible with Photoshop CS4 and upwards, on Mac OS X… Continue reading Magically Turn Your Photoshop Layers Into CSS3 With CSS Hat

CSS Media Query Snippets

With responsive design being big in web design it’s important that you design your website so that it can be used on different devices. There are a number of different media queries that you can use on your design, if you don’t know where to start with media queries here is a good boilerplate to… Continue reading CSS Media Query Snippets