DEV Community

Christopher Powroznik
Christopher Powroznik

Posted on

1 1

One HTML Page Challenge

One HTML Page Challenge

The goal is to create anything you want within 1 single html file. Practice your skills with no assistance from libraries, no separation of files, and no assistance of a modern framework. How creative can you be with such restrictions?

View Submissions

Rules

  • You must write all of your code in 1 single HTML file.
  • Your file must be less than 1mb (measured by the file size on github).
  • You cannot import any external files (this will be checked by looking at the network tab in chrome).
  • You are allowed to use libraries, however the library must be hard coded into a script tag and still must fit under the 1MB file size. (I suggest using a cdn and replacing with hardcoding the minified library at the end, or use JSCompress).

How to Submit

  1. Fork the repository.
  2. Add your html file to the /entries directory.
  3. Edit the entries.js file in the root, with your information for the entry.
  4. Commit to your forked repo.
  5. Make a pull request to master from your forked repo.

* You may submit as many entries as you'd like.

## Publicity

## Useful Links

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (1)

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’ β€’ Edited

Let's see, you have body and html and head without even writing a single line, all of which are stylable, the before and after, so that's 3 elements and 6 psuedo available without much code.. So that's a few precious bytes... Well that's my contribution to the challengers haha.

I would avoid any encoding base64, it's going to add bloat, encode !== compression.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay