Teacher Landing Page - Documentation

# Teacher Landing Page

## Documentation

- Created: 16 February 14
- Latest Update: 10 July 15
- By: Coralix Themes

### TIPS

USE FIREBUG or Chrome DEVELOPER TOOLS!

I am not going to tell you about when i discovered this great tool, or necessarily why i like it and so on. I'm actually going to push you into using it :) I mean it, you can't be a serious developer unless you're using it.

Scenarios:

- You want to change the size/color/etc of a certain font and search into 3 stylesheets with 1000 lines each and you can find that damn rule which contains the property
- You want to get rid of an ugly space somewhere
- Some block has some absolute position and overlays another block
- You want to inspect an element to see if it has some sort of margin padding etc.
- And etc. etc.

Mainly (for me), Firebug is about tracking the css code and to debug a website seeing the actual final (generated code). This tool is about productivity, you want to make things quicker - you should have it; you want to make things better - you should have it; you want to learn more and more - YOU SHOULD HAVE IT.

Now, Firebug is made for Mozilla Firefox, you can find it here

For those of you who are using different browsers you already have some builtin tools: Chrome / Safari / Opera/Internet Explorer

Instead of making huge tutorials about Firebug here, i will point you some great links so you can easily learn it:

- Introduction to CSS editing using Firebug
- Firebug tutorial - Inspect HTML and CSS
- 10 Reasons Why You Should Be Using Firebug

Please ENJOY!

### Template Installation

You can view this template in any web browser from your desktop computer. Because the files are written in HTML, you do not need an internet connection in order to display or edit the template.

All of the HTML files are given a descriptive name to make it easier to distingish what each file will display.

#### Upload to The Server

1. It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.
2. Select /html folder and then choose the layout you want. After you choose, there will have several files with the extension labeled .html. This is where all your content will. In addition to .html you should see a file labeled .css. .css files are going to be the files that will tell the .html how to to be styled. CSS is simply a way to take text, images, and other elements and change the look of them. It's very important to keep the .css file with the HTML or the HTML will not look how the design is meant to look. Along with the HTML and CSS files, you will also have three additional folders to upload; css, images, and js.
3. Start your FTP client (I persoanlly use Filezilla which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.

4. Locate the domain folder you wish to upload your template files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .js into your FTP client.

5. Once the files are done uploading, you can try access your website via browser.

### Files Structure

Within the download you will find the following file structure, logically grouping common assets. When you open the folder of the Template, you will see something like this:

    html
    	L-- css
    	L-- js
    	L-- font
    	L-- img
    	L-- index.html

### HTML Structure

In this template I used as a framework: BOOTSTRAP Framework. You can take a look here and see it´s awesome feature in action

I mostly kept the generic styles, resets & grid.

So as a short description, the grid is composed by 12 columns, named like "col-*-1", "col-*-2", "col-*-3"...."col-*-12". The span div's should be placed in rows and the rows in a container.

A basic layout of the grids look like:

    <div class="container">
        <div class="row">
            <div class="col-*-5"> 5 Columns </div>
            <div class="col-*-3"> 3 Columns </div>
            <div class="col-*-4"> 4 Columns </div>
            <div class="col-*-13">
              <div class="row">
                <div class="col-*-6"> 6 columns  </div>
                <div class="col-*-6"> 6 columns  </div>
              </div>
            </div>
        </div>
    </div>

### CSS Files and Structure

I am using several CSS files in this template

As you can see , there are several css files used by the template.

Files:

    	html
    	L-- css/
            ¦   +-- animate.css
            ¦   +-- bootstrap.min.css
            ¦   +-- component.css
            ¦   +-- media-queries.css
            ¦   +-- style.css

### Javascript Files

This template use several JS files.

The custom js for this template is called: scripts.js and each script has a Comment title

### Template Edition

To edit the images we use Photoshop and to the code we use Sublime text

To edit the styles go to styles.css

To edit the text open each html file with your code editor and edit the text there.

To edit the images go to img folder and open the image with your image editor.

To get the form information into your email you just have to replace the demo email address.

### Form Edition

### PSD included

There are 2 psd files, one for mobile and another for desktop. Edit the files in Photoshop.

### PSD layers organization

### See our Public Collections on Themeforest

We have more Fitness and Sport templates, see them all:

### Sources and Credits

#### Images

- Photodune

#### Mockups

- Browser Mock-up Frames - Free Download
- Chrome Browser PSD Download
- Layout Wrapper flat edition free
- Flat Psd Browsers Set
- Free Responsive Showcase Psd

#### Icons

- Entypo - Icon fonts

#### Code

- Boostrap 3 Framework - All the Documentation is there
- Jquery
- CSS Animations - All the Documentation is there

#### Fonts

### If you like our theme please do not forget to rate it!

### Do you need help?

Once again, thank you so much for purchasing this theme.

We put a lot of time into this project. Nevertheless some bugs could appear after the release.

#### Steps

1. View Articles
2. Submit a Ticket
3. Complete the form
4. Select the category of your item
5. Write your question, with url to your site, screenshots, video, all you need to show us the problem.
6. Send!

### Support