HTML Grundgerüst und Template - HTML, Bootstrap & jQuery für dein Projekt

Tipps, Tricks & Tutorials
Anmelden zum Antworten
  • cooper

    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 die index.html - zum Stylen eine main.css und für Scripts eine main.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:

    og-preview-makesmart-html-template.png

    Das HTML Grundgerüst funktioniert 100% offline, da alle Dateien lokal eingebunden werden. Es wird auf kein CND zurückgegriffen.

    Download

    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 Dateien main.css und main.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. 👍

    0
  • T

    Super Erklärungen, danke dir. Könntest du den Github Link einmal aktualisieren?

    0

Ähnliche Themen

  • cooper


    discord-bot discord.js javascript programmieren
    Fragen, Hilfe & Probleme •

    7
  • cooper


    css esp8266 espasyncwebserver html javascript webserver
    Tipps, Tricks & Tutorials •

    1
  • cooper


    javascript snippet
    Tipps, Tricks & Tutorials •

    1
  • cooper


    filter javascript regex
    Tipps, Tricks & Tutorials •

    1
  • cooper


    d1-mini esp8266 javascript
    Tipps, Tricks & Tutorials •

    3