5 Days Web Development Specialization

Day 1
Topic 1 - Basic Web Design with HTML and CSS

Topic 1.1: Create Web Content with HTML5

• HTML5 Web Page Structure
• Basic Tags
• Meta Tags
• Image Tags
• Table Tags
• List Tags
• HTML Attributes

Topic 1.2: Manage Web Navigation and Form

• HTML Blocks
• HTML Layout
• Manage Web Links
• Manage HTML Forms

Topic 3: Manage Multimedia Content

• Embed Image and Video
• Media Tags
• Semantics Tags

Topic 4. Website Styling with CSS3

• CSS3 Syntax
• CSS3 Selectors
• CSS3 Properties
• CSS3 Pseudo Class
• Web Fonts
• CSS Layout
• Media Queries and Responsive Websites

Day 2
Topic 2 - Interactive Web Design with Javascript

Topic 2.1 Basic Javascript Programming

• Overview of Javascript Programming and Syntax
• Data Types & Variables
• Control Structures
• Loop

Topic 2.2 Javascript Functions

• Function Syntax
• Javascript Built In Functions
• Potential Javascript Security Issues

Topic 2.3: DOM

• DOM Elements and Nodes
• Access and Modify DOM Elements
• DOM Events

Topic 2.4. Error Handling and Debugging

• Error Handling
• Debugging

Topic 2.5. Object Oriented Programming

• Javascript Classes and Objects
• Function Calls and Apply

Topic 2.6. Javascript API

• REST API
• HTTP Request and Response
• Forms APIs

Day 3
Topic 3 Responsive Web Desgin with Bootstrap

Topic 3.1. Overview of Responsive Web Interface Design and Bootstrap

• What is Responsive Web Design?
• Introduction to Bootstrap Framework
• Create Responsive Web Layout using Bootstrap

Topic 3.2. Components and Graphics Content

• Create Basic Bootstrap Components
• Design GUI with Style and Content Elements

Topic 3.3. Interactivity and Responsiveness

• Create Interactive Components
• Apply Bootstrap Utilities
• Evaluate Web Interface Interactivity and Responsiveness
• Passing Data via Props

Topic 3.4 Single Page Design

• Web Design Requirement for Single Page
• Implement Single Page Design

Day 4
Topic 4 UI Development with React for Beginners

Topic 4.1 Get Started on React JS

• Introduction to React JS
• Adding React to a Website
• Create a New React App

Topic 4.2 Introducing JSX and Rendering Elements

• Introduction to JSX
• Rendering an Element into the DOM
• Updating the Rendered Element
• Securities Concerns

Topic 4.3 Components and Props

• Introduction to React Components?
• Function and Class Components
• Rendering a Component
• Composing Components
• Import/Export Components
• Passing Data via Props

Day 5
Topic 5 React for Single Page Application

Topic 5.1 State and Lifecycle

• Adding Local State to a Component
• Component Lifecycle

Topic 5.2 Handling Events

• Event Binding
• Passing Arguments to Event Handlers

Topic 5.3 Single Page Application Using React Router

• Single Page Application
• Installing React Router
• Set up React Router

Prerequisite

The learner must meet the minimum requirement below :

• Read, write, speak and understand English

Target Audience

• NSF
• Full Time Students
• Data Analysts

Software Requirement

This course will use Google Colab for training. Please ensure you have a Google account.

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 Developers
• Web Designers
• UI Designers
• Mobile Apps Developers
• Software Project Managers

Mohammad Reza Aminian: Mohammad Reza Aminian is a software engineer and PhD candidate in field of Artificial Intelligence with more than 4 years experience of teaching web technologies and scripting languages. skilled in PHP, JavaScript, system design, Laravel, and Vue.js frameworks. He has been involved in the development and implementation of web-based management systems, web applications and APIs in different organizations and companies.