Code & Design Things

Subscribe

CSS

What Is SMACSS and How Does It Work?

What Is SMACSS and How Does It Work?

This piece is part of a Learn HTML & CSS series. Check out part 4 here: What is OOCSS and How OCSS WorksSMACSSPronounced “smacks”, SMACSS stands for Scalable and Modular Architecture for CSS. The idea behind SMACSS is to break your CSS down into five distinct categories: base, layout, module,

What is OOCSS and How OCSS Works

What is OOCSS and How OCSS Works

This piece is part of a Learn HTML & CSS series. Check out part 3 here: HTML, The Cascade and Ways To Think In CSSOOCSSOOCSS stands for Object-Oriented CSS. The idea behind OOCSS is that you can reuse your HTML structures and patterns, meaning less CSS to deal with in

HTML, The Cascade, and Ways To Think In CSS

HTML, The Cascade, and Ways To Think In CSS

This piece is part of a Learn HTML & CSS series. Check out part 2 here: Parts Of An HTML Document And How It Works With CSSI started learning how to code back in the early 2000s. For context on how long ago that was -- our Internet was dial-up,

Creating 3D Pure CSS Hover Flip Card Effect

Creating 3D Pure CSS Hover Flip Card Effect

When it comes to front-end, your aesthetics implementation skills are limited by how well you can make CSS do whatever you want it to do. A pure CSS hover flip card effect is something that we often see in portfolio sites and splash pages. They can also be modified to

Create An Animated Search Box Using HTML, CSS, & 2 JavaScript Functions

Create An Animated Search Box Using HTML, CSS, & 2 JavaScript Functions

Have you ever wondered how those fancy expanding search boxes or forms are done? While it looks cool and feels like it could be complicated to code, it turns out to be quite simple. All you need is a few lines of HTML, a good dash of CSS, and two

Pure CSS Social Media Buttons With Tooltip Hover Effect

Pure CSS Social Media Buttons With Tooltip Hover Effect

Social media icons are a staple of web design. Most of the time, designers and developers just settle for a simple button with the social icon slapped on it. But let’s get real — basic and standard icons are boring. They’re everywhere and nothing makes them stand out. In

Fun Animated Button Hover Effect In CSS

Fun Animated Button Hover Effect In CSS

Hover effects are one of those things we know, see and hear about — but the implementation is generally pretty basic. In this tutorial, we’re going to create a button hover effect, but with a fun twist to it. This is what we’ll be making: While it looks like

How To Create An Animated Range Slider In HTML, CSS, and Simple JavaScript

How To Create An Animated Range Slider In HTML, CSS, and Simple JavaScript

Range sliders — they look fancy and cool, but how exactly is it done? It turns out, with a good splash of CSS and a few lines of JavaScript is enough to do the trick. This is what we will be making: Let’s start with the HTML. <div class=

How To Create A Circular Progress Bar using HTML CSS & Simple JavaScript

How To Create A Circular Progress Bar using HTML CSS & Simple JavaScript

Circular progress bars are a staple of web development. It’s one of those little minor details that can immensely impact a user’s experience and flow. While it’s easy to cheat and just get one of those looped animated loading icon gifs, or spin an element on the

How To Create An Animated Email Subscription Form With Pure CSS

How To Create An Animated Email Subscription Form With Pure CSS

Forms are ugly by default. Creating a basic form is not hard — but a lot of tutorials I remember encountering in my early days of coding required some sort of JavaScript. CSS, however, is a lot more powerful than you think. Here is what we will be making: Here is