JTMK · Politeknik Balik Pulau

<web> DesignTechnology

Learn to build responsive websites and mobile webapps with HTML, CSS, JavaScript, Bootstrap and jQuery Mobile — through lecture slides, hands-on labs, quizzes and real assessments.

4Chapters

12Lab activities

100Students

3Classes

localhost/webdesign/index.html

<div class="container"> <nav class="navbar">…</nav> <header class="hero"> <div class="row g-3"> <div class="col-md-4"> <div class="col-md-4"> <div class="col-md-4"> </div> </div> // interactivity btn.addEventListener('click', show);

preview · 1280px

WHAT YOU WILL DO

Learn it. Code it. Ship it to a phone.

Every chapter follows the same rhythm, so you always know what comes next.

▤

Lecture Slides

Interactive slide decks with code examples — use arrow keys or swipe on your phone.

⌨

Lab Activities

Step-by-step labs with a live code playground. Run your code and submit it for review.

Chapter Quizzes

10 questions per chapter with instant marking and explanations for every answer.

✓

Assessments

Practical work, case study and problem based assignment — submit and see your marks.

COURSE SYLLABUS · DFK20013

Four chapters, from your first tag to a mobile APK

Aligned with the DPCCE course information (Version 03102023_3, effective Session I 2025/2026).

01</>

Introduction to Web Development and Bootstrap

Understand the technologies behind every website — HTML, CSS, JavaScript and PHP — and why Bootstrap speeds up responsive development. Set up your own local development environment.

1.1Explain the web development technologies
1.2Explain the role of Bootstrap in web development
1.3Construct the development environment

🔒 Login to open

02{ }

HTML and CSS Essentials with Bootstrap

Write well-structured HTML documents, style them with CSS selectors and properties, then build responsive layouts with the Bootstrap grid, content classes, components and responsive utilities.

2.1Perform web page using HTML
2.2Display webpages with Cascading Style Sheet
2.3Construct Bootstrap grid system and responsive design
2.4Construct responsive layouts with Bootstrap's pre-built CSS classes

🔒 Login to open

03JS

JavaScript Fundamentals and Interactivity with Bootstrap

Learn JavaScript variables, data types, operators, conditions, loops, functions and events. Add modals, tooltips, popovers and carousels, and validate forms gracefully with Bootstrap and JavaScript.

3.1Perform JavaScript basic
3.2Construct interactive web elements with Bootstrap
3.3Construct form validation using Bootstrap and JavaScript

🔒 Login to open

04▯

Introduction to Web and Mobile Framework

Explore mobile web trends and webapp environments, build multi-page webapps with jQuery Mobile, integrate phone features (call, SMS, email, video), use UI components and package a webapp as an APK.

4.1Construct the mobile web development
4.2Perform Webapps environment
4.3Organize the mobile web framework
4.4Construct the Webapps with the phone
4.5Perform user interface components
4.6Perform mobile web application

🔒 Login to open

ASSESSMENT

Continuous Assessment 70% · Final Assessment 30%

Students must pass both components.

Practical Work · CLO1 (P4) 12.5%

Case Study · CLO2 (A3) 20%

Presentation (PBA) · CLO2 (A3) 10%

Problem Based Assignment · CLO3 (A4) 15%

Final Assessment · CLO1 (P4) 30%

COURSE LEARNING OUTCOMES

CLO1 · P4

Construct a program using HTML, CSS and JavaScript in developing web and mobile application.

CLO2 · A3

Practice effective interpersonal skills with peers in developing responsive web and mobile application using framework.

CLO3 · A4

Demonstrate good practice and ethics in performing the responsive web and mobile application.

<web> DesignTechnology

Learn it. Code it. Ship it to a phone.

Four chapters, from your first tag to a mobile APK

Introduction to Web Development and Bootstrap

HTML and CSS Essentials with Bootstrap

JavaScript Fundamentals and Interactivity with Bootstrap

Introduction to Web and Mobile Framework

Continuous Assessment 70% · Final Assessment 30%

Ready for today's class?