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
____________________
На этой странице сайта вы можете посмотреть видео онлайн FULL COURSE 🦁 CREATE AN INTERACTIVE MAP FROM SCRATCH WITH ADOBE ILLUSTRATOR, HTML, CSS & JAVASCRIPT длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь Maps by RGD 03 Март 2025, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 2,279 раз и оно понравилось 81 зрителям. Приятного просмотра!
