{"id":30741049,"url":"https://github.com/devmasen/roadmap-projects","last_synced_at":"2026-02-11T08:06:21.566Z","repository":{"id":306564388,"uuid":"1026598097","full_name":"DevMasen/roadmap-projects","owner":"DevMasen","description":"This is a repository for roadmap.sh projects","archived":false,"fork":false,"pushed_at":"2025-08-22T19:34:04.000Z","size":26983,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-22T21:53:19.786Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DevMasen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2025-07-26T07:56:30.000Z","updated_at":"2025-08-22T19:34:07.000Z","dependencies_parsed_at":"2025-07-26T14:18:37.308Z","dependency_job_id":"b0f0869f-8752-4a84-8306-b104b4fd7099","html_url":"https://github.com/DevMasen/roadmap-projects","commit_stats":null,"previous_names":["devmasen/roadmap-projects"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DevMasen/roadmap-projects","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevMasen%2Froadmap-projects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevMasen%2Froadmap-projects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevMasen%2Froadmap-projects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevMasen%2Froadmap-projects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DevMasen","download_url":"https://codeload.github.com/DevMasen/roadmap-projects/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevMasen%2Froadmap-projects/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273530991,"owners_count":25122100,"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","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-09-04T00:19:11.960Z","updated_at":"2026-02-11T08:06:21.561Z","avatar_url":"https://github.com/DevMasen.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e Roadmap Frontend Projects 💻\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg align=\"center\" width=\"720px\" src=\"./banner.png\" alt=\"Banner Image\"\u003e\n\u003c/p\u003e\n\n## This is a repository for [roadmap.sh](https://roadmap.sh/) frontend projects\n\n## Projects Definition:\n\n-   Project 1 : [Single-Page CV](https://roadmap.sh/projects/single-page-cv)\n\n-   Project 2 : [Basic HTML Website](https://roadmap.sh/projects/basic-html-website)\n\n-   Project 3 : [Personal Portfolio](https://roadmap.sh/projects/portfolio-website)\n\n-   Project 4 : [Changelog Component](https://roadmap.sh/projects/changelog-component)\n-   Project 5 : [Testimonial Cards](https://roadmap.sh/projects/testimonial-cards)\n-   Project 6 : [Datepicker UI](https://roadmap.sh/projects/datepicker-ui)\n-   Project 7 : [Accessible Form UI](https://roadmap.sh/projects/accessible-form-ui)\n-   Project 8 : [Image Grid Layout](https://roadmap.sh/projects/image-grid)\n-   Project 9 : [Tooltip UI](https://roadmap.sh/projects/tooltip-ui)\n-   Project 10 : [Tabs](https://roadmap.sh/projects/simple-tabs)\n-   Project 11 : [Cookie Consent](https://roadmap.sh/projects/cookie-consent)\n-   Project 12 : [Restricted Textarea](https://roadmap.sh/projects/restricted-textarea)\n-   Project 13 : [Accordion](https://roadmap.sh/projects/accordion)\n-   Project 14 : [Age Calculator](https://roadmap.sh/projects/age-calculator)\n-   Project 15 : [Flash Cards](https://roadmap.sh/projects/flash-cards)\n-   Project 16 : [Custom Dropdown](https://roadmap.sh/projects/custom-dropdown)\n-   Project 17 : [Task Tracker](https://roadmap.sh/projects/task-tracker-js)\n-   Project 18 : [GitHub Random Repository](https://roadmap.sh/projects/github-random-repo)\n-   project 19 : [Reddit Client](https://roadmap.sh/projects/reddit-client)\n-   project 20 : [Temperature Converter](https://roadmap.sh/projects/temperature-converter)\n\n---\n\n## Projects :\n\n\u003ctable border=\"0\" cellpadding=\"12\" cellspacing=\"0\" width=\"90%\" align=\"center\"\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Single-Page-CV/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Single-Page-CV/img/banner-2.png\" alt=\"Card 1\" width=\"550px\" /\u003e\n        \u003ch2\u003eSingle-Page CV\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eA single-page HTML CV to showcase my career history\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Basic-HTML-Website/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Basic-HTML-Website/img/banner-2.png\" alt=\"Card 2\" width=\"550px\" /\u003e\n        \u003ch2\u003eBasic HTML Website\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eSimple HTML only website with multiple pages\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Personal_Portfolio/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Personal_Portfolio/img/readme-banner-2.png\" alt=\"Card 3\" width=\"550px\" /\u003e\n        \u003ch2\u003ePersonal Portfolio\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eConverting the previous simple HTML website into a personal portfolio\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Changelog-Component/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Changelog-Component/img/banner-2.png\" alt=\"Card 4\" width=\"550px\" /\u003e\n        \u003ch2\u003eChangelog Component\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eChangelog component for a website using HTML and CSS\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Testimonial-Cards/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Testimonial-Cards/img/banner-2.png\" alt=\"Card 5\" width=\"550px\" /\u003e\n        \u003ch2\u003eTestimonial Cards\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eTestimonial cards for a website using HTML and CSS\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Datepicker-UI/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Datepicker-UI/img/banner-2.png\" alt=\"Card 6\" width=\"550px\" /\u003e\n        \u003ch2\u003eDatepicker UI\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eA simple datepicker UI using HTML and CSS\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Accessible-Form-UI/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Accessible-Form-UI/img/banner-2.png\" alt=\"Card 7\" width=\"550px\" /\u003e\n        \u003ch2\u003eAccessible Form UI\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eAn accessible form UI using HTML and CSS\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Image-Grid-Layout/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Image-Grid-Layout/img/banner-2.png\" alt=\"Card 8\" width=\"550px\" /\u003e\n        \u003ch2\u003eImage Grid Layout\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eA grid layout of images using HTML and CSS\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Tooltip-UI/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Tooltip-UI/img/banner-2.png\" alt=\"Card 9\" width=\"550px\" /\u003e\n        \u003ch2\u003eTooltip UI\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eA tooltip for navigation items using only HTML and CSS\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Tabs/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Tabs/img/banner-2.png\" alt=\"Card 10\" width=\"550px\" /\u003e\n        \u003ch2\u003eTabs\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eA simple tabs component using HTML, CSS, and JavaScript\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Cookie-Consent/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Cookie-Consent/img/banner-2.png\" alt=\"Card 11\" width=\"550px\" /\u003e\n        \u003ch2\u003eCookie Consent\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eA simple cookie consent banner using JavaScript\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Restricted-Textarea/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Restricted-Textarea/img/banner-2.png\" alt=\"Card 12\" width=\"550px\" /\u003e\n        \u003ch2\u003eRestricted Textarea\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eA textarea with live character count and a max character limit\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Accordion/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Accordion/img/banner-2.png\" alt=\"Card 13\" width=\"550px\" /\u003e\n        \u003ch2\u003eAccordion\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eAn accordion component using HTML, CSS, and JavaScript\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Age-Calculator/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Age-Calculator/img/banner-2.png\" alt=\"Card 14\" width=\"550px\" /\u003e\n        \u003ch2\u003eAge Calculator\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eAn age calculator using HTML, CSS, and JavaScript\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Flash-Cards/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Flash-Cards/flash-cards/img/banner-2.png\" alt=\"Card 15\" width=\"550px\" /\u003e\n        \u003ch2\u003eFlash Cards\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eA flash card app using JavaScript frameworks\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Custom-Dropdown/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Custom-Dropdown/img/banner-2.png\" alt=\"Card 16\" width=\"550px\" /\u003e\n        \u003ch2\u003eCustom Dropdown\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eA custom dropdown using HTML, CSS, and JavaScript\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Task-Tracker/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Task-Tracker/img/banner-2.png\" alt=\"Card 17\" width=\"550px\" /\u003e\n        \u003ch2\u003eTask Tracker\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eA task tracker with a to-do list using JavaScript\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/GitHub-Random-Repository/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/GitHub-Random-Repository/img/banner-2.png\" alt=\"Card 18\" width=\"550px\" /\u003e\n        \u003ch2\u003eGitHub Random Repository\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eA GitHub random repository finder using GitHub API\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Reddit-Client/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Reddit-Client/client/img/banner-2.png\" alt=\"Card 19\" width=\"550px\" /\u003e\n        \u003ch2\u003eReddit Client\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eA Reddit client with customizable subreddit lanes\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\u003ctd height=\"100px\"\u003e\u003c/td\u003e\u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" valign=\"top\"\u003e\n      \u003ca href=\"./Frontend_Projects/Temperature-Converter/\"\u003e\n        \u003cimg src=\"./Frontend_Projects/Temperature-Converter/img/banner-2.png\" alt=\"Card 20\" width=\"550px\" /\u003e\n        \u003ch2\u003eTemperature Converter\u003c/h2\u003e\n      \u003c/a\u003e\n      \u003cp\u003eA temperature converter that converts between different units\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevmasen%2Froadmap-projects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevmasen%2Froadmap-projects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevmasen%2Froadmap-projects/lists"}