Introduction

Thank you for purchasing the Educate HTML5 template! This documentation will guide you through the installation and customization process to help you get the most out of your new website. The template has been designed and developed to provide you with a modern and professional online presence for your Education & LMS Website.

Installation

Unzip the downloaded file and locate the "html" folder.
Open the "index-1.html" file in your preferred web browser to view the template.
To make changes to the template, open the template files in your preferred code editor (e.g., Sublime Text, Atom, Visual Studio Code).

Folder Structure

Checkout the files that you'll see upon downloading

The Educate HTML5 template folder includes the following folders and files

html/ - All the html files
- index-1.html
- index-2.html
- about.html
- courses.html
- ............
html/assets/css - Stylesheet file
- app.css (Main Compiled CSS)
html/assets/scss - SASS files
- app.scss (Main SCSS)
- Basic
  Including styling for general elements of html
- Elements
  Including styling for elements like button. heading and preloader
- Helpers
  This folder contains styling for animation, responsive queries and spacing
- Layouts
  This folder contains styling for header and footer
html/assets/media - Contains the placeholder images that can be replaced with your own
html/assets/js - Javacript file
- app.js (Main Template Js)
html/assets/vendor - All the Plugins
- vendor
  - animate
    - animate.min.css
  - bootstrap
    - bootstrap.min.css
    - bootstrap.min.js
  - countdown
    - jquery.countdown.min.js
  - fontAwesome
    - font-awesome.min.css
  - jquery
    - jquery-3.6.3.min.js
  - jquery-appear
    - jquery-appear.js
  - jquery-magnific-popup
    - jquery.magnific-popup.css
    - jquery.magnific-popup.js
  - jquery-validator
    - jquery.validator.js
  - nice-select
    - nice-select.css
    - jquery.nice-select.js
  - odometer
    - odometer.min.css
    - odometer.min.min.js
  - slick-slider
    - slick.css
    - slick.min.js
  - tilt
    - tilt-jquery.js
  - wow
    - wow.js
html/assets/mail - Contact form
- contact.php (Mail Sent Script)

HTML Structure

Educate follows a simple and easy to customize coding structure. Here is the sample from index-1.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Educate HTML5 Template">
    <title> Educate || Html 5 Template For Education & LMS </title>

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/media/favicon.png">

    <!-- All CSS files-->
    <link rel="stylesheet" href="assets/vendor/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="assets/vendor/fontawesome/font-awesome.css">
    <link rel="stylesheet" href="assets/vendor/slickslider/slick.css">
    <link rel="stylesheet" href="assets/vendor/slick-theme.css">
    <link rel="stylesheet" href="assets/vendor/jquery-magnific-popup/jquery.magnific-popup.css">
    <link rel="stylesheet" href="assets/vendor/animate/animate.min.css">

    <link href="assets/css/app.css" rel="stylesheet">

  </head>
  <body>
    <div> </div>

    <!--  Preloader -->
    <div> </div>

    <!-- Main Wrapper Start -->
    <div>

        <!-- Start Header -->
        <header>

        </header>
        <!-- End Header-->

        <!-- Page Sections -->
        <section> 
        </section>
        <!-- End Page Sections -->

        <!-- Star Footer -->
        <footer>
        </footer>
        <!-- End Footer -->

    </div>
    <!-- Main Wrapper End -->

    <!-- Jquery Js -->
    <script src="assets/vendor/bootstrap/bootstrap.min.js"></script>
    <script src="assets/vendor/jquery/jquery-3.6.3.min.js"></script>
    <script src="assets/vendor/slickslider/slick.min.js"></script>
    <script src="assets/vendor/jquery-appear/jquery-appear.js"></script>
    <script src="assets/vendor/vendor/countdown/jquery.countdown.min.js"></script>
    <script src="assets/vendor/vendor/assets/vendor/jquery-validator/jquery-validator.js"></script>
    <script src="assets/vendor/jquery-magnific-popup/jquery.magnific-popup.min.js"></script>
    <script src="assets/vendor/vendor//tilt/tilt.jquery.js"></script>
    <script src="assets/vendor/vendor/wow/wow.js"></script>

    <!-- Site Scripts -->
    <script src="assets/js/app.js"></script>

  </body>
</html>

Customization

The Educate HTML5 template is fully customizable, allowing you to tailor the design to your needs. Here are some tips to help you get started:

1. Install Sass:

1. Educate is built with sass you will need to install SASS on your machine follow instruction from this link:

https://sass-lang.com/install

2. Run Watch Command to compile:

After the successful installation you will need to run following command using CMD prompt on main containing folder 'html':

sass --watch assets/sass:assets/css

After these two steps now you are good to go for style changing!

Here are general changing details with screenshots to help you go through!

How to change Font:

Educate uses 'Inter' and 'Courgette' free fonts from google fonts

Got to 'html/assets/sass/app.scss' file and change the following line:

How to change favicon

You will find this line in head of all html files. Favicon image available in 'html/assets/media'

How to change logo

This example is from index-1.html. Logo available in 'html/assets/media'

How to change page title

How to Change Banner Text

This example is from index-1.html

How to control Slick Slider

Navigate to 'html/assets/js/app.js' you will find this.

How to Add/Remove CSS

Add or remove css from head tag of every html page

How to Add/Remove JS

Add or remove js near to body end tag of every html page

How to change contact form email

Navigate to 'html/assets/mail/contact.php' file

Support

We are here for you

If you encounter any issues with the template or have any questions, please don't hesitate to contact us.

Credits

We would like to take a moment to express our gratitude to those who have contributed to the development of the Educate theme, making it a truly exceptional product for our valued users. We extend our heartfelt thanks to:

Images and video

JS Libraries

CSS & Fonts

Conclusion

We hope this documentation has helped you set up and customize your new website with ease. Thank you for choosing the Educate HTML5 template and we wish you all the best with your online presence.

Educate - Html 5 Template For Education & LMS