Sketchnote by Tomomi Imura
- Student Information
- Code Samples
- Useful Links
- Labs
This course is designed to introduce students the fundamental of knowledge, technologies and components for web application developments. The basic topics includes the standard HTML for content creation, CSS for content presentation, JavaScript for client-side logics, PHP for server-side logics and MySQL for data processing. At the end of the course, the students should be able to apply the web base technologies and then implement it all in the creating functional data-centric online system project.
- Lecture Notes
- Student Information
- Buku: Pengaturcaraan Web Hypertext Preprocessor (PHP)
- Free Web Development Books
- Student Portfolio Showcase
| No | Module | Description |
|---|---|---|
| 1 | Introduction to Web Programming | Web programming is the process of creating web pages and web-based applications using a variety of programming languages and technologies. To get started with web programming, one should learn HTML, CSS, and JavaScript, which are the core technologies used for creating web pages and user interfaces. Bootstrap is a popular framework that can simplify the process of creating responsive and mobile-friendly web pages. PHP is a server-side scripting language used for creating dynamic web pages and web-based applications. By learning these technologies, one can create attractive and interactive web content that is compatible with a wide range of devices and browsers. |
| 2 | Visual Studio Code | Visual Studio Code is a popular source code editor developed by Microsoft. It is free, open-source, and available for Windows, Mac, and Linux. Visual Studio Code supports a wide range of programming languages and provides features such as code highlighting, autocomplete, debugging, and source control integration. It also supports extensions that can add functionality, such as linters, formatters, and code snippets. With its user-friendly interface and robust set of features, Visual Studio Code has become a favorite among developers for writing, testing, and debugging code. |
| 3 | Hypertext Markup Language (HTML) | HTML is a markup language used for creating web pages and other web-based content. It uses tags and codes to structure and format content, such as headings, paragraphs, images, and links. HTML also allows for the creation of forms, which enable user interaction with web pages through input fields, buttons, and other elements. It is a fundamental technology for creating web pages and provides a standardized system for defining the structure and formatting of content. |
| 4 | Cascading Style Sheets (CSS) | CSS is a stylesheet language used for describing the presentation of web pages and other web-based content. It allows content creators to control the layout, colors, fonts, and other visual elements of a web page, separate from the HTML markup. CSS works by applying rules to HTML elements, which define how they should be displayed. These rules can be applied to individual elements, groups of elements, or the entire page. CSS also supports the use of media queries, which allow for the creation of responsive designs that adapt to different device sizes and screen orientations. |
| 5 | JavaScript | JavaScript is a scripting language used primarily for creating interactive web pages and web-based applications. It is a client-side language that runs directly in a web browser and can be used to manipulate the content and behavior of web pages in real-time. JavaScript can be used to create animations, validate user input, fetch data from servers, and much more. It is a powerful language with a large and active community, and is commonly used alongside HTML and CSS to create dynamic and engaging web content. |
| 6 | Bootstrap | Bootstrap is a popular open-source framework used for creating responsive and mobile-first web pages and applications. It provides pre-designed templates, CSS styles, and JavaScript plugins that make it easy for developers to create visually appealing and functional websites. Bootstrap uses a grid system to enable the creation of flexible layouts that adapt to different device sizes and screen orientations. It also provides a variety of UI components, such as forms, buttons, navigation menus, and modals, that can be easily customized and integrated into web projects. |
| 7 | Hypertext Preprocessor (PHP) | PHP is a server-side scripting language used primarily for web development. It is a popular language for creating dynamic web pages and web-based applications, as it can interact with databases, handle form data, and perform other server-side tasks. PHP code is executed on the server before the web page is sent to the client's browser, allowing for the creation of complex and dynamic web content. PHP also has a large and active community that has developed many frameworks and libraries to simplify web development tasks. |
| Lab | Topic | Files |
|---|---|---|
| 1 | Hypertext Markup Language |  |
| 2 | Cascading Style Sheets |  |
| 3 | JavaScript |  |
| 4 | Bootstrap |  |
| 5 | Hypertext Preprocessor |  |
| Project | Topic | Files |
|---|---|---|
| 1 | Student Portfolio Showcase (HTML) | |
| 2 | Student Portfolio Showcase (Bootstrap) | |
| 3 | Web Responsive using Bootstrap | |
| 4 | Final Project using PHP | |
Diagrams are visual representations of information or data that help convey complex concepts, processes or systems in a clear and concise manner. Flowcharts are diagrams that use shapes and arrows to illustrate the steps in a process or algorithm [More info...].
| No | Tools | File |
|---|---|---|
| 1 | Figma |  |
| 2 | Draw.io |  |
| 3 | Github Pages |  |
| 4 | Behance |  |
| 5 | Visual Studio Code |  |
| 6 | Bootstrap Studio |  |
| 7 | Carbon |  |
| No | Topic | Note | MCQ | Answer |
|---|---|---|---|---|
| 1 | JS Fundamentals | |
||
| MCQ: Set A |  |
 |
||
| MCQ: Set B | |
|
||
| 2 | JS DOM | |
||
| MCQ: Set A | |
|
||
| MCQ: Set B | |
|
||
| 3 | JS Event & JS Form Validation | |
||
| MCQ: Set A | |
|
||
| MCQ: Set B | |
|
||
| 4 | PHP Fundamentals | |
||
| MCQ: Set A | |
|
||
| MCQ: Set B | |
|
||
| 5 | PHP: MySQL and CRUD | |
||
| MCQ: Set A | |
|
||
| MCQ: Set B | |
|
||
| 6 | PHP: Form, Session & Cookies | |
||
| MCQ: Set A | |
|
||
| MCQ: Set B | |
|
||
| 7 | Final Exam | |
|
Please create an Issue for any improvements, suggestions or errors in the content.
You can also contact me using Linkedin for any other queries or feedback.