Press "Enter" to skip to content

You can do that with one line of HTML?!



You guys are amazing! Here are the results of the #hamburger challenge.

homunculus1984 – https://codepen.io/Homunculus84/pen/gOOqmvY
Tim Rinkel – https://codepen.io/t_rinkel/pen/XWWoKWX
Riza Khan – https://codepen.io/riza-khan/pen/mddaVbY
Vipin Mishra – https://codepen.io/vipinmishra/pen/RwwqyVN
Vlassis – https://codepen.io/vskand/pen/ExxGaBJ
Jason Levine
– https://codepen.io/jasonclevine/pen/rNNqPMB
– https://codepen.io/jasonclevine/pen/PooyVeB
Martin Langenberg
– https://codepen.io/JustMeGraham/pen/jOOeXJp
– https://codepen.io/JustMeGraham/pen/yLLQzEd
– https://codepen.io/JustMeGraham/pen/gOOQRyY
Jannis Göing – https://codepen.io/Jannis3005/pen/VwwEgb
Bobby Bosler – https://codepen.io/bobbybosler/pen/LYYgqwO?editors=0100
Remko Spaans – https://codepen.io/Remkoe/pen/KKKGYdX
Katie Harshman
– https://codepen.io/pie9/pen/ZEEqmdv
– https://codepen.io/pie9/pen/NWWOmMw
– https://codepen.io/pie9/pen/GRRPNgN?editors=0110
David Betz – https://codepen.io/RDBetz/pen/xxxyyzg
Koosemose – https://codepen.io/koosemose/pen/gOOBVBm
Soumya Dey – https://codepen.io/soumyadey200/pen/pooQeQK
Kalle Elmdahl – https://codepen.io/Coldey/pen/gOOQPgr
Саша Плешаков – https://codepen.io/SashaPl/pen/vYYQGzp?editors=0100
Steve Hall – https://codepen.io/steebn/pen/abbQqMm
Steve Raymond – https://codepen.io/sraymond44/pen/QWWJBpW
Chakib – https://codepen.io/chakeeb/pen/BaaGXmL
Mohammed – https://codepen.io/frerosami7/pen/wvvRooP?editors=0010
Łukasz – https://codepen.io/lukesw/pen/MWWLjRQ
Simone – https://codepen.io/Homunculus84/pen/gOOqmvY
James Smith – https://codepen.io/james-r-smith/pen/JjjxVZB

Kyle Shook @elyktrix (bonus)
– https://codepen.io/kyleshook/pen/eYYxYRp
– https://codepen.io/kyleshook/pen/XWWoPXz
Amit Sh – https://codepen.io/amitsheen/pen/VwZNWWR

The Community – https://discord.gg/nTYCvrK
Come and join us over in the community by clicking the above link! It’s a Discord server where you can hang out with and talk to other people who’re interested in learning front-end stuff, including me 🙂

I’m on some other places on the internet too!

If you’d like a behind the scenes and previews of what’s coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powellom/KevinJPowell

29
Leave a Reply

avatar
29 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Chad TowerParadigmshift22Abdelkadre El MaghritoluschrCrous Dioll Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
M E L A N C H O L Y
Guest
M E L A N C H O L Y

can you do a scroll snap tutorial plz , I think its the time for it and it's very useful

33KK
Guest
33KK

Technically it's still one line of you minify HTML

Nevci Academy
Guest
Nevci Academy

I love that game

Luke Barren
Guest
Luke Barren

Hey Kevin, 10/10 vids:).. Just subbed. I have been learning html/css for two weeks & am at the point of creating my very first carousel. I would like a fade in & out slider changing every 5 seconds with next/prev chevron buttons & slider selection buttons. The nearest i have got is using js & cycle2. There seems to be many different ways to achieve creating a carousel but it's blowing my mind at the moment. bootsrap for some reason seems like cheating, then there is js/jquery & pure css & other methods. I would LOVE & APPRECIATE a small… Read more »

