Making Attractive Functional Gradients in CSS

CSS gradients are a great tool in any modern developer’s arsenal. These gradients allow you to display smooth transitions between multiple rounds of specified colors. Similar to how you can declare a set background solid color element in CSS, you can also do this to declare a gradient background. Using gradients in CSS is a […]


CSS Rounded Corners 101

Float is a property in CSS that has to do with positioning. In order to understand its origin, it’d be smart to first look at a print layout and how it relates to that. In print layouts the images are set into a page so that text will wrap around them when needed, commonly referred […]


Comparing Javascript & jQuery : Build a Pomodoro Timer

Modern web development offers an incredible variety of tools, libraries, and frameworks to build web sites/applications. As of 2016, jQuery, React, Angular, and Vue are the most popular front-end libraries/frameworks in use. They can all be used to build and accomplish similar things, but in different ways. What are the advantages/disadvantages of each? How does […]


No More Janky CSS: Using OOCSS, SMACSS and BEM

Janky: Of extremely poor or unreliable quality. If you are writing just a few lines of CSS, it may not make a difference how you structure it. But as a project grows and the CSS becomes larger, the question of structuring CSS becomes more pertinent. There are a number of methodologies for writing better CSS. […]


CSS Background-image tricks and gotchas

Using a background-image property is CSS allows for versatility in creating a background element. The property can be applied to a graphic which includes, PNG, JPG, GIF, WEBP, and SVG, alongside the special case of using a gradient as the background.           There are then multiple files that can be used for a background, but […]


CSS Position Tricks and Gotchas

A position property is what allows you to manipulate the location of an element. It has multiple values and properties so that you can change the location based to your own liking. These assist when dealing with multiple elements or a parent and child element. One of the first code examples we’re going to show […]


How to Use CSS Native Variables

Variables in CSS (or custom properties or CSS native variables) are becoming more widely adopted across the major browsers. CSS variables allow for enhanced control over your code as well as the ability to reduce clutter and avoid repetition in your code. What’s more, with CSS native variables you can use JavaScript to update application and values based on […]


What is SVG and Why use it?

Scalable Vector Graphics or SVG is an image format which allows you to draw two-dimensional vector graphics to be used on websites. The graphics are defined in XML format. The scalable aspect lets you resize and zoom without compromising image quality. SVG images can be static or animated. SVG is a W3C standard so it […]


What are CSS sprites used for?

CSS sprites combine multiple images into a single image. What is a CSS image sprite? A webpage normally contains several images. These include icons, buttons, logos, relevant pictures and other graphics. Let’s say you have a blog and want to display four images. You have icons to indicate next page and a FAQ section, a […]


Introduction to CSS animations

Humans are drawn to moving shiny objects. Our natural reflexes to notice movement is one of the reasons adding an animation to a website or app is a powerful tool. It has the capability to accentuate certain parts of the website or draw interest to a product. When done well with beautiful design elements and […]