😅😂
HTML Grundgerüst und Template - HTML, Bootstrap & jQuery für dein Projekt
-
Ich bin momentan des Öfteren damit beschäftigt, kleine Javascript-Anwendungen zu programmieren, als Framework nutze ich das beliebte jQuery. Da diese Projekte immer gleich anfangen habe ich mir ein kleines HTML Template angelegt und gespeichert. Dieses Grundgerüst will ich hiermit mit euch teilen.
Das Template besteht aus den drei essentiellen Dateien die man für ein Webprojekt benötigt.
Zum einen natürlich dieindex.html
- zum Stylen einemain.css
und für Scripts einemain.js
Datei.Zusätzlich kommen ein paar Helferlein / Frameworks zum Einsatz, die für heutige Webprojekte fast unerlässlich sind, diese sind:
Nicht benötigte Bestandteile können natürlich ohne Probleme entfernt werden.
Open Graph Support
Zusätzlich dazu wird auch ein Favicon und ein Thumbnail Image auf Open Graph-Basis bereitgestellt. Das heißt ihr habt Out-Of-The-Box direkt auch eine moderne Site-Preview auf allen gängigen Seiten wie Twitter, Facebook, Discord & mehr like:
Das HTML Grundgerüst funktioniert 100% offline, da alle Dateien lokal eingebunden werden. Es wird auf kein CND zurückgegriffen.
Download
- Download .zip via Github
- oder via GitHub-CLI:
git clone https://github.com/me-cooper/html-base.git
Die Ordnerstruktur
01_html-bootstrap-jquery │ index.html │ ├───assets │ └───head │ favicon.png │ thumbnail.jpg │ ├───css │ bootstrap.min.css │ bootstrap.min.css.map │ main.css │ └───js bootstrap.min.js bootstrap.min.js.map fontawesome-5.15.4.js jquery-3.6.0.min.js main.js
Die Dateien sind alle in separaten Ordnern, sodass das Template ohne Probleme als Ausgangsbasis für dein Webprojekt verwendet werden kann.
Eigene Styles und eigene Scripte können zusätzlich eingebunden werden, oder man verwendet dafür die Dateienmain.css
undmain.js
.
Suchst du auf die schnelle nur ein HTML-Template, dass alle bare Meta-Tags beinhaltet? Dann kannst du dir auch einfach den folgenden Content kopieren, dort ist der Rest der Dateien nicht eingebunden, und dient für Testzwecke.
<html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- META --> <title>look at me</title> <link rel="icon" type="image/png" href="favicon.png"/> <meta name="description" content="look at me"> <meta name="author" content="c00p"> <meta property="og:image" content="https://OG-Image-Thumbnail.com"> <!-- CSS --> <link rel="stylesheet" href="main.css"> <!-- JS --> <script src="main.js"></script> </head> <body> <!-- and finally: content lol --> </body> </html>
Viel Spaß mit eurem Webprojekt.
-
Super Erklärungen, danke dir. Könntest du den Github Link einmal aktualisieren?