\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <title>Free Dashboard<\/title>\n <meta name=\"viewport\" content=\"width=1280\" \/>\n <style>\n :root {\n --bg-main: #121212;\n --bg-surface: #34373F;\n --text-primary: #abb2ba;\n --text-secondary: #abb2ba;\n --accent-primary: #4169E1;\n --accent-secondary: #45B52D;\n --border-subtle: #40444C;\n --border-radius: 7px;\n --spacing-unit: 20px;\n --font-sans: Inter, system-ui, sans-serif;\n --font-mono: Fira Code, monospace;\n }\n\n body {\n background-color: var(--bg-main);\n color: var(--text-primary);\n font-family: var(--font-sans);\n margin: 0;\n padding: 0;\n font-size: 1.0625rem;\n line-height: 1.6;\n }\n\n .dashboard-container {\n max-width: 1140px;\n margin: 0 auto;\n padding: calc(var(--spacing-unit) * 1.5) var(--spacing-unit);\n }\n\n .section-spacer {\n height: 40px;\n width: 100%;\n }\n\n h1.main-title {\n font-size: 48px;\n font-weight: 500;\n margin-bottom: 20px;\n color: var(--text-primary);\n text-align: left;\n }\n\n h2 {\n font-size: 1.6rem; \n font-weight: normal;\n margin-bottom: 20px;\n color: var(--text-primary);\n }\n\n footer p {\n font-size: 1rem;\n font-weight: 500;\n color: var(--text-primary);\n margin-top: 20px;\n text-align: center;\n }\n\n .link-columns-wrapper {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n margin-bottom: 0px;\n }\n\n .link-list-column h3 {\n margin: 0 0 10px;\n font-size: 1rem;\n font-weight: 500;\n }\n\n .link-list-column ul {\n list-style: none;\n padding: 0;\n }\n\n .link-list-column li a {\n display: block;\n padding: 10px 12px;\n margin-bottom: 8px;\n background-color: transparent;\n color: var(--text-primary);\n text-decoration: none;\n border-radius: var(--border-radius);\n transition: background-color 0.2s ease, color 0.2s ease, border 0.2s ease;\n font-size: 1.05rem;\n font-weight: 400;\n text-align: left;\n border: 1px solid #3a3c3f;\n }\n\n .link-list-column li a:hover {\n background-color: transparent;\n color: #abb2ba;\n border: 1px solid #abb2ba;\n }\n\n .password-controls {\n display: flex;\n gap: 10px;\n }\n\n .password-controls input[type=\"number\"] {\n width: 70px;\n background-color: var(--bg-main);\n color: var(--text-primary);\n border: 1px solid var(--border-subtle);\n border-radius: var(--border-radius);\n padding: 10px;\n font-family: var(--font-mono);\n font-size: 1.0625rem;\n }\n\n .password-controls input[type=\"text\"] {\n flex-grow: 1;\n min-width: 300px;\n overflow-x: auto;\n background-color: var(--bg-main);\n color: var(--text-primary);\n border: 1px solid var(--border-subtle);\n border-radius: var(--border-radius);\n padding: 10px;\n font-family: var(--font-mono);\n font-size: 1.0625rem;\n }\n\n .password-controls button {\n background-color: transparent;\n color: #abb2ba;\n border: 1px solid #525563;\n border-radius: var(--border-radius);\n padding: 10px 32px;\n cursor: pointer;\n font-size: 1.0625rem;\n transition: background-color 0.2s ease, color 0.2s ease;\n }\n\n .password-controls button:hover {\n background-color: #abb2ba;\n color: #000;\n }\n\n code {background-color: #111315; padding: 4px 8px;}\n <\/style>\n<\/head>\n<body>\n <div class=\"dashboard-container\">\n <!-- \ud83d\udd17 Quick Access Links -->\n <section id=\"link-organizer\">\n <h1 class=\"main-title\">My Links<\/h1>\n <div class=\"link-columns-wrapper\">\n <div class=\"link-list-column\">\n <h3>Tools<\/h3>\n <ul>\n <li><a href=\"https:\/\/pagespeed.web.dev\/\">PageSpeed<\/a><\/li>\n <li><a href=\"https:\/\/search.google.com\/search-console\/about\">Search Console<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"link-list-column\">\n <h3>Websites<\/h3>\n <ul>\n <li><a href=\"https:\/\/beginnerprojects.com\/\">beginnerprojects.com<\/a><\/li>\n <li><a href=\"https:\/\/duckduckgo.com\">duckduckgo.com<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"link-list-column\">\n <h3>Supplemental Sites<\/h3>\n <ul>\n <li><a href=\"https:\/\/lxer.com\/\">lxer.com<\/a><\/li>\n <li><a href=\"https:\/\/www.youtube.com\">youtube.com<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"link-list-column\">\n <h3>AI<\/h3>\n <ul>\n <li><a href=\"https:\/\/chatgpt.com\">chatgpt.com<\/a><\/li>\n <li><a href=\"https:\/\/www.perplexity.ai\/\">perplexity.ai<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"section-spacer\"><\/div>\n\n <!-- \ud83d\udd10 Password Generator -->\n <section id=\"password-generator-section\">\n <h2>Password Generator<\/h2>\n <div class=\"password-controls\">\n <input id=\"password-length\" type=\"number\" min=\"8\" max=\"60\" value=\"36\" \/>\n <button onclick=\"generateAndDisplayPassword()\">Generate<\/button>\n <input id=\"password-output\" type=\"text\" readonly \/>\n <button onclick=\"copyPasswordToClipboard()\">Copy<\/button>\n <\/div>\n <\/section>\n\n <footer>\n <p>Today is <span id=\"footer-date\"><\/span><\/p>\n <\/footer>\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", () => {\n const today = new Date();\n const dateSpan = document.getElementById(\"footer-date\");\n if (dateSpan) {\n dateSpan.textContent = today.toLocaleDateString(undefined, {\n weekday: \"short\",\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\"\n });\n }\n });\n\n function generateAndDisplayPassword() {\n const len = Math.max(8, Math.min(60, parseInt(document.getElementById(\"password-length\").value) || 24));\n const chars = \"ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz0123456789!@#$%^&*()_+-=~`[]{}:;,.<>?\";\n let result = \"\";\n while (result.length < len) {\n const c = chars[Math.floor(Math.random() * chars.length)];\n if (!\"\/\\\\<>|\".includes(c)) result += c;\n }\n document.getElementById(\"password-output\").value = result;\n }\n\n async function copyPasswordToClipboard() {\n const result = document.getElementById(\"password-output\").value;\n if (result) await navigator.clipboard.writeText(result);\n }\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n\n\n\nMake it Your Own<\/h3>\n\n\n\n
The beauty of this dashboard is that it is entirely yours. I encourage you to dive into the code and experiment! You can add dozens of new buttons, create new categories, or even change the colors to match your favorite theme. Don\u2019t be afraid to break things\u2014that is the best way to learn how HTML and CSS work. If you accidentally delete a bracket or mess up the layout, no worries; you can always come back to this post and grab a fresh copy of the starter file.<\/p>\n\n\n\n
Pro Tip:<\/strong> I’ve edited the Brave browser settings to load this page every time I press the “home” button.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"I spend a lot of time every day typing the same website addresses into my browser. Even worse, I have a hard time coming up with secure passwords. So, I solved this problem with a handy app I call “Dashboard”. The goal is simple: turn “typing a domain name” into “clicking a single button.” Instead […]<\/p>\n","protected":false},"author":2,"featured_media":305,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_ecmd_meta_description":"Stop typing URLs! Build your own personal productivity dashboard with this free, single-file HTML app that turns website access into simple button clicks.","footnotes":""},"categories":[6,9],"tags":[],"class_list":["post-303","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-free-apps","category-javascript"],"blocksy_meta":{"page_structure_type":"type-4","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/posts\/303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/comments?post=303"}],"version-history":[{"count":12,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/posts\/303\/revisions"}],"predecessor-version":[{"id":443,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/posts\/303\/revisions\/443"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/media\/305"}],"wp:attachment":[{"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/media?parent=303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/categories?post=303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/tags?post=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"A](\"https:\/\/beginnerprojects.com\/cms\/wp-content\/uploads\/2026\/04\/personal-productivity-dashboard-template.webp\")