CodingNepal
CodingNepal
  • Видео 358
  • Просмотров 21 448 606
Create Responsive Coffee Website in HTML CSS and JavaScript | Coffee Website in HTML and CSS
In this video, I've shown how to create a responsive coffee website using HTML, CSS, and JavaScript. This website includes a navigation menu bar and a hero section. The navigation bar displays a logo and menu links, while the hero section features a background image, headings, and call to action button.
Download Background Image of this Coffee Website
www.codingnepalweb.com/demos/create-responsive-coffee-website-html-css/hero-bg.jpg
Hire me on Fiverr
www.fiverr.com/prakashahi
Follow me on Instagram
coding.np
Visit my website for helpful coding projects with source code
www.codingnepalweb.com
#html #css #javascript #website #websitedesign
Music Credit:
Ikson - We Are Free [Official]
rucl...
Просмотров: 44 024

Видео

Create A Fiverr Website Clone in HTML CSS and JavaScript | Responsive Website HTML CSS & JavaScript
Просмотров 14 тыс.7 месяцев назад
In this video, I've shown how to create a responsive Fiverr website clone using HTML, CSS, and JavaScript. This website includes a navigation menu bar and a hero section. The navigation bar displays a logo and menu links, while the hero section features a background image and a search form. Download Images only of this Website Homepage www.codingnepalweb.com/custom-projects/fiverr-website-image...
Build An AI Image Generation Website in HTML CSS and JavaScript | Like Midjourney and DALL-E
Просмотров 79 тыс.7 месяцев назад
In this video, I've shown how to build an AI-powered Image Generation Website in HTML, CSS, and JavaScript. On this website, users enter their prompt and select a number of AI-generated images they want to be created. They can also download their images by clicking on the download button. This website is similar to MidJourney and DALL-E and works on all devices. Download Images only of this AI ...
Create Responsive Image Slider in HTML CSS and JavaScript | Image Slider HTML CSS & JavaScript
Просмотров 117 тыс.7 месяцев назад
In this video, I've shown how to create a responsive image slider using HTML, CSS, and JavaScript. The slider includes two buttons for sliding images (previous and next) and a horizontal scrollbar. It is made with pure HTML, CSS, and JavaScript and works on all devices. Download Images only of this Image Slider www.codingnepalweb.com/custom-projects/responsive-image-slider-images.zip Live Demo ...
Create Responsive Website with Login & Registration Form | HTML CSS and JavaScript
Просмотров 54 тыс.8 месяцев назад
In the video, I demonstrate how to make a responsive website with a login and registration form using HTML, CSS, and JavaScript. The website features a navigation menu at the top with a login button. When clicked, the login form appears as a popup with a blurry background effect. You can easily switch between the login and registration forms by clicking the provided link. Download Images only o...
Top 10 Easy To Create JavaScript Games For Beginners | 10 JavaScript Games with Free Source Code
Просмотров 24 тыс.8 месяцев назад
In this video tutorial, I've shown the top 10 Easy to create JavaScript games for beginners. These game projects are designed to help you improve your web development skills, such as HTML, CSS, and JavaScript. From Quiz apps to Hangman, I've covered all the top beginner-friendly vanilla JavaScript games. 1) Memory or Pair Cards Game Watch: ruclips.net/video/DABkhfsBAWw/видео.html 2) Snake Game ...
Create A Sidebar with Glassmorphism Effect in HTML and CSS | Sidebar in HTML and CSS
Просмотров 20 тыс.8 месяцев назад
In this video, I've shown how to create a sidebar with glassmorphism effectt in HTML and CSS. This sidebar remained collapsed, showing only the icons for each link. But when we hover over the sidebar, it smoothly expands and reveals the respective logo’s link. Download Only Images of this Sidebar www.codingnepalweb.com/custom-projects/glassmorphism-sidebar-images.zip Live Demo of Download Code ...
Create Text Typing Effect in HTML CSS & Vanilla JavaScript | Multiple Text Typing Animation in CSS
Просмотров 17 тыс.9 месяцев назад
In this video, I've shown how to create a text typing effect using HTML, CSS, and JavaScript. No external frameworks or libraries are needed - just pure vanilla JavaScript. Create Pure CSS Text Typing Effect Watch: ruclips.net/video/m0o0QNpY9-0/видео.html Download Source Code From Here www.codingnepalweb.com Hire me on Fiverr www.fiverr.com/prakashahi Follow me on Instagram coding...
Build A Hangman Game in HTML CSS and JavaScript | Hangman Game in HTML CSS and JavaScript
Просмотров 49 тыс.9 месяцев назад
In this video tutorial, I've shown how to build a responsive Hangman game using HTML, CSS, and JavaScript. In this game, the user has to guess all the letters of a randomly generated word within a given number of tries. There is also a hangman illustration that will progressively appear on the gallows for each incorrect guess. Word List used on this Hangman Game drive.google.com/file/d/1V3qIVPE...
Create A Netflix Login Page in HTML and CSS | Netflix Login Page Clone in HTML and CSS
Просмотров 19 тыс.9 месяцев назад
In this video, I've shown how to create a responsive Netflix login page using HTML and CSS. Download Images only of this Login Page www.codingnepalweb.com/custom-projects/netflix-login-page-images.zip Live Demo or Download Code of this Netflix Login Page www.codingnepalweb.com/demos/create-netflix-login-page-html-css/ Hire me on Fiverr www.fiverr.com/prakashahi Follow me on Instagram instagram....
Create A Simple Responsive Website in HTML and CSS | Responsive Website HTML and CSS
Просмотров 16 тыс.10 месяцев назад
In this video, I've shown how to create a simple responsive website using HTML and CSS. This website includes key sections: Home, Services, Portfolio, About Us, Contact Us, and Footer. It focuses on camping gear and highlights sellers of essential equipment. But you can also choose a different theme and customize it to your liking. Download All Images Used on This Website codingnepalweb.com/cus...
Build A Weather App in HTML CSS and JavaScript | Weather App Project HTML CSS and JavaScript
Просмотров 60 тыс.10 месяцев назад
In this video tutorial, I've shown how to build a responsive weather app using HTML, CSS, and JavaScript. In this weather project, users can enter any city name to get the weather forecast or simply click on the "Use Current Location" button to get current location weather details, including temperature, wind speed, humidity, and more. Live Demo or Download Code of this Weather App Project codi...
How to Make Responsive Website in HTML and CSS | Website in HTML and CSS
Просмотров 13 тыс.10 месяцев назад
How to Make Responsive Website in HTML and CSS | Website in HTML and CSS
Create Working Chatbot in HTML CSS and JavaScript | Chatbot HTML CSS JavaScript
Просмотров 212 тыс.10 месяцев назад
Create Working Chatbot in HTML CSS and JavaScript | Chatbot HTML CSS JavaScript
Hoverable Sidebar Menu in HTML CSS & JavaScript | Responsive Side Navigation Bar
Просмотров 25 тыс.11 месяцев назад
Hoverable Sidebar Menu in HTML CSS & JavaScript | Responsive Side Navigation Bar
Create Your Own ChatGPT in HTML CSS and JavaScript | ChatGPT Clone HTML CSS and JavaScript
Просмотров 57 тыс.11 месяцев назад
Create Your Own ChatGPT in HTML CSS and JavaScript | ChatGPT Clone HTML CSS and JavaScript
Filterable Image Gallery in HTML CSS & JavaScript
Просмотров 46 тыс.11 месяцев назад
Filterable Image Gallery in HTML CSS & JavaScript
Create A Draggable Bottom Sheet Modal in HTML CSS & JavaScript | Bottom Sheet Modal in JavaScript
Просмотров 19 тыс.11 месяцев назад
Create A Draggable Bottom Sheet Modal in HTML CSS & JavaScript | Bottom Sheet Modal in JavaScript
Create A Draggable Card Slider in HTML CSS & JavaScript | Infinite Image Slider in JavaScript
Просмотров 127 тыс.Год назад
Create A Draggable Card Slider in HTML CSS & JavaScript | Infinite Image Slider in JavaScript
Password Validation Check in HTML CSS & JavaScript | Password Strength Check in JavaScript
Просмотров 27 тыс.Год назад
Password Validation Check in HTML CSS & JavaScript | Password Strength Check in JavaScript
Create Image Search Engine in HTML CSS & JavaScript | Functional Image Gallery HTML CSS & JavaScript
Просмотров 33 тыс.Год назад
Create Image Search Engine in HTML CSS & JavaScript | Functional Image Gallery HTML CSS & JavaScript
Build A Gradient Color Generator in HTML CSS & JavaScript | Gradient Generator in JavaScript
Просмотров 14 тыс.Год назад
Build A Gradient Color Generator in HTML CSS & JavaScript | Gradient Generator in JavaScript
Drag and Drop Sortable List in HTML CSs & JavaScript | Draggable List in JavaScript
Просмотров 50 тыс.Год назад
Drag and Drop Sortable List in HTML CSs & JavaScript | Draggable List in JavaScript
Create A Snake Game in HTML CSS & JavaScript | JavaScript Game Tutorial
Просмотров 72 тыс.Год назад
Create A Snake Game in HTML CSS & JavaScript | JavaScript Game Tutorial
10 Best JavaScript Projects with Free Source Code | JavaScript Projects for Beginners
Просмотров 13 тыс.Год назад
10 Best JavaScript Projects with Free Source Code | JavaScript Projects for Beginners
Create A Random Color Palette Generator in HTML CSS & JavaScript
Просмотров 38 тыс.Год назад
Create A Random Color Palette Generator in HTML CSS & JavaScript
Check Internet Connection in HTML CSS & JavaScript | Check Offline or Online Status in JavaScript
Просмотров 36 тыс.Год назад
Check Internet Connection in HTML CSS & JavaScript | Check Offline or Online Status in JavaScript
How to Make Chrome Extension in HTML CSS & JavaScript | Color Picker Extension in JavaScript
Просмотров 24 тыс.Год назад
How to Make Chrome Extension in HTML CSS & JavaScript | Color Picker Extension in JavaScript
Create A Toast Notification in HTML CSS & JavaScript | Toast Notification in JavaScript
Просмотров 34 тыс.Год назад
Create A Toast Notification in HTML CSS & JavaScript | Toast Notification in JavaScript
Build A Playable PIANO in HTML CSS & JavaScript | Virtual Piano 🎹 in JavaScript
Просмотров 51 тыс.Год назад
Build A Playable PIANO in HTML CSS & JavaScript | Virtual Piano 🎹 in JavaScript

