Coding Fun Html Creating a very simple app with HTML, CSS & Javascript – Part 1/3 – Onsen UI

Creating a very simple app with HTML, CSS & Javascript – Part 1/3 – Onsen UI





A three-part tutorial on how to create a mobile app using HTML, CSS & JavaScript in the simplest way I could think of.

Blog post @

Tags: , , , , , , , , , ,

31 thoughts on “Creating a very simple app with HTML, CSS & Javascript – Part 1/3 – Onsen UI”

  1. Hello, nice tutorial. I have one problem, is it posible from onsen ui build to APK? how to do it?

  2. Tom Whalen says:

    "shoaping leest" πŸ˜€

  3. do you have some video to help me how to mapping using html

  4. Rashan Kapra says:

    Sir the link mentioned above http://www.starwave.nl/ahrnuld/2017/0... is not working

  5. please give me the coding…

  6. DUDE SURAT says:

    how to get the zip file pls give me the link

  7. Skynet says:

    I'll be baaaaack

  8. this is great… thank you very much…

  9. Luis Cantero says:

    Did I need to install java or JDK in my PC to make it work? Is not doing anything!!!

  10. sallam my name is ziaurahman from Afghanistan i want to from you to create complete application A to Z in phongap Thanks

  11. help plez . not downloading distribution package ? what to do now ?

  12. how to select item and show the details in new page? anyone knows? i'm new.

  13. Wolf Man says:

    what's the name of program u use to code?

  14. I couldn't follow the videos. Everything is changed =/

  15. Moh. Ali K. says:

    Great tutorial.
    Here is the link to the ZIP file in case you can't find it: https://github.com/OnsenUI/OnsenUI-dist/releases

  16. M AHMAD says:

    Can i upload this app to play store

  17. funny tech says:

    can you please promote my app tp your finds ??

  18. Can i put an interactive google maps on this software? I hope you can reply asap… πŸ™‚

  19. teriyakov says:

    "Hello dis is ARNUUULD"……….subscribed πŸ™‚

  20. Akbar Abdi says:

    I just can say great. thanks, thanks a lot. You are the best lecturer πŸ™‚

  21. tevfik elmas says:

    Thank you for your video. I have question about calling any java method (not java script) over html code in activity. For example when i press any button in html code,how can i trigger any java method in activity?

  22. yusuf Sunset says:

    Thank You Good Explain

  23. hellow sir. can you teach us how to build a VPN app for android ? i want to practice how to create vpn app for android so i can put my server then i can use it easy anywhere i go with my own vpn app. thank u for this video. now i got a little bit idea. thank u so much.

  24. Almas says:

    Thank you. Very nice tutorial.

  25. Hello. Brother. How I can make an text messaging app for IOS AND ANDROID using onsen framework. cordially thanks. learn us.

  26. Angel Isma says:

    subscribed And Like for you veeeeeeeeeeeeeeeeeeeeery thank you

  27. Hello Brother, it possible to creating a theme for IOS and android with onsen UI. like html5 css3 and js using documentation of learning.

  28. when i click button it doesn't open settings whats the problem?<!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
    <script src="lib/onsen/js/onsenui.js"></script>
    </head>

    <body>
    <ons-splitter>
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
    <ons-list>
    <ons-list-item onclick="fn.load('home.html')" tappable>
    Home
    </ons-list-item>
    <ons-list-item onclick="fn.load('add.html')" tappable>
    Settings
    </ons-list-item>
    </ons-list>
    </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
    </ons-splitter>

    <ons-template id="home.html">
    <ons-page>
    <ons-toolbar>
    <div class="left">
    <ons-toolbar-button onclick="fn.open()">
    <ons-icon icon="md-menu"></ons-icon>
    </ons-toolbar-button>
    </div>
    <div class="center">
    TODAYS WINNING TICKET
    </div>
    </ons-toolbar>
    <ons-list>

    <ons-list-item>TICKET 1</ons-list-item>
    <ons-list-item>TICKET 2</ons-list-item>
    <ons-list-item>TICKET 3</ons-list-item>
    <ons-list-item>TICKET 4</ons-list-item>
    </ons-list>
    <ons-fab position="bottom right" onclick="fn.load('add.html')">
    <ons-icon icon="md-plus"></ons-icon>

    </ons-fab>
    </ons-page>
    </ons-template>

    <ons-template id="add.html">
    <ons-page>
    <ons-toolbar>
    <div class="left">
    <ons-toolbar-button onclick="fn.open()">
    <ons-icon icon="md-menu"></ons-icon>
    </ons-toolbar-button>
    </div>
    <div class="center">
    Settings
    </div>
    </ons-toolbar>
    </ons-page>
    </ons-template>

    <script src="java.js"></script>
    </body>
    </html>

    thats my code

  29. excelent tutorial! … but it's possible use the camera plugin ot other pluginΒΏ? I would like to connect wit an sql server πŸ‘‰πŸ‘ˆ

  30. Thank you so much for a great tutorial!! πŸ™‚ πŸ‘Š

  31. J Shelfwood says:

    Great introduction to the basics, I would advise you to use the "Open Folder" feature in VS Code to improve your workflow though.

Leave a Reply

Your email address will not be published. Required fields are marked *