gh pages html css js

preparations Link to heading

• How to install Notepad++
• How to install Google Chrome using offline installer
• Steps to create a Google account
• How to create a GitHub Account
• How to install Markdown Viewer, a Chrome extension
• Create account on OneCompiler
• Create CodePen account
• Install Node.js
• Create Medium account

reviews Link to heading

• low code intro
• google drive short intro
• butiran.js, a simple JS-based simulator for agent-based model

basics Link to heading

• Fork a GitHub repository and deploy its GitHub Pages site
• Create a GitHub repository and collaborate
• Some common Markdown syntaxes
• Short introduction to HTML
• HTML div element and CSS
• hyperlink
• A very simple JS example in HTML
• graphical programming
• My first web server

deployments Link to heading

• an example on GitHub • src
• bugx, with Hugo on GitHub • html • src
• bugx, an example on Vercel

svg Link to heading

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional based vector graphics (mozz://a, 2023, 2023).

review Link to heading

• Simple animation with SVG (a very short review)

validation Link to heading

Minimal content of a SVG file is as follow

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<svg version="1.1"
 width="300" height="200"
 xmlns="http://www.w3.org/2000/svg">

</svg>

Check it on online

This document was successfully checked as XML!

Result: Passed, 1 warning(s)

or by uploding file.

This document was successfully checked as SVG 1.1 + URL + HTML + MathML 3.0!

animation Link to heading

• Cirlce
• Shape animation in an SVG image
• Path commands
• <animateMotion>

notes Link to heading

• Method: lecturing, hands-on
• Materials: preparations, reviews, basics, svg
• Overlap: yes (back and forward, non-sequential)
• Sessions: 1 (0800-0940), 2 (0950-1130), 3 (1330-1510)