10 Useful Sass Mixins for Modern Developer

10 Useful Sass Mixins for Modern Developer

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. I’ve been using Sass for quite sometime and found out that mixins are something any front-end developer would enjoy and take advantage of saving time and being more efficient.

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.
It save quite a lot of time and helps developers ensuring that the code is not redundant and organized nicely.

I recommend using Compass as they have many built in mixins that simplify developers work.

28 Photoshop Tutorials for Learning New Web Design Techniques

28 Photoshop Tutorials for Learning New Web Design Techniques

Some designers advocate skipping the Photoshop process and moving from wireframes directly into HTML/CSS. This is possible for smaller projects but not always advisable. Adobe Photoshop offers the best tools for testing color schemes, gradients, icons, and detailed page elements before moving the layout into your browser.

If you’re a little rusty in Photoshop then these tutorials should get you back into the groove. I’ve collected 28 web design tutorials centered around Photoshop techniques for designing typical page elements. Most are simple enough that you can follow along without much prior experience in the software. But even the more advanced tutorials can offer insights and help newcomers understand the digital design process.

28 Tutorials about SVG Images in Web Design

28 Tutorials about SVG Images in Web Design

Scalable images have become a lot more popular in recent years. As modern browsers slowly accept the notion of SVG images we can see many techniques being released out on the web. These range from scalable responsive logos to animated line drawings – all through the use of dynamically-generated images.

This collection of tutorials should be more than enough to get you all caught up to speed with the latest trends. Even if you know absolutely nothing about SVG images or how they’re created, these articles should provide insight along with a few industry tips & tricks. SVG resources appear to be a growing solution amongst web designers. Take a look over this showcase to understand what all the fuss is about.

25 CSS3 Code Snippets for Making 3D Animated Effects

25 CSS3 Code Snippets for Making 3D Animated Effects

Web developers have been immersing themselves into CSS3-based designs. Transition animations along with CSS keyframes have opened the door to many possibilities. 3D animation was never optimal outside of Flash-based websites. However the further advancements in JavaScript along with CSS3 have created a new code toolbox for web designers.

I’ve put together a number of fantastic open source code samples using 3D animation effects. Many rely solely on CSS3 while others are a mix of CSS and JavaScript. Keep in mind that people using older web browsers may not be able to fully appreciate your 3D animations. But that doesn’t mean you should ignore the practice! As more people upgrade to newer browsers there will be greater support in the years to come.

25 Best Tutorials for Building a Custom Portfolio Website

25 Best Tutorials for Building a Custom Portfolio Website

Web development tutorials often cater towards beginner starting topics. However there are plenty of intermediate-to-advanced level tutorials focused on complex development techniques. Even people with years of practice may one day look towards an online tutorial to educate themselves on an unfamiliar topic.

In this gallery I’ve put together a handful of brilliant tutorials related to designing and coding a personal portfolio. You can find help on HTML/CSS, jQuery, and Photoshop design mockups. Some articles will be pretty simple while others get into the more nitty-gritty details. Take a look over these headlines and see if there’s anything you may want to learn about.

30 Open Source CSS3 Code Samples for Web Developers

30 Open Source CSS3 Code Samples for Web Developers

Open source web development has seen a tremendous explosion in popularity. You can download free code snippets, plugins, WordPress themes, and the list is always growing. I have been infatuated with the amazing effects possible in CSS3 and some related JavaScript libraries.

In this gallery I want to share 30 powerfull frontend code snippets for web developers. Some of these effects are built entirely with CSS, and others utilize jQuery or some other JavaScript techniques. You can download a local copy of any script or try duplicating the effect into your next project. And if you know about any other fun code snippets, just drop a comment in the post discussion area.

Tutorial: How To Build Input Fields with Tag-Style Item Blocks

featured-tag-input-fields

Many newer social media communities and web applications are pushing the boundaries of interface design. Form inputs have changed a lot over just the past 4-5 years. One such feature is the tag select input field, where users can enter tags which appear as block items within the field itself.

For this tutorial I want to demonstrate how we can build this effect to be used in any website. To save time I’ll be using the jQuery Tags Input Plugin which is free and open source to use on any project. I prefer this plugin over some others because of the many parameters and options for customizing the experience. Take a peek at my live demo to see what we will be creating.

The Eight Best WordPress Resource Sites for Beginners

The Eight Best WordPress Resource Sites for Beginners

WordPress has become one of the most popular open source blogging systems around and keeps getting better & better. It is a great content management system, not because big sites like Mashable use it, but because of its community which is always ready to help you without wanting anything in return.

Not just that, there are a number of useful WordPress resource sites that offer extensive tutorials & WordPress-related content. In this post I’m going to share top 8 best WordPress resource sites. I have tried to collect the best resources, but there are too many high quality sources to list them all.

Tutorial: Translating A WordPress Theme

translate-2

When developing premium WordPress themes and plugins it is essential that you build them with localization as standard, this allows the theme user to easily translate their WordPress themes so that the theme can be used by all languages.

In todays tutorial I wanted to show you how to add translation and localization support to a WordPress theme and how you can easily create the translation .po and .mo files.