FULL COURSE 🦁 CREATE AN INTERACTIVE MAP FROM SCRATCH WITH ADOBE ILLUSTRATOR, HTML, CSS & JAVASCRIPT
Hello everyone, my name is Rúben Duarte. 👋
I work as a GIS Specialist, but I have been increasingly passionate about the world of programming.
This is the ultimate guide on How to Create an Interactive Map from Scratch using Adobe Illustrator, HTML, CSS & Javascript!
🦁 Link to the Project
https://rubenduarte1994.github.io/zoo...
https://rubenduarte1994.github.io/zoo...
https://rubenduarte1994.github.io/zoo...
🗺️ Basemap
https://drive.google.com/drive/folder...
🦒 SVG Map
https://drive.google.com/drive/folder...
🔊 Sound Effect
https://drive.google.com/drive/folder...
🖼️ Images
https://drive.google.com/drive/folder...
🔗 SVG Icons from
https://icons8.com/
🎵Background Sound
https://drive.google.com/drive/folder...
During this 3 hour tutorial, I will cover various areas I am passionate about. I will start by working in Adobe Illustrator, where I will illustrate all the elements of a static map into vector format, and then I will transform this project into SVG format. 🎨
Finally, in Visual Studio Code, using CSS and JavaScript, I will bring this map to life by embedding it in HTML for desktop. 🖥️
Midway through this video, I will also work with the Canva platform to create images that will appear on the final map. 🖼️
⏱️ Timestamps
00:00 - Intro
04:21 - Basemap Download
06:28 - Starting with Adobe Illustrator
11:53 - Drawing Elements (Trees and Water Bodies)
25:24 - Drawing Elements (Houses, Coffee Shops and Others)
33:58 - Drawing Icons
45:02 - Images to Vector Format
49:59 - Renaming Layers and Export
52:12 - Setup Html, Css and Javascript
01:04:08 - Navigation Bar
01:17:28 - Animations to SVG Elements
01:30:07 - Popup Page
02:00:02 - Highlight Elements
02:14:35 - Making Objects Move
02:19:50 - Canva
02:21:09 - Dynamic Informations (Animal Details)
02:34:06 - YouTube Videos
02:41:47 - Social Media Icons
02:48:06 - Background Music
02:54:52 - Deploy
I can't thank you enough for watching this video, so if you feel this tutorial have brought you something valuable, give it a like, subscribe, and if you have any questions, don't hesitate to ask in the comments section. 👍👍👍
#interactivemap #svgmap #adobeillustrator #ai #canva #html #css #javascript #github #illustratedmap #map #codemap #coding #zoomap #santoinacio #santoinaciomap
Like, share, and subscribe for more insightful tutorials and tips! 📈🔍🌟
🌍Socials
🔸LinkedIn: / rubenduarte94
🔸GitHub: https://github.com/rubenduarte1994
🔸Instagram: / rubenduarte94
____________________
Music: Motivational Upbeat Corporate by RinkevichMusic
/ rinkevichmusic
https://protunes.net/
Video Link: https://bit.ly/3NNqGTs
____________________
Auf dieser Seite können Sie das Online-Video FULL COURSE 🦁 CREATE AN INTERACTIVE MAP FROM SCRATCH WITH ADOBE ILLUSTRATOR, HTML, CSS & JAVASCRIPT mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Maps by RGD 03 März 2025 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 2,279 Mal angesehen und es wurde von 81 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
