Code with Fatima
Code with Fatima
  • 60
  • 11 705
Building a Functional Digital and Analog Clock with Alarm | JavaScript Tutorial
Learn how to create a stunning digital and analog clock with alarm functionality using JavaScript in this step-by-step tutorial. This video covers everything from setting up the clock interface to coding the alarm system, ensuring you understand every detail. You'll discover how to:
Display current time and date with real-time updates.
Build an interactive analog clock with dynamic hands.
Implement a customizable alarm system with sound.
Format time properly for AM/PM display.
Perfect for beginners and intermediate developers looking to enhance their JavaScript skills. Don't forget to like, share, and subscribe to Code with Fatima for more web development tutorials! 🎉
Переглядів: 51

Відео

Building a Fun Tic Tac Toe Game | HTML, CSS, & JavaScript Tutorial
Переглядів 20221 день тому
Learn how to build a classic Tic Tac Toe game from scratch using HTML, CSS, and JavaScript in this step-by-step tutorial! We'll guide you through creating the game board, implementing game logic, and adding some interactive styling to make your project fun and engaging. Perfect for beginners and anyone looking to sharpen their front-end development skills. Let's bring this timeless game to life! 🚀
How to Build a Simple Chess Game Using HTML, CSS, and JavaScript
Переглядів 147Місяць тому
Welcome to Code with Fatima! In this tutorial, we’ll dive into creating a simple chess game using HTML, CSS, and JavaScript. This project will guide you through building a basic chessboard layout, adding pieces, and implementing simple move functionality. Perfect for beginners, this tutorial breaks down each step, from setting up the board design to making pieces move on click. By the end, you’...
Building an Image Search Engine with HTML, CSS, and JavaScript | Code with Fatima
Переглядів 97Місяць тому
In this video, we'll build a powerful and stylish Image Search Engine using HTML, CSS, and JavaScript, connected to the Unsplash API! This tutorial is perfect for beginners and intermediate developers who want to learn how to create a functional web application step-by-step. What You'll Learn: Setting up an HTML structure for search functionality. Styling with CSS for a modern, responsive desig...
Portfolio Website Template with HTML & CSS | Step-by-Step Tutorial | Code with Fatima
Переглядів 1,6 тис.Місяць тому
In this video, we’ll build a stunning and animated portfolio website from scratch using HTML and CSS! Join me as I guide you through creating a beautiful, responsive layout with smooth animations and eye-catching effects. Perfect for beginners and intermediate developers, this tutorial will cover: ✨ Setting up a header with navigation ✨ Building an animated hero section ✨ Adding social media li...
Building a Responsive Chat Box | HTML, CSS, & JavaScript Tutorial
Переглядів 1322 місяці тому
In this tutorial, we'll create a fully responsive chat box from scratch using HTML, CSS, and JavaScript. Whether you're building a messaging app or want to add a chat feature to your website, this step-by-step guide will show you how to structure the chat interface, style it with modern CSS techniques, and add basic JavaScript functionality for message interaction. 🔔 Don't forget to subscribe t...
How to Build a Responsive Calendar App with HTML, CSS, & JavaScript | Step-by-Step Tutorial
Переглядів 2102 місяці тому
Welcome to Code with Fatima! In this tutorial, I'll guide you through building a sleek and functional Calendar App using HTML, CSS, and JavaScript. Whether you're a beginner or looking to sharpen your coding skills, this step-by-step guide will help you create a fully responsive and interactive calendar app from scratch. Learn how to manage dates, style events, and make the app user-friendly ac...
How to Create Sticky Notes App | HTML, CSS, & JavaScript Tutorial
Переглядів 4212 місяці тому
In this tutorial, learn how to create a sticky notes app using HTML, CSS, and JavaScript. Follow along as we build a functional and visually appealing interface for organizing notes. We'll cover essential features like adding, editing, and deleting notes, while ensuring a smooth user experience. Whether you're a beginner or looking to sharpen your coding skills, this step-by-step guide will hel...
Building a Simple To-Do List App with HTML, CSS, and JavaScript | Code with Fatima
Переглядів 773 місяці тому
Welcome back to Code with Fatima! In this video, we’re going to build a simple yet functional To-Do List App using HTML, CSS, and JavaScript. This is a perfect project for beginners who want to enhance their web development skills by working on a practical application. What You’ll Learn: HTML Structure: How to create the basic structure for the To-Do List App, including input fields, buttons, a...
How to Create a Responsive Coffee Website | HTML & CSS Tutorial (Part-2)
Переглядів 893 місяці тому
In this video, we'll take you through the process of creating a fully responsive coffee website using HTML and CSS. This tutorial is perfect for beginners and those looking to enhance their web development skills. Learn how to build and style a complete website that looks great on any device. From layout and typography to responsive design techniques, this video covers everything you need to kn...
How to Create a Responsive Coffee Website | HTML & CSS Tutorial
Переглядів 1134 місяці тому
In this video, we'll take you through the process of creating a fully responsive coffee website using HTML and CSS. This tutorial is perfect for beginners and those looking to enhance their web development skills. Learn how to build and style a complete website that looks great on any device. From layout and typography to responsive design techniques, this video covers everything you need to kn...
How to Create an Education Website Footer | HTML & CSS Tutorial
Переглядів 464 місяці тому
What You’ll Learn: HTML Structure: Build a semantic and well-organized header section using HTML. CSS Styling: Learn techniques to style your header with colors, fonts, and responsive design for a polished look on any device. Responsive Navigation: Implement a flexible navigation menu that adapts to different screen sizes using media queries. Font Awesome Integration: Enhance your navigation wi...
How to Create an Education Website About Section | HTML & CSS Tutorial
Переглядів 514 місяці тому
How to Create an Education Website About Section | HTML & CSS Tutorial
How to Create an Education Website Home | HTML & CSS Tutorial
Переглядів 374 місяці тому
How to Create an Education Website Home | HTML & CSS Tutorial
How to Create an Education Website Header | HTML & CSS Tutorial
Переглядів 2,3 тис.4 місяці тому
How to Create an Education Website Header | HTML & CSS Tutorial
Building a Modern Doctor Appointment Website | HTML & CSS Tutorial
Переглядів 1084 місяці тому
Building a Modern Doctor Appointment Website | HTML & CSS Tutorial
Building a Modern Doctor Appointment Website | HTML & CSS Tutorial
Переглядів 1034 місяці тому
Building a Modern Doctor Appointment Website | HTML & CSS Tutorial
How To Make Weather App Using HTML CSS & JavaScript Step By Step Explained.
Переглядів 1,3 тис.4 місяці тому
How To Make Weather App Using HTML CSS & JavaScript Step By Step Explained.
How to Create Header using HTML/CSS.
Переглядів 965 місяців тому
How to Create Header using HTML/CSS.
How to Create Coffee Landing Page for Beginner Using HTML/CSS.
Переглядів 787 місяців тому
How to Create Coffee Landing Page for Beginner Using HTML/CSS.
How to create review, contact and footer using html and css.
Переглядів 1568 місяців тому
How to create review, contact and footer using html and css.
How to create icons and products using html and css.
Переглядів 948 місяців тому
How to create icons and products using html and css.
How to create menu , home & about page using HTML/CSS (part-3)
Переглядів 568 місяців тому
How to create menu , home & about page using HTML/CSS (part-3)
How to create menu and home page using HTML/CSS (part-2)
Переглядів 1089 місяців тому
How to create menu and home page using HTML/CSS (part-2)
How to create LOGO / NAVBAR / ICONS using HTML/CSS
Переглядів 2009 місяців тому
How to create LOGO / NAVBAR / ICONS using HTML/CSS
How to Create webpage
Переглядів 689 місяців тому
How to Create webpage
How to Build a Simple Calculator Using HTML, CSS, and JavaScript
Переглядів 5329 місяців тому
How to Build a Simple Calculator Using HTML, CSS, and JavaScript
Learn HTML, CSS, and JavaScript for Beginners
Переглядів 1219 місяців тому
Learn HTML, CSS, and JavaScript for Beginners
HOW TO CREATE LOGIN FORM
Переглядів 9610 місяців тому
HOW TO CREATE LOGIN FORM
LEARN HOW TO DESIGN BEST CARD WITH HOVER.
Переглядів 8911 місяців тому
LEARN HOW TO DESIGN BEST CARD WITH HOVER.

