Infos zum Projekt
Dashboard ist ein kleines Open-Source-Projekt, das sich besonders an Web-Development-Anfänger richtet. Der gesamte Sourcecode des Projekts ist auf GitHub verfügbar, sodass sich jeder die Seite herunterladen und mit der mitgelieferten Anleitung eine eigene Version erstellen kann.
Mit diesem Projekt können Anfänger im Web-Development ihre ersten Erfahrungen sammeln und ihre Kenntnisse verbessern, indem sie ihre eigene personalisierte Startseite erstellen. Dabei bietet das Dashboard viele nützliche Funktionen wie das Hinzufügen von Verknüpfungen, eine Google Suche und verschiedenen Widgets.
Insgesamt ist Dashboard | Your Personal Startpage eine großartige Ressource für Web-Development-Anfänger, die ihre Fähigkeiten verbessern möchten. Der offene Quellcode ermöglicht es den Nutzern, das Projekt weiterzuentwickeln und zu verbessern, um ihre eigenen einzigartigen Versionen zu erstellen.
Anleitung
GitHub
Der komplette Code zum Dashboard steht auf Github zum Download bereit. Außerdem findet sich dort das selbe Tutorial, aber auf Englisch. Falls dein Englisch gut genug ist, ließ die das Original auf GitHub durch, da die Dokumentation dort deutlich übersichtlicher gestaltet werden kann.
Module
Jedes Modul steht in einem article
-Tag. Du kannst deren Reihenfolge ändern, in dem du die einzelnen Module in der Datei index.html
vertauscht. Natürlich kannst du auch jederzeit deine eigenen Module einbauen. Wenn du einen Beitrag auf Instagram oder Twitter dazu postest, kannst du mich gerne verlinken. Oder du schickst deinen fertigen Code als Pull Request auf GitHub, damit auch andere Leute dein Modul verwenden können.
Lesezeichen
Im Lesezeichen-Modul gibt es einen Block der Klasse links. In diesem befinden sich deine Lesezeichen. Im Bild kannst du die Struktur sehen.
Element | Funktion |
a |
Link-Element |
href="..." |
Link zur Website |
target="_blank" |
Link soll in einem neuen Browsertab geöffnet werden |
title="..." |
Text, wenn die Maus über dem Bild ist |
img |
Bild-Element |
src="..." |
Pfad zum Icon (Lokal im Ordner icons oder Weblink) |
alt="..." |
Text, wenn das Icon nicht geladen ist |
Design
Das Design des Dashboards ist verteilt auf zwei Dateien im Ordner css
gespeichert.
Layout.css
Design.css
Du musst dich nur um das Design kümmern, da das Layout eigentlich immer gleich bleibt. Das erste Element im Design nennt sich :root
. Darin sind alle Farben und andere nützliche Werte gespeichert. Im Normalfall musst du nur diese ändern.
Beispiel
Du willst die Hintergrundfarbe nach Hellgrau ändern. Dazu musst du nur den Wert von --color-background
zu #bbb
(RGB-Code) ändern. Das war auch schon alles.