one-html-page-challenge
Tools
HTML
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?
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 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).
How to Submit
- Fork the repository.
-
Add your html file to the
/entries
directory. -
Edit the
entries.js
file in the root, with your information for the entry. - Commit to your forked repo.
- Make a pull request to master from your forked repo.
- You may submit as many entries as you’d like.
Publicity
- 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
Useful Links
- 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