KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #developer-tools #codex #claude-code #cli #react #mcp #open-source #deepseek-harness #dsh-plugin #ai

30-days-of-html

★ 88 Open GitHub ↗

🚀 30 HTML challenges to level up your skills! Perfect for beginners! Each challenge includes a description, starter code, and helpful hints to guide you along the way! 💻🔥

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 30 Days of HTML🎖️💻

Welcome to "30 Days of HTML" a repository with HTML challenges for beginners!
<br><br>

![30-days-of-html](https://socialify.git.ci/codeskills-dev/30-days-of-html/image?font=Inter&forks=1&language=1&name=1&stargazers=1&theme=Auto)

## Overview

This repository contains 30 HTML challenges that are designed to help beginners improve their HTML skills. Each challenge comes with a description, some basic HTML code to get started, and any instructions or hints that the learner might need.

## How to Use

[![Download zip](https://custom-icon-badges.herokuapp.com/badge/-Download-blue?style=for-the-badge&logo=download&logoColor=white "Download zip")](https://github.com/codeskills-dev/30-days-of-html/archive/v1.0.0.zip)

To get started, simply download/clone this repository to your local machine and start working on the challenges. You can work through the challenges in order, or jump around to the ones that interest you the most.

Each challenge is contained in its own HTML file, and includes a corresponding solution file. Once you've completed a challenge, you can check your work by comparing your code to the solution file.

Don't forget to give this repo a star ⭐️

## List of Challenges

<ol>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/01%20-%20Basic%20HTML%20Page">
    Create a basic HTML page with a heading and a paragraph
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/02%20-%20Add%20an%20Image%20to%20your%20HTML%20Page">
    Add an image to your HTML page
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/03%20-%20Create%20a%20hyperlink%20to%20another%20website">
    Create a hyperlink to another website
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/04%20-%20Add%20a%20list%20of%20items%20to%20your%20HTML%20page">
  Add a list of items to your HTML page.
  </a>
  </li>

<li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/05%20-%20Add%20a%20table%20to%20your%20HTML%20page">
  Add a table to your HTML page
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/06%20-%20Create%20a%20HTML%20form">
  Create a form with input fields and a submit button
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/07%20-%20Add%20a%20video%20to%20your%20HTML%20Page">
  Add a video to your HTML page
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/08%20-%20Add%20an%20ordered%20list%20to%20your%20HTML%20Page">
  Add an ordered list to your HTML page
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/09%20-%20Add%20an%20unordered%20list%20to%20your%20HTML%20page">
  Add an unordered list to your HTML page
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/10%20-%20Add%20a%20definition%20list%20to%20your%20HTML%20Page">
  Add a definition list to your HTML page
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/11%20-%20Add%20an%20iframe%20to%20your%20HTML%20Page">
  Add an iframe to your HTML page
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/12%20-%20Use%20HTML5%20Sematic%20tags%20for%20page%20structure">
  Use HTML5 semantic tags to structure your page content
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/13%20-%20Add%20a%20quote%20to%20your%20HTML%20Page">
  Add a quote to your HTML page
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/14%20-%20Add%20a%20horizontal%20rule%20to%20your%20HTML%20Page">
  Add a horizontal rule to your HTML page
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/15%20-%20Add%20a%20line%20break%20to%20your%20HTML%20Page">
  Add a line break to your HTML page
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/16%20-%20Add%20a%20non-breaking%20space%20to%20your%20HTML%20Page">
  Add a non-breaking space to your HTML page
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/17%20-%20Create%20a%20basic%20HTML%20form%20with%20radio%20buttons">
  Create a basic HTML form with radio buttons
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/18%20-%20Create%20a%20basic%20HTML%20form%20with%20checkboxes">
  Create a basic HTML form with checkboxes
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/19%20-%20Create%20a%20basic%20HTML%20form%20with%20a%20dropdown%20menu">
  Create a basic HTML form with a dropdown menu
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/20%20-%20Create%20a%20basic%20HTML%20form%20with%20a%20text%20area">
  Create a basic HTML form with a text area
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/21%20-%20Use%20label%20tags%20to%20associate%20form%20elements%20ot%20their%20labels">
  Use the label tag to associate form elements with their labels
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/22%20-%20Add%20a%20fieldset%20and%20legend%20to%20your%20HTML%20form">
  Add a fieldset and legend to your HTML form
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/23%20-%20Add%20a%20required%20attribute%20to%20your%20form%20field">
  Add a required attribute to a form field
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/24%20-%20Use%20placeholder%20attribute%20in%20your%20form">
  Use the placeholder attribute to provide hints in form fields
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/25%20-%20Use%20autofocus%20attribute%20to%20set%20focus%20on%20form%20fields">
  Use the autofocus attribute to set the focus on a form field
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/26%20-%20Use%20target%20attribute%20to%20open%20link%20in%20new%20tab">
  Use the target attribute to open a link in a new window
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/27%20-%20Add%20an%20alt%20attribute%20to%20an%20image%20for%20accessibilty%20purposes">
  Add an alt attribute to an image for accessibility purposes
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/28%20-%20Use%20the%20title%20attribute%20to%20provide%20additional%20information%20about%20an%20element">
  Use the title attribute to provide additional information about an element
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/29%20-%20Use%20links%20to%20connect%20to%20different%20sections%20of%20a%20HTML%20page">
  Use links to connect to different sections of a HTML page
  </a>
  </li>
  <li>
  <a href="https://github.com/codeskills-dev/30-days-of-html/tree/main/30%20-%20Introduction%20to%20CSS">
  Introduction to CSS
  </a>
  </li>

</ol>

## Contributing

If you would like to contribute to this repository, checkout the [contributing guidelines](https://github.com/codeskills-dev/30-days-of-html/blob/main/Contributing.md) and please feel free to submit a pull request. We welcome any and all contributions that can help make this repository better!

## Author

This repository was created by [Paul Ehikhuemen](https://github.com/lordelogos). You can find more guides for web development at [Codeskills blog](https://blog.codeskills.dev)

## License

This repository is licensed under the MIT License. You are free to use, share, and modify this content as long as you give credit to the original author.

30-days-of-html

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README