Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
A Comprehensive Course on GIS (Part 2 - Web GIS)
Highest Rated
Rating: 4.7 out of 5(35 ratings)
364 students

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

Master in HTML, CSS, Bootstrap, JavaScript, jQuery, PHP Basics, Leaflet, TurfJS, & Echarts Libraries plus GeoServer API
Highest Rated
Created byShoaib Shahzad Obaidi
Last updated 1/2024
English

What you'll learn

  • HTML + CSS + Bootstrap + JavaScript
  • jQuery + PHP Basics
  • Leaflet + Turf JS
  • Chart JS + Geoserver API (WMS & WFS)

Course content

6 sections • 154 lectures • 29h 23m total length

  • General Overview of the Course - Web GIS4:17
  • Recape what you had learnt in the Part 01 of the Course6:28
  • The Course Outline & What is HTML (HTML Part 01)6:47
  • Create your first HTML Web Application (HTML Part 02)11:48
  • header, paragraph, a link, img, input, button, hr, br elements (HTML Part 03)12:59
  • header, body, html, meta, & some html attributes (HTML Part 04)11:44
  • pre, b, i, em, mark, small, ins, sub, sup, abbr elements (HTML Part 05)11:04
  • address, bdo, dir attribute, comments (HTML Part 07)10:28
  • RGB, RGBA, Hexadecimal colors, HSL, HSLA, links (HTML Part 08)12:31
  • mailto attribute and bookmarks (HTML Part 09)11:10
  • image and source elements plus the favicon (HTML Part 10)10:40
  • table elements (HTML Part 11)10:18
  • table style, plus ordered and unordered lists (HTML Part 12)10:35
  • span element, id and class names (HTML Part 13)15:43
  • web page, youtube, facebook, instagram iframes (HTML Part 14)10:16
  • web page layout using css float property (HTML Part 15)21:19
  • Talking about responsiveness of application, kbd, samp, code elements -HTML P 1610:52
  • Semantic and non Semantic Elements, form (HTML Part 17)15:18
  • input element properties (HTML Part 18)11:28
  • HTML Multimedia, object elements (HTML Part 19)11:58
  • HTML Quizz
  • Introduction to CSS and its Types (CSS Part 01)12:46
  • Linking External CSS with HTML Document (CSS Part 02)10:04
  • Padding Properties (CSS Part 03)12:12
  • CSS Text Properties (CSS Part 04)10:44
  • CSS Font Properties and Google Fonts (CSS Part 05)9:36
  • Importing Icons from Internet (CSS Part 06)12:02
  • Importing Images from Internet, text and box shadows (CSS Part 07)13:36
  • CSS Position Property (CSS Part 08)11:52
  • overflow, float and display properties (CSS Part 09)11:49
  • Example of Position Properties and CSS Selectors (CSS Part 10)10:37
  • CSS Combinators (CSS Part 11)10:10
  • Pseudo CSS Elements (CSS Part 12)10:35
  • Creating top header and sidebar (CSS Part 13)12:50
  • Creating a Dropdown Button (CSS Part 14)10:49
  • CSS Assignment (CSS Part 15)1:49
  • action, for, name attributes & styling input fileds based on type (CSS Part 16)10:09
  • Creating responsive column wise page layout (CSS Part 01)12:26
  • !important rule and CSS calc function plus CSS variables (CSS Part 17)11:20
  • CSS local and global variables plus importing multiple images (CSS Part 19)11:20
  • inset, currentColor, word-wrap, writing-mode CSS properties (CSS Part 20)8:17
  • transform & transition CSS properties (CSS Part 21)10:49
  • CSS keyframes for animations (CSS Part 22)8:43
  • tooltip, image reflection, -webkit-mask-image & button styles (CSS Part 23)11:31
  • Animated arrow pointer & pagination (CSS Part 24)12:30
  • Multi-column layout, textarea resize, display flex (CSS Part 25)10:52
  • CSS display flex continued (CSS Part 26)6:20
  • CSS Grid (CSS Part 27)6:01
  • CSS media query (CSS Part 28)11:16
  • CSS media query portrait & landscape mode (CSS Part 29)5:27
  • Getting Started with Bootstrap CSS Framework (Bootstrap Part 01)11:41
  • Bootstrap Styles (Bootstrap Part 02)11:01
  • Bootstrap Styles (Bootstrap Part 03)10:44
  • Bootstrap Styles (Bootstrap Part 04)9:46
  • Portfolio Webpage (Part 1)15:29
  • Portfolio Webpage (Part 2)17:01
  • Portfolio Webpage (Part 3)17:53
  • Portfolio Webpage (Part 4)14:47
  • Portfolio Webpage (Part 5)14:23
  • Portfolio Webpage (Part 6)17:56
  • Portfolio Webpage (Part 7)15:39
  • Portfolio Webpage (Part 8)18:14
  • Portfolio Webpage (Part 9)13:59
  • Portfolio Webpage (Part 10)12:15
  • CSS Quizz
  • Introduction to JavaScript (JS Part 01)10:44
  • document, getElementById, innerHTML, External JS file (JS Part 02)12:46
  • JS statements, syntax, variables, equals and equal to operators (JS Part 03)11:15
  • identifiers, variables, arithmatic variables (JS Part 04)11:33
  • Arithmatic & Assignment Operators (JS Part 05)11:54
  • functions & objects in JS (JS Part 06).mp49:51
  • Continuation of objects in javascript (JS Part 07)9:03
  • Slicing functions for strings (JS Part 08)11:20
  • Continuation of string functions (JS Part 09)10:14
  • Number data formate and its conversion (JS Part 10)7:14
  • Arrays in JavaScript (JS Part 11)10:57
  • Arrays in JS, pop, push, shift, unshift functions (JS Part 12).mp49:43
  • string functions, concat, join, splice, slice, foreach, map, filter, find, inclu11:45
  • Date and Math Functions (JS Part 14)10:02
  • Boolean Data Types and Logical Operators in JavaScript (JS Part 15)8:27
  • if statements (JS Part 16)11:09
  • switch statements in JavaScript (JS Part 17)7:44
  • for & for in loops (JS Part 18)10:05
  • while & do while loops (JS Part 19)7:43
  • getElementById, onmouseover, onmousemove, onkeydown, event.keyCode, css manipula10:01
  • getElementsByClassName, getElementByTagName (JS Part 21)12:02
  • setTimeout, clearInterval time functions (JS Part 22)9:45
  • Working on Example 02 (JS Part 23)13:59
  • Example 03, 04 & 05 (JS Part 24)13:59
  • Portfolio Webpage (Part 1)18:47
  • Portfolio Webpage (Part 2)17:04
  • Portfolio Webpage (Part 3)15:42
  • Portfolio Webpage (Part 4)6:53
  • JavaScript Quizz

