Basically, we created this website for anyone who wants to learn HTML. This website is free-to-use and is maintained by the open-source community.
There is no subscription required to use the website. And there are no ads on the website.
We respect your privacy, so we do not track and do not sell any of your personal data.
We only store one cookie, which saves your preference of dark or light theme.
This section discusses how to contribute to the learning content of this project, whether that is adding new content which addresses a new topic, or updating existing content that is already on the website.
This section descibes how to add a new tutorial to the website.
- Create a sub-folder within the
html
folder. - Name this sub-folder using the format
html_topic
.- For example, the HTML Introduction topic folder is named
html_intro
.
- For example, the HTML Introduction topic folder is named
- Create an
index.html
file inside of the sub-folder you just created. - Open the
copy.html
file in the repository's main directory. - Copy the HTML contents of the
copy.html
file into your newly-createdhtml_topic/index.html
file.copy.html
contains the basic structure that topic webpages follow in this project. It includes the HTML code for the metadata, header, footer and navigation buttons.- Edit the
<main>
element to add your tutorial content to the webpage. - Note that there are two
<div class="navigation-link">
elements within<main>
. These two<div>
elements contain the navigation buttons.
Adding a video to the topic page
If you would like to add a video to the topic's webpage, see the code below:
<div class="video__plyr">
<video id="player" playsinline controls crossorigin data-poster="/path/to/poster.jpg">
<source src="./cdn/video/Codes - 360.mp4" type="video/mp4" size="360" />
<source src="./cdn/video/Codes - 540.mp4" type="video/mp4" size="576" />
<source src="./cdn/video/Codes - 720.mp4" type="video/mp4" size="720" />
<source src="./cdn/video/codes - 1080.mp4" type="video/mp4" size="1080" />
</video>
</div>
To embed a video on the page:
- Add a
<div>
to theindex.html
file for your topic. Ensure that the<div>
's structure is similar to the one above. - Inside the
<div>
, add one<source>
element for each resolution/quality you will have for the video.- In the example above, the video is available in four resolutions so there are four
<source>
elements.
- In the example above, the video is available in four resolutions so there are four
- Set the
src
attribute of the<source>
element to a string containing the filepath/URL to the video.- In the example above, the video files are located in
./cdn/video/
, wherecdn
exists in the same directory as the topic'sindex.html
file.
- In the example above, the video files are located in
For more information on the HTML structure of topic webpages, please look into the copy.html
file.