Code Theory

Complete list of skills you need to become a Webmaster, first part

Being a computer nerd who has experimented with a lot of different things, I have had the opportunity to build websites for people, completely from scratch.

Top 10 Code Snippets With CSS Animations

A great thing about CSS is that it allows you to animate your creations.

How to Create Social Media Share Buttons

A good social media share button has to be aesthetically pleasing and really accessible — you have to make your users want to click the buttons and share…

CSS Snippets: How to Create a Print Button

One cool thing about CSS is that there are probably about one hundred different ways to use the styling language to make buttons, and this is probably…

How to Create a Striped Text Effect

With CSS3, it’s easier than ever to create cool text effects to add to your projects.

How to Add Style to an Ordered List

Ordered lists aren’t exactly the most exciting HTML element you can add to any given project, but it can’t be denied that they have your uses.

10 Websites to Visit for Free Font Downloads

Most web designers will tell you that they can never have enough free fonts.

10 Free and Fun Filler Text Generators

Even if you absolutely love your job as a web developer or designer, there are still times when we could benefit from adding a little more whimsy to our day.

How to Create a Stylish Download Button with CSS

We’ve already covered how to create animated buttons , but if you’re looking to take your button animations and animation functionality to the next level,…

10 Best Free Icon Sets for Your Design Projects

If you’re a web developer or designer, chances are there are few things you love more than a good set of freebies.

Installing a WordPress Plugin

If you’re new to WordPress, the concepts of plugins, themes, widgets, etc might be a little overwhelming.

How to Style a List with Font Awesome Icons

So we already know how to create really cool pure CSS social media icons using Font Awesome , but what else can we do with this awesome icon library?

Using Font Awesome to Create Social Icons

Font Awesome is a really useful tool that provides developers with free access to hundreds of different icons and symbols to use in the projects in place of…

Creating a Window Text Effect with CSS

One of the best things about CSS is that it gives developers the tools to create things that normally would have to be created with photo editing or…

Create a Featured Ribbon Effect Using CSS

We’ve all seen those box, rectangle, or square shaped HTML elements that feature a “ribbon” draped around one of its corners to signify that this element is…

The Ten Best Star Wars CSS Snippets

In honor of Rogue One ‘s recent release, we’ve compiled a list of our favorite (and the very best) Star Wars related CSS code snippets around.

How to Create a Fixed Header

Fixed headers are an increasingly popular trend for styling headers or navigation menus on your site.

CSS Snippets: Styling Breadcrumbs

In the famous old story of Hansel and Gretel, the children spread breadcrumbs behind them as they made their way into the woods.

WordPress or Drupal: Which One is Right for You?

WordPress and Drupal are both popular, powerful CMS platforms, and if you’re a web developer, chances are that you’re going to have to work with both of…

Adding AMP Support to WordPress Sites

The Accelerated Mobile Pages (AMP) Project is one of the latest initiatives by developed by Google to enhance the quality of mobile browsing.

Guide to Creating CSS Toggle Switch

This guide will show you exactly the code you’ll need to create a cool toggle switch that sort of resembles the ones used on iOS devices.

Best Mobile Analytics Solutions

Analytics are important, not only for tracking the amount of people visiting your site, but also to track their behavior once they’re on it.

Best Resources to Learn to Code for Free

If you’ve ever wanted to learn how to code (or maybe you know some basics, but would like to learn more), now’s the time to do it.

A Guide to CSS Resets

CSS resets are a great tool that can be used to essentially reset some (or all, depending on the reset you use) of a particular browser’s default styling.

10 Essentials For Using Chrome’s Developer Tools

Google Chrome’s Developer tools makes coding so much easier I’m not sure how developers ever lived without it.

Guide to Creating Pure CSS Animated Buttons

There are so many different ways to create stylish buttons with HTML and CSS. All you need is an tag or two to get started.

Tips for Cross Browser Compatibility

Developing and designing for every browser type can be a very challenging (some might say impossible) task.

Two Ways to Create an Animated Hamburger Menu

If you’re a developer or a designer, you’re probably familiar with the trend of using hamburger (or three-line) menus as fully responsive and mobile…

HTML5 Fullscreen Background Video with CSS and JS (Plugin/Library)

Fullscreen background videos that autoplay right when the webpage loads (above the fold) has become quite a popular trend these days.

Guide (Introduction, Implementation and How it Works) to A/B Testing and Split URL Testing (VWO, Optimizely, Google Analytics)

Recently I’ve been investing a lot of time into A/B (split) testing/experiments and analysing their results.

Getting Started with React – Setting up the Development Environment

React (also React.js or ReactJS) is a JavaScript library for building user interfaces developed by Facebook & Instagram.

CSS Apply Filter Effects (blur, grayscale, hue) to the Area Behind an Element with backdrop-filter Property

We’re well acquainted with the CSS3 filter property that lets us apply various effects like blur, grayscale, sepia, saturation, etc.

Custom Validation Messages for HTML5 Form Constraints

Well, we already know that with HTML5 from constraints, client side form validation has become super easy.

Trigger HTML5 Form Validation on JavaScript Submission (form.submit())

Most of the time when dealing with web forms, we either have a basic version where the user clicks on the submit button and the form submits to the relevant…

JavaScript Fire onSubmit Event Handler Programmatically by Calling form.submit()

Unless you code your web pages in vanilla javascript, you’ll probably not notice this but when you do it’ll quite baffle you that the event listener you…

Quick Tip: Rails Escaping Database Values and Storing/Inserting with Multi-Insert SQL Query

In this quick tip we’ll see how to escape values in Rails before passing them on to an SQL query (preventing injection attacks) and then also look into how…

Prevent Touch Panning and Zooming on Mobile Web Pages with CSS touch-action Property

The new touch-action property from the CSS Pointer Events spec can help us (as developers) specify what sort of manipulation (panning, zooming, etc.) should…

Single Sign On (SSO) for Multiple Applications with Devise, OmniAuth and Custom OAuth2 Implementation in Rails

Recently I had to implement Single Sign On (SSO) for one of the Rails app I’d been working on.

What is Rack and Rack Middlewares (Basis of Ruby Frameworks) ?

Rack is a very thin interface between Ruby frameworks and web servers that support Ruby.

Passing Data Across Components with Contexts (childContextTypes, getChildContext(), contextTypes) in ReactJS

Using React Contexts we can communicate across a hierarchy of Components .