CSS Best Practices to Follow and Bad Habits to Avoid

Posted in Quick Tips, Tips, Tutorials2 months ago • Written by 13 Comments

Creating a well-managed set of CSS codes can be a challenge. As technology evolves, it’s not really easy to say if you’re doing the right CSS practices or you’re just messing up the code and compromising the quality of your website on different browsers.

Through practice, you should be able to avoid CSS errors. So, to give you a guide on the dos and dont’s when writing CSS codes, we listed below the CSS best practices to follow as well as the bad habits to avoid. So, get ready and let’s get started.

CSS Best Practices to Follow and Bad Habits to Avoid Read More

Learning SASS: A Beginner’s Guide to SASS

Posted in Coding, Coding, HTML & CSS, Tutorials3 months ago • Written by 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

How to Use UI Kits – Plus Free UI Kits to Choose From!

Posted in HowTos, Quick Tips, Tutorials, Web Interface, WordPress3 months ago • Written by 2 Comments

UI kits can be seen anywhere on the Web. But what is this UI kit thing? Do you know how to use UI kits? You can see a lot of resources with beautiful interface elements such as buttons, sliders, breadcrumbs, media players, forms and the likes. Perhaps it crossed your mind how these elements came to be.

Let me give you first a brief introduction about UI kits. A UI kit stands for “User Interface Kit”, which are PSD files that are composed of user interface elements. These come in a variety of colors, patterns and asl files that are being integrated on web and mobile designs. Though sometimes there are UI elements that are included on the package that you don’t think you will be using. That being said, UI kits will vary according to your web design needs. Usually the premium versions of UI kits come with a lot of user interface elements than the free ones.

Using UI kits is all about improving and speeding up the workflow without giving a lot of time thinking what to design. This allows you to focus more on the functionality and usability of the website you are working on.

How to Use UI Kits – Plus Free UI Kits to Choose From! Read More

Simple Yet Important Cross-Browser Styling Tips Everyone Should Know

Posted in Coding, Coding, HTML & CSS, Tutorials3 months ago • Written by 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

Get ‘Layed’: What You Need to Know about Photoshop Layers

Posted in Photo Effects, Quick Tips, Text Effects, Tutorials, Web Interface3 months ago • Written by Leave a comment

Photoshop is revered as one of the best digital multimedia solutions software. So there is no question on what you need to know about Photoshop layers because there is always something to be learnt about this amazing software. It basically encompasses every design need there is. Artists consider using it because of its flexibility. It can be utilized by any artist notwithstanding their design inclinations. Most photographers use the software in editing their photos. Some digital artists use Photoshop, (if not, Illustrator) in their designs. Meanwhile, most web designers use this software in building the visuals of their designs. Truly, with these uses, Adobe’s carrier software has been the one-man-wrecking-machine software that solved most of our digital problems.

Get ‘Layed’: What You Need to Know about Photoshop Layers Read More

10 Easy To Understand Photoshop Tutorials on Lighting Effects

Posted in Illustration, Inspiration, Photo Effects, Photography, Text Effects, Typography3 months ago • Written by 4 Comments

Most designers find Photoshop very versatile. Photoshop tutorials on lighting effects is highly sought after. Although mainly used in photography, this favorite software of designers bridges different kinds of needs, from typography to web design.

Not to exaggerate, Photoshop can supply all your design needs. Today, we will be highlighting a very particular need. This article is directed mainly to graphic designers and photo enthusiasts but could be a very good springboard to web designers too. With lightning effects added in your photos, you will be able to add more dynamism and professionalism in your designs. In short, it would make your awesome website more awesome. How cool is that?

10 Easy To Understand Photoshop Tutorials on Lighting Effects Read More

70 Best Web Design Tutorials of 2013

Posted in Coding, Quick Tips, Tutorials, Web Interface3 months ago • Written by 28 Comments

2013 has ended with a great blast and I’m pretty sure that everyone has done their countdowns and throwback blog posts, tweets and even status updates. It’s a pretty cool thing to do because you get to remember all the awesome things 2013 has given you. You look back at how bad you were design-wise last year and how well you’ve improved. With this, you get to assess yourself how much more you could exert and, in turn, how much more money you could earn. Retrospection also tells you what more could you learn. Seeing what you’re weak at will also allow you to see where you could trained. That is why self-correction and openness to new things is a great habit for a designer.

70 Best Web Design Tutorials of 2013 Read More

How to Create Flat Icons in Photoshop

Posted in Icons, Tutorials, Web Interface4 months ago • Written by 13 Comments

Okay, let’s face it. Flat design is the new ‘thing’ for web interface. With iOS and even Windows now adapting this design scheme, it will not be any longer when almost (if not all) all websites in the World Wide Web adapt this design scheme. You would just be baffled to know one morning that as you woke up, opened your browser and typed in your favorite website (we hope it is 1stwebdesigner, just kidding!) and be surprised to see that it followed with the trend of flat design! So you would immediately re-code your website or blog, for that matter, to be ‘in’ with the trend, and that would entail a lot of grueling hours again.

So why not start today? Why not start your web motif revamp today? Try to be there before it happens. Try to be cool before being cool is cool. Be a hipster!

You may be thinking, “Where will I start?” Of course, revamping your website design is hellish as hell is. But that’s why we are here – so that you’ll have a helping hand in going with the flow of design. Right?

How to Create Flat Icons in Photoshop Read More

Ultimate 6-Part Web Design Video Course: How To Build a Website From Scratch

Posted in Coding, Tutorials, Web Interface7 months ago • Written by 29 Comments

Hey guys, we’re really excited to release this resource for you. If you’re following my previous tutorials, I started with the basic one, which is boring for some of you and might be helpful for the beginners who just started learning. If you’ve missed it, check Basic Web Design Video Course.

In this web design video course, I will show you the processes involved on creating a landing page – from planning, searching for inspiration in the top design community, choosing fonts, colour scheme, wire framing and finally transferring the wireframe into Photoshop and rocking it out there. Once we have our PSD design ready, we will convert it into a working website using Twitter Bootstrap. We will be also covering how Bootstrap, scaffolding, base CSS, and JavaScripts work!

Get ready and let’s get started!

Ultimate 6-Part Web Design Video Course: How To Build a Website From Scratch Read More

Beginners Guide to Working with jQuery Animation

Posted in JS & AJAX, Photo Effects, Quick Tips, Tutorials8 months ago • Written by 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
23.20.149.27 - unknown - unknown - US