КОМЕНТАРІ

  • @khanmahebullahnisarahmed912
    @khanmahebullahnisarahmed912 8 днів тому

    Great tutorial

  • @issamoshi
    @issamoshi 19 днів тому

    why don't you use the live server to show the progress while you are programming?

  • @Fahadkhan-xg4hg
    @Fahadkhan-xg4hg 26 днів тому

    video speed ab bilkul theek he bs ab explain krdia kre buht mushqil ati he ese

  • @MdArman-o8p9v
    @MdArman-o8p9v Місяць тому

    gihub;link

  • @renithroshan2073
    @renithroshan2073 Місяць тому

    We are can use hexadecimal code instead of unicode

  • @saravanabalan5066
    @saravanabalan5066 Місяць тому

    can you pin image icon please

  • @albatrawegaming1842
    @albatrawegaming1842 Місяць тому

    woooow good joob😍

  • @Fahadkhan-xg4hg
    @Fahadkhan-xg4hg Місяць тому

    itna speed up me krne se samajh nhi araha ..code ko sath me explain kre kia kia he

    • @kaneezfatimakhan9692
      @kaneezfatimakhan9692 Місяць тому

      Sry...for that but next time I do my best...Insha Allah

    • @Fahadkhan-xg4hg
      @Fahadkhan-xg4hg Місяць тому

      @@kaneezfatimakhan9692 api one more thing.related to web..Doing js for last 2 yesars rox coding krta hon.But koi logic nhi bn rahi js me ..Roz hours of coding krke tutorials dekh ke bs..If u were me ap kesi krti cheezon ko ? and ap logic build kese kia apne ne..Jb ap javascript learning stage pe thi apki thinking ap ki approach kesi thi js ke hawale se ke kese logic build krna he ? kindly guide me

  • @khanmahebullahnisarahmed912
    @khanmahebullahnisarahmed912 Місяць тому

    Can i get the code

  • @khanmahebullahnisarahmed912
    @khanmahebullahnisarahmed912 Місяць тому

    Nice tutorials ❤❤❤❤

  • @CarlKipchemay
    @CarlKipchemay Місяць тому

    that music puts you on steroids level

  • @ZilaAi96
    @ZilaAi96 Місяць тому

    Do you have discord

  • @Stories_Woke
    @Stories_Woke Місяць тому

    source code plzzz

  • @Naveed.don_yt
    @Naveed.don_yt Місяць тому

    i can see ur beauty in code fathima

  • @Xcho-ck8ho
    @Xcho-ck8ho Місяць тому

    Fatima be a good gril and give ua the sec code😊

  • @gazanfarahmadov5093
    @gazanfarahmadov5093 Місяць тому

    Bravo. Keep going. I support you.💪

    • @kaneezfatimakhan9692
      @kaneezfatimakhan9692 Місяць тому

      Thankyou so much for your kind wishes.... thanks again for supporting me 😊

  • @gazanfarahmadov5093
    @gazanfarahmadov5093 Місяць тому

    Bravo. Keep going. I support you.

  • @issamoshi
    @issamoshi Місяць тому

    Thank you for the tutorial. Would've been much better with a commentary or a voiceover of the the whole thing All the thanks and support from Morocco

  • @MrjokerJ-dr2zd
    @MrjokerJ-dr2zd Місяць тому

    Hey ji aap ki insta I'd mil skti h kya

  • @mominhamza2002
    @mominhamza2002 Місяць тому

    apne too javascript bhi use kiya h🙄

  • @sohailansari3106
    @sohailansari3106 2 місяці тому

    Nice ✨ This code can become more useful after converting into web components.

  • @Tmsዜና
    @Tmsዜና 2 місяці тому

    You're wonderful keep it up!

  • @saim.abdullah.rajput
    @saim.abdullah.rajput 2 місяці тому

    Good work...

  • @nishchupraat1008
    @nishchupraat1008 3 місяці тому

    Source code..?

  • @ruslantirto8267
    @ruslantirto8267 3 місяці тому

    i like the video, It really help me with understanding and using them in real conversations. Looking forward to more content like this!

  • @EsmaelMuzeyen
    @EsmaelMuzeyen 3 місяці тому

    aselamu aleyikum good work !! but Leave the song ok and I'm a beginner help me

  • @shaikimtiazahmed60
    @shaikimtiazahmed60 3 місяці тому

    i was very nice video more understanding pervious videos mam do you have any social media accounts insta,linkdin,fd i am a student i am have some comceptinal doughts

  • @maazi3d
    @maazi3d 3 місяці тому

    From where did you learn this?

  • @maazi3d
    @maazi3d 3 місяці тому

    Nice keep it up ❤

  • @aslam7.8
    @aslam7.8 4 місяці тому

    Mashallah sis keep working on it

  • @houssamhhsm1654
    @houssamhhsm1654 4 місяці тому

    Hi hope you are doing good (A few days ago I didn't know a thing about coding) "I just started learning to code a few days ago, beginning with HTML. I want to learn CSS and JavaScript to create an educational website for myself. Do you think it's possible for me to learn all of those and build my website before I'm too old ( before I die ) (I'm 27.) Also, do I need to learn backend languages like PHP and MySQL(or in a different meaning continuing to learn after I die), or will HTML, CSS, and JavaScript be enough?"

  • @sameerhandsome4853
    @sameerhandsome4853 4 місяці тому

    where do u learn css from can you tell us

  • @darshadarsha314
    @darshadarsha314 4 місяці тому

    Don't use music ,give voice over for better understanding it will lead more subscribers

  • @FOODYOULIKE
    @FOODYOULIKE 4 місяці тому

    Where are you from

  • @darshadarsha314
    @darshadarsha314 4 місяці тому

    Nice

  • @itachiuchiha931
    @itachiuchiha931 4 місяці тому

    At least put header pic in thumbnail

  • @fornitefunny673
    @fornitefunny673 4 місяці тому

    keep moving

  • @alisorathiya
    @alisorathiya 4 місяці тому

    could you please send your github repository

  • @Blackdiamond929_
    @Blackdiamond929_ 4 місяці тому

    This looks great can't wait to give it a try :)

  • @mundojones7477
    @mundojones7477 4 місяці тому

    Can I please have the source code bro please

  • @AbidRazaHaider
    @AbidRazaHaider 4 місяці тому

    nice

  • @MuhammadNasir-uf4sn
    @MuhammadNasir-uf4sn 4 місяці тому

    Are you from india?

  • @shaykhawais
    @shaykhawais 4 місяці тому

    It's a suggestion - Don't use music in the background as when your channel will become monetized IN SHAA ALLAH then your earnings will count as Haram.

  • @AbidRazaHaider
    @AbidRazaHaider 5 місяців тому

    Nice Motu 😁

  • @babumosaiveli4
    @babumosaiveli4 5 місяців тому

    hello ! the application is good 😇 now i will built my own and use it Thank You !

  • @romanadaim8283
    @romanadaim8283 5 місяців тому

    Ma Shaa Allah

  • @AbidRazaHaider
    @AbidRazaHaider 5 місяців тому

    Nice Yeh Bhi Maxt Banaya 🙂🙃

  • @AbidRazaHaider
    @AbidRazaHaider 5 місяців тому

    Nice 😃

  • @AbidRazaHaider
    @AbidRazaHaider 5 місяців тому

    backend dev bhi karty hen ap ya only frontend dev hen

  • @AbidRazaHaider
    @AbidRazaHaider 5 місяців тому

    Nice