Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/Metroxe/one-html-page-challenge

Can you create something cool without modern tools?
https://github.com/Metroxe/one-html-page-challenge

canvas challenge chrome coding-challenge css es6 game github-pages html html-css html5 html5-canvas html5-game javascript javascript-challenges oldschool open-source retro webdesign webdevelopment

Last synced: 3 months ago
JSON representation

Can you create something cool without modern tools?

Lists

README 

        
[![One HTML Page Challenge](./meta/one-html-page-logo.png?raw=true "One HTML Page Challenge")](https://onehtmlpagechallenge.com/)



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](https://onehtmlpagechallenge.com)



## 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](https://jscompress.com/)).

 

## 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

 - [**Boing Boing** - The "One HTML Page Challenge", a great example of view-source culture](https://boingboing.net/2019/08/23/the-one-html-page-challenge.html)

 - [**Medium** - How Having No-Internet Lead Me to Building a Worldwide Viral Website.](https://medium.com/@metroxe/one-html-page-challenge-d0e6e6d23e16)

 - [**10BestDesign** - Coders Try a Single-page HTML Coding Challenge to Boost Skills](https://www.10bestdesign.com/blog/coders-try-a-single-page-html-coding-challenge-to-boost-skills/)

 - [**University of Maryland** - INST377 Resource](https://ischool.umd.edu/sites/default/files/syllabi/inst377_-_dynamic_web_applications_-_syllabus_-_fall_2019.pdf)

 - [**What's Going On?** -  Ep #5 (Worst Traffic Bottleneck In North America, IOS vs Android, What's 5g?)](https://www.stitcher.com/show/gronzo/episode/whats-going-on-ep-5-worst-traffic-bottleneck-in-north-america-ios-vs-android-whats-5g-63569131)

 - [**JPEGZILLA** - findings](https://jpegzilla.com/blog/posts/20190724.html)

 - [**chenhuijing.com** - Recreating the Fool's Mate chess move with CSS Grid](https://chenhuijing.com/blog/recreating-the-fools-mate-chess-move-with-css-grid/#%F0%9F%92%BB)

 - [**Advent One** - ansible-challenge](https://github.com/AdventOne/ansible-challenge)

 - [**Hello Github** - Volume 70](https://hellogithub.com/periodical/volume/70/)

 - [**Dev Awesome** - Issue #14](https://devawesome.io/archive/14)

 - [**Tympanus** - Collective #531](https://tympanus.net/codrops/collective/collective-531/)

 - [**Phoenix Code Editor** - Default Project for HTML Games](https://phcode.dev/)

 - [**Community Classroom** - Frontend Development Course](https://www.commclassroom.org/frontend-roadmap)

 - [**aiyoubucuo.com** - July 3rd 2022 Post](https://aiyoubucuo.com/202207.html)

 - [**Anas Khan** - Open Source is overrated 🤔](https://anaskhan28.hashnode.dev/open-source-is-overrated)



_If you write a blog or post about the challenge, feel free to add to the list_

 

[![Stargazers over time](https://starchart.cc/Metroxe/one-html-page-challenge.svg)](https://starchart.cc/Metroxe/one-html-page-challenge)

 

 

 ## Useful Links

 - [Fun Times with CSS Pixel Art](https://css-tricks.com/fun-times-css-pixel-art/)

 - [Pixel Art to CSS](https://www.pixelartcss.com/)

 - [How to make a simple HTML5 Canvas Game](http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/)

 - [JSCompress: Compile Multiple JS Files Into a Single Script Tag](https://jscompress.com/)

 - [Cookie Clicker](https://orteil.dashnet.org/cookieclicker/)

 - [List of Javascript Game Frameworks](https://github.com/collections/javascript-game-engines)

 - [How to render images in HTML with base64 strings](https://stackoverflow.com/a/41057998)

 - [Convert images to base64](https://www.browserling.com/tools/image-to-base64)



## Contributors