https://github.com/codeskills-dev/30-days-of-html

🚀 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! 💻🔥
https://github.com/codeskills-dev/30-days-of-html

30daysofcode html html5 web-development

Last synced: 2 months ago
JSON representation

🚀 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! 💻🔥

• Host: GitHub
• URL: https://github.com/codeskills-dev/30-days-of-html
• Owner: codeskills-dev
• License: mit
• Created: 2023-04-08T10:16:15.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-17T02:34:49.000Z (about 1 year ago)
• Last Synced: 2025-01-20T19:15:14.292Z (4 months ago)
• Topics: 30daysofcode, html, html5, web-development
• Language: HTML
• Homepage: https://blog.codeskills.dev
• Size: 1.47 MB
• Stars: 63
• Watchers: 1
• Forks: 28
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: Contributing.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 30 Days of HTML🎖️💻

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





![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



  


  

    Create a basic HTML page with a heading and a paragraph

  

  

  


  

    Add an image to your HTML page

  

  

  


  

    Create a hyperlink to another website

  

  

  


  

  Add a list of items to your HTML page.

  

  


  


  

  Add a table to your HTML page

  

  

  


  

  Create a form with input fields and a submit button

  

  

  


  

  Add a video to your HTML page

  

  

  


  

  Add an ordered list to your HTML page

  

  

  


  

  Add an unordered list to your HTML page

  

  

  


  

  Add a definition list to your HTML page

  

  

  


  

  Add an iframe to your HTML page

  

  

  


  

  Use HTML5 semantic tags to structure your page content

  

  

  


  

  Add a quote to your HTML page

  

  

  


  

  Add a horizontal rule to your HTML page

  

  

  


  

  Add a line break to your HTML page

  

  

  


  

  Add a non-breaking space to your HTML page

  

  

  


  

  Create a basic HTML form with radio buttons

  

  

  


  

  Create a basic HTML form with checkboxes

  

  

  


  

  Create a basic HTML form with a dropdown menu

  

  

  


  

  Create a basic HTML form with a text area

  

  

  


  

  Use the label tag to associate form elements with their labels

  

  

  


  

  Add a fieldset and legend to your HTML form

  

  

  


  

  Add a required attribute to a form field

  

  

  


  

  Use the placeholder attribute to provide hints in form fields

  

  

  


  

  Use the autofocus attribute to set the focus on a form field

  

  

  


  

  Use the target attribute to open a link in a new window

  

  

  


  

  Add an alt attribute to an image for accessibility purposes

  

  

  


  

  Use the title attribute to provide additional information about an element

  

  

  


  

  Use links to connect to different sections of a HTML page

  

  

  


  

  Introduction to CSS

  

  




## 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.