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

Explore web GIS fundamentals across HTML, CSS, Bootstrap, and JavaScript, then apply interactively with Leaflet, Turf, ECharts, and Geoserver WMS/WFS to build dynamic maps.

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.

Learn the basics of web programming languages with HTML, a Hypertext Markup Language, as a markup language of tags that structure web pages in browsers.

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.

Explore HTML structure by identifying opening and closing tags, head and body, and key elements; apply inline styles with the style attribute and use meta, charset, viewport, and doctype HTML5.

Explore HTML elements and attributes, including the title attribute that displays tooltips, nesting p with b, i, em, mark, and abbr, and using pre for preformatted text.

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.

Learn HTML table elements, including table, tr, headers, and td, and apply inline CSS for borders, width, text alignment, height, and captions to organize data.

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.

Embed external content with HTML iframes by setting the src and title attributes. Resize width and height to display YouTube videos, Google Maps, Facebook and Instagram posts within your page.

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.

Explore responsive web design by implementing image scaling with width: 100% and max-width, typography with vw units, media queries, and using kbd, samp, and code elements in monospace fonts.

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.

Learn how cascading style sheets format web pages, controlling color, font, spacing, and layout. Explore inline, internal, and external CSS, plus id and class selectors for scalable styling.

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.

Learn to import free images from unsplash, pixabay, and undraw, add css text and box shadows, style links with hover and visited states, and experiment with cursor properties.

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.

Learn to build a dropdown button and drop-down content with HTML and CSS, apply hover effects, style links and images, and control stacking with site index to appear in front.

Develop a simple, responsive web layout by applying CSS properties to create a background image, navigation bars, and a dropdown with hover effects, then test yourself against the provided resources.

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 use CSS variables for local and global scope with var(--name) to set widths, colors, and radii, and import multiple images with a single background shorthand.

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.

Explore multi-column layouts with column count, column gap, and column rule, then control textarea resize and master flexible layouts using CSS flexbox with direction, wrap, and alignment.

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.

Master Bootstrap styles by building a responsive web page with accordions, tables, carousels, and Bootstrap icons in a right sidebar, header, and footer.

Continue building the portfolio webpage by applying responsive CSS techniques, including media queries, base element styles, box-sizing rules, smooth scrolling, and a fixed header with a mobile navigation toggle.

Create a responsive portfolio webpage (part 3) featuring a mobile-friendly navigation, active link underline, a downloadable CV, and social icons in a grid.

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.

Style the portfolio's projects page with card layouts, hover effects, and responsive two-column grids, while wiring navigation anchors and planning a hire me section for future JavaScript filtering.

Continue building the portfolio webpage by creating a contacts page, updating button styles and icons, and adding a contact form with a responsive CSS grid and hover effects.

Builds a responsive portfolio webpage footer with structured sections, a full name title, a description, social icons from box icons, and a copyright line, styled for alignment and hover effects.

Learn how JavaScript makes static webpages dynamic by enabling interactive content, events, and functions, including internal and external scripts, linking, and basic examples like alert and button clicks.

Learn to manipulate the web page with JavaScript using document.getElementById and innerHTML, respond to button clicks with onclick and alerts, and move scripts to external files for performance.

Explore how JavaScript displays data with innerHTML, document.write, alert, and console.log, and master statements, variables with let, var, and const, and the difference between equals and equal to operators.

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 methods such as slice, substring, substr, and length, learn how to extract substrings, handle negative indices, and apply replace, replaceAll, and case conversions to manipulate text.

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 arrays in JavaScript (JS Part 11) by declaring, indexing, and manipulating multi-type arrays, including length, isArray checks, and different declaration syntaxes, with practical examples.

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.

Explore how switch statements in JavaScript evaluate cases with break and default, and compare them to if conditions to control program flow and handle input grading.

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.

Learn to select DOM elements by class name and tag name, and render table data from an object array using getElementById and innerHTML with for loops.

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.

Bind a select to a display span with onchange to show the chosen language, and drive a radio-based interface that updates image, name, link, and price from a courses array.

Explore dynamic form interactions with JavaScript by handling onchange on a select to display the chosen option, and update page elements using getElementById, innerHTML, and arrays of course objects.

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.