├── .github
└── pull_request_template.md
├── .gitignore
├── CNAME
├── README.md
├── entries.js
├── entries
├── A-tribute-page.html
├── BabyWantsMilk.html
├── Base64toTXT.html
├── Calculator.html
├── Interval.html
├── PiXELCONVERTOR.html
├── RandomColourGenerator.html
├── Sattyam.html
├── Sidhumoosewala-tribute-page.html
├── Snakegame.html
├── Technical-Doc.html
├── Tips-Calculator.html
├── UdhavSudoku.html
├── adjustable-fireworks.html
├── aim-click-challenge.html
├── ant_colony.html
├── ascii-cam.html
├── avoid-the-bikes.html
├── backgroundlight.html
├── birthday-cake.html
├── bits-rain.html
├── blockoverit.html
├── blur-loading-page.html
├── bronchalia.htm
├── building.html
├── button-hover.html
├── calculate_hours_worked.html
├── clock.html
├── color-change-on-hover-objects.html
├── color-grid.html
├── color-quiz.html
├── colorclock.html
├── contact_list.html
├── corona-party.html
├── css-calc.html
├── cupWaterWave.html
├── dancing_man.html
├── date_me_form.html
├── draw-rgb.html
├── fall_game.html
├── fireworks.html
├── fishies.html
├── fools-mate.html
├── fortune-cookie-generator.html
├── game_of_life.html
├── guess_my_number.html
├── hangman.html
├── hilbert-curve.html
├── ip.html
├── just_html.html
├── knfl.html
├── ladner_british_columbia.html
├── magicWand.html
├── mandelbrot.html
├── marching-squares.html
├── meat-on-the-move.html
├── memory-game.html
├── mini_car_game.html
├── movie-list.html
├── my-screen-resolution.html
├── openai-generated-entry.html
├── organs-for-debt.html
├── out_on_a_limb.html
├── ping-pong.html
├── pink-vs-unknowns.html
├── platform.html
├── pure-css-still-life-water-lemon.html
├── quasimono.html
├── randomPassword.html
├── ring-loader.html
├── ripples.html
├── signup_page.html
├── simon-game.html
├── simple-counter.html
├── stopWatch.html
├── strange_insults.html
├── taskListApp.html
├── tic-tac-toe.html
├── tiles.html
├── todo_list.html
├── wargames.html
├── watermelon-pixel.html
├── webmine.html
└── whack-a-mole.html
├── index.html
└── meta
├── android-icon-144x144.png
├── android-icon-192x192.png
├── android-icon-36x36.png
├── android-icon-48x48.png
├── android-icon-72x72.png
├── android-icon-96x96.png
├── apple-icon-114x114.png
├── apple-icon-120x120.png
├── apple-icon-144x144.png
├── apple-icon-152x152.png
├── apple-icon-180x180.png
├── apple-icon-57x57.png
├── apple-icon-60x60.png
├── apple-icon-72x72.png
├── apple-icon-76x76.png
├── apple-icon-precomposed.png
├── apple-icon.png
├── browserconfig.config
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-96x96.png
├── favicon.ico
├── ms-icon-144x144.png
├── ms-icon-150x150.png
├── ms-icon-310x150.png
├── ms-icon-310x310.png
├── ms-icon-70x70.png
├── one-html-page-icon.png
├── one-html-page-logo.png
├── promotion-image.png
├── safari-pinned-tab.svg
└── site.webmanifest
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
1 | **Please confirm that your submission follows all the [rules](https://github.com/Metroxe/one-html-page-challenge/blob/master/README.md#rules)...**
2 | - [ ] You wrote all of your code in 1 single HTML file.
3 | - [ ] Your file is less than 1mb.
4 | - [ ] You didn't import any external files (e.g. images, stylesheets or js files).
5 | - [ ] There are no incoming or outgoing network requests.
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .vscode
3 | .DS_Store
4 |
--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | onehtmlpagechallenge.com
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://onehtmlpagechallenge.com/)
2 |
3 | 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?**
4 |
5 | ### [View Submissions](https://onehtmlpagechallenge.com)
6 |
7 | ## Rules
8 | - You must write all of your code in 1 single HTML file.
9 | - Your file must be less than 1mb (measured by the file size on github).
10 | - You cannot import any external files (this means you cannot import images, stylesheets or js files from external sources).
11 | - Due to the nature of hiding lots of functionality behind APIs, you cannot have any incoming or outgoing network requests.
12 | - 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/)).
13 |
14 | ## How to Submit
15 | 1. Fork the repository.
16 | 2. Add your html file to the `/entries` directory.
17 | 3. Edit the `entries.js` file in the root, with your information for the entry.
18 | 4. Commit to your forked repo.
19 | 5. Make a pull request to master from your forked repo.
20 |
21 | _* You may submit as many entries as you'd like._
22 |
23 | ## Publicity
24 | - [**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)
25 | - [**Medium** - How Having No-Internet Lead Me to Building a Worldwide Viral Website.](https://medium.com/@metroxe/one-html-page-challenge-d0e6e6d23e16)
26 | - [**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/)
27 | - [**University of Maryland** - INST377 Resource](https://ischool.umd.edu/sites/default/files/syllabi/inst377_-_dynamic_web_applications_-_syllabus_-_fall_2019.pdf)
28 | - [**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)
29 | - [**JPEGZILLA** - findings](https://jpegzilla.com/blog/posts/20190724.html)
30 | - [**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)
31 | - [**Advent One** - ansible-challenge](https://github.com/AdventOne/ansible-challenge)
32 | - [**Hello Github** - Volume 70](https://hellogithub.com/periodical/volume/70/)
33 | - [**Dev Awesome** - Issue #14](https://devawesome.io/archive/14)
34 | - [**Tympanus** - Collective #531](https://tympanus.net/codrops/collective/collective-531/)
35 | - [**Phoenix Code Editor** - Default Project for HTML Games](https://phcode.dev/)
36 | - [**Community Classroom** - Frontend Development Course](https://www.commclassroom.org/frontend-roadmap)
37 | - [**aiyoubucuo.com** - July 3rd 2022 Post](https://aiyoubucuo.com/202207.html)
38 | - [**Anas Khan** - Open Source is overrated 🤔](https://anaskhan28.hashnode.dev/open-source-is-overrated)
39 |
40 | _If you write a blog or post about the challenge, feel free to add to the list_
41 |
42 | [](https://starchart.cc/Metroxe/one-html-page-challenge)
43 |
44 |
45 | ## Useful Links
46 | - [Fun Times with CSS Pixel Art](https://css-tricks.com/fun-times-css-pixel-art/)
47 | - [Pixel Art to CSS](https://www.pixelartcss.com/)
48 | - [How to make a simple HTML5 Canvas Game](http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/)
49 | - [JSCompress: Compile Multiple JS Files Into a Single Script Tag](https://jscompress.com/)
50 | - [Cookie Clicker](https://orteil.dashnet.org/cookieclicker/)
51 | - [List of Javascript Game Frameworks](https://github.com/collections/javascript-game-engines)
52 | - [How to render images in HTML with base64 strings](https://stackoverflow.com/a/41057998)
53 | - [Convert images to base64](https://www.browserling.com/tools/image-to-base64)
54 |
55 | ## Contributors
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/entries/A-tribute-page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
[RANDOM PARAGRAPH BTW DON'T TAKE THIS SERIOUSLY]
Someone I admire is my cousin Laura. She’s five years older than me, so she’s 19 now and she lives in Bristol. She’s very friendly and confident and she’s got long, wavy, brown hair and greeny-brown eyes. She’s medium height, slim and very fit because she’s a dancer.
38 |
39 | She’s been dancing since she was six years old and trains every day at her dance school. She wants to be a professional dancer, but it’s a very difficult profession because it’s so competitive. She often dances in shows and I’ve been to watch her several times. Her favourite type of dance is modern, which is sometimes a bit strange, but I love watching her dance.
40 |
41 | Laura is very busy because she also studies photography at university. She’s a really good photographer and has taken lots of amazing photos of me and my family. Her photos have won a few prizes and last year one of her photos was in an exhibition at an art gallery in London.
42 |
43 | Laura doesn’t have a lot of free time and she’s also trying to learn German because she wants to go to Germany next year to do a photography course. I think Laura is very hard-working and she deserves to become a professional dancer one day.
I wish you a good happy birdday Jakob!
46 | 47 | 48 | -------------------------------------------------------------------------------- /entries/Calculator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |