Articles by Sara Vieira

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.

How to use custom taxonomies in WordPress

In this article, I will cover custom taxonomies and how they are created. I will make three custom taxonomies to show how the code can be reused with ease and also adapted to the needs of each taxonomy. Let’s start with a definition of custom taxonomies. What are custom taxonomies ? ... Taxonomies are different ways of grouping things together. A real life example might be TV shows: they can distributed by a number of different variables, like the channel airing them, their genre, or even the hour...
CSS

8 simple CSS hover effects

With support for CSS3 increasing with each new release for every browser, and those tiresome CSS2-only browsers slowly dropping off the usage charts, we have far more options for hover effects and transitions in general. Almost all the calls to action that you see on the Web use some form of hover effect, because they draw the eye and make a website feel more engaging. Last year I brought you a set of 8 simple transitions that will wow your users, and today we’re going to look at 8 more… Getting started...
CSS

How to use CSS3 animation

In CSS3 we have two ways of creating animations: We have CSS Transitions that allow us to create some simple effects for things like hover; and we also have CSS Animations for more complicated effects. We can in fact create pretty much any animation we want using pure CSS and since it works with keyframes it uses a system we are already used to seeing in software like After Effects and Flash. In this article I'll get you through the basics of animating with vanilla CSS.   Browser support ... CSS Animations...
CSS

How to use CSS3 transforms

CSS has developed exponentially in a relatively short time. From a language that began with simple style choices, we’ve developed a sophisticated way of laying out content. CSS3 has tons of amazing features, and one of the key aspects is the ability to modify an element using CSS Transforms.   Browser support ... Browser support for transforms is actually fairly extensive; 2D transforms are supported by all major browsers, including IE9 and above; 3D transforms are supported by all modern...

How to create your first jQuery plugin, part 2

In the first part of this tutorial we created a very simple jQuery plugin, but the main problem with what we created was that the user didn't have any control over how the tooltip would appear, and in this second part we will create the necessary code to allow the user to change the defaults and replace them with their styles.   Creating our options ... The first thing we need to do to allow the user to pass their own styles when calling the plugin is change the code we use to name the plugin, our code was: $.fn.tooltipMe...

How to create your first jQuery plugin, part 1

Creating your first jQuery plugin means that you’re no longer a beginner. You can now create something that you can use over and over again, or even package and sell to other developers. It may seem hard, but in reality creating a jQuery plugin is actually a simple process. In this article I’ll show you how simple by creating a simple tooltip plugin.   The markup ... Any jQuery plugin requires some kind of markup and in our case all the plugin will need to be able to run properly is an anchor tag that...

7 simple ways to optimize your website

We’re creating more and more demanding websites, with more and more assets. Now more than ever we need to make our sites blazing fast on desktop and on mobile. Fortunately there are some simple steps that we can take to achieve this… 1) Optimize images ... This may seem obvious, but it’s surprising how many people fail to optimize their images. What’s more, there’s a huge difference between using a medium sized image, and a fully optimized image. Image optimization doesn’t just reduce the...
CSS

How to code object orientated CSS

It sounds really impossible that a language like CSS can be object oriented but it is possible to implement OOP ideas in CSS to make it into a much more pleasant writing experience whilst along the way making your CSS faster to load. What is object-oriented CSS? ... When you hear “object oriented CSS” you may think that this is somehow a new CSS, a pre-processor or something that was added to CSS but no, object-oriented CSS is the same CSS we have always written; but in a cleaner, dryer way so it's merely...
Load more
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress