{"id":21055555,"url":"https://github.com/codeskills-dev/30-days-of-html","last_synced_at":"2025-06-11T18:33:15.899Z","repository":{"id":152450433,"uuid":"625183314","full_name":"codeskills-dev/30-days-of-html","owner":"codeskills-dev","description":"🚀 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! 💻🔥","archived":false,"fork":false,"pushed_at":"2024-04-17T02:34:49.000Z","size":1538,"stargazers_count":63,"open_issues_count":1,"forks_count":28,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-20T19:15:14.292Z","etag":null,"topics":["30daysofcode","html","html5","web-development"],"latest_commit_sha":null,"homepage":"https://blog.codeskills.dev","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codeskills-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"Contributing.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-08T10:16:15.000Z","updated_at":"2024-12-31T11:08:11.000Z","dependencies_parsed_at":"2023-04-17T18:05:35.417Z","dependency_job_id":null,"html_url":"https://github.com/codeskills-dev/30-days-of-html","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeskills-dev%2F30-days-of-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeskills-dev%2F30-days-of-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeskills-dev%2F30-days-of-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeskills-dev%2F30-days-of-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeskills-dev","download_url":"https://codeload.github.com/codeskills-dev/30-days-of-html/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243500803,"owners_count":20300774,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["30daysofcode","html","html5","web-development"],"created_at":"2024-11-19T16:46:10.654Z","updated_at":"2025-03-14T00:11:30.734Z","avatar_url":"https://github.com/codeskills-dev.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 30 Days of HTML🎖️💻\n\nWelcome to \"30 Days of HTML\" a repository with HTML challenges for beginners!\n\u003cbr\u003e\u003cbr\u003e\n\n![30-days-of-html](https://socialify.git.ci/codeskills-dev/30-days-of-html/image?font=Inter\u0026forks=1\u0026language=1\u0026name=1\u0026stargazers=1\u0026theme=Auto)\n\n## Overview\n\nThis 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.\n\n## How to Use\n\n\u003c!-- BEGIN LATEST DOWNLOAD BUTTON --\u003e\n[![Download zip](https://custom-icon-badges.herokuapp.com/badge/-Download-blue?style=for-the-badge\u0026logo=download\u0026logoColor=white \"Download zip\")](https://github.com/codeskills-dev/30-days-of-html/archive/v1.0.0.zip)\n\u003c!-- END LATEST DOWNLOAD BUTTON --\u003e\n\nTo 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.\n\nEach 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.\n\nDon't forget to give this repo a star ⭐️\n\n## List of Challenges\n\n\u003col\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/01%20-%20Basic%20HTML%20Page\"\u003e\n    Create a basic HTML page with a heading and a paragraph\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/02%20-%20Add%20an%20Image%20to%20your%20HTML%20Page\"\u003e\n    Add an image to your HTML page\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/03%20-%20Create%20a%20hyperlink%20to%20another%20website\"\u003e\n    Create a hyperlink to another website\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/04%20-%20Add%20a%20list%20of%20items%20to%20your%20HTML%20page\"\u003e\n  Add a list of items to your HTML page.\n  \u003c/a\u003e\n  \u003c/li\u003e\n\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/05%20-%20Add%20a%20table%20to%20your%20HTML%20page\"\u003e\n  Add a table to your HTML page\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/06%20-%20Create%20a%20HTML%20form\"\u003e\n  Create a form with input fields and a submit button\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/07%20-%20Add%20a%20video%20to%20your%20HTML%20Page\"\u003e\n  Add a video to your HTML page\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/08%20-%20Add%20an%20ordered%20list%20to%20your%20HTML%20Page\"\u003e\n  Add an ordered list to your HTML page\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/09%20-%20Add%20an%20unordered%20list%20to%20your%20HTML%20page\"\u003e\n  Add an unordered list to your HTML page\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/10%20-%20Add%20a%20definition%20list%20to%20your%20HTML%20Page\"\u003e\n  Add a definition list to your HTML page\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/11%20-%20Add%20an%20iframe%20to%20your%20HTML%20Page\"\u003e\n  Add an iframe to your HTML page\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/12%20-%20Use%20HTML5%20Sematic%20tags%20for%20page%20structure\"\u003e\n  Use HTML5 semantic tags to structure your page content\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/13%20-%20Add%20a%20quote%20to%20your%20HTML%20Page\"\u003e\n  Add a quote to your HTML page\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/14%20-%20Add%20a%20horizontal%20rule%20to%20your%20HTML%20Page\"\u003e\n  Add a horizontal rule to your HTML page\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/15%20-%20Add%20a%20line%20break%20to%20your%20HTML%20Page\"\u003e\n  Add a line break to your HTML page\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/16%20-%20Add%20a%20non-breaking%20space%20to%20your%20HTML%20Page\"\u003e\n  Add a non-breaking space to your HTML page\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/17%20-%20Create%20a%20basic%20HTML%20form%20with%20radio%20buttons\"\u003e\n  Create a basic HTML form with radio buttons\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/18%20-%20Create%20a%20basic%20HTML%20form%20with%20checkboxes\"\u003e\n  Create a basic HTML form with checkboxes\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/19%20-%20Create%20a%20basic%20HTML%20form%20with%20a%20dropdown%20menu\"\u003e\n  Create a basic HTML form with a dropdown menu\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/20%20-%20Create%20a%20basic%20HTML%20form%20with%20a%20text%20area\"\u003e\n  Create a basic HTML form with a text area\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/21%20-%20Use%20label%20tags%20to%20associate%20form%20elements%20ot%20their%20labels\"\u003e\n  Use the label tag to associate form elements with their labels\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/22%20-%20Add%20a%20fieldset%20and%20legend%20to%20your%20HTML%20form\"\u003e\n  Add a fieldset and legend to your HTML form\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/23%20-%20Add%20a%20required%20attribute%20to%20your%20form%20field\"\u003e\n  Add a required attribute to a form field\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/24%20-%20Use%20placeholder%20attribute%20in%20your%20form\"\u003e\n  Use the placeholder attribute to provide hints in form fields\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/25%20-%20Use%20autofocus%20attribute%20to%20set%20focus%20on%20form%20fields\"\u003e\n  Use the autofocus attribute to set the focus on a form field\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/26%20-%20Use%20target%20attribute%20to%20open%20link%20in%20new%20tab\"\u003e\n  Use the target attribute to open a link in a new window\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/27%20-%20Add%20an%20alt%20attribute%20to%20an%20image%20for%20accessibilty%20purposes\"\u003e\n  Add an alt attribute to an image for accessibility purposes\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca 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\"\u003e\n  Use the title attribute to provide additional information about an element\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca 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\"\u003e\n  Use links to connect to different sections of a HTML page\n  \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://github.com/codeskills-dev/30-days-of-html/tree/main/30%20-%20Introduction%20to%20CSS\"\u003e\n  Introduction to CSS\n  \u003c/a\u003e\n  \u003c/li\u003e\n\n\u003c/ol\u003e\n\n## Contributing\n\nIf 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!\n\n## Author\n\nThis 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)\n\n## License\n\nThis 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeskills-dev%2F30-days-of-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeskills-dev%2F30-days-of-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeskills-dev%2F30-days-of-html/lists"}