Responsive Web Design Using Bootstrap 3 Training

Topic 1. Introduction to Responsive Web Design

• What is Responsive Web Design
• Demo Responsive Websites
• Responsive Design Strategy
• Install Sublime Text and Google Chrome
• Testing website with Chrome Emulator

Topic 2. Preparing HTML Structure for homepage

• Creating Homepage Sections
• Creating the Hero Banner with background and info text markup
• Importing Google Fonts for styles
• Styling the Homepage Hero Banner
• Adding background image to the Hero Banner

Topic 3. Media Queries

• Understanding the before/after impact of adding Meta Viewport tag
• Understanding Fixed vs Fluid Layouts
• Understanding Media Queries
• Adding Media Query breakpoints for mobile and tablet
• Adding custom styles for the mobile breakpoint 
• Adding custom styles for the tablet breakpoint

Topic 4. Phone Sections

• Creating the phone specs section markup
• Styling the specs section using fluid grid
• Using online sprite creator tool
• Using CSS Sprite for displaying icons in the spec section
• Adding clearfix and other utility classes
• Adding custom styles for the mobile breakpoint 
• Adding custom styles for the tablet breakpoint

Topic 5 - Gallery Section

• Creating the gallery images markup
• Styling the image gallery using Fluid Grid layout
• Fixing layout with clearfix
• Adding custom styles for the mobile breakpoint 
• Adding custom styles for the tablet breakpoint

Topic 6 - Phone Display and Performance

• Creating the phone display and performance section markup
• Styling the phone details section and adding background banner
• Styling the performance section
• Styling the performance metrics using Fluid Grid layout
• Styling for the mobile breakpoint 
• Styling for the tablet breakpoint

Topic 7 - Phone Feature and Tabular Data

• Creating the markup for phone features section with tabular data
• Adding styles for the Phone Features tabular data
• Updating the feature table layout for mobile breakpoint
• Understanding Mobile First Designs

Topic 8. Create Responsive Layout for Print

• Strategy and Media Query for Printing 
• Setting up styles for printing
• Styling the gallery and phone info section for Print
• Styling tab layout to single page layout for print

Prerequisite:

• HTML5 and CSS3 Essential Training

HRDF Funding

Please refer to this video https://youtu.be/Kzpd-V1F9Xs

1-     HRD Corp Grant Helper

How to submit grant applications for HRD Corp Claimable Courses

2-     Employers are required to apply for the grant at least one week before training commences.

Employers must submit their applications with supporting documents, including invoices/quotations, trainer profiles, training schedule and course content.

3-     First, Login to Employer’s e-TRIS account -https://etris.hrdcorp.gov.my

Second, Click Application

4-     Click Grant on the left side under Applications

5-     Click Apply Grant on the left side under Applications

6-     Click Apply

7-     Choose a Scheme Code and select HRD Corp Claimable Courses: Skim Bantuan Latihan Khas. Then, click Apply

8-     Scheme Code represents all types of training that suit the requirements provided by HRD Corp. Below are the list of schemes offered by HRD Corp:

9-     Select your Immediate Officer and click Next

10-  Select a Training Provider, then click Next

11-  Please select a training programme from the list, then key in all the required details and click Next

Select your desired training programme.

Give an explanation on why the participant is required to attend the training. E.g., related to their tasks/ career development, etc.

Explain the background and objective of this training.

Select a relevant focus area. For Employer-Specific Courses, select ‘Not Applicable’.

12-  If the training programme is a micro-credential programme, you are required to complete these 3 fields. Save and click Next

Insert MiCAS Application number

13-  Based on the nine (9) pillars listed below, HRD Corp Focus Area Courses are closely tied to support government initiatives towards nation building. As such, courses offered through the HRD Corp Focus Areas are designed to provide the workforce with skills required for current and future demands. Details of the focus areas are as follows:

14-  Please select a Course Title and Type of Training

15-  Select the correct type of training according to the actual type of training, or as mentioned in the training brochure:

16-  Please key in the Training Location and click Next

17-  Please select the Level of Certification and click Next

18-  Please follow the instructions and key in trainee details

19-  Click Add Batch, then click Save

20-  Click Add Trainee Details

21-  Please key in all the required details, then click Add

22-  Click Add if there are more participants. Once done, click Save

23-  Click Next

24-  Please key in the course fees and allowance details, then click Save

25-  Estimated cost includes the course fees/external trainer fees, allowances, and consumable training materials. Please comply with the HRD Corp Allowable Cost Matrix.

26-  Select Upfront Payment to Training Provider and key in the percentage from 0% to 30%. Then, click Save and Next

27-  Complete the declaration form and select a desired officer

28-  Add all the required documents, then click Add Attachment. Then, click Save and Submit Application

29-  Once the New Grant Application is successfully submitted, the Grant Officer will evaluate the application accordingly. The application may be queried if additional information is required.

The application status will be updated via the employer’s dashboard, email, and the e-TRiS inbox.

• Web Designer
• Front-end Developer
• UI/UX Designer
• Web Developer
• Full Stack Developer
• Graphic Designer (focusing on web)
• CMS Developer
• E-commerce Website Designer
• Digital Product Designer
• Website Theme Developer
• Prototype Designer
• Mobile App Designer (looking for web integrations)
• Interactive Designer
• Landing Page Designer
• Digital Marketing Specialist (with a design focus)

Rabinath Kulasegaram: Rabinath Kulasegaram has an extensive knowledge and over 16 years of work experience in media field, such as Digital Graphics, Digital Painting, 2D Animation, 3D Modelling, Character animation, VFX effects, 3D Match move, Fluids, Dynamics effects, particles, Multimedia application development and Web Development.

He has extensive knowledge in lecturing creative media, Interactive web, multimedia, 3D Modelling, 3D animation, VFX and digital film making. He is now managing his own post-production company.

He is constantly researching new CGI techniques and improving his knowledge and skills to use the latest CGI techniques with an efficient production timeline on projects.

Jacob Arlington: Jacob Arlington is the CEO of Jacarlin Web Solutions, a web design and ecommerce solutions company.

He provides consultation, design, strategy formulation, and implementation of internet related systems for multinational corporations, large businesses, government agencies, small/medium enterprises, as well as non-profit organizations.

Mamun Abdul Mannan: Mamun Abdul Mannan is a coder, designer, teacher, and incurable travel lover. He is passionate about the intersection of code and design. His aim is to provide simple, intelligent and emotionally appealing solutions to complex requirements in the field of Professional in Corporate Branding, Graphic designing, Logos, Brochures, Posters, Banner, Web designing, Web developing, Web Application and so on.

Soroosh Ansarimehr: Soroosh Ansarimehr is a Ph.D. student in Software engineering at University Putra Malaysia (UPM) and he has seven years of experience as a web developer. Building quality websites and applications with NodeJs, Angular, and Ionic. Great experience in Asp MVC with C#. Project management and training new programmers are two positions that he is fully fit in. He achieved his Master of Computer Architecture at Shiraz University after he finished his Bachelor of Applied Mathematics at Shiraz University. Soroosh developed "Inify", a startup project to manage and sell Instagram goods for Iranian sellers. Also, he developed "ePay", a startup project on the E-commerce field. This project provides virtual currency for the users in which they can transfer money throw their carrier code or QRcode they have given in the application. Moreover developed "eJob", an employee attendance tracker. This tracker works based on employee GPS location and the QR-code at the entrance of his/her company. Successfully developed an inventory management application that improved warehouse productivity. Training new recruitments. He was the founder of the "Iran Audio Guide", a startup project for tourism in Iran. And successfully developed 100+ IT projects within 7 years.