Data Hack 2024: Web Application Design in HTML, CSS & JavaScript (3 Sessions)

The workshop is designed for students who have already completed an Introductory Python class. Coding tools such as Visual Studio Code and GitHub will be introduced in the workshop for facilitating code development and web pages hosting.

Part I (3 Hours)

• Understand the basic HTML elements and the DOM (Document Object Model) architecture, which form the basic building blocks for constructing a web page.
• Learn to position the HTML elements on the page for forming the base layout structure according to the DOM.
• Style and compose HTML elements with the HTML box model, CSS selectors and CSS display properties to make the web pages look attractive.

Part II (3 Hours)

• Learn to place the CSS styling rules at the right location within the codes for effective rendering of the display result.
• Build a website by linking multiple web pages with navigation menu and paths.
• Create responsive web design for displaying web pages on desktop, tablet, and mobile devices using media queries and 3rd party CSS libraries.

Part III (3 Hours)

• Master JavaScript as a programming language by comparing it with Python (e.g. data types, data structures, math and logical operators, conditionals, loop, functions, class, and import of 3rd party modules and libraries).
• Understand the HTML form elements and how they can be used for building interactive user interface to capture input and deliver output to users.
• Use JavaScript to access and control HTML and CSS elements through object variables, properties, and events.