Dev Practical

Html Project: Wikipedia page

partial screenshot of a html-only version of wikipedia page

Stats

Skill focus of the project

Some of the HTML skills that you will practice while working on this project are:

  1. Adding different types of text like headings, paragraphs, lists, links, and superscript to the webpage.
  2. Adding a table of content containing page jump links to content within the page.
  3. Adding a numbered list of reference, the source of all wikipedia’s information.

Main components of Wikipedia Webpage

You must include the following parts in your completed project:

  1. You must include a title or heading on the Wikipedia page.
  2. You should include a table of content that contains an unordered list of links to sections within the page.
  3. You included superscript number links that contains a link to the right number on the reference section.
  4. You should have an ordered list for the reference items containing links to the source of the information.

The final project should look like this: full page screenshot of a html-only version of wikipedia page

Bonus practice

  1. Create a HTML-only Youtube page clone
  2. Create a HTML-only Tribute Page
  3. Create a HTML-only Google Search Result page
  4. Create a HTML-only Signup form page

Where to publish your Html project

Codepen

Codepen is the easiest one to setup. You just need an account to begin with. Then create a new pen and copy paste your HTML code there.

Github

This one takes a bit more time to setup. However, you can use the Github.com web based editor to upload or copy paste your HTML.

Then you need to go to the repository setting to enable the projects to be viewed on (your-username).github.io/(repository-name).

If you are still stuck on what to do for your first HTML project, checkout my step by step illustrated guide on how to create your first HTML web page.