GithubHelp home page GithubHelp logo

kevinesaa / simple-html-template Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 4.0 1.93 MB

Just clone and edit without settings or extra installations.

License: MIT No Attribution

CSS 0.01% JavaScript 78.82% HTML 5.75% Python 15.42%
starting-template junior-developer webpage website frontend software-architecture css html javascript static-site

simple-html-template's Introduction

You do not know english, look for others languages

simple html template

Just clone and edit without settings or extra installations.

A simple template to create simple statics web pages, which can work without internet, without frameworks and without any server-side applications such as Apache, Nginx or other similar, or at least with the minimum of them.

Also, this is made for those who are just starting out, they may have something to start with a structured project.

contents

Drag and drop the index.html from the root directory to the web browser.

root 
├── buildTasks
├── dist
├── docs
│   ├── _assets
│   └── es
│       └── _assets
├── src
│   ├── __libs
│   │   ├── lib1
│   │   └── lib2
│   ├── _commons
│   │   ├── css
│   │   ├── fonts
│   │   ├── img
│   │   └── js
│   │       ├── menu
│   │       ├── strings
│   │       │   └── es.js 
│   │       ├── external-routes.js
│   │       ├── images.js
│   │       ├── internal-routes.js
│   │       ├── PageLoader.js
│   │       ├── referencesIds.js
│   │       └── strings.js
│   ├── home
│   │   ├── css
│   │   ├── fonts
│   │   ├── img
│   │   ├── js
│   │   │   ├── menu
│   │   │   ├── strings
│   │   │   │   └── es.js 
│   │   │   ├── external-routes.js
│   │   │   ├── images.js
│   │   │   ├── internal-routes.js
│   │   │   ├── referencesIds.js
│   │   │   └── strings.js
│   │   ├── home.js
│   │   └── index.html 
│   │
│   ├── page1
│   │   ├── css
│   │   ├── fonts
│   │   ├── img
│   │   ├── js
│   │   │   ├── menu
│   │   │   ├── strings
│   │   │   │   └── es.js 
│   │   │   ├── external-routes.js
│   │   │   ├── images.js
│   │   │   ├── internal-routes.js
│   │   │   ├── referencesIds.js
│   │   │   └── strings.js
│   │   ├── page1.js
│   │   └── index.html 
│   │
│   └── page2
│       ├── css
│       ├── fonts
│       ├── img
│       ├── js
│       │   ├── menu
│       │   ├── strings
│       │   │   └── es.js 
│       │   ├── external-routes.js
│       │   ├── images.js
│       │   ├── internal-routes.js
│       │   ├── referencesIds.js
│       │   └── strings.js
│       ├── page2.js
│       └── index.html 
│
├── test
│   ├── buildTasks
│   │   ├── instrument
│   │   └── unit
│   └── src
│       ├── instrument
│       └── unit
├── index.html
└── main-index.js

Application tree details

  • buildTasks: If there are any scripts or other automation artifacts that pre-process the src code or do any other automation task, such as a syntax validator, they should be in this directory.
  • dist: If there is a pre-process that analyzes and modify the src code, the result after pre-process should be in this directory
  • docs: All the files needed to maintain this repository documented.
    • _assets: Common binary files amoung languages, like images, videos, etc. that help to keep documented this repository.
    • _defaultLanguage: Choose the main language of the documentation files and save it in this directory; In this case english it is the default language.
    • language code: If you want to translate the documentation to another language, add a directory and named it following the ISO 639-1 standard. In this case spanish (es) it is used as main example.
      • _assets: If there is some assets from docs/_assets that need to be translate, should be in this directory with the same name.
  • src: The source code and assets of the web site. Ordered in folders separate by features or pages' modules. Check the extended src folder documentation for more details about what contain this folder.
    • __libs: If there are external libraries to run the project, they must be downloaded and saved it in a directory that should be named with the library name; Remember that this project should be work without Internet. Do not forget check the library's license before add it to the project.
    • _commons: The source code and assets that is share amoung two or more features or pages' modules.
    • home: The source code and assets of home page or entry point of the web site.
    • page1: A example of a page module.
  • tests: The source code of the automatation tests to prevent bugs in this repository. As more quality test cases are added, more bugs will be prevented, so check as many expected outputs for different inputs as possible. Run the automatation code after add a new feature or a new fix. Check the extended test folder documentation for more details about what contain this folder.
    • buildTasks: The source code of the automation tests for check that the src's pre-process works as expected.
    • src: The source code of the automation tests for check that the code from the web site works as expected.
  • index.html: If the app need that the home page will be in the root folder, use this file to redirect to real entry point of the web page.
  • main-index.js: This script always have to be in the root directory of the project and have to be add to all the html files, in orden to build the absolute path of internal urls' when is execute it without internet (file:///).

Do you want to help us? Excellent! Take a look at the guidelines to follow to be able to make a pull request to this repository.

All files in this repository are licensed under the MIT No Attribution license. See more license details here.

Why don't you use import in the .js files?

Because it that requires a server-side application, Also, it is a Issue for the type of file:/// URLs. More information about JavaScript's modules

simple-html-template's People

Contributors

kevinesaa avatar

Stargazers

 avatar  avatar

Watchers

 avatar

simple-html-template's Issues

Menu structure

Desing menu objects struture
Make a folder with menus objects files

change between languages

As user of a web page, a need change the language of the web site.

Create a html "select" tag, that change between languages.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.