InnovateWithMe
InnovateWithMe
  • 78
  • 38 950
Joke Generator Using HTML, CSS, and JavaScript | Fun Web Development Project
Source Code : drive.google.com/drive/folders/1445fIGq8MhwJVw43P05HvBFyT3-FtZhd?usp=sharing
Google font(Rubik) : fonts.google.com/specimen/Rubik
Joke API Documentaion link: sv443.net/jokeapi/v2/
Welcome to another exciting coding tutorial on InnovateWithMe! In this video, we'll be building a simple yet fun Joke Generator using HTML, CSS, and JavaScript. Whether you're a beginner or just looking to enhance your web development skills, this project is perfect for you!
In this video, you’ll learn:
How to create a basic web page structure using HTML
How to style your joke generator with CSS for a sleek and engaging look
How to use JavaScript to fetch and display random jokes with a button click
If you enjoyed this tutorial, don't forget to like, subscribe, and hit the notification bell to stay updated on all our latest content. Drop a comment below with any questions or suggestions for future videos!
Happy coding!
Song: 7sten - Under Water
Music provided by Vlog No Copyright Music
Video Link: bit.ly/48DqT3G
Don't forget to subscribe to my channel.
Follow us on social media :
Instagram - innovate_with__me
Figma - www.figma.com/@innovatewithme
Any Quires mail here : innovatewithme1@gmail.com
Please subscribe to our channel | If you like the video share it with your friends | show some love towards us
Joke Generator, HTML Tutorial, CSS Tutorial, JavaScript Tutorial, Web Development, Web Design, Fun Coding Projects, JavaScript Projects, Coding for Beginners, Frontend Development, HTML CSS JS Project, Web Development Project, Interactive Web Design, JavaScript Basics, HTML Basics, CSS Styling, Random Joke Generator, Code Along, Beginner Coding Projects, Web Development Tutorial, Create a Joke Generator, HTML and JavaScript, Coding Fun, DIY Web Project, JavaScript for Beginners, Web Design Tips, Learn HTML CSS JS, Simple Web Projects, Fun with JavaScript, Coding for Fun, HTML CSS JS, Programming Tutorials, Web Development Tips, Interactive Coding, Frontend Coding Projects, Learn to Code, Web Project Tutorial, JavaScript Code Example, HTML CSS Projects, Easy Web Development, Coding Challenges, JavaScript Functions, Web UI Design, Coding Made Easy, Beginner Web Projects, HTML and CSS Design, JavaScript for Web Development, Coding Fun Projects, Creative Web Projects, Programming for Beginners
Joke App, HTML5, CSS3, JavaScript Fun, Coding Projects for Beginners, Frontend Projects, Build a Joke Generator, Web Dev Tutorial, Easy JavaScript Projects, Web Development Ideas, JavaScript UI, HTML CSS JS Tutorial, Coding Fun Projects, Beginner JavaScript Projects, Interactive Design, JavaScript Basics Tutorial, HTML CSS JavaScript, Web Project Ideas, Build with JavaScript, Frontend Development Tutorial, Creative Coding, HTML CSS Projects for Beginners, Fun Coding, Simple Joke App, Learn JavaScript, Web Development for Beginners, JavaScript DOM Manipulation, HTML and CSS Tutorial, JavaScript Coding Tutorial, Build Your Own Joke Generator, Web Development Skills, Coding Tutorials, JavaScript Essentials, HTML CSS JS Examples, Easy Coding Projects, Web Design Projects, Frontend Code, JavaScript Programming, Beginner Web Development, Coding Skills, Web Development Concepts, Simple HTML CSS Projects, Fun JavaScript Applications, Web Development Tips and Tricks, Interactive JavaScript, HTML and JavaScript Projects, JavaScript Code Examples.
How to create a joke generator, JavaScript for beginners, HTML CSS JavaScript project ideas, Easy web development projects, Learn HTML CSS JavaScript, Fun web development tutorials, Interactive coding projects, Simple coding exercises, Beginner JavaScript tutorials, HTML and CSS basics, JavaScript coding examples, Build a web app from scratch, Frontend development tutorials, JavaScript tutorial for beginners, Coding project ideas for beginners, HTML CSS JavaScript tutorial for beginners, How to use JavaScript with HTML, Web design tutorials, Learn to code HTML CSS JS, JavaScript DOM manipulation tutorial, HTML CSS JS coding projects, Fun JavaScript exercises, Web development for newbies, How to style web pages with CSS, JavaScript projects for practice, Build interactive web apps, Coding tutorials for beginners, Learn web development online, JavaScript functions explained, How to build a joke app, Coding projects to improve skills, HTML CSS JS examples, Web development tips and tricks, JavaScript for frontend development, Easy HTML CSS JavaScript projects, Creative coding tutorials, Learn frontend development, Simple JavaScript projects, HTML and
มุมมอง: 144

