DEV Community

loading...

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

graciegregory profile image Gracie Gregory (she/her) ・1 min read

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

For this week’s episode, we want to know...

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

If you'd like a chance to be featured in the episode, please send us a voice memo or leave a comment below by Wednesday, June 24th.

Details on how to participate:

  • Call our Google Voice at +1 (929)500-1513 and leave a message 📞
  • Send a voice memo to pod@dev.to 🎙

OR, if you don't want your voice recorded...just leave a comment here and we'll read your response aloud for you 🗣

Our most recent episode:

play pause DevDiscuss

Discussion

pic
Editor guide
Collapse
vaibhavkhulbe profile image
Collapse
rajeshroyal profile image
Rajesh Royal

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

udemy.com/user/jonasschmedtmann/

It's cheap 😂 way way 😅

Collapse
awalaja profile image
Collapse
amponce profile image
Aaron Ponce

Love the UX and UI on the travel site

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

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

Collapse
sbeaury profile image
Sébastien Beaury

Love the travel website

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Thank you :)

Collapse
justsharkie profile image
/*Sharkie*/

That black hole is amazing!

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

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Thank you and yess! 😉

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her)

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 😂

Collapse
mitya profile image
Dima

Oh my God! This is smth unbelievable for me.

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her)

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 😁

Collapse
nickytonline profile image
Collapse
s_aitchison profile image
Suzanne Aitchison (she/her)

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 😁

Collapse
alvaromontoro profile image
Alvaro Montoro

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:

Collapse
mikenickaloff profile image
Mike Nickaloff

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

Collapse
alvaromontoro profile image
Alvaro Montoro

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.

Collapse
felipperegazio profile image
Felippe Regazio

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/

Collapse
janetmndz profile image
Janet Mendez

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

Collapse
ben profile image
Ben Halpern

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

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!

Collapse
kallmanation profile image
Nathan Kallman

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 😅)

Collapse
justsharkie profile image
/*Sharkie*/

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

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

Collapse
nickytonline profile image
Collapse
maxime_daraize profile image
Maxime

Charmander 🔥

Collapse
gdebojyoti profile image
Debojyoti Ghosh

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

Best viewed on desktop.

Collapse
alexmargineanu profile image
Collapse
gdebojyoti profile image
Debojyoti Ghosh

Thank you. 😊

Collapse
kayis profile image
K

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

Collapse
geek_coding profile image
The Coding Geek

I have a couple CSS illustrations:

  1. NES controller
  2. Death-Star illustration

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

Collapse
Collapse
lawrancemichaelite profile image
LawranceMichaelite

Dude.. Awesome!

Collapse
kretaceous profile image
Abhijit Hota

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"! 😁

  1. A Rainbow Loader
  2. Reflection effect
  3. A hole (parallax?)
  4. A Dribbble clone that I'm proud of
s_aitchison profile image
Collapse
Collapse
shaystibelman profile image
ShayStibelman

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.

Collapse
thefierycoder profile image
Rishi Purwar

These projects are made using only html and css(little js to add functionality)

  1. URL Shortener (urlshortly.netlify.app/) 2.socialmediaboard.netlify.app/ 3.pricing-component-toggle.netlify.app/
  2. huddlepage.netlify.app/
Collapse
alexmargineanu profile image
Alexandru Margineanu

"Broken mirror"-ish effect. Js used just to grab the camera... does it count?
alexmargineanu.github.io/css-broke...

Collapse
kingkool68 profile image
Collapse
crimsonmed profile image
Médéric Burlet

A relaxing fire animation to promote International Domain Name:
dev.to/crimsonmed/dynamizing-your-...
火.dev

Collapse
varunbhalla19 profile image
varunbhalla19

1) A beautiful Hamburger Menu Micro-interaction
codepen.io/varunbhalla19/pen/mdevBQB

2) A Login/Signup Page Animation
codepen.io/varunbhalla19/pen/PoPydjj

Collapse
schepp profile image
Christian Schaefer

I still like my JavaScript-less, auto-forwarding carousel: schepp.dev/posts/css-only-carousel/

Collapse
alexmargineanu profile image
Alexandru Margineanu

How come it hoocks back button to prev slide? :)

Collapse
mikenickaloff profile image
Mike Nickaloff

nothing. html and css alone are almost useless without javascript

Collapse
michaelandreuzza profile image
michael-andreuzza

Actually, templates.

I am working on this side project. I just used HTML and CSS ( framework )
not a big deal, but is something.

Collapse
anatolelucet profile image
Collapse
annabanana3110 profile image
Anna-banana3110
  1. My version of Instagram -
  2. E-commerce templates (inspired by Glossier.com) -
  3. CSS animation (inspired by atom.io) -
  4. Photo filter - codepen.io/Fibonaccifreak/pen/OJLeGNV
  5. CSS parallax - codepen.io/Fibonaccifreak/pen/jowpRP