• 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. 👍

Ähnliche Themen

  • 1
  • 3
  • 1
  • 1
  • 1