Giter VIP home page Giter VIP logo

one-html-page-challenge's Introduction

One HTML Page Challenge

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?

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

  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

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

Stargazers over time

Useful Links

Contributors

one-html-page-challenge's People

Contributors

abhay557 avatar alfen-yu avatar girolamodaschio avatar hemantwasthere avatar jutsk avatar kmaba avatar kuljeet-123 avatar kundanhere avatar lailahgrant avatar maz12211 avatar mechamech avatar metroxe avatar mini-ware avatar mrwm avatar ncerutti avatar ololx avatar pclaisse avatar rahilcode avatar ryukemeister avatar satyasonu avatar sethkabir avatar shawnoden avatar snehal311998 avatar soumojit-chakraborty avatar spencergray96 avatar sumandeep-kaur avatar tejash023 avatar tyhil avatar udhavsharma2004 avatar zghnachvi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

one-html-page-challenge's Issues

Adding a build step

What's your thoughts on adding a build step to this project so that links and stuff can be added to the html instead of doing it with javascript in the browser?

clock.html

.time {
top: 60%;
}
change

.time {
margin-top: 10%;
}

Make Video Tutorial on How To Submit

I've come to the realization that this challenge is many people's first step into contributing to an open source repository and for a first timer, it's not always easy figuring out how to fork and make a merge request. I want to make a video that shows this process and also goes over the rules. Hopefully this can help a lot of people that seem to struggle with the Git ecosystem and trying to make their first pull request.

I'll likely make this video myself, but adding an issue for transparency.

Making the index page adhere to the "challenge" itself

I guess the files for the icons has to be external but would be cool to get rid of Bootstrap in favor of only css.

If the links to the entries would be built somehow then the entries.js would not have to be used either.

⭐Feature Report : Add [target = "_blank"] to all buttons in "index.html"

Description

The feature being proposed is the following :

  • Add target="_blank" to all buttons in "index.html"
  • On click, the links open on separate tabs
  • Helps user to have multiple tabs open along with the "home" page , i.e , "index.html" page .
  • In some entries on clicking "Back" button of browser, might not directly take back to the "home" page , i.e , "index.html" page

Implementation

  • I would be interested in implementing this feature

Shall I start working on this issue ?

Remove Sponsor

I thought it was cool when Github released Sponsors and thought I would put it in, but in retrospect it feels tacky and I'm not really looking to make money off the project. So I'd rather just remove it to keep things a bit cleaner.

This involves...

  • removing the Sponsor tag on Github in the repository settings (@Metroxe must do this last as to not create broken links)
  • removing the sponsor entry in the entries.js
  • remove references to it on the index.html
  • remove the .github directory

Two questions

Two questions:
1: Can I turn another person's webpage into a single file (html) and submit it?
2: Can I upload web pages in other languages?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.