Willkommen zu meinem HTML/JS Boilerplate HelloWorld Projekt! Dieses Projekt bietet eine einfache Ausgangsbasis, um mit HTML und JavaScript zu arbeiten und deine ersten Schritte in der Webentwicklung zu machen. Dieses Projekt dient als einfaches Beispiel für ein HTML und JavaScript Boilerplate, um ein "Hello, World!" Projekt zu erstellen.
Es bietet eine grundlegende Dateistruktur, die bereits eine Menge vorbereiteter Codefragmente und Ressourcen enthält. Dies ermöglicht Entwicklern einen schnellen Start, ohne von Grund auf neu beginnen zu müssen.
HTML5 Boilerplate enthält bereits Optimierungen für die Website-Performance, wie z. B. das Zusammenführen und Minimieren von JavaScript- und CSS-Dateien, das richtige Setzen von Cache-Headern und vieles mehr.
Es beinhaltet eine Reihe von Standardisierungsmaßnahmen und Workarounds, um sicherzustellen, dass die Website in verschiedenen Browsern und auf verschiedenen Geräten konsistent und gut funktioniert.
Das Boilerplate bietet Ansätze und Techniken für die Erstellung von responsiven Websites, die auf verschiedenen Bildschirmgrößen und Geräten ordnungsgemäß angezeigt werden.
Es enthält einige grundlegende Sicherheitsvorkehrungen, um vor häufigen Angriffen und Schwachstellen zu schützen.
Das Boilerplate fördert die Einhaltung von Barrierefreiheitsstandards, um sicherzustellen, dass die Website von Menschen mit Behinderungen gut genutzt werden kann.
Bevor du mit diesem Projekt startest, solltest du sicherstellen, dass du Folgendes auf deinem Computer installiert hast:
- Webbrowser deiner Wahl (z. B. Google Chrome, Mozilla Firefox, etc.)
- Einen Texteditor oder eine integrierte Entwicklungsumgebung (IDE) für die Codebearbeitung
- Klone dieses Repository auf deinen lokalen Computer.
- Öffne die
index.html
Datei in einem Webbrowser deiner Wahl. - Du solltest "Hello, World!" auf der Seite sehen, was bedeutet, dass alles korrekt eingerichtet ist.
- Du kannst die
index.html
undscript.js
Dateien bearbeiten, um deinen eigenen Code hinzuzufügen und das Projekt anzupassen.
├── 404.html
├── LICENSE.txt
├── ReadMe.md
├── browserconfig.xml
(1)
├── css
│ ├── main.css
: Die CSS-Datei für das Styling der Webseite.
│ └── normalize.css
(2 vereinheitlicht die Standard-Stile verschiedener Browser, um für ein konsistentes Aussehen von Webseiten zu sorgen.)
├── doc
│ ├── TOC.md
│ ├── css.md
│ ├── extend.md
│ ├── faq.md
│ ├── html.md
│ ├── js.md
│ ├── misc.md
│ └── usage.md
├── favicon.ico
├── humans.txt
Diese Datei dient dazu, Informationen über die Personen zu liefern, die an der Entwicklung einer Website beteiligt waren. Es ist eine Art "Kredit" für die Entwickler und Designer. Sie ist nicht für Maschinen gedacht, sondern für Menschen.
├── icon.png
├── img
├── index.html
: Die Haupt-HTML-Datei mit der Grundstruktur der Webseite.
├── js
│ ├── main.js
: Die JavaScript-Datei für benutzerdefinierten Code.
│ ├── plugins.js
(4)
│ └── vendor
│ └── modernizr-3.11.2.min.js
├── package-lock.json
├── package.json
(5)
├── robots.txt
(6)Eine robots.txt Datei ist eine Textdatei, in der man hinterlegen kann, welche Verzeichnisse von den Suchmaschinen gelesen werden dürfen und welche nicht.
├── package.json
ist ein file das Node.js verwendet um zu ermitteln welche dependencies in diesen projekt benötigt werden und im zweifel nachinstalliert werden können.
├── robots.txt
(6)
├── site.webmanifest
Diese Datei enthält Informationen für eine Webanwendung, die nötig sind, damit die Anwendung über einen Webbrowser zu installieren sind, ohne eine Notwendigkeit einer APP und offline nutzbar sind.
├── package.json
(5)
├── robots.txt
(6)
├── site.webmanifest
br>
├── site.webmanifest
(7)*
├── tile-wide.png
└── tile.png
Viel Spaß beim Entwickeln!