The Code Player

Creating a Simple Web Page

This beginner's tutorial demonstrates how to create a basic, simple webpage using HTML and CSS.

Pure CSS Colorful Tabs

This walkthrough demonstrates how to use CSS and HTML input fields to create pure CSS tabs.

Simple HTML and CSS Navigation Bar

This beginner's walkthrough demonstrates how you'd make a basic navigation bar with hover effects using CSS and HTML.

Pure CSS Pencil

This walkthrough demonstrates how to use only CSS to create a classic looking pencil.

Simple CSS Fixed Header

This tutorial shows you how to create a simple fixed header using easy, straightforward HTML and CSS.

Pure CSS Text Bubbles

This walkthrough features code that creates iOS inspired text bubbled made from pure CSS and HTML.

Pure CSS Cool Intersecting Border Effect

This tutorial demonstrates how to create a stylish border that's intersected with some text. A great effect that can be used to add some subtle polish to any project.

Pure CSS UFO Effect

This pure CSS effect is used to create an illusion of an unidentified flying object orbiting what appears to be a planet.

Pure CSS Animated Cloud Effect

This walkthrough shows you how to make pure CSS clouds that move across the viewport.

Pure CSS Interactive To Do List

This walkthrough demonstrates how to use CSS to create a "to do" list where you can cross off items after they're completed by simply clicking them.

Minimalist Blog Layout

Use this code snippet to create a responsive, minimalist layout for your blog and websites.

Social Media Icons with Tooltip Hover Effects

This walkthrough demonstrates how to create social media icons using only CSS and FontAwesome. The icons you create will have a smooth hover effect revealing a tooltip.

Pure CSS On/Off Toggle Switch

This walkthrough demonstrates how to create a pure css on/off toggle switch with smooth transitions and color changes.

Pure CSS Kaleidoscope Effect

This walkthrough shows you how to make a cool, animated pure CSS kaleidoscope effect using only a few lines of CSS.

Pure CSS Sun Animation

This walkthrough shows you how to make a shining, spinning sun animation with only HTML and CSS!

Image Accordion Effect

This walkthrough demonstrates how to create a cool pure CSS image hover effect that expands the image and reveals a caption upon hover. The effect is fully responsive.

Pure CSS Cheeseburger

Learn how to create a cheeseburger that looks good enough to eat with pure CSS using this tutorial.

Pure CSS Beating Heart Animation

This snippet shows you how to create an animated beating heart using only CSS. Perfect for any Valentine's Day projects!

Responsive Menu With Icons

This walkthrough shows you how to make a cool, colorful responsive menu (using icons as the menu items in addition to text) using only CSS.

Animated Text Hover Effect

Use this tutorial to learn how to add cool animations that make it appear as though there is a box drawn around your text upon hover. This code uses SVG to achieve the animations.

Pure CSS Image with Caption Hover Effect

This walkthrough shows you how to use hover effects to reveal captions for your images.

Animated Gradient Effect

This pure CSS gradient effect is animated, colorful, and cool.

Blinking Holiday Lights

This walkthrough shows you how to create a pure CSS blinking holiday light effect that approximates a strand of outdoor lights.

Animated Typing Text Effect

This walkthrough demonstrates how to create an effect that makes it look like the text is being typed out on the screen.

Zig Zag Background

Check out this walkthrough that demonstrates how to make a pure CSS zig-zag background to add to any of your projects.

Stylish Typography Effect

Check out this tutorial to learn how to add some stylish, modern typography effects to your next projects.

Stylish Search Form

Use the code in this tutorial to create a smooth, stylish search input field to add to your projects!

Realistic Text Highlighting

This walkthrough will teach you how to easily add some realistic highlighter effects to your text.

Pure CSS Pumpkin

This walkthrough demonstrates how to make a jack o' lantern using CSS -- perfect to add to your projects to give them a nice fall feel.

Cool Text Effect With Animated Text Shadow

Looking for a new cool text effect to use in your projects? Check out this tutorial for some inspiration.

Animated Text Image Fill

This tutorial demonstrates how to fill your text with animated images.

Dropdown Nav

This dropdown nav is pure CSS and fully responsive.

Download Progress Bar

Learn how to create a progress bar using HTML, JS, and CSS!

Pure CSS Ribbon Banner

Create a banner that looks like a ribbon using only CSS!

Striped Text Effect

Learn how to create a striped "candy cane" text effect just in time for the holidays.

Shine Hover Effect

This walkthrough demonstrates how to create a shine effect that will glide over your HTML element when they're hovered upon.

Text with Animated Fill

This walkthrough demonstrates how to easily create text that has an animated fill without having to use jQuery or JavaScript.

HTML and CSS Ice Cream Cone

Create a pretty pink ice cream cone using pure HTMl and CSS.

Interactive Three Line Menu Icon

This is the description for the walkthrough.

Write loads of comments. Explain logic correctly. Excellent walkthroughs will be showcased on TheCodePlayer.

Animated Image Caption Hover Effect

Include captions with your images and watch as the text animates and transforms when the images are hovered upon. Pure CSS.

3D Push Button

By manipulating box shadows, this button appears to move when you "push" (click) it.

Alternating Blockquotes

This walkthrough demonstrates a nice way to style your blockquotes.

CSS Animated Folder Icon

This walkthrough demonstrates how to create a folder icon that animates when you hover over it. The code is pure CSS and doesn't use any jQuery or JS.

Responsive Pinterest-Inspired Layout

Create a responsive layout for images and text that looks just like the familiar Pinterest layout. This walkthrough utilizes CSS3's column-count property to create columns out of the contents of a div. Responsive styling allows for the number of columns to change based on the size of a browser window.

Basic Navigation Menu with Dropdown

This walkthrough demonstrates a simple way to create a basic navigation menu with a smooth dropdown effect in pure CSS.

Smooth Hover Effect to Reveal Navigation Menu

This walkthrough demonstrates how to use CSS animations to create an effect where the page appears to change in scale to reveal a minimalist navigation menu. Hover anywhere on the page to see the smooth transition in action.

Responsive Columns with Hover Effects

This beginner walkthrough features flex columns that use CSS transition effects to increase in scale when hovered upon.

Giving Your Title an Animated Background

This quick walkthrough demonstrates how to use CSS animations to spice up any title by giving it a minimalist, moving background.

Create a Leaky Coffee Mug with CSS

Create a good looking cup of coffee (with animated ripples!) using a single HTML div and some CSS box-shadows. This walkthrough is a working example of some of the different ways box shadows can be used and manipulated to create shapes and figures.

Wireframing with HTML and CSS

This walkthrough shows the creation of a small wireframing framework which targets elements using attribute selectors and draws sketchy lines on one or more sides using the border-image property.

The border-image property uses a translucent cloud image which is possible to create in most graphic editing programs

If we decide to skip graphic editing programs and directly code wireframes, it opens up new possibilities for exploration such as:

Adding responsive capabilities right from the wireframing stage.
Creating wireframes which don't have to be coded again as the HTML and a lot of the CSS regarding the layout is already done.
Ability to experiment with CSS3 animations/transitions and user interaction right from the beginning.
Massive reusability potential from creating a repository of repeatedly used elements, styles, effects, etc.
JS integration from the wireframing stage. Imagine wireframing a parallax website in Photoshop. It just won't work that good.
Wireframing in the browser(Just like designing in the browser).

With the web making a big leap towards transitional interfaces, use of CSS3 animations, aniamted SVG, detailed user interaction, etc code driven wireframes could be of great help.