metroxe / one-html-page-challenge Goto Github PK

The goal is to create anything you want within 1 single html file. Practice your skills with the barebones of web development. How creative can you be with such restrictions?

• 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 means you cannot import images, stylesheets or js files from external sources).
• Due to the nature of hiding lots of functionality behind APIs, you cannot have any incoming or outgoing network requests.
• 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).

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.

• Boing Boing - The "One HTML Page Challenge", a great example of view-source culture
• Medium - How Having No-Internet Lead Me to Building a Worldwide Viral Website.
• 10BestDesign - Coders Try a Single-page HTML Coding Challenge to Boost Skills
• University of Maryland - INST377 Resource
• What's Going On? - Ep #5 (Worst Traffic Bottleneck In North America, IOS vs Android, What's 5g?)
• JPEGZILLA - findings
• chenhuijing.com - Recreating the Fool's Mate chess move with CSS Grid
• Advent One - ansible-challenge
• Hello Github - Volume 70
• Dev Awesome - Issue #14
• Tympanus - Collective #531
• Phoenix Code Editor - Default Project for HTML Games
• Community Classroom - Frontend Development Course
• aiyoubucuo.com - July 3rd 2022 Post
• Anas Khan - Open Source is overrated 🤔

If you write a blog or post about the challenge, feel free to add to the list

• Fun Times with CSS Pixel Art
• Pixel Art to CSS
• How to make a simple HTML5 Canvas Game
• JSCompress: Compile Multiple JS Files Into a Single Script Tag
• Cookie Clicker
• List of Javascript Game Frameworks
• How to render images in HTML with base64 strings
• Convert images to base64