Posts

#3 Three.js Animation

Three.js Animations: 10-Module Blog Tutorial Three.js Animations: 10-Module Blog Tutorial Module 1: Setting Up Three.js Learn how to set up the basic scene, camera, and renderer for a Three.js animation project. Copy // Basic Three.js setup import * as THREE from 'three'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); Module 2: Adding a Spinning Cube Create a cube and animate it with rotation. Copy // Cube geometry and animation const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x0077ff }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); function animate() { requestAnimationF...
Post a Comment
Read more

#1 Module Explanation

 Got it ✅ — let’s walk through the 10 modules in simple, teacher-style language so it’s easy to follow without getting lost in the code. 🧱 Module 1 — HTML Foundations What it is: HTML is like the skeleton of a web page. It gives structure. What you’ll learn: Headings ( <h1> ), paragraphs ( <p> ), links ( <a> ), lists, images, and page sections. Think of it like: Writing an outline in a notebook. Titles, subtitles, and content. 🎨 Module 2 — CSS Basics & Box Model What it is: CSS is the makeup & clothes of a web page. It decides how things look. What you’ll learn: Colors, fonts, spacing (padding, margins), and borders. You’ll also understand how every element is a “box.” Think of it like: Decorating your notebook pages with colors, margins, and styles. ⚡ Module 3 — JavaScript Fundamentals What it is: JavaScript is the brain of a web page. It makes things interactive. What you’ll learn: How to write small progr...
Post a Comment
Read more

#2 HTML+ CSS+JSS using Code Pen

  🌐 HTML, CSS & JavaScript — 10‑Module CodePen Course Please visit this page before Starting this Hands on :  https://www.freecodecamp.org/news/how-to-use-codepen/ A hands-on, progressive course you can complete entirely in CodePen . Each module includes: goals, concepts, a minimal HTML/CSS/JS starter you can paste into the three CodePen panels, and practice tasks. Difficulty increases step by step. 🧰 Before You Start: CodePen Tips Open a new Pen. Use the three panels: HTML , CSS , JS . CodePen auto-injects <html> , <head> , and <body> for you. You can paste full HTML documents, but simpler is to paste only what goes inside <body> . Open the Console (bottom right ▸ ▸ Console ) to see console.log() output. If you need fonts/icons later: Settings → HTML → Add external resources (e.g., Google Fonts, Font Awesome). Module 1 — HTML Foundations Goal: Understand core tags, semantic structure, links, images, lists, and basic acces...
Post a Comment
Read more