Nasrul Hazim Bin Mohamad

Training: Mobile Apps Development with Ionic Framework – Batch 1

Apr
10

Registration Open Now!

Please register at Mobile Apps Development with Ionic Framework

Course Details

Date: 24th April 2016

Location: http://bit.ly/cc-training-location

Fee: RM 100

Syllabus Details

Introduction

Level 0
Installation
– NodeJS: https://nodejs.org/en/ (need to be done before coming to the class)
– Ionic: Just run step 1 at http://ionicframework.com/getting-started/ (need to be done before coming to the class)

Level 1
Ionic Creator
– Sign Up (need to be done before coming to the class)
– Creating Project
– Export Project

Level 2
Development
– Using Google Chrome Developer Tools
– app.js
– route.js
– controller.js
– Templates

Level 3
– ngCordova (Geo Location & Camera)
– services.js (Factory & Service)

Level 4
– Preview App on Device using Ionic View app (need to be done before coming to the class)

HTML5 & CSS3: Sticky Footer

Oct
27
Sticky Footer

Sticky Footer

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>kklw</title>
    <link rel="stylesheet" href="./embed/bootstrap/default/bootstrap.min.css" />
    <link rel="stylesheet" href="./embed/bootstrap/fonts/font-awesome.min.css" />
</head>

<body>

<div id="wrapper">

<header></header>


<div id="content"></div>


<div id="footer"></div>

    </div>

</body>

</html>
div#wrapper{
  min-height:100%;
  position:relative;
  background-color:blue;
}

body{
  padding:0;
  height:100%;
  background-color:grey;
}

div#content{
  padding-bottom:200px;
}

div#footer{
  width:100%;
  height:100px;
  position:absolute;
  bottom:0;
  left:0;
  background-color:black;
}

header{
  width:100%;
  min-height:200px;
  background-color:red;
}

html{
  height:100%;
  margin:0;
}

Source code: <a href=”https://github.com/nasrulhazim/bootstrap-studio-samples/tree/master/sticky-footer”>Sticky Footer</a>

Bootstrap Studio: Demos

Oct
26

Bootstrap Studio, is a powerful web design tool for creating responsive websites using the Bootstrap framework.

Here are some screen shots that I have when working with it. An awesome desktop application, recommended for frond-end developer, reducing time spent for front-end development.

Carousel

Carousel

Columns Sizing

Columns Sizing

Options for Columns

Options for Columns

CSS Panel

Similar to Chrome Developer Tools CSS Panel

For Dekstop

For Dekstop

The Files

The Files

The Files

The Files

For Desktop

For Desktop

For Mobile

For Mobile

Source Code

Clean Source Code Generated

Here are some samples that I’m able to create with Bootstrap Studios. Hope you guys enjoy it.

Source code available here

  1. Carousel (component available in BS 1.0.9)
  2. Simple Login

Here are the summary from my experience using Bootstrap Studio:

      Reducing time spent for front-end development
      Doing two job at one time – design & write codes
      Lightweight and easy-going UI

Anyways, before you consider to buy Bootstrap Studio, please make sure that you’re understand how HTML5, CSS3, JavaScript works, and of course Twitter Bootstrap itself, else, you might get confusing or too dependent with the tool.

Happy Bootstrapping!

Training: Web Mobile Application Development (Basic / Intermediate) – INTIM – August 2015

Aug
16

Training: Web Mobile Application Development (Basic / Intermediate)

Location: INTAN Kampus Wilayah Timur (INTIM), Kemaman, Terengganu

Date: 17th – 20th August 2015

Slide: http://bit.ly/training-web-mobile-application-development

Training Materials:

  1. Web Mobile Application Starter Kit – https://bit.ly/training-mobile-app-starter-kit
  2. Basic Android Configuration – https://bit.ly/training-mobile-app-android-config
  3. API Template – https://bit.ly/training-api-template

Important Articles:

  1. HTTP Methods for Restful Services – http://bit.ly/htpp-nethods-for-restful-services
  2. Android Configuration – http://bit.ly/android-config-xml
  3. Chrome Device Mode – http://bit.ly/chrome-device-mode

 

Training – PHP & MySQL: Basic to Advanced

Jan
02

Foundation: Startup

May
01

Download Foundation and Foundation Icon.

&lt;!doctype html&gt;
&lt;html class=&quot;no-js&quot; lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
    &lt;title&gt;Foundation | Welcome&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/foundation.css&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/foundation-icons.css&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/learn.css&quot; /&gt;&lt;!-- Your own set CSS --&gt;
    &lt;script src=&quot;js/vendor/modernizr.js&quot;&gt;&lt;/script&gt;
    &lt;!--[if lte IE 8]&gt;&lt;script src=&quot;http://html5shiv.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;&lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!-- Layout Start --&gt;
    &lt;!-- PUT YOUR LAYOUT, CONTENT HERE --&gt;
    &lt;!-- Layout End --&gt;
    &lt;script src=&quot;js/vendor/jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/foundation.min.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
      $(document).foundation();
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

UI – Bootstrap

Jan
30

An easy way to setup a nice & clean UI, and responsive UI.

Bootsrap use HTML5 & CSS3. Please ensure you have the following:

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  ...
&lt;/html&gt;

Include the following in head

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;link href=&quot;css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;
&lt;link href=&quot;css/bootstrap-responsive.min.css&quot; rel=&quot;stylesheet&quot;&gt;

Include the following at the bottom – before end of body tag – to make sure the page load fast.

&lt;!-- I use jQuery 1.9.0 --&gt;
&lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

Here is the screen shot of my test. 🙂

Bootstrap Test

Bootstrap Test