{"id":307,"date":"2026-04-14T21:50:03","date_gmt":"2026-04-14T21:50:03","guid":{"rendered":"https:\/\/beginnerprojects.com\/cms\/?p=307"},"modified":"2026-04-24T23:49:08","modified_gmt":"2026-04-24T23:49:08","slug":"how-i-built-my-personal-dashboard-and-how-to-tweak-it","status":"publish","type":"post","link":"https:\/\/beginnerprojects.com\/cms\/how-i-built-my-personal-dashboard-and-how-to-tweak-it\/","title":{"rendered":"How I Built My Personal Dashboard (and How to Tweak It)"},"content":{"rendered":"\n

In this guide, I’ll break down the three main parts of the free Dashboard app<\/a>. Think of this as a map of the software.<\/p>\n\n\n\n

For many of you, the code inside that .html<\/code> file looks like a jumble of symbols and brackets. You might be wondering: “What is actually happening in there? And can I change things without breaking it?”<\/p>\n\n\n\n

1. The “Paint & Polish” (The CSS Section)<\/h2>\n\n\n\n

When you open your file, you’ll see a large section wrapped in <style><\/code> tags. This is the CSS (Cascading Style Sheets)<\/strong>.<\/p>\n\n\n\n

What it does:<\/strong> CSS is responsible for everything you see<\/em> but don’t interact<\/em> with. It tells the browser how to display the background, fonts, colors, and layout of the entire dashboard.<\/p>\n\n\n\n

\ud83d\udca1\u00a0Pro Tip:<\/strong>\u00a0You can completely ignore this section. You don’t need to touch a single line of CSS for the app to work. However, if you’re feeling adventurous, you can ask an AI: “Can you help me with adding these links to the buttons.”<\/em><\/p>\n\n\n\n

2. The “Skeleton” (The HTML Body)<\/h2>\n\n\n\n

Further down, you’ll find the <body><\/code> section. This is the HTML (HyperText Markup Language)<\/strong>.<\/p>\n\n\n\n

What it does:<\/strong> If CSS is the paint, HTML is the framing of the house. It defines where the Title goes, where the Link Columns are placed, and where the Password Generator section is located.<\/p>\n\n\n\n

Where you’ll spend your time:<\/strong> The most important parts of this section are:<\/p>\n\n\n\n

Quick Access Links Section:<\/strong> The main dashboard content is organized into columns of links. Each column has a heading and a list of links. The structure looks like this:<\/p>\n\n\n\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<\/code><\/pre>\n\n\n\n
You can add, remove, or modify links by editing these sections. Each link is wrapped in <a><\/code> tags with the appropriate href<\/code> attribute.<\/p>\n\n\n\n
Password Generator Section:<\/strong> This section contains the password generation functionality with:<\/p>\n\n\n\n
    \n
  • A number input for password length (8-60 characters)<\/li>\n\n\n\n
  • A “Generate” button to create passwords<\/li>\n\n\n\n
  • A text field to display the generated password<\/li>\n\n\n\n
  • A “Copy” button to copy the password to your clipboard<\/li>\n<\/ul>\n\n\n\n
    3. The “Brain” (The JavaScript Section)<\/h2>\n\n\n\n
    At the bottom of the file, inside the <script><\/code> tags, is the JavaScript (JS)<\/strong>.<\/p>\n\n\n\n
    What it does:<\/strong> This is the most powerful part of the app. While HTML and CSS are static, JavaScript is active<\/em>. It is the “Brain” that performs the following logic:<\/p>\n\n\n\n
    Date Display:<\/strong> The JS automatically displays today’s date in the footer when the page loads.<\/p>\n\n\n\n
    Password Generation:<\/strong> The JS handles password creation with:<\/p>\n\n\n\n
      \n
    • Length validation (8-60 characters)<\/li>\n\n\n\n
    • Character set selection (letters, numbers, and special characters)<\/li>\n\n\n\n
    • Exclusion of confusing characters like \/, , <, >, | to prevent issues<\/li>\n\n\n\n
    • Random generation algorithm<\/li>\n<\/ul>\n\n\n\n
      Copy Functionality:<\/strong> The JS enables copying the generated password to your clipboard with a single click.<\/p>\n\n\n\n
      \ud83d\udca1\u00a0Pro Tip:<\/strong>\u00a0This is the perfect place to experiment with AI. Try pasting the script section into an AI and asking: “Can you modify this JavaScript to include a feature that generates passwords with specific character requirements?”<\/em><\/p>\n\n\n\n
      Summary: The Big Picture<\/h2>\n\n\n\n
      To put it simply, your app is a team of three:<\/p>\n\n\n\n
      HTML<\/strong> builds the structure and content. CSS<\/strong> makes the dashboard look professional and visually appealing. JavaScript<\/strong> handles the dynamic functionality like date display and password generation.<\/p>\n\n\n\n
      Having trouble with your code?<\/strong>\u00a0If you’ve tried to edit your list and the app stopped working, don’t panic! It usually means some  tag is missing. Post a comment below with a snippet of your code, and I will help you find the error and get you back up and running.<\/p>\n","protected":false},"excerpt":{"rendered":"
      In this guide, I’ll break down the three main parts of the free Dashboard app. Think of this as a map of the software. For many of you, the code inside that .html file looks like a jumble of symbols and brackets. You might be wondering: “What is actually happening in there? And can I change things […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_ecmd_meta_description":"Learn how to customize and use the free Dashboard app that organizes your links and generates passwords. Includes detailed guide on HTML, CSS, and JavaScript.","footnotes":""},"categories":[1],"tags":[],"class_list":["post-307","post","type-post","status-publish","format-standard","hentry","category-guides"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/posts\/307","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=307"}],"version-history":[{"count":2,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/posts\/307\/revisions"}],"predecessor-version":[{"id":361,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/posts\/307\/revisions\/361"}],"wp:attachment":[{"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/media?parent=307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/categories?post=307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/tags?post=307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}