How to Create a CSS3 Pop-Out Menu Without Learning Programming

Posted in Coding, Coding, Tutorials, Tutorials, Web Interface • Posted on 8 Comments

Modern websites offer a more complex hierarchy of navigation. This navigation sometimes makes user-experience on the website’s menu a bit confusing. Using a CSS3 pop-out menu makes it easier to find your way to what you want on the site quickly. Thanks to CSS3, animation is now possible.

Using CSS3, you can simply hide and unhide an element under other elements. This will not only simplify your code but also makes it  easily updated. This means you can now perform some sliding animation even without the knowledge of programming.

How to Create a CSS3 Pop-Out Menu Without Learning Programming Read More

Learning LESS: A Comprehensive Introduction

Posted in Coding, Coding, HTML & CSS, Tutorials • Posted on 7 Comments

Now that we’re done talking about SASS let’s now talk about learning LESS. If you haven’t seen my SASS tutorial, I recommend you check it here. In our previous tutorial, we listed down the drawbacks of CSS and how pre-processed methods can improve your workflow. We also talked about how to implement SASS using variables, nested, mixins, functions and so on. So we’re ready to take another learning curve with another pre-process method which is LESS.

LESS in a Nutshell

LESS is a dynamic style sheet language that extends CSS and, just like SASS, it has dynamic behavior such as variables, mixins, operations and functions.

It allows you to write CSS in a simpler way by just using and combining mixins, functions, and so on. LESS also increases readability and organization of CSS using imports, nested rules and comments with .less extension.

Learning LESS: A Comprehensive Introduction Read More

Learning SASS: A Beginner’s Guide to SASS

Posted in Coding, Coding, HTML & CSS, Tutorials • Posted on 13 Comments

Writing a lot of CSS can be overwhelming that is why learning SASS and LESS can make  any web developer and designer’s life much easier. For a beginner, you might find it fine but as time goes by and your CSS skills are improving. You begin to wonder if there is a way so that you don’t need to repeat a lot of CSS codes in your style sheet. The good news is, there is one! Thanks to the CSS pre – processor, it’s now possible to write concise CSS codes without repeating each of them again and again. It is even formatted nicely. You can perform computations and do dynamic styling using these pre-processing methods. There are two pre-processing methods that I will tackle: SASS and LESS. For this tutorial I will talk about SASS first and then on a separate tutorial, I’ll talk about LESS.

Learning SASS: A Beginner’s Guide to SASS Read More

Simple Yet Important Cross-Browser Styling Tips Everyone Should Know

Posted in Coding, Coding, HTML & CSS, Tutorials • Posted on 7 Comments

Many have been searching for cross-browser styling tips that can help them solve their browser compatibility problems. After all, creating a website can be easy but developing one that looks the same on all browsers can be tough. For many years, browser compatibility is one of the hardest parts of web development.

Simple Yet Important Cross-Browser Styling Tips Everyone Should Know Read More

Jimmy Neutron and The Anatomy of the Atomic Design

Posted in HTML & CSS, Web Interfaces • Posted on 1 Comment

If Jimmy Neutron were real, could he become a pretty decent web designer? Of course, he would.  For starters, he knows the anatomy of the Atomic Design. He could be designing the best web pages you will ever see, and make your eyes shed blood out of extreme admiration of his designs. And you’ll probably wonder why he is that good.

Well, for one thing, Jimmy Neutron understands a fundamental yet commonly unappreciated principle in web design. He knows how to work on a very potent tool to his full advantage. Using this tool, he could easily design mock-ups and code them without difficulty.

Jimmy Neutron and The Anatomy of the Atomic Design Read More

How to Create a Scrolling Parallax Website

Posted in Coding, HTML & CSS, Tutorials • Posted on 31 Comments

Parallax websites are one of the latest and biggest trends on the web for some time now. If you want to impress your clients or implement immediate impact on your site, this is a good choice for you. In this tutorial, I’ll teach you how to create a simple but beautiful parallax website that will create an illusion of 3D depth to your site. It will surely catch your viewers’ attention. So let’s dig in.

How to Create a Scrolling Parallax Website Read More

10 Creative Loading Effects for Your Website

Posted in Coding, HTML & CSS • Posted on 13 Comments

People hate waiting. It is a fact that web designers and developers should accept. It has been quite a maxim that as designers, we shouldn’t make our viewers wait. This is because many people tend to get bored and choose a website that loads faster. And that, my friend, is a big no-no.

However, waiting is seemingly inevitable. Despite modern internet connection speeds, some browsers still take time to load web elements. So it becomes a need to make people still want to visit your website even if it takes a little bit of time when they load it. There are a lot of plausible solutions for this, and I have to say, that our topic for this article is one of these.

10 Creative Loading Effects for Your Website Read More

10 Easy-to-Follow PSD to HTML/CSS Tutorials

Posted in Coding, Tutorials • Posted on 5 Comments

Converting PSD to HTML/CSS might intimidate you at first since it’s a brand new world, especially for long-time Photoshop users. A basic knowledge of HTML and CSS won’t hurt; beginners might find these tutorials a bit dizzying but, hey, it’s worth a try. And believe me when I say to you, finding a good teacher who will teach you for free (or for a small amount) is just another difficulty waiting next door if you don’t start now.

10 Easy-to-Follow PSD to HTML/CSS Tutorials Read More

Beginners Guide to Working with jQuery Animation

Posted in JS & AJAX, Photo Effects, Quick Tips, Tutorials • Posted on 42 Comments

In this tutorial, we are going explore the basics of jQuery animations for you to get prepared for advanced designs. Animations is the core functionality behind the interactive elements in web design.

The design of a website plays a major role in attracting visitors on a consistent basis. Interactive designs get more attention compared to the plain old static designs.

Technology is improving at a rapid pace to cater the advanced modern web designs. As a result, CSS3 offers the animations without the help of JavaScript. Even though CSS3 and HTML5 are improving in leaps and bounds, jQuery seems to be the popular choice for creating interactive designs.

Let’s get started!

Beginners Guide to Working with jQuery Animation Read More

Design a Pricing Plan Using CSS3 in Under 15 Minutes – Downloadable

Posted in Coding, HTML & CSS, Tutorials • Posted on 21 Comments

Today we continue the series of tutorials on basic HTML5 and CSS3 coding and we jump even deeper into CSS3 with this video on how to design a pricing plan.

If you own a product which you sell only on a subscription basis, then you will probably need pricing tables in order to showcase your product and the purchase options better. This tutorial will teach you how to do that.

Design a Pricing Plan Using CSS3 in Under 15 Minutes – Downloadable Read More
54.80.121.186 - unknown - unknown - US