DEV Community

What are some of the coolest things you've made using just HTML or CSS?

Gracie Gregory (she/her) on June 18, 2020

The format of DEV's first official podcast, DevDiscuss, begins with an interview and ends with commentary from the community. For this week’s epis...

Read full post

Vaibhav Khulbe • Jun 18 '20

Also, I wrote a post on how you can make your own blog page using JUST CSS (classless CSS framework):

Style your next blog with vanilla HTML. No CSS. 😵

Vaibhav Khulbe ・ Jun 12 ・ 6 min read

#beginners #html #css #tutorial

Rajesh Royal • Jun 19 '20 • Edited

Do you know you copy pasted nature project from jonas schmedtmann.

udemy.com/user/jonasschmedtmann/

It's cheap 😂 way way 😅

Collins • Jun 20 '20

Huh?

Sébastien Beaury • Jun 19 '20

Love the travel website

Vaibhav Khulbe • Jun 19 '20

Thank you :)

/*Sharkie*/ • Jun 19 '20

That black hole is amazing!

Also I might know where that Travel website came from. 😉 Such a fun project!

Vaibhav Khulbe • Jun 19 '20

Thank you and yess! 😉

Aaron Ponce • Jun 19 '20

Love the UX and UI on the travel site

Vaibhav Khulbe • Jun 19 '20

Thank you! I like the fact that the popup close and open was all done with CSS :)

Suzanne Aitchison • Jun 18 '20

As part of the "100 Days Project Scotland" I've been doing a hundred day challenge to create some new art from only HTML and CSS each day. I'm over a third of the way through and I've learned so much and made some fun things!

The 100 Days Project is about celebrating art and creativity, and I really want to show that developers create art too!

The whole collection is here: Suzanne makes 100 things in CSS

My favourite one so far is actually my washing machine - is that weird 😂

Nick Taylor • Jun 18 '20

Love it!

Suzanne Aitchison • Jun 18 '20

Thank you!! It's been such a process so far - it feels so nice to be just writing html and CSS to flex that creative muscle 😁

Dima • Jun 25 '20

Oh my God! This is smth unbelievable for me.

Suzanne Aitchison • Jun 25 '20

Thank you! If I've learned anything though, it's that you can totally do this too if you like! Turns out most pictures are really just made up of squares and circles 😁

Alvaro Montoro • Jun 19 '20

There are many things that can be done just with HTML and CSS only. I built a series of games based on the idea of finite state machines. My favorite ones are:

I also wrote an article on DEV on how to draw Homer with HTML and CSS. But the list of Simpson's characters I've drawn in CSS is longer: Bart, Lisa, Sideshow Bob... and many more!

And then there are random things just for fun (everything really), like a set of clocks or a Duracell battery:

Mike Nickaloff • Jul 6 '20

those games are not only html and css... are they? no javascript?

Alvaro Montoro • Jul 6 '20 • Edited

Just HTML and CSS, no JavaScript at all.

For some of them I used SCSS to simplify the development process, but then compiled it to plain CSS.

Felippe Regazio • Jun 18 '20 • Edited

I made a CSS micro-framework

I was studying semantic HTML and architectures with pure css or scss trying to find a good approach or weakness when writing stylesheets for big projects. If i cant or dont want to use CSS in JS, or if my main style must be global (or is a legacy project)

Whats the best way to serve the style and its partials to the application?
Talking about Global Identity: Should i style with attributes (classes) or import partials on components
How to serve a theme to a componentized application? Vars? Classes? Css Props? Imports?
Add themes with SASS vars or using CSS vars? This will harm performance?
Prefix or not to prefix? How deeply should i prefix?
An application base style must be applied with classes, no-classes, should i use style wrappers?

Etc etc...

I was testing that kind of stuff and styling html native elements a then BANG, ok it looks like a micro-framework. No JS, no classes, just [S]CSS, a wrapper div and the HTML :P

Its not something huge or super incredible, but i think it can be useful (and brought me a lot of learning).

felippe-regazio.github.io/plume-css/

Janet Mendez • Jun 19 '20

Last year I took part in #Codevember and used their prompts to try to make CSS art every day. I sadly didn't finish the challenge but my favorite creation was this Koi Fish. I was actually able to talk about it in a few interviews so that really helped during my job hunting

Ben Halpern • Jun 18 '20

I think it's pretty darn cool that the comment collapse functionality on DEV is just summary/detail elements.

Using summary/details as a menu

Marcus Herrmann ・ Feb 28 '19 ・ 4 min read

#a11y #vue #summarydetails #menu

Kudos to @link2twenty for suggesting that approach way back!

We may circle back and give this more intuitive functionality and/or bells and whistles via JS at some point in the future but this plain HTML way has served us extremely well!

Nathan Kallman • Jun 18 '20

Funny that I started a With Only CSS series just a few weeks ago 😄. dev.to/kallmanation/building-a-too...

But I think I'm most proud of a linkable tab system I made. Replaced a large, tech-debt filled piece of JavaScript and added features 👌 (I guess I should add that to my series 😅)

Maxime • Jun 18 '20

Charmander 🔥

/*Sharkie*/ • Jun 19 '20

This super cool pixel dragon! Took ages, but I had so much fun doing it.

codepen.io/JustSharkieCodes/pen/oN...

Nick Taylor • Jun 19 '20

Debojyoti Ghosh • Jun 19 '20

Amusement Park. HTML & CSS only. No images.
debojyotighosh.com/xp/amusement-park/

Best viewed on desktop.

Alexandru Margineanu • Jun 20 '20

Quite nice

Debojyoti Ghosh • Jun 20 '20

Thank you. 😊

Himalaya singh • Jun 19 '20

Here is some of my work:

Thank you :)

LawranceMichaelite • Jun 21 '20

Dude.. Awesome!

Eliseo D'Annunzio • Apr 3 '22

I recently created a pure CSS/HTML functional calendar which can correctly display months from Jan 1800 to Dec 2999 with no JavaScript, all through the use of CSS variables and some clever comparison logic functions I created, also in CSS.

Feel free to check it out at: codepen.io/eliseodannunzio/details...

K • Jun 18 '20

I set pointer-events to none and JavaScript devs went crazy because their event listeners wouldn't work anymore.

The Coding Geek • Jun 19 '20

I have a couple CSS illustrations:

I also created a Markdown -> HTML converter however it mainly uses JS.

Abhijit Hota • Jun 20 '20

All the following pens are like 3-4 years old. These may/may not be cool but the title says "coolest things you've made"! 😁

ShayStibelman • Jun 19 '20

My whole homepage, stibelman.com is pure HTML and CSS. I have some JavaScript for cleanup and automation of a couple of things, but the rest is CSS.
It's kind of a hobby of mine to try to solve JavaScript solutions in CSS.