Navigation

    makesmart

    • Registrieren
    • Anmelden
    • Suche
    • Aktuell
    • Tags
    • Kategorien
    • Ungelesen
    • Beobachtet
    • Beliebt
    • Gespeichert

    Basic HTML Template - HTML, CSS & jQuery für dein Projekt

    Tipps, Tricks & Tutorials
    css html javascript jquery template tutorial webentwicklung
    1
    2
    73
    Lade mehr Beiträge
    • Älteste zuerst
    • Neuste zuerst
    • Meiste Stimmen
    Antworten
    • In einem neuen Thema antworten
    Anmelden zum Antworten
    Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
    • cooper
      cooper zuletzt editiert von 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 anlegt und gespeichert. So muss ich nicht immer wieder die selben Dateien anlegen.

      Das Template besteht aus den drei essentiellen Dateien die man für ein Webprojekt benötigt. Einer style.css zum Stylen, einer index.html für die Struktur sowie den Inhalt und einer script.js Datei um kleine Scripte zu programmieren.


      HTML-Template

      Wenn du nur auf der Suche nach einem einfachen HTML-Template bist, kannst du dir gerne folgendes Snippet kopieren. Den kompletten Template-Ordner mit allen Dateien findest du weiter unten als Download.

      <!doctype html>
      
      <html lang="de">
      <head>
      
        <meta charset="utf-8">
      
        <title>makesmart HTML 5 Template</title>
        <meta name="description" content="makesmart HTML Template">
        <meta name="author" content="cooper">
      
        <!-- Stylesheet-Datei -->
        <link rel="stylesheet" href="assets/css/style.css">
      
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      
      </head>
      
      <body>
      
      
      
        <!-- Hier könnte ihre Werbung stehen -->
        <h1>Die makesmart Community</h1>
        <p>Deine smarte <a href="https://my.makesmart.net/">Community</a>.</p>
      
      
      
        <!-- Javascript Datei -->
        <script src="assets/js/script.js"></script>
      </body>
      </html>
      
      

      Das Template

      Folgende Dateien sind im Template enthalten

      1. index.html - HTML-Startseite
      2. style.css - Stylesheet-Datei
      3. script.js - Javascipt-Datei
      makesmart-basic-html-css-js-template.zip
      ├── assets
      │   ├── css
      │   │   └── style.css
      │   ├── img
      │   └── js
      │       └── script.js
      └── index.html
      

      Die Dateien sind alle in separaten Ordnern, sodass das Template ohne Probleme als Ausgangsbasis für dein Webprojekt verwendet werden kann. Das Javascript-Framework jQuery wird über das CDN von Google eingebunden.


      Download

      HTML - CSS - Javscript - jQuery - Bootstrap - Fontawesome
      makesmart-basic-html-css-js-template.zip


      In dem Download-Ordner sind jetzt alle essentiell wichtigen Dateien, die man für eine Webseite braucht.

      • Basic-HTML Template
      • jQuery, jQuery UI
      • Bootstrap 4
      • Fontawesome 4.7
      • mobile Responsive
      • Web-App-Capable

      Viel Spaß mit eurem Webprojekt. 👍

      1 Antwort Letzte Antwort Antworten Zitieren 0
      • cooper
        cooper zuletzt editiert von

        Update:

        • meta-viewport für mobile Devices hinzugefügt
          Die Seite wird mobile responsive
        <meta name="viewport" content="width=device-width, initial-scale=1">
        

        • meta-mobile-web.app-capable hinzugefügt
          Die Webseite wird im Vollbildmodus angezeigt, wenn man sie auf dem Home-Bildschirm auf den Smartphone speichert.
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        

        • Fontawesome Style hinzugefügt
          Fontawsome Icons 4 können ab sofort verwendet werden.
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        
        <!-- Fügt ein Glas-Icon ein -->
        <i class="fa fa-glass"></i>
        <!-- Fügt ein Stern-Icon ein -->
        <i class="fa fa-star"></i>
        

        • jQuery UI wurde hinzugefügt
        • Bootstrap 4 CSS und JS wurden hinzugefügt
        <!-- Bootstrap -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        

        Also ab sofort ist in dem Template so gut wie alles verfügbar, was man für deine moderne Webseite braucht.

        • jQuery, jQuery UI, Bootstrap, Fontawesome, Mobile-Responsive
        1 Antwort Letzte Antwort Antworten Zitieren 0
        • 1 / 1
        • First post
          Last post