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 will be checked by looking at the network tab in chrome).
- Due to the nature of hiding lots of funtionality behind APIs, you cannot have any incoming 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
/entriesdirectory. - Edit the
entries.jsfile 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
If you write a blog or post about the challenge, feel free to add to the list
Useful Links
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>cc</title> <link hre
-
前端学习: html css js(jQuery) php 小程序 框架: –UI框架 bootstrap 实现多终端(PC，手机，平板)页面适配 –前端框架 vue单页面应用 react node 1.没有创建项目的情况下，编辑器通过文件协议打开电脑里的某个文件 2.在创建了项目的情况下，编辑器是创建一个虚拟服务器来运行项目 127.0.0.1:8848 主机名:端口号 代码注释: 解释代码，不
-
一、<h1>~<h6>可以定义标题 <h1>定义最大的标题，<h6>定义最小的标题，由于h元素有确切语义，不要利用标题标签来改变一行中的字体大小，得使用层叠样式表。 二、<p>标签定义段落 p元素会自动在其前后创造一些空白。 三、<em>、<i> <em>和<i>之间的文字显示为斜体，<em>把文本定义为强调的内容。 四、<strong>、<b> <strong>和<b>之间的文字显示为粗体，<s
-
Vue.js基础(All In One HTML Page) 小胡子模板 v-html v-text v-bind 绑定class 绑定style 计算属性 methods与computed v-on 条件渲染 v-show v-for遍历数组 v-for遍历对象 v-model表单绑定 v-model:radio v-model:checkbox 单选 v-model:checkbox 多选 v
-
目录 HTML简介及语法规范 最基本标签及基本格式 常用标签 实体（转义字符） 1.HTML简介及语法规范 HTML代表超文本标记语言，用于创建网页的结构和内容。 HTML中不区分大小写，但是我们一般都是用小写。 HTML中的注释不能嵌套。 大多数 HTML 标签包含开始和结束标记，它们之间带有原始文本或其他 HTML 标记。 HTML 元素可以嵌套在其他元素中，但是不能交叉嵌套。封闭元素是封闭父
-
有的时候，我们需要使用<a>这个超级链接，而又不使用href来完成跳转，而是如：<a href="#" onClick="fun()"></a>这种方式。这样，就不会让页面跳转。但是同时也会带来一些负面的问题，比如页面的title变成了“#”，或者页面出现了滚动条什么的。这是因为在执行完了onClick事件后，<a>又去跳转href所指向的地址了，而”#“是个锚点，默认是网页的页首，所以会带来上边
-
@@[TOC]|(JAVAWEB1) ##html：超文本标记语言 ###1，作用：它决定页面上显示什么内容 ###2，举例 ```javascri在这里插入代码片pt <html> <head> <title>这是我的第一个网页</title> <meta charset="UTF-8"> </head> <body>
-
XMP 元素 | xmp 对象 -------------------------------------------------------------------------------- 以固定宽度字体渲染作为示例的字体。 成员表 下面的表格列出了 xmp 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。 标签属性/属性 标签属性 属性 描述 ACCESSKEY accessKe
-
<html> <head> <Meta http-equiv=Content-Type Content="text/html;charset=gb2312"><!--设置字符集--> <Meta http-equiv=Content-Lauguage Content=zh-CN><!--设置语言--> <!--<Meta http-equiv=Refresh Content=
-
这是一个HTML文件引入一个名为"pc.css"的CSS文件的示例。在HTML文件中，您需要使用>元素来引用CSS文件，如下所示： <head> <link rel="stylesheet" type="text/css" href="css/login-page/pc.css"> </head> 在这个例子中，>元素的rel属性被设置为"stylesheet"，表示这是一个样式表文件。ty
-
基本构建 HTML: <!--网格系统--> <div class="container"> <!--超大屏幕--> <div class="jumbotron"> <!--定义行--> <div class="row"> <!--一行12列, 全布局, 这里选择xs(小型设备平板电脑≥768px)--> <div class="col-xs-12
-
<!DOCTYPE html> <html lang='en'> <head> <title>The First Web Page</title> </head> <body> <p> In the begining, Tim created the HyperText Markup Language. The Internet was without form
-
One-Page-Nav 是一款 jQuery 导航插件。 电商网站的分类比较明确，比如1楼是手机通讯产品，2楼是家用电器，3楼是服装鞋包等等，旁边还会有一个固定的楼层导航，这个导航列出了所有的楼层，同时还会高亮你正在浏览的楼层，点击其他楼层按钮，又会滚动到其他楼层。这样的导航可以增加用户体验，让购物更加方便快捷。如果你想在自己的页面上也实现这样的效果，那么可以试试 jQuery-One-Page
-
onepage-scroll 是一款 jQuery 单页滚动插件，它能够轻松的制作类似 iPhone 5s 的页面，它具有以下功能、特点 （不）显示右侧圆点项目导航 （不）显示命名锚记 循环/禁止循环 回退（使用浏览器自带滚动）/指定回退 支持键盘控制，左右上下/ Page Up / Page Donw / Home / End 等 水平/横向滚动 回调函数 查看演示
-
one-to-one关联类似于many-to-one关联，不同之处在于该列将被设置为唯一。 例如，地址对象可以与单个员工对象相关联。 定义RDBMS表 (Define RDBMS Tables) 考虑一种情况，我们需要将员工记录存储在EMPLOYEE表中，该表具有以下结构 - create table EMPLOYEE ( id INT NOT NULL auto_increment,
-
在本章中，让我们研究如何在Drupal中创建Front Page 。 如果您的网站上有良好的内容并希望访问者首先看到该特定内容，那么该文章必须位于首页。 Drupal为此提供了解决方案。 以下是用于创建Drupal Front Page的简单步骤。 Step 1 - 单击Content ，如以下屏幕所示。 Step 2 - 屏幕上弹出文章和页面列表。 单击edit链接，如以下屏幕所示。 Step
-
One-Hot 编码，又称一位有效编码，其方法是使用N位状态寄存器来对N个状态进行编码，每个状态都由他独立的寄存器位，并且在任意时候，其中只有一位有效。 例如： 自然状态码为：000,001,010,011,100,101 独热编码为：000001,000010,000100,001000,010000,100000 可以这样理解，对于每一个特征，如果它有m个可能值，那么经过独热编码后，就变成了m