[2015/05/23] MaGIC Academy: Intermediate HTML & CSS

Event Date
Sat May 23, 2015

Event Time
9:45 AM - 5:30 PM MYT

Event Venue
Malaysian Global Innovation and Creativity Centre

Venue Address
MaGIC, Block 3730 Persiaran APEC, 63000 Cyberjaya


Background Information
If you’re ready to take your web development skill to the next level, then let’s get started learning the essential building block in modern web development.

Learn how to create your own mobile first website from scratch with Bootstrap, the mobile-friendly framework from Twitter. Finally, learn to style it all with LESS and Sass; two great tools for building CSS, using features that you’ve always wished that CSS had built in. We’ll even see how to use functions, and mathematical operations in CSS to create advanced visual effects.

Key Takeaways

• Appreciate the beauty of CSS design
• Mobile First
• Media Query
• Responsive design
• Bootstrap framework
• Getting started
• Grid
• CSS
• Components
• Javascript
• Themes & Templates
• SASS
• Variables
• Datatypes
• Operators
• Built-In functions
• Mixins
• Directives
• Nested selectors
• Preprocessor options
• Package Managers
• Architecture
• Static Site Generator (Middleman)

Pre - Requisite & Planning
Participants must already have working knowledge of basic HTML5, CSS & Javascript

• Participants must already have working knowledge of basic HTML5, CSS & Javascript
• Sign up for an account on Github
• Sign up for an account on Cloud 9
• Latest Firefox & Chrome browser with developer tool plugins
• To ensure participants benefit the most from this workshop, please ensure you are able understand the content and can complete the following online tutorial before attending (http://www.codecademy.com/tracks/web)

Useful References (and recommended readings)

• http://www.csszengarden.com/
• http://www.codecademy.com/en/tracks/web
• http://codepen.io/
• http://middlemanapp.com
• https://c9.io/
• https://github.com/
• http://getbootstrap.com/
• http://bower.io/
• Microsoft Virtual Academy- HTML5 & CSS3 Fundamentals

Agenda

• 10.00am -1.00pm : Workshop starts
• 1.00pm - 2.00pm : Lunch
• 2.00pm - 4.00pm : Workshop continues
• 4.00pm - 4.15pm : Tea
• 4.15pm - 5.30pm : Workshop continues

About the Speaker

Tan Yee Siang:
Lead Developer in MaGIC and also Guest lecturer from The One Academy, his previous projects inluding Iskandar Malaysia Website, BNM Mobile Applications, Sunway University Student Portal.

Imran Ismail:
One of MaGIC’s homebred developer, have recently launched the new MaGIC website.

Organizer

Malaysian Global Innovation and Creativity Centre
http://www.mymagic.my/
Building Great Entrepreneurs.

Note (from Kirby510's Website Blog)
01a. Presentation Slides (Tan Yee Siang) [3MB]
01b. Presentation Slides (Imran Ismail) [491KB]

02a. ScITE 3.5.5 (Windows) [2MB]
02b. Pencil 2.0.5 (Windows) [23MB]

03. Materials for the Workshop
intermediate-html-css [54MB]
workshop-intermediate-html-css [52KB]

04. Recommended Website
Bootstrap
Font Awesome
Bootstrap 3 Lightbox
Corona Labs
BAASBOX
Cloud9
[Clone from URL: https://github.com/imranismail/workshop-intermediate-html-css.git, and then run these commands on the terminal: git checkout starter, bower install, bundle install, middleman server -p $PORT]
The Sass Way