CSS Tips and Tricks

8 tutorials

All

Tailwind CSS

Build a Static Site with Figma & Astro

Django with HTMX

Node.js Tutorial for Beginners

JavaScript

Python 3 for Beginners

CSS Positioning Tutorial

Canva Tutorials

HTML Tutorial for Beginners

YouTube SEO Tutorial

PSD to Responsive Website

TypeScript Tutorial

Claude Code

Responsive Web Design

PSD to WordPress

GraphQL Crash Course

CSS Animation Tutorial

CSS Flexbox Tutorial

JavaScript ES6 Tutorial

Angular 2 Tutorial

SASS Tutorial

CSS Tips and Tricks

WebSockets (Socket.io) Tutorial

Asynchronous JavaScript

Grunt JS Tutorial

Styling HTML 5 Forms

Webpack Tutorial for Beginners

REST API Tutorial

Vue JS 2 Tutorial

Vuex Tutorial

JavaScript DOM Tutorial

CSS Grid Tutorial

OAuth Login (Passport.js) Tutorial

Django Tutorial

Object Oriented JavaScript Tutorial

#1 CSS-only Christmas Lights

Create a beautiful string of animated, glowing Christmas lights using only HTML and CSS — no JavaScript required.

#2 Animating Burger Nav Icon

Transform a hamburger menu icon into an X (close) icon using pure CSS transitions and the checkbox hack — no JavaScript needed.

#3 CSS-only Tooltip

Build elegant, accessible tooltips using only CSS pseudo-elements, the attr() function, and smooth transitions.

#4 CSS Only Dropdown Menu

Build a fully functional, multi-level dropdown navigation menu using only CSS — hover-triggered with smooth transitions.

#5 CSS-Only Popup

Build a modal popup dialog with overlay using only CSS — triggered by the checkbox hack with smooth scale and fade transitions.

#6 Star Wars Scrolling Text

Recreate the iconic Star Wars opening crawl using CSS 3D perspective transforms and keyframe animations.

#7 CSS Christmas Present

Build an animated CSS Christmas present that opens its lid on hover and closes when the mouse leaves — using transforms and transitions.

#8 Christmas Card Animation

Create a CSS-only Christmas card that opens and closes with a 3D fold animation — using perspective, rotateY, and backface-visibility.