Uploaded November 2024 | Updated September 2026, 2 weeks ago
Hello, web developers! Get ready to add a touch of magic to your designs with this tutorial on coding the near-far illusion using HTML and CSS. Join me as we explore the fascinating world of depth perception, delve into CSS selectors and styles, and uncover the art of creating illusions through CSS blurs.
🌐 Discover the secrets behind the near-far illusion, a captivating visual effect that plays with depth on your webpage. Learn the ins and outs of CSS selectors and styles to manipulate elements for a 3D-like experience. I'll also show you how to use CSS blurs strategically to enhance the illusion, making your design truly immersive.
🖌️ Keywords: Near-far illusion coding, HTML CSS tutorial, CSS selectors, Styles and blurs, Web development tricks.
Whether you're a coding novice or a seasoned pro, this tutorial is packed with practical insights to elevate your web development skills. Don't miss out – like, subscribe, and hit the notification bell to stay updated on more exciting web design tutorials! 🚀🔍
Hello, web developers! Get ready to add a touch of magic to your designs with this tutorial on coding the near-far illusion using HTML and CSS. Join me as we explore the fascinating world of depth perception, delve into CSS selectors and styles, and uncover the art of creating illusions through CSS blurs.
🌐 Discover the secrets behind the near-far illusion, a captivating visual effect that plays with depth on your webpage. Learn the ins and outs of CSS selectors and styles to manipulate elements for a 3D-like experience. I'll also show you how to use CSS blurs strategically to enhance the illusion, making your design truly immersive.
🖌️ Keywords: Near-far illusion coding, HTML CSS tutorial, CSS selectors, Styles and blurs, Web development tricks.
Whether you're a coding novice or a seasoned pro, this tutorial is packed with practical insights to elevate your web development skills. Don't miss out – like, subscribe, and hit the notification bell to stay updated on more exciting web design tutorials! 🚀🔍
![A Virtual World - JavaScript Course: Lesson 1 / 11 [Spatial Graphs]](https://i.ytimg.com/vi/V_C7L7zelz8/mqdefault.jpg "A Virtual World - JavaScript Course: Lesson 1 / 11 [Spatial Graphs]
Welcome to Phase 2 of my Self-Driving Car Course!
You dont need to have watched Phase 1 to start this course. A Virtual World is a standalone course where well construct a virtual environment entirely from the ground up. Get ready to use basic HTML, CSS, and JavaScript to craft this world where self-driving cars (or anything you desire, like Pokémon :-D) can roam freely. Our primary focus will be on generating this dynamic world, with the integration of self-driving car code coming at the end.
This course serves as preparation for Phase 3, Understanding AI, where well delve into neural networks and other advanced AI techniques. By the end of Phase 3, youll comprehend the inner workings of neural networks, the importance of hidden layers, and more. But to get there, we need this sophisticated world to create complex scenarios, as our previous one was too simplistic. So, if youre eagerly anticipating neural networks, please be patient and enjoy Phase 2 in the meantime.
In this phase, youll acquire valuable skills, including mathematics, algorithms, programming, and design—skills that greatly benefited me during my PhD and my time at Microsoft. Im confident theyll boost your career as well.
Heres what youll learn:
* Building a spatial graph from scratch and creating an editor with a dynamic viewport.
* Understanding the mathematics and logic behind user-friendly interfaces in modern software.
* Generating road borders, buildings, and trees using geometry and creating a 3D illusion.
* Implementing road markings to prepare for advanced self-driving challenges.
* Enhancing the world editor for user convenience and maximizing auto-generated content.
* Loading real-world data from openstreetmap for city-based simulations.
* Creating a minimap for navigation in expansive worlds.
Have Fun! :-)
⭐PLAYLISTS ⭐
Phase 1: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
Phase 2: https://www.youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
💻CODE💻
https://github.com/gniziemazity/virtual-world
⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld
⭐ALL PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
⭐Pythagorean Theorem Video⭐
https://youtu.be/iqSlzYXdFzw
⭐Euclidean Distance Video⭐
https://youtu.be/3rPwfmrCwVw
⭐App from Phase 1⭐
https://radufromfinland.com/projects/selfdrivingcar
☕Buy me a Coffee?☕
https://www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
https://youtube.com/@radu/join
⭐Timestamps⭐
00:00 Introduction
05:57 HTML Canvas Project Setup
10:52 What are Spatial Graphs?
12:27 Implementing a Spatial Graph in JavaScript
20:41 Implementing the Graph Functionality
48:28 Outro and Special Thanks to prof. Căiniceanu")