Mohammad Sadeq Asghari
Guest
Mohammad Sadeq Asghari

I have just one word for you Kevin : amazing! thank you

Саша Плешаков
Guest
Саша Плешаков

Nice challenge 👍
I was waiting how Kevin will spell my name written in cyrillic)

Jahir Khan
Guest
Jahir Khan

31 codepen.io tabs you opened!!!

Koosemose
Guest
Koosemose

Hahah I was waiting for the "Koosemoose" it's the most common mispronunciation of my username. ( "mose" is pronounced with a long O, like "mole" but with an S For as much as I prefer simple visuals, the actual hamburger ones were amazing, and they certainly would stand out on a site where they were appropriate. And I've also got to say thank you, Kevin, as of a month or two ago when I started watching your videos, the last I had updated my css knowledge, using "clear" was the new hotness for making columns, and now I've already done… Read more »

CINTRON
Guest
CINTRON

Dang, Katie Harshman killed it with that cheeseburger and fries one. That has to be my favorite entry. Sure McDonald's is like the only place that could actually use it but still, well done. 👏

CINTRON
Guest
CINTRON

For those of us who do remember flash we're all like, "Thank God it's gone".

MD Riaz
Guest
MD Riaz

It is a lot of work to save all of them by going from the link,,, somebody please make a Codepen collection from all the pens in the video description

Jens Törnell
Guest
Jens Törnell

I have another approach in my Tiny Drawer library – https://github.com/jenstornell/tinyDrawer.js I simply put the X on the backdrop so the X is not really a button, but still help the user. What I could do in the future is to animate something cool with the X as well.

A Z
Guest
A Z

One line = 45 min video ))

Vipin Mishra
Guest
Vipin Mishra

Yeah.. was waiting for these creations. Awesome stuff!!

Thanks for featuring mine as well.. Would love to do these fun stuff in future!

James Smith
Guest
James Smith

Ahh, mine was not hamburger to flat hamburger. Rather, hamburger to hotdog. 😅 This was fun! Thanks for setting this up, Kevin! ☺️👍 Your content is always so great to watch. 👏👏

Katie Harshman
Guest
Katie Harshman

It's so fun seeing all the ideas everyone came up with! Great job, everyone! I would love to see more challenge videos like this. It inspired me to try things I wouldn't have thought of otherwise, learn new techniques, and practice skills I'm learning. Keep up the awesome videos Kevin!

DiNOo Gaming
Guest
DiNOo Gaming

this is cool but the thing is we don't see like these in real website why is that ?

ChroniZz
Guest
ChroniZz

Awesome! Great work guys!

Truth Humanity
Guest
Truth Humanity

"You can do that with one line of HTML?" – where?

Paul Silver
Guest
Paul Silver

I know it’s late in the day , but I’ve just seen this video. Can you please let me know what you think of the hamburger/nav at https://Paul.gd

frerosami7
Guest
frerosami7

Awesome Thank you very much

TheWebStylist
Guest
TheWebStylist

SO many awesome menu styles! I’ll see if I can get a few to work on some demos of mine (I’m not very good w coding though very much a visual and web designer) 🙌🏻⚡️💪🏻💥👏🏻

Shivank Sharma
Guest
Shivank Sharma

Thank you Kevin

The Cake Glutton
Guest
The Cake Glutton

Was trying to watch this on my TV and had to give up, not sure what’s the video aspect ratio but there’s no way to make it fit, there’s always cropping at the edges.

Crous Dioll
Guest
Crous Dioll

this is awesome, thank you Kevin

toluschr
Guest
toluschr

Don't look at how many tabs he has open.

Abdelkadre El Maghri
Guest
Abdelkadre El Maghri

First like

Paradigmshift22
Guest
Paradigmshift22

Your clickbait game gettin strong 💪

Chad Tower
Guest
Chad Tower

first