วีดีโอ

Creating simple Wiggly Moustache in Html, CSS | CSS Battle #1 (Wiggly Moustache)
มุมมอง 18หลายเดือนก่อน
In this video, I will show you how to create a simple "Wiggly Moustache" pattern using HTML and CSS, inspired by CSS Battle #1: Wiggly Moustache. This is part of my series where I will cover all CSS Battle solutions. Stay tuned for more videos as we explore various creative coding challenges using HTML and CSS. This tutorial is perfect for beginners and those looking to enhance their web develo...
Creating simple Eye of Sauron in Html, CSS | CSS Battle #1 (Eye of Sauron)
มุมมอง 8หลายเดือนก่อน
In this video, I will show you how to create a simple "Eye of Sauron" pattern using HTML and CSS, inspired by CSS Battle #1: Eye of Sauron. This is part of my series where I will cover all CSS Battle solutions. Stay tuned for more videos as we explore various creative coding challenges using HTML and CSS. This tutorial is perfect for beginners and those looking to enhance their web development ...
Creating simple Cloaked Spirits in Html, CSS | CSS Battle #1 (Cloaked Spirits)
มุมมอง 11หลายเดือนก่อน
In this video, I will show you how to create a simple "Cloaked Spirits" pattern using HTML and CSS, inspired by CSS Battle #1: Cloaked Spirits. This is part of my series where I will cover all CSS Battle solutions. Stay tuned for more videos as we explore various creative coding challenges using HTML and CSS. This tutorial is perfect for beginners and those looking to enhance their web developm...
Creating simple Tesseract in Html, CSS | CSS Battle #1 (Tesseract)
มุมมอง 13หลายเดือนก่อน
In this video, I will show you how to create a simple "Tesseract" pattern using HTML and CSS, inspired by CSS Battle #1: Tesseract. This is part of my series where I will cover all CSS Battle solutions. Stay tuned for more videos as we explore various creative coding challenges using HTML and CSS. This tutorial is perfect for beginners and those looking to enhance their web development skills! ...
Creating simple Forking Crazy in Html, CSS | CSS Battle #1 (Forking Crazy)
มุมมอง 14หลายเดือนก่อน
In this video, I will show you how to create a simple "Forking Crazy" pattern using HTML and CSS, inspired by CSS Battle #1: Forking Crazy. This is part of my series where I will cover all CSS Battle solutions. Stay tuned for more videos as we explore various creative coding challenges using HTML and CSS. This tutorial is perfect for beginners and those looking to enhance their web development ...
Creating simple Leafy Trail in Html, CSS | CSS Battle #1 (Leafy Trail)
มุมมอง 9หลายเดือนก่อน
In this video, I will show you how to create a simple "Leafy Trail" pattern using HTML and CSS, inspired by CSS Battle #1: Leafy Trail. This is part of my series where I will cover all CSS Battle solutions. Stay tuned for more videos as we explore various creative coding challenges using HTML and CSS. This tutorial is perfect for beginners and those looking to enhance their web development skil...
Creating simple Missing Slice in Html, CSS | CSS Battle #1 (Missing Slice)
มุมมอง 33หลายเดือนก่อน
In this video, I will show you how to create a simple "Missing Slice" pattern using HTML and CSS, inspired by CSS Battle #1: Missing Slice. This is part of my series where I will cover all CSS Battle solutions. Stay tuned for more videos as we explore various creative coding challenges using HTML and CSS. This tutorial is perfect for beginners and those looking to enhance their web development ...
Creating simple Acid Rain in Html, CSS | CSS Battle #1 (Acid Rain)
มุมมอง 10หลายเดือนก่อน
In this video, I will show you how to create a simple "Acid Rain" pattern using HTML and CSS, inspired by CSS Battle #1: Acid Rain. This is part of my series where I will cover all CSS Battle solutions. Stay tuned for more videos as we explore various creative coding challenges using HTML and CSS. This tutorial is perfect for beginners and those looking to enhance their web development skills! ...
Creating simple Ups n Down in Html, CSS | CSS Battle #1 (Ups n Down)
มุมมอง 8หลายเดือนก่อน
In this video, I will show you how to create a simple "Ups n Down" pattern using HTML and CSS, inspired by CSS Battle #1: Ups n Down. This is part of my series where I will cover all CSS Battle solutions. Stay tuned for more videos as we explore various creative coding challenges using HTML and CSS. This tutorial is perfect for beginners and those looking to enhance their web development skills...
Creating simple Push Button in Html, CSS | CSS Battle #1 (Push Button)
มุมมอง 18หลายเดือนก่อน
In this video, I will show you how to create a simple push button using HTML and CSS, inspired by CSS Battle #1: Push Button. This is part of my series where I will cover all CSS Battle solutions. Stay tuned for more videos as we explore various creative coding challenges using HTML and CSS. This tutorial is perfect for beginners and those looking to enhance their web development skills! Don't ...
Creating simple carrom in Html, CSS | CSS Battle #1 (carrom)
มุมมอง 21หลายเดือนก่อน
In this video, I will show you how to create a simple carrom board using HTML and CSS, inspired by CSS Battle #1: Carrom. This is part of my series where I cover all CSS Battle solutions. Stay tuned for more videos as we explore various creative coding challenges using HTML and CSS. This tutorial is perfect for beginners and those looking to enhance their web development skills! Don't forget to...
Creating simple square in Html, CSS | CSS Battle #1 (Simply Square)
มุมมอง 38หลายเดือนก่อน
In this video, I will show you how to create a simple square using HTML and CSS, inspired by CSS Battle #1: Simply Square. This is the first video in my series where I will cover all CSS Battle solutions. Stay tuned for more videos where we'll explore various creative coding challenges using HTML and CSS. Perfect for beginners and those looking to enhance their web development skills! Don't for...
Top 5 AI Tool Must have a try | 2024
มุมมอง 77หลายเดือนก่อน
Welcome to our latest video on the top 5 AI tools you must try in 2024! Whether you're a tech enthusiast, a developer, or someone curious about the latest advancements in artificial intelligence, this video is for you. #AI #ArtificialIntelligence #Technology #TopAITools #2024Innovations 🤝 Join us on this coding journey and level up your web development skills. Don't forget to like, share, and s...
Portfolio Card Design using Figma | Wireframe + Design + Code(HTML&CSS) | 2024
มุมมอง 73หลายเดือนก่อน
Source code : drive.google.com/drive/folders/1Q-KjCgFuuLaVykfmTuE0ZL0NRSgvS2p5?usp=sharing Figma Design File Link : www.figma.com/community/file/1386599281182489654/portfolio-card-design Create a visually appealing Portfolio Card design using Figma, integrating both wireframing and detailed design phases. This project aims to showcase your skills in UI/UX design while also implementing the desi...
Design a Stunning Jewelry Website Landing Page with Figma - Step-by-Step Tutorial 2024
มุมมอง 1143 หลายเดือนก่อน
Design a Stunning Jewelry Website Landing Page with Figma - Step-by-Step Tutorial 2024
Landing Page Design in Figma | For Beginners - 2024
มุมมอง 1553 หลายเดือนก่อน
Landing Page Design in Figma | For Beginners - 2024
Fibonacci Series in Java Using Recursion | Java Program
มุมมอง 454 หลายเดือนก่อน
Fibonacci Series in Java Using Recursion | Java Program
Food Website Landing Page Design | Figma
มุมมอง 1364 หลายเดือนก่อน
Food Website Landing Page Design | Figma
Bootstrap 5 | Signup Page using HTML, CSS , Bootstrap 5 | Step by Step Tutorial - 2024
มุมมอง 7434 หลายเดือนก่อน
Bootstrap 5 | Signup Page using HTML, CSS , Bootstrap 5 | Step by Step Tutorial - 2024
How to build a Calculator using HTML , CSS and JavaScript | 2024
มุมมอง 7835 หลายเดือนก่อน
How to build a Calculator using HTML , CSS and JavaScript | 2024
Landing Page for Website | Ecommerce website Using Figma - 2024
มุมมอง 2055 หลายเดือนก่อน
Landing Page for Website | Ecommerce website Using Figma - 2024
HTML CSS Cards | Hover effect | In 5 minutes - 2024
มุมมอง 636 หลายเดือนก่อน
HTML CSS Cards | Hover effect | In 5 minutes - 2024
Bootstrap 5 | Login page using HTML, CSS , Bootstrap 5 | Step by Step Tutorial - 2024
มุมมอง 8K6 หลายเดือนก่อน
Bootstrap 5 | Login page using HTML, CSS , Bootstrap 5 | Step by Step Tutorial - 2024
Figma Sign-In Page Design Tutorial for Beginners | Website design - 2024
มุมมอง 6246 หลายเดือนก่อน
Figma Sign-In Page Design Tutorial for Beginners | Website design - 2024
Figma Tutorial: Modern Login and Signup Page Design - Step-by-Step Guide - 2024
มุมมอง 6K6 หลายเดือนก่อน
Figma Tutorial: Modern Login and Signup Page Design - Step-by-Step Guide - 2024
Design a Professional Login and Signup Page Using Figma | Complete Tutorial - 2024
มุมมอง 2317 หลายเดือนก่อน
Design a Professional Login and Signup Page Using Figma | Complete Tutorial - 2024
Login and Signup Page using Figma | Prototype, Mobile App UI Design | Complete tutorial - 2024
มุมมอง 2.4K7 หลายเดือนก่อน
Login and Signup Page using Figma | Prototype, Mobile App UI Design | Complete tutorial - 2024
Login Page in Figma : A Step-by-Step Tutorial for Beginners - 2024
มุมมอง 1.8K7 หลายเดือนก่อน
Login Page in Figma : A Step-by-Step Tutorial for Beginners - 2024
Landing Page for website using Figma | Complete step-by-step tutorial for beginners to advance 2024
มุมมอง 2667 หลายเดือนก่อน
Landing Page for website using Figma | Complete step-by-step tutorial for beginners to advance 2024

