The Coding Guide
The Coding Guide
  • Видео 22
  • Просмотров 6 045
Build a Brick Breaker Game with Physics & Power-Ups | HTML, CSS, JS
In this video, we will build a Brick Breaker game using HTML, CSS, and JavaScript, featuring exciting power-ups and physics on the ball's angle when it hits the paddle.
Join me in this exciting journey as I create a Brick Breaker game from scratch. In this video, I’ll walk you through the entire development process, from setting up the HTML and JavaScript to fixing bugs and enhancing gameplay.
Key Timelines:
00:00 - Starting HTML
00:42 - Starting JavaScript
30:29 - Fixing falling power-ups bugs
33:33 - Fixing paddle bugs
34:09 - Fixing ball angle physics bug
34:49 - Working on collecting power-ups
37:44 - Fixing power-up collection bugs
40:25 - Fixing triple ball bugs
41:00 - Fixing health power-ups...
Просмотров: 46

Видео

How to track live location of people using JavaScript | The Coding Guide10:42How to track live location of people using JavaScript | The Coding Guide
How to track live location of people using JavaScript | The Coding Guide
Просмотров 35Месяц назад
Learn how to get the user's location using HTML, CSS, and JavaScript in this step-by-step tutorial. Whether you're building a web app that requires geolocation or just exploring JavaScript's capabilities, this guide will help you fetch the user's location with ease. Discover how to access location data and use it effectively in your projects. Tags: #HTML #CSS #JavaScript #Geolocation #WebDevelo...
Build a 3D Navbar using HTML, CSS, & JavaScript | The Coding Guide11:17Build a 3D Navbar using HTML, CSS, & JavaScript | The Coding Guide
Build a 3D Navbar using HTML, CSS, & JavaScript | The Coding Guide
Просмотров 1752 месяца назад
Unlock the secrets of CSS 3D transformations and create a visually stunning 3D bar using just HTML and CSS! Whether you're a beginner or an experienced developer, this step-by-step tutorial will guide you through the process of building an impressive 3D effect that will captivate your audience. Perfect for enhancing your web design skills and adding dynamic elements to your projects. Watch now ...
Build a Weather App using HTML, CSS & JavaScript | The Coding Guide23:09Build a Weather App using HTML, CSS & JavaScript | The Coding Guide
Build a Weather App using HTML, CSS & JavaScript | The Coding Guide
Просмотров 812 месяца назад
🚀 Create Your Own Weather App Using HTML, CSS, & JavaScript! 🌦️ In this tutorial, you’ll learn how to build a fully functional Weather App using HTML, CSS, and JavaScript. We’ll guide you through integrating a Weather API to fetch real-time data and display it in a sleek, user-friendly interface. Perfect for beginners and those looking to enhance their web development skills! 🔍 What You'll Lear...
Tic Tac Toe Game Using JavaScript | The Coding Guide18:20Tic Tac Toe Game Using JavaScript | The Coding Guide
Tic Tac Toe Game Using JavaScript | The Coding Guide
Просмотров 972 месяца назад
Dive into the classic Tic Tac Toe game with this interactive project! Learn how to build your own Tic Tac Toe game using HTML, CSS, and JavaScript. This step-by-step guide is perfect for beginners and coding enthusiasts. Watch the video, play the game, and explore the code to enhance your web development skills. 🎵 Music Credits: First Track: Max Brhon - Cyberpunk [NCS Release] Music provided by...
Animated Eyes Follow Mouse Cursor | The Coding Guide15:03Animated Eyes Follow Mouse Cursor | The Coding Guide
Animated Eyes Follow Mouse Cursor | The Coding Guide
Просмотров 662 месяца назад
Immerse yourself in a relaxing ASMR experience while learning to create an animated face with eyes that follow your mouse cursor using HTML, CSS, and JavaScript. This video offers a soothing, no-talking tutorial that guides you through the process of building a human-like face and animating eye movements with gentle, calming sounds. 🔍 What You'll Learn: Designing a human-like face with CSS Impl...
Realistic Animated Rotating Earth | The Coding Guide12:29Realistic Animated Rotating Earth | The Coding Guide
Realistic Animated Rotating Earth | The Coding Guide
Просмотров 1382 месяца назад
Immerse yourself in the calming experience of a 3D realistic rotating Earth, crafted with precision using Three.js. This no-talking ASMR video showcases the beauty of our planet in stunning detail, perfect for relaxation and mindfulness. Watch as the Earth gently rotates, offering a serene escape from the hustle and bustle of daily life. Ideal for background visuals, meditation, or simply appre...
Animated Navigation Menu Using HTML, CSS and JavaScript | The Coding Guide9:46Animated Navigation Menu Using HTML, CSS and JavaScript | The Coding Guide
Animated Navigation Menu Using HTML, CSS and JavaScript | The Coding Guide
Просмотров 1042 месяца назад
Discover how to create a sleek and fully responsive animated navigation menu that will elevate your website design to the next level! This tutorial walks you through each step, showcasing smooth transitions and a modern design that will leave your audience impressed. Perfect for web developers and designers looking to enhance user experience with a professional touch. 🎶 Music Credits: Track: Jo...
Quiz Game Using HTML, CSS and JavaScript | The Coding Guide57:40Quiz Game Using HTML, CSS and JavaScript | The Coding Guide
Quiz Game Using HTML, CSS and JavaScript | The Coding Guide
Просмотров 1572 месяца назад
Create your own KBC-style quiz game with lifelines like Fifty-Fifty, Audience Poll, and Phone a Friend using HTML, CSS, and JavaScript! This tutorial walks you through each step, from the initial setup to the final demo, including bug fixes and optimization tips. Whether you're a beginner or an experienced developer, this project is perfect for learning interactive web development. Download Ima...
Build a 3D Calculator using HTML, CSS, & JavaScript | The Coding Guide14:15Build a 3D Calculator using HTML, CSS, & JavaScript | The Coding Guide
Build a 3D Calculator using HTML, CSS, & JavaScript | The Coding Guide
Просмотров 3 тыс.3 месяца назад
Learn how to create a stunning 3D realistic calculator using HTML, CSS, and JavaScript! This step-by-step tutorial will guide you through the process of building a functional and visually appealing calculator that will impress your users. Perfect for web developers and coding enthusiasts looking to enhance their skills with a fun and practical project. Don't forget to like, comment, and subscri...
Create a Snake Game Using JavaScript | The Coding Guide17:40Create a Snake Game Using JavaScript | The Coding Guide
Create a Snake Game Using JavaScript | The Coding Guide
Просмотров 993 месяца назад
Want to create your own Snake game from scratch? This comprehensive tutorial will guide you through the entire process of building a classic Snake game using JavaScript, HTML, and CSS. Perfect for beginners and coding enthusiasts! 🚀 In this video, you'll learn: Setting up your project folder Creating and organizing files Writing the HTML structure Implementing the game logic in JavaScript Debug...
Hackers Theme Login Page Using HTML, CSS, and JavaScript | The Coding Guide20:09Hackers Theme Login Page Using HTML, CSS, and JavaScript | The Coding Guide
Hackers Theme Login Page Using HTML, CSS, and JavaScript | The Coding Guide
Просмотров 2113 месяца назад
Welcome to The Coding Guide! In this tutorial, we'll create a sleek, hacker-themed login page using HTML, CSS, and JavaScript. Follow along as we build the project from start to finish. Chapters: 00:00 Intro 00:06 Project Demo 00:39 HTML Start 03:15 CSS Start 11:41 JavaScript Start 19:30 Final Project 19:56 Outro Music Credits: Song: Jarico - Island Supported by @FreeBackgroundMusicForCreators ...
Unclickable Button with JavaScript and CSS | The Coding Guide6:44Unclickable Button with JavaScript and CSS | The Coding Guide
Unclickable Button with JavaScript and CSS | The Coding Guide
Просмотров 703 месяца назад
🎉 Welcome to The Coding Guide! In this exciting tutorial, you'll learn how to build a playful button that moves around your screen, dodging your mouse cursor and responding with a fun alert when clicked! Perfect for beginners and seasoned coders alike, this project combines JavaScript and CSS to create a delightful user experience. 🌟 What You’ll Learn: How to use the DOMContentLoaded event to e...
Responsive Navbar Tutorial | HTML & CSS for Stunning Navigation Menus | The Coding Guide10:52Responsive Navbar Tutorial | HTML & CSS for Stunning Navigation Menus | The Coding Guide
Responsive Navbar Tutorial | HTML & CSS for Stunning Navigation Menus | The Coding Guide
Просмотров 1013 месяца назад
Ready to elevate your web design skills? 🚀 In this comprehensive tutorial, we dive deep into creating a fully responsive navbar using just HTML and CSS! Whether you're a beginner or looking to refine your skills, this step-by-step guide will help you build a sleek, modern navigation menu that adapts flawlessly across all devices. 🔹 What You'll Learn: Designing a mobile-first, responsive navbar ...
Build a Slide Puzzle Game using HTML, CSS, and JavaScript - Full Tutorial18:11Build a Slide Puzzle Game using HTML, CSS, and JavaScript - Full Tutorial
Build a Slide Puzzle Game using HTML, CSS, and JavaScript - Full Tutorial
Просмотров 1613 месяца назад
Welcome to The Coding Guide! 🎉 In this video, we'll be creating a classic slide puzzle game using HTML, CSS, and JavaScript. Whether you're a beginner or looking to enhance your web development skills, this tutorial covers all the steps you need to build an interactive and fun slide puzzle game. 🕹️ What You'll Learn: Structuring the game layout with HTML Styling the puzzle pieces with CSS Imple...
Purple Rain Effect with HTML, CSS, & JavaScript | Step-by-Step Tutorial10:29Purple Rain Effect with HTML, CSS, & JavaScript | Step-by-Step Tutorial
Purple Rain Effect with HTML, CSS, & JavaScript | Step-by-Step Tutorial
Просмотров 1864 месяца назад
Purple Rain Effect with HTML, CSS, & JavaScript | Step-by-Step Tutorial
Create a Solar System Animation Using HTML, CSS | The Coding Guide17:02Create a Solar System Animation Using HTML, CSS | The Coding Guide
Create a Solar System Animation Using HTML, CSS | The Coding Guide
Просмотров 884 месяца назад
Create a Solar System Animation Using HTML, CSS | The Coding Guide
Create an Analog Clock with HTML, CSS & JavaScript | The Coding Guide11:10Create an Analog Clock with HTML, CSS & JavaScript | The Coding Guide
Create an Analog Clock with HTML, CSS & JavaScript | The Coding Guide
Просмотров 674 месяца назад
Create an Analog Clock with HTML, CSS & JavaScript | The Coding Guide
Build A Sketch board or Paint App in HTML CSS & JavaScript | The Coding Guide46:19Build A Sketch board or Paint App in HTML CSS & JavaScript | The Coding Guide
Build A Sketch board or Paint App in HTML CSS & JavaScript | The Coding Guide
Просмотров 741Год назад
Build A Sketch board or Paint App in HTML CSS & JavaScript | The Coding Guide
Building Stunning Neomorphic Forms: HTML and CSS Tutorial8:09Building Stunning Neomorphic Forms: HTML and CSS Tutorial
Building Stunning Neomorphic Forms: HTML and CSS Tutorial
Просмотров 65Год назад
Building Stunning Neomorphic Forms: HTML and CSS Tutorial
Random Quote Generator | JavaScript Beginner Project Tutorial19:19Random Quote Generator | JavaScript Beginner Project Tutorial
Random Quote Generator | JavaScript Beginner Project Tutorial
Просмотров 90Год назад
Random Quote Generator | JavaScript Beginner Project Tutorial
Building a Simple and Realistic Keyboard with HTML and CSS11:44Building a Simple and Realistic Keyboard with HTML and CSS
Building a Simple and Realistic Keyboard with HTML and CSS
Просмотров 306Год назад
Building a Simple and Realistic Keyboard with HTML and CSS