Requirements

  • The prerequisite for this course is the first part of this course named 'A Comprehensive Course on GIS Development (Part 1: GIS tools)

Description

Welcome to the second part of our comprehensive GIS series, where we dive into the exciting world of Web GIS. This hands-on course is designed to empower you with the skills and knowledge necessary to become a master of web technologies and build interactive, dynamic, and visually appealing Geographic Information Systems (GIS) applications.

In this advanced course, we will take your GIS expertise to the next level, focusing on the integration of web development technologies with spatial data to create cutting-edge mapping applications. Through a combination of theoretical lessons, practical exercises, and real-world projects, you'll gain a strong understanding of the following key areas:

  • HTML Fundamentals: We will start from the basics of HTML, the backbone of web development, and gradually explore the essential tags and structures required to create web pages.

  • CSS Styling: Learn how to add style and formatting to your web pages using Cascading Style Sheets (CSS) to create visually appealing interfaces for your GIS applications.

  • Bootstrap Framework: Discover the power of Bootstrap, a popular front-end framework that will enable you to build responsive, mobile-friendly web GIS interfaces efficiently.

  • JavaScript Essentials: Dive into the world of JavaScript, a versatile programming language used for adding interactivity to web pages, and apply it to manipulate and visualize geographic data.

  • jQuery Library: Explore jQuery, a fast and lightweight JavaScript library, to simplify and enhance the handling of events, animations, and AJAX interactions in your GIS applications.

  • PHP Basics: Get introduced to PHP, a server-side scripting language, to perform dynamic data processing and integration within your Web GIS projects.

  • Leaflet Library: Learn how to use Leaflet, a powerful open-source JavaScript library, to create interactive and customizable maps with various base-maps and overlays.

  • TurfJS Library: Delve into TurfJS, a geospatial analysis library, to perform complex spatial operations and manipulations directly in the browser.

  • Echarts Library: Discover Echarts, a powerful charting and visualization library, to create stunning data visualizations for your Web GIS applications.


  • GeoServer API: Utilize GeoServer's API for Web Map Service (WMS) and Web Feature Service (WFS) to access and manipulate geospatial data for map rendering and feature querying in web applications.

By the end of this course, you will have honed your skills in HTML, CSS, JavaScript, and various libraries essential for Web GIS development. You will be equipped to design, develop, and deploy sophisticated GIS applications that leverage the capabilities of modern web technologies to showcase and analyze spatial data effectively.

Whether you are a GIS professional, a web developer looking to venture into the geospatial domain, or a student with a passion for maps and data, this course will empower you to unlock the true potential of Web GIS and contribute to the evolving field of geospatial technology.

Join us on this exciting journey of mastering Web GIS, and let's map the world together!

Who this course is for:

  • This course is designed for GIS Web Developers who aim to analyze or visualize their spatial data on the browser and create interactive online maps from it.
  • Beginner in Web Programming

Report abuse