Web Design Course with JavaScript at MAGES Institute, a 6 weeks part-time course that will teach Front-End Development using JS

1. THE FUTURE STARTS HERE
FRONT END
DEVELOPMENT WITH
JAVASCRIPT
WEB DESIGN COURSE
CODE. CRAFT. CREATE
SUPPORTED BY

2. How Web
Works
How many times a day do you
use the internet and load a
different web page?
In order to be a developer, and especially a web developer—
it's incredibly important to understand how the web works.
From here on out, you are no longer just a user of the internet.
You are a creator of the WEB.

3. Client and Server
So seriously, how does this web address:
https://www.youtube.com/user/AdeleVEVO
Turn into this:

4. The internet operates based on conversations between the client (known as the
browser) and the server (the code running on the server for the web site you’re are
loading).
By typing in that URL user (the client)
is requesting a web page. The server then receives
the request, processes it, and sends a response.
user browser receives that response and shows the
content..
These are the fundamentals of the web. Browsers send requests and servers send responses
Client Server
The
WEB
Request message
Response message

5. Components of a website
Client
The local computer (desktop/laptop) or
device (phone/tablet) the user is
interacting with to access the website.
Server
The remote computer that “physically
houses” all the files (and thus code)
that make up the website.
Database
A sub-component of the remote server,
the database is a large series of data
tables used to store all the dynamic
information generated or used within
the website.
Client Server
WEB Server Data Base
WEB database
interaction
Internet
Internet
Internet

6. The Inner Workings of a Modern Website
User User
Client
computer
Server
computer
Database
Server
computer
Client
computer
Visits URL
Accepts
request
Queries
database
Sends
response
Displays
webpage
Sends
data
Executes
back-end
Generates
request

7. PROGRAM DETAILS

8. FRONT END DEVELOPMENT WITH
JAVASCRIPT
Assessment
1 Hour
30
Hours
5
Hours
F2F lectures
E-learning
Quizzes and
Exercises

9. LEARNING OUTCOME
Identify the suitable method, tool and technique
for designing a web page based on a business
objective
01
Design, implement, test, and evaluate a dynamic
web page by implementing the necessary
algorithmic constructs and techniques
03
Create wireframes and information flow models
for web pages
02

10. TOPICS COVERED
Basic methodologies in Graphical User Interface
(GUI) development
01
Business Requirements – Developing
Websites/Web Apps
03
Architecture of a website, Information Flow,
Effective UI Design for Websites
02
Structure of a Website – Wireframes/Prototypes
04
Creating Static and Dynamic Web Pages using JS
Frameworks
05
Introduction to Unit Testing, Regression
Testing, and Test-driven Development.
06

11. LU1 – Concept Development
FRONT END DEVELOPMENT WITH JAVASCRIPTS
Identify the suitable method, tool and
technique for designing a web page based on
a business objective
01
Information flows in user interface design
03
Assemble a list of functionalities and needs
required
02

12. LU2 – Designing for Web
FRONT END DEVELOPMENT WITH JAVASCRIPTS
01
Create wireframes and information flow models for web pages
02
Key technical components in and supporting a user interface
03
Develop components of user interface prototypes
04
Craft information content and materials for the product user guide

13. TRAINER

14. 8 years of Experience running his own Digital solutions business.
He provided frontend & backend development for website and web applications.
Specialization
• Adobe Photoshop & Illustrator (Graphic Design)
• Frontend Development (HTML/CSS/JS/jQuery/Bootstrap/etc)
• Backend Development (PHP/MySQL/Wordpress/Python/etc)
• Project Management & Planning
• Photography, Photo & Video Editing
Vast On-the-Ground Experience
MENTOR | TRAINER
Manfred Lim Z J
Entrepreneur
CEO/Founder of Pillowseed

15. Student
Testimonials

16. 16
Students’ Project
https://caloricestore.com/
https://jabink.com/
https://readysetcookie.com/
http://minimaleffort.lol/
https://symstak.com/
https://www.scaled.sg
https://shop.abstract.sg
https://www.idvconcepts.asia

17. THE FUTURE STARTS HERE
FRONT END
DEVELOPMENT WITH
JAVASCRIPT
WEB DESIGN COURSE
CODE. CRAFT. CREATE
SUPPORTED BY
THANK YOU