ความคิดเห็น

  • @devsuthar4329
    @devsuthar4329 11 วันที่ผ่านมา

    Thanks for this. Please make more and more projects of javascript

    • @innovate_withme
      @innovate_withme 9 วันที่ผ่านมา

      Sure 😊 .Keep supporting

  • @adityanaik02
    @adityanaik02 หลายเดือนก่อน

    Source code

    • @innovate_withme
      @innovate_withme หลายเดือนก่อน

      I will update it today sorry for that 🙂

    • @innovate_withme
      @innovate_withme หลายเดือนก่อน

      uploaded

  • @adhitamaputra-73
    @adhitamaputra-73 2 หลายเดือนก่อน

    .b.i.n.a. .s.a.r.a.n.a. .i.n.f.o.r.m.a.t.i.k.a.

  • @naturefacts2732
    @naturefacts2732 2 หลายเดือนก่อน

    How to copy login page to create an account

    • @innovate_withme
      @innovate_withme 2 หลายเดือนก่อน

      I didn't get ur question can u tell me in brief what u r trying to say

  • @revathi1822
    @revathi1822 2 หลายเดือนก่อน

    i am unable to save page, can you tell me ?

    • @innovate_withme
      @innovate_withme 2 หลายเดือนก่อน

      In the right side down u have export option then click export in any format

  • @AkshRajj
    @AkshRajj 3 หลายเดือนก่อน

    good video thnk you soo muchh

    • @innovate_withme
      @innovate_withme 3 หลายเดือนก่อน

      🥰thanks for valuable feedback

  • @etabeta31
    @etabeta31 3 หลายเดือนก่อน

    Hello, thank you for this video! Really helpful and pleasant to follow. Kindly, could you tell the music's title? :) Many thanks in advance.

    • @innovate_withme
      @innovate_withme 3 หลายเดือนก่อน

      It's from Microsoft Clipchamp I don't remember the name 😓

  • @carouselcoinleisure4141
    @carouselcoinleisure4141 3 หลายเดือนก่อน

    Difficult to understand and follow, better calculator JavaScript tutorials are available, sorry.

    • @innovate_withme
      @innovate_withme 3 หลายเดือนก่อน

      Sure follow other videos no problem!

  • @scorpio.._..vibess
    @scorpio.._..vibess 3 หลายเดือนก่อน

    okay but how user will be able to type info on it

    • @innovate_withme
      @innovate_withme 3 หลายเดือนก่อน

      This is just design . For make it functional u have to code for it in html , css, js

  • @suen-tech
    @suen-tech 4 หลายเดือนก่อน

    Thnx

  • @suen-tech
    @suen-tech 4 หลายเดือนก่อน

    Thx

  • @konstantinkuznecov5585
    @konstantinkuznecov5585 4 หลายเดือนก่อน

    good!! but it's best to use height: 100vh rather than height: 100% I think so

    • @innovate_withme
      @innovate_withme 4 หลายเดือนก่อน

      Ok I will make use that 😊

  • @syedalishah7141
    @syedalishah7141 4 หลายเดือนก่อน

    want some more basic and short bootstrap projects like this

  • @andrealang3393
    @andrealang3393 5 หลายเดือนก่อน

    ☝️ "Promo sm"

  • @2mgofficial
    @2mgofficial 5 หลายเดือนก่อน

    Want figma quiz app project

  • @muslimabbas2558
    @muslimabbas2558 5 หลายเดือนก่อน

    Hi, amazing work, can you please tell me, from where you got these illustrations??

    • @innovate_withme
      @innovate_withme 5 หลายเดือนก่อน

      In figma I got that illustrations

    • @muslimabbas2558
      @muslimabbas2558 5 หลายเดือนก่อน

      @@innovate_withme can you please tell me plugin ??

    • @innovate_withme
      @innovate_withme 5 หลายเดือนก่อน

      That is not plug-in I took from someone else illustration designs

    • @innovate_withme
      @innovate_withme 5 หลายเดือนก่อน

      U can search it u will get more number of illustration from other website design in figma

  • @GLOBALEXUTIVES
    @GLOBALEXUTIVES 5 หลายเดือนก่อน

    How do you know what page is coming next

    • @innovate_withme
      @innovate_withme 5 หลายเดือนก่อน

      Sry didn't understood..what are u exactly asking?

    • @GLOBALEXUTIVES
      @GLOBALEXUTIVES 5 หลายเดือนก่อน

      @innovate_withme after you done creating a login page for your website how do I know what comes next after I login please help

    • @innovate_withme
      @innovate_withme 5 หลายเดือนก่อน

      U can design home page

    • @GLOBALEXUTIVES
      @GLOBALEXUTIVES 5 หลายเดือนก่อน

      @innovate_withme so your advice for me is to rather create a home page instead of a login page

    • @innovate_withme
      @innovate_withme 5 หลายเดือนก่อน

      U can do both after we click login then it should go to main page of your website

  • @noormahalbahawalpurofficial
    @noormahalbahawalpurofficial 6 หลายเดือนก่อน

    Share code in description that will help more

  • @user-zb4yk9zq9k
    @user-zb4yk9zq9k 6 หลายเดือนก่อน

    Please explain the code also

    • @innovate_withme
      @innovate_withme 5 หลายเดือนก่อน

      Sure try to do it in coming videos

  • @emmanuelmwangi3071
    @emmanuelmwangi3071 6 หลายเดือนก่อน

    Great design

  • @haitayreset
    @haitayreset 6 หลายเดือนก่อน

    Hello, thanks for sharing Very good design, congrats can you do a sign up with the same design please

    • @innovate_withme
      @innovate_withme 6 หลายเดือนก่อน

      Thank you so much for ur response. Sure I will do it in coming video . Keep supporting and do subscribe ☺️Hope u have a great day!

  • @user-wv5ce4fq6n
    @user-wv5ce4fq6n 6 หลายเดือนก่อน

    Can u tell me how can I find this kind of pic for free

  • @Movie____hindi__
    @Movie____hindi__ 7 หลายเดือนก่อน

    Are yr sign up ka kaha hai

    • @innovate_withme
      @innovate_withme 7 หลายเดือนก่อน

      Only login page video that is refer other video's I have uploaded for sign up

    • @Dedstuffs___123
      @Dedstuffs___123 7 หลายเดือนก่อน

      when @@innovate_withme

    • @Dedstuffs___123
      @Dedstuffs___123 7 หลายเดือนก่อน

      hey bro upload quick please @@innovate_withme

  • @phaicoding9073
    @phaicoding9073 8 หลายเดือนก่อน

    good job bro

  • @moulidhar
    @moulidhar 8 หลายเดือนก่อน

    Please post about how to add plugins and how to use plugins ? 🙏🏻

  • @moulidhar
    @moulidhar 8 หลายเดือนก่อน

    Thankyou bro 💓🔥

  • @Chinagoromnwabueze
    @Chinagoromnwabueze 8 หลายเดือนก่อน

    Please can you add voice for a better understanding of what you are doing. This is really confusing for a beginner like me.

    • @innovate_withme
      @innovate_withme 8 หลายเดือนก่อน

      Some issue is there so after some days I will try👍

    • @inkitdesigns
      @inkitdesigns 7 หลายเดือนก่อน

      You can check mine till then 😊

  • @SAL73VFX
    @SAL73VFX 8 หลายเดือนก่อน

    Good tutorial, I learnt a lot of using Figma and Design, thanks a lot!

    • @innovate_withme
      @innovate_withme 8 หลายเดือนก่อน

      Happy to hear 😊 keep watching

  • @moulidhar
    @moulidhar 8 หลายเดือนก่อน

    How to add icons and make your icon working in figma ? Make a video of it .

    • @innovate_withme
      @innovate_withme 8 หลายเดือนก่อน

      Ok sure🙌👍

    • @innovate_withme
      @innovate_withme 8 หลายเดือนก่อน

      th-cam.com/video/cszP65xq00U/w-d-xo.html video uploaded now watch it now ☺

  • @codingwithchamindu
    @codingwithchamindu 8 หลายเดือนก่อน

    • @innovate_withme
      @innovate_withme 8 หลายเดือนก่อน

      ☺️❤️

    • @adhitamaputra-73
      @adhitamaputra-73 2 หลายเดือนก่อน

      .b.i.n.a. .s.a.r.a.n.a. .i.n.f.o.r.m.a.t.i.k.a.

  • @shankarmurthys8373
    @shankarmurthys8373 8 หลายเดือนก่อน

    Břö explain with all the tags and css futures

    • @innovate_withme
      @innovate_withme 8 หลายเดือนก่อน

      Yah sure in next project I will cover more tags and css features 😀

  • @anthonypadie9823
    @anthonypadie9823 8 หลายเดือนก่อน

    Amazing

  • @msplifestyles
    @msplifestyles 8 หลายเดือนก่อน

    Awsome🥰

  • @avramfuglsang5951
    @avramfuglsang5951 9 หลายเดือนก่อน

    🌸 Promo_SM

  • @moulidhar
    @moulidhar 9 หลายเดือนก่อน

    Bro how to make a responsive figma design?

    • @innovate_withme
      @innovate_withme 9 หลายเดือนก่อน

      Soon we will upload video related to that ☺

  • @innovate_withme
    @innovate_withme 9 หลายเดือนก่อน

    #shorts

  • @innovate_withme
    @innovate_withme 9 หลายเดือนก่อน

    I am trying to grow my channel, so if you find this video useful, #subscribe & hitting the #bell :) Thanks for watching and hope you liked and learnt something new!

  • @innovate_withme
    @innovate_withme 9 หลายเดือนก่อน

    I am trying to grow my channel, so if you find this video useful, #subscribe & hitting the #bell :) Thanks for watching and hope you liked and learnt something new!

  • @innovate_withme
    @innovate_withme 9 หลายเดือนก่อน

    Comment Down your answer now itself 🔥

  • @innovate_withme
    @innovate_withme 10 หลายเดือนก่อน

    Subscribe to our channel ❤

  • @msplifestyles
    @msplifestyles 10 หลายเดือนก่อน

    Awsome ❤