gh pages html css js

preparations

• 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

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

basics

• 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

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

svg

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

review

• Simple animation with SVG (a very short review)

validation

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

or by uploding file .

animation

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

notes

• 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)