Комментарии

  • @islamiclife-ideallife
    @islamiclife-ideallife 12 часов назад

    Fine but need to write code one after another gradually not overtaking or lapsing or rewriting going back .....

  • @adenmohmuud9505
    @adenmohmuud9505 18 часов назад

    respect man

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

    Hey there, I hope you are doing well. Is everything all right with you? You don't upload videos these days,

    • @CodingNepal
      @CodingNepal 15 часов назад

      Hi zaanly, thanks for asking. I'm busy on my other works at the moment. Stay tuned.

    • @zaanly
      @zaanly 14 часов назад

      @@CodingNepal Got it. I'll wait for new cool stuff :)

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

    👍👍👍👍👍

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

    Please give the SourceCode through github link The website is not opening.

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

      It should open. Can you tell me from where you're accessing the website?

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

    very good

  • @arifibnyunussahad835
    @arifibnyunussahad835 2 дня назад

    Hello everyone, a very cool video, please tell me how you can add an administrator here and make sure that users only see him, and the admin sees everyone

  • @lucadavidsandru929
    @lucadavidsandru929 2 дня назад

    My API KEY doesn't work, I continue have error for it that the key is not procvided, but I m 100% sure it is. What should I do?

  • @jaishreepatnaik34
    @jaishreepatnaik34 3 дня назад

    How to display the progress bar if there is a lot of content

  • @alexanderscozydesk
    @alexanderscozydesk 4 дня назад

    Dude, thank you so much im really getting in javascript now and im only 13.

  • @mehedihasanmasum218
    @mehedihasanmasum218 4 дня назад

    I have an image in the background 😂

    • @CodingNepal
      @CodingNepal 2 дня назад

      You should watch this video then ruclips.net/video/DLs1X9T1GcY/видео.htmlsi=Yhn5znSRSWeyq6E3

  • @toniojoestar3212
    @toniojoestar3212 4 дня назад

    Thank you for all of your tutorials 😁🤝

  • @alexandraweather4156
    @alexandraweather4156 4 дня назад

    thank you for this amasing video! i am a total newbie with js, but it worked for me. But now i need to make the slider undraggable, so that only buttons would cause it move. I have commented everything connected to dragging, an yet it remains draggable! how can i fix it?

  • @cesarghful
    @cesarghful 5 дней назад

    Hi bro, thank you! Do you know if I use one more word in the slide how can I change the aniamtion keyframes? How should I think to make it? i have to present this tomorrow at work :X

  • @itabdulhafizhkustiawan9892
    @itabdulhafizhkustiawan9892 5 дней назад

    izin download min. buat belajar + hadiah dari sekolah..... thanks banget nya min🫓. seemoga tambah semangat ngontenya.... 😃😃😃

  • @jackofalltrades1249
    @jackofalltrades1249 5 дней назад

    Hi! tried this and it works! but when I access the html on my phone using local network connection, when i upload file the upload time is slow and sometime it doesnt even finish. pls help Thank you!

  • @hamayalkhan8181
    @hamayalkhan8181 6 дней назад

    I follow the same method but there is no styling

  • @anuradhajayasinghe1651
    @anuradhajayasinghe1651 6 дней назад

    🙂🙂👏

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

    that was really solid and font awesome seems like a nice library to add icons. i used this and made some adjustments to my version because in the mobile version the arrows were not clearly visible @media screen and (max-width: 1200px) { .fa-solid.fa-angle-right { padding-right: 7px; } .fa-solid.fa-angle-left { padding-left: 7px; } } Also for the pictures i wanted them a bit larger as they appeared a bit squished so i just made a small change of: height: 611px; under .carousel img EDIT: the mobile version appears to be bugged with the dragging function so i just disabled it by adding this code under the javascript code: // Remove touch event listeners for dragging carousel.removeEventListener("touchstart", dragStart); document.removeEventListener("touchmove", dragging); carousel.removeEventListener("touchend", dragStop);

  • @31ashaswatraj44
    @31ashaswatraj44 8 дней назад

    This chat app is too vulnerable 🎉 2:03:48

  • @iamabhishekvyas
    @iamabhishekvyas 8 дней назад

    The logo of sun is appearing grey at some places. What should I do ?

  • @gummachine396
    @gummachine396 9 дней назад

    For the API usage, do you have to pay for it after using it once?

  • @anirudhgupta1419
    @anirudhgupta1419 9 дней назад

    Hii please help me I am student and I am using this code in my travel website. when i click on submit button otp didn't sent on my mail id. Warning: mail(): Failed to connect to mailserver at "localhost" port 25, verify your "SMTP" and "smtp_port" setting in php.ini or use ini_set() in C:\xampp\htdocs\Login and Signup Form with Email Verification - PHP\controllerUserData.php on line 118

  • @dulminatissera05
    @dulminatissera05 9 дней назад

    Great video ☀

  • @ItobiyeBlossom
    @ItobiyeBlossom 9 дней назад

    Bro I’m having issues please help the padding and height stopped having effect after line 107 it’s really tiring😢

  • @skshinchanarmy3091
    @skshinchanarmy3091 9 дней назад

    It's not working for me, because API key set but it's post error come from API url

  • @witzoar
    @witzoar 9 дней назад

    next month counter is not working for me

  • @graphic.shashank
    @graphic.shashank 9 дней назад

    Bro forgot he has a youtube channel

    • @CodingNepal
      @CodingNepal 2 дня назад

      No bro, I'm busy on my other works at the moment.

  • @HasanAhmedShakil-nu7cs
    @HasanAhmedShakil-nu7cs 9 дней назад

    Why my API_URL doesn't work ??

  • @RC-Flight
    @RC-Flight 10 дней назад

    Ditch that useless music please!

  • @KkppPv-wu9wb
    @KkppPv-wu9wb 10 дней назад

    It will be beneficiary if you just include the font details on the description

  • @johnnybrader9983
    @johnnybrader9983 10 дней назад

    theres no less secure option anymore?does it still work?

  • @mehedihasanhridoy3986
    @mehedihasanhridoy3986 11 дней назад

    it's amaging , really love the man.

  • @tara6065
    @tara6065 11 дней назад

    thank you so much , your video helped a lot

  • @SunaruDed
    @SunaruDed 11 дней назад

    how to make only 2 colors in gradient?

  • @NhelOrtsac
    @NhelOrtsac 11 дней назад

    Where is the database file bro

  • @parispaizal
    @parispaizal 11 дней назад

    Why is the JS script declared above? Usually js scripts are declared under the body tag, can anyone explain?

    • @MR.shortzed333
      @MR.shortzed333 2 дня назад

      aap js script tag body ke ander bhi declare kr skte hai bs aapko defer lagana hoga taki html CSS load hone ke baad js load ho so script tag kahi bhi use kr skte ho head me body me and after body bhi

    • @CodingNepal
      @CodingNepal 2 дня назад

      You can include your script tag inside the head of your HTML document. If you choose to do so, make sure to add the 'defer' attribute to the script tag. This attribute ensures that the script is loaded only after the page content has been fully parsed. Alternatively, you can include your script tag just before the closing body tag with or without the 'defer' attribute. Both methods work well for this video project.

  • @KutendaK
    @KutendaK 12 дней назад

    tried this using notepad and the CSS bit didn't work anyone have a clue on what to do

  • @israelsouza9428
    @israelsouza9428 12 дней назад

    Muito Massa 👏👏👏

  • @DenisChristBelila
    @DenisChristBelila 12 дней назад

    walang code tangina ka

  • @Sfemz0
    @Sfemz0 12 дней назад

    I put some image of myself and it doesn't load, do you know why?

  • @RaF-dy1pk
    @RaF-dy1pk 13 дней назад

    Bro, why did you stop posting?

    • @CodingNepal
      @CodingNepal 2 дня назад

      I'm busy on my other works at the moment. Stay tuned.

  • @BatMan__45
    @BatMan__45 13 дней назад

    9:20

  • @jpgeralla920
    @jpgeralla920 13 дней назад

    May I ask where did you store your API key? great tutorial by the way!

  • @godugukishorechandra
    @godugukishorechandra 13 дней назад

    Thank you sir you have helped me for my project..👍

  • @yimo8146
    @yimo8146 14 дней назад

    11:53

  • @effy8824
    @effy8824 15 дней назад

    will this help me to understand oop better in js?

  • @catMarta994
    @catMarta994 15 дней назад

    Можете скинуть весь код?