Hey there!

Utterly confused what this is and why it exists? We've all been there.

Click any adventure to explore various features in Chrome DevTools. Every demo provides instructions and learning material for you to get started.

This site is using Google Analytics for us to better understand how you interact with the provided demos, in accordance to our Privacy Policy.

Back to homepage
A red double-decker airplane standing in a hangar, with a hilly countryside landscape visible through the Hangar door
DevTools Hangar

This demo features a plane built solely with HTML and CSS. Fix the CSS bugs to make it fly again.

  1. Click on one of the three ⓧ next to the wheel, engine, and position lights to learn what's broken.
  2. Use the provided prompts from the hints with AI assistance to try fix the bugs, or fix them on your own.
  3. After all three bugs are fixed, replace the registration with your own name and click Take off!

developer.chrome.com

AI assistance

developer.chrome.com

5 cool things to do with AI assistance

D-CR131

Engine

The engine is not assembled correctly. All parts should align on the same axis.

  • Align all child elements on the same horizontal axis.
  • How can I center all engine parts on the same horizontal axis?

No time to try out AI assistance?

Wheels

With wheels like this it's going to be a bumpy landing. Smooth out the corners by adjusting the border-radius. Make sure to fix both wheels!

  • Please make all elements like this round for me.
  • How can I make this look like a wheel?

No time to try out AI assistance?

Position lights

Position lights are an important safety feature. But none of them are working right now. There is one on both wings and one on the rudder.

  • Please turn on all the position lights.
  • Why is the glow animation not working?

No time to try out AI assistance?

0
/
3
Parts
fixed

That's a wrap!

That's all there is to this demo. Want to check out another one?