Category: HTML5 / CSS3

Emmet LiveStyle – live CSS style editing in Chrome via Sublime Text [highly recommended]

This is one of the best live css extension to use with sublime text editor, live css preview and more.
LiveStyle — the first bi-directional real-time edit tool for CSS, LESS and SCSS.
Instantly updates your web-page stylesheet while you edit CSS, LESS or SCSS file in your text editor. No file saving or page reloading: pure real-time experience! And this is the first tool that transfers updates from DevTools back into source code the right way.

Includes Remote View: creates publicly-available URL (aka “reverse tunnel”) to test your local web-sites on any internet-connect device or services like BrowserStack.

 

 

 

Remove all the rounded corners in Bootstrap (restore to the default corner)

* {
  border-radius: 0 !important;
}

 

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

variables.less

@border-radius-base:        0px;
@border-radius-large:       0px;
@border-radius-small:       0px;

In bootstrap 4 if you are compiling it you can disable radius alltogether in the _custom.scss file:

$enable-rounded: false;

Source: http://stackoverflow.com/questions/9742166/getting-rid-of-all-the-rounded-corners-in-twitter-bootstrap

CSS Vertical Alignment – Bootstrap Bottom Align within Row

.row {
position: relative;
}
.mainBox {
border: solid thin black;
}

.buttonBox {
position: absolute;
bottom:0;
right:0;
}

Heading

Sub Heading

.buttonBox will make the div with the button align to the bottom of the container

Source: http://jsfiddle.net/6pYhx/3/

 

A custom Google Map Prototype based on Google Map API v3 / BootStrap / Custom tiles overlay

This custom Google Map prototype demonstrates my capability of building highly customized interactive maps based on Google Map API with custom tiles (map slices from a static image).

Prototype Link (new window)

Features of the custom Google Map prototype:

  • Google Map API to integrate map functions like map Zoom/Drag
  • Google Map API v3 to integrate custom markers and polygons
  • Static Deakin Burwood Campus map to provide custom tiles overlay
  • BootStrap to provide mobile friendly interface
  • jQuery to provide interactivity such as popup info box
  • HTML5

Software Used

  • Adobe Dreamweaver CC for editing HTML and JavaScript
  • Adobe Illustrator CC for editing and slicing the static map
  • Map Tiler for creating custom tiles overlay

 

Custom Google Map Prototype screenshots:

Map with custom marker and popup info box

Google Map API custom tiles and polygon

Google Map API customer message box

Path Finder – SIT302 Team Project – 2015 iAwards Nomination

This is the proof that I'm an award-winning IT pro!   😀

Project introduction

PathFinder is a peer-to-peer web-based guide featuring video tutorials, an online interactive map, timetables to assist in your scheduling and an incredible game experience – all in the palm of your hand. Our development team, in conjunction with the IT staff, have taken the complexity out of finding information by designing a simple, yet engaging experience for all IT students.

Project Intro Video

 

Project site URL

http://project-survival.w3c-lab.com/

Technology Used
  • Highly customized WordPress theme
  • Over 30+ WordPress plugins
  • Flash for interactive map
  • Adobe Premiere CC
  • Adobe After Effects CC
  • YouTube for video hosting
  • HTML5 for interactive game
My role and contributions

I was the team leader (of a 7-member team), system analyst and web developer.

My major tasks and contributions for the project were:

  • Task planning and allocation
  • Meeting arrangement for both the team and stakeholders and supervisors
  • Initial project analysis report
  • Developed the base of the system
  • Web hosting management / WP Installation and configuration / Theme customization
  • Over 300+ pages of documentation produced

Sample of project Gantt chart

Achievement
2015 iAwards Nomination (Team) - iAwards Link (new window)

The iAwards honours companies at the cutting edge of technology innovation and recognises the achievements of home-grown Australian innovators.

2015 Deakin University School of IT Project Award (Personal Award)

Achieved the highest mark overall for SIT302 Project

2015 Deakin University School of IT Project Award