A Comprehensive Course on GIS (Part 2 - Web GIS)

Recap the tools and workflows from part 1—ArcGIS Pro, QGIS, PostgreSQL with PostGIS, and GeoServer—covering spatial data, 2D and 3D maps, and web publishing.

Create your first html web application by turning a text file into an html document, using code editors to write it, and previewing in a browser.

Explore html tags from h1 to h6, paragraph, link, button, input, image, hr, and br, with attributes like href, src, placeholder, width, height, and use live server in VS Code.

Discover how the address element uses italic styling, apply dir and bidirectional override for right-to-left languages, and use comments, style colors, and width to control layout.

Explore advanced HTML table techniques, including span across columns and rows, padding and borders, plus CSS zebra striping, and learn to structure and style ordered and unordered lists.

Master the span element to style text and assign IDs or classes to HTML elements with CSS. Explore inline and internal CSS, and nested and description lists.

Explore foundational web page layout with header, nav, section, article, aside, and footer, and learn to apply css float to create two-column layouts, with inline and internal css demonstrations.

Compare data lists and selects via an input list. Demonstrate input properties such as required, disabled, checked, max length, and read only across types like email, password, radio, and date.

Master CSS font properties to optimize readability by selecting font family with fallbacks, weight, style, and size. Explore Google fonts to enrich typefaces and ensure broad browser support.

Import icons from the internet using libraries like Google icons, Bootstrap icons, and Font Awesome via CDN links. Use SVG or PNG formats and adjust size with CSS.

Explore how CSS uses display, inline, block, and inline-block to build a navigation menu, center an image, and apply descendant, child, adjacent, and general sibling selectors.

Create a responsive three-column page layout with header and top nav using HTML and CSS, using floats, box-sizing, and a media query for stacking on small screens.

Master the CSS important rule, use calc for dynamic values, and declare and call CSS variables with var(--name), including nested calc, to create responsive styles.

Learn to implement tooltips with hover, create image reflections using webkit reflection, apply gradient masking with -webkit-mask-image, and style multiple CSS buttons with hover transitions and disabled states.

Learn CSS button animations with an animated arrow pointer and hover transitions, and build a simple pagination UI to navigate multiple pages.

Master flexbox basics with css display flex, including flex group, grow, and basis. Use media queries to build responsive layouts that switch from two columns to a stacked column.

Learn to integrate the bootstrap CSS framework to build responsive web pages, choosing between CDN or downloaded files, and apply bootstrap classes like btn and alert for styling.

Learn how to integrate Bootstrap in web projects by copying ready-made components, importing Bootstrap files, and customizing forms, buttons, alerts, cards, and carousels.

Explore bootstrap components to build a complete web page layout with a navbar, sidebar, image cards, tables, and tabs, plus a footer with icons, using responsive grid and columns.

Learn to craft a portfolio webpage layout with a relative home container, calc-based height minus header, and a two-row grid with max-content rows and space around alignment.

Build a portfolio webpage by creating a services section with icon cards and a responsive projects grid that uses hover effects, filters, and a more button to showcase GIS work.

Explore how JavaScript identifiers name variables and functions, with case sensitivity and letters, digits, underscores, and dollar signs. Learn var, let, and const scope, redeclaration, and string concatenation with numbers.

Explore arithmetic and assignment operators in JavaScript, including addition, subtraction, multiplication, division, modulus, exponentiation, and pre-increment and post-increment, with string concatenation and dynamic typing.

Explore JavaScript functions and objects with practical examples, learning parameters, arguments, return values, and dot notation to manipulate objects like a car, for web GIS development.

Explore declaring and using objects in JavaScript, including dot and bracket notation, with methods using this to access properties, and strings: length, slice, substring, substr.

Explore built-in JavaScript string functions, including concat, trim, index of, search, and match; learn ends with and backticks for multi-line strings with dollar sign and braces in web GIS.

Explore JavaScript number data types, including strings and arithmetic behavior, and convert strings to numbers using Number, parseInt, and parseFloat. Demonstrate base conversions to binary, octal, hexadecimal, and decimal.

Explore JavaScript date objects via new Date(), browser timezone, and toDateString/UTC string formatting, plus math functions including random, rounding, min/max, and overflow behavior.

Master for, for-in, while, and do-while loops in JavaScript to iterate arrays and object properties, with syntax insights and practical examples.

Explore how the DOM and document object model let you interact with HTML elements by using getElementById, onclick, onmouseover, onmousemove, and onkeydown, read event.keyCode, and perform CSS manipulation via element.style.

Explore setTimeout and setInterval in JavaScript to delay and repeat code, using callbacks, DOM manipulation (getElementById, innerHTML, onclick) and a bootstrap spinner to show loading and completion after 3 seconds.

Enhance the portfolio webpage by implementing active filter indicators for projects like web mapping, automation, and data engineering. Integrate a Swiper testimonial carousel and GSAP animations for improved visuals.