pawcode Development

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.