Комментарии

  • @SpeakingGuru
    @SpeakingGuru 7 дней назад

    Source code please

    • @TheCodingGuide
      @TheCodingGuide День назад

      github.com/bijuaryal91/KBC give it a star 😊

  • @VidPlex-vz7ks
    @VidPlex-vz7ks Месяц назад

    source code?

    • @TheCodingGuide
      @TheCodingGuide День назад

      github.com/bijuaryal91/keyboard give it a star😊

  • @virajshirsekar9502
    @virajshirsekar9502 Месяц назад

    THIS CODE IS NOT WORKING. CAN YOU GIVE SOURCE CODE OF THIS APP?

    • @TheCodingGuide
      @TheCodingGuide День назад

      github.com/bijuaryal91/SketchBook please give it a start

  • @ScrollWithVaishu
    @ScrollWithVaishu Месяц назад

    Sir pls provide source code if it's possible

    • @TheCodingGuide
      @TheCodingGuide День назад

      github.com/bijuaryal91/KBC give it a star 😊

  • @anmec9484
    @anmec9484 Месяц назад

    Interesting, but it would be better if you explain what you’re doing. The way you did, the video is boring.

    • @TheCodingGuide
      @TheCodingGuide Месяц назад

      Thank you for your suggestion. I will do that in my next video 💗

  • @rubit1142
    @rubit1142 2 месяца назад

    Sir please provide source code 😢

    • @TheCodingGuide
      @TheCodingGuide День назад

      github.com/bijuaryal91/KBC give it a star 😊

  • @codingwithchamindu
    @codingwithchamindu 2 месяца назад

  • @codingwithchamindu
    @codingwithchamindu 2 месяца назад

    good video

  • @WebTechKnowledge
    @WebTechKnowledge 2 месяца назад

    good job

  • @user-vd4ib1hh7n
    @user-vd4ib1hh7n 2 месяца назад

    hey how can I contact you? I could not find your email address. I have project. Plz leave your email

    • @TheCodingGuide
      @TheCodingGuide 2 месяца назад

      Feel free to contact me at thecodinguide91@gmail.com

  • @MAZEN_TAEMIN
    @MAZEN_TAEMIN 3 месяца назад

    amazing keep going❤❤❤❤

  • @Hima-i9o
    @Hima-i9o 3 месяца назад

    Good

  • @kristinaaryal7077
    @kristinaaryal7077 3 месяца назад

    very nice thank you for tutorial😘

  • @reeyaramudamu309
    @reeyaramudamu309 4 месяца назад

    👏👏👏

  • @marcolinokamunda1440
    @marcolinokamunda1440 11 месяцев назад

    O LINK DO FICHEIRO DO PROJECTO NÃO ESTÁ DISPONÍVEL SE FOR POSSÍVEL REENVIE DOS ICONS

  • @hamzaahmad-dg8lv
    @hamzaahmad-dg8lv Год назад

    ruclips.net/video/j9MlT83fm-w/видео.html