☕ Create A Responsive Coffee Website in HTML CSS & JavaScript | Step-By-Step Tutorial

[@CodingNepal]

Source code of this Coffee Website: buymeacoffee.com/codingnepal/e/278865

[@prakashdamarakonda]

It ask 3$ I will pay but where I get total code

[@CodingNepal]

Upon purchase, you will instantly receive a download link for the source code. Additionally, a confirmation email with the download link will be sent to you.

[@prakashdamarakonda]

Ok

[@AbdullahAlJawad919]

is that free?

[@aphitahhassan3070]

Proh is Free code

[@GodswillOyom]

This helped me with [insert task]. You’re a lifesaver! 😇

[@vivekkumar-pb8et]

I also made this website with your helpful video 🔥

[@glennwarindu4580]

I love how simple and staight forward you designed this project

[@CodingNepal]

Glad you like it!

[@도링-q1t]

I learned a lot because of you 😍😍

[@CodingNepal]

Happy to hear that! Keep learning :)

[@hitoshiasakura9109]

Your website is awesome simple and organized

[@rafskyy2470]

Thank you for this guide! I needed this ❤

[@GodswillOyom]

Wait for it… BAM! 😂 Perfect timing.

[@m.areeshrashid705]

Awesome project ❤❤

[@CodingNepal]

Thank you!

[@EdwinKamo]

Why don't you talk and explain along with your video

[@yubiroaster6285]

Such a useful project 👏.... Thank you sir🫡❤

[@JosueIriasMontoya]

Crack thank you so much 👌🏻💯💪🏻

[@CodingNepal]

No problem 👍

[@aminmuxtorov-d6u]

thanks😀

[@EdithEhikwe]

Nice and cool designs, that a thumbs up 👍👍for this project 🎉😂

[@CodingNepal]

Big thanks

[@neezahbel]

Thank you so much

[@MamdaniRahib]

Thanks For Helping

[@BeeNi12]

please create Ecommerce Website ..... 🥺

[@craftwithkraft]

please make full tutorial website on E-VOTING SYSTEM as soon as possible ...PLEASEee

[@newal2006]

Хорошая работа! 👍

[@marpusik1277]

thanks 🙏

[@kuroe10]

It was good bro

[@williamsagbanagba-p7p]

i like your website can you make a responsive book website please

[@elainachi]

How did you open the browser in side with just pressing a key?

[@ernstine]

Hello, so far the tutorial is so friendly , I'd just like to know how you came up with that coffee I just saw you pressing on it but didn't capture where it had been extracted.

[@CodingNepal]

If you're referring to the coffee logo image, it's simply a coffee emoji. On Windows, you can open the emoji box by pressing Win + . and then searching for "coffee."

[@khazarasp]

Nice

[@weslacerda]

Food project go!!!

[@nailar2904]

hello, I'm just learning and confused why when you type root{ } then some font size, weight, radius and others appear? please help

[@CodingNepal]

The :root {} is used to define custom CSS variables for values like font size, weight, and radius. By using these variables, you can easily reuse values throughout your CSS and update them in one place, instead of changing them individually wherever they are used. If you're asking about how I declared the variables quickly, I copy-pasted them to save time. :root { /* Colors */ --white-color: #fff; --dark-color: #252525; --primary-color: #3b141c; --secondary-color: #f3961c; --light-pink-color: #faf4f5; --medium-gray-color: #ccc; /* Font size */ --font-size-s: 0.9rem; --font-size-n: 1rem; --font-size-m: 1.12rem; --font-size-l: 1.5rem; --font-size-xl: 2rem; --font-size-xxl: 2.3rem; /* Font weight */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Border radius */ --border-radius-s: 8px; --border-radius-m: 30px; --border-radius-circle: 50%; /* Site max width */ --site-max-width: 1300px; }

[@adoer..2078]

I am an beginner and making this ..but document.classList. toggle ("show-mobile-menu"); is throwing error ( cant read null properties) Please reply to me I can proceed further only after the solution .I am stuck 🙏🙏

[@CodingNepal]

It should be document.body.classList. Make sure to include 'body' in your code.

[@adoer..2078]

Worked..💯thanks​@@CodingNepal

[@Kriti_s-f8h]

Could you give me code of index.html as my menu section is not working

[@Anshxd12]

@@Kriti_s-f8h same here width is not working'

[@gamofobia]

Where is backend?

[@jobandadwal1979]

CODING NEPAL I AM GETTING PROBLEM SLIDEBAR THE OPEN BUTTON DONT GET CHANGE THE COLOR AND THE WHITE SLIDEBAR ALSO NOT SHOWING PLEASE HELP I AM STUKED THEIR

[@ssonnav436]

After following your tutorial, the part that my code didn't work is during the #menuclosebutton both in the css and js

[@jomycruz7325]

Me too! Do you fixed?

[@ukemeudofia1030]

ensure you've CTL saved both the css, javascript, and Html files. It should work now.

[@izu-chan2010]

where is the link for the navbar to move?

[@Blizzard_hype1]

Please make a html website based on material design 3 👍

[@CodingNepal]

Thanks for the idea!

[@khushiseth6254]

Can anyone tell me if this tutorial only have frontend aur it's complete with backend also ?

[@CodingNepal]

It is only frontend.

[@Fnydo]

Can you plz create a video on creating custom progress bar or cloning range slider using div, css and js with proper explain

[@CodingNepal]

Are you talking about this? kzbin.info/www/bejne/aXbFZ3mqn9CNlc0

[@carlangelodelacruz1667]

in 14:14,i cant seperate the border can anyone help me?

[@Mohamed_Younus_37]

I think 🤔 your mistake Css style Buttons ❌ Button✅ Because I also mistake

[@jobandadwal1979]

@@Mohamed_Younus_37 USE WIDTH 200PX IN THAT THEY ARE ALL MERGERD I ALSO GOT THE PROBLEM NOW I AM STUCK IN CLOSING OPEN BUTTTON

[@all---event]

image cant work how i can download

[@osuohauchechi9316]

Where did you click to get the coffee image

[@Iveet32k]

this is copied

[@CodingNepal]

If you're referring to the coffee logo image, it's simply a coffee emoji. On Windows, you can open the emoji box by pressing Win + . and then searching for "coffee."

[@osuohauchechi9316]

​@@Iveet32k l cant see the image coffee on my image

[@osuohauchechi9316]

​@@CodingNepalthank you but am not seeing it on my system

[@sajirwaseeifaz728]

where can i get the root section? is it free to get?

[@CodingNepal]

Here it is: :root { /* Colors */ --white-color: #fff; --dark-color: #252525; --primary-color: #3b141c; --secondary-color: #f3961c; --light-pink-color: #faf4f5; --medium-gray-color: #ccc; /* Font size */ --font-size-s: 0.9rem; --font-size-n: 1rem; --font-size-m: 1.12rem; --font-size-l: 1.5rem; --font-size-xl: 2rem; --font-size-xxl: 2.3rem; /* Font weight */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Border radius */ --border-radius-s: 8px; --border-radius-m: 30px; --border-radius-circle: 50%; /* Site max width */ --site-max-width: 1300px; }

[@sajirwaseeifaz728]

@@CodingNepal thank u so much but the thing is i was too focused on making this website so i gave it the sizes on my own choice. now the thing is i am facing problems in copying the text. like about section and all. can u help me with it

[@navdeepsingh-b6d]

1:06:45

[@Aadancarabo7700]

Teacher i need one complete project in the final year of universty like online voting system or real chatting application using php and mysql please teacher thanaks

[@Ruak.n]

19:58

[@frozensector8305]

so my question is this if i use this for a philanthropy website which i am not taking any money to make their website (am not gonna take everything just the testimonials and home page), am i getting sued or no? (i mean ether from you or because i use the swipper thing and the icons)

[@A2handdde]

No you’re not. These open source codes have been published online, without any clear information about them being copyrighted or restricted. There is thousands of sites like this, free to take. Most just want their own, but this will get the job done!

[@A2handdde]

However, when you download (or create) it, check where you got it for info on copyrights.

[@frozensector8305]

@@A2handdde okay thanku very much

[@Ruak.n]

13:52

[@ukemeudofia1030]

My toggle functionality is not working. Who's facing the same issue?

[@Ruak.n]

1:10:05

[@descobra5462]

i dont get it , how am i suppose to get from one page to the next, u have everything in the index page. its very confusing

[@jobandadwal1979]

BRO THIS CALLED ONE PAGE WEBSITE WHERE WE PUT ALL INFORMATION AT ONCE

[@arunrathore178]

Swiper is not working any another idea

[@CodingNepal]

The issue is likely caused by not properly including Swiper in your HTML code. To ensure the slider works correctly, check the following: 1. Include the Swiper CSS file before the closing tag. 2. Include the Swiper JavaScript file before the closing tag. 3. Verify that the Swiper-related classes (swiper, swiper-wrapper, swiper-slide) in your HTML match those shown in the tutorial. 4. Ensure your script.js file is linked after the Swiper JavaScript file.

[@Sakshi-qn3vt]

please give me link of this website

[@Navin____]

How old r u bro...i mean a full stack web developer at what age

[@prakashdamarakonda]

Can you provide total code

[@medymanno8646]

the root part got me unexpected

[@CodingNepal]

Here is the relevant portion of the code: :root { /* Colors */ --white-color: #fff; --dark-color: #252525; --primary-color: #3b141c; --secondary-color: #f3961c; --light-pink-color: #faf4f5; --medium-gray-color: #ccc; /* Font size */ --font-size-s: 0.9rem; --font-size-n: 1rem; --font-size-m: 1.12rem; --font-size-l: 1.5rem; --font-size-xl: 2rem; --font-size-xxl: 2.3rem; /* Font weight */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Border radius */ --border-radius-s: 8px; --border-radius-m: 30px; --border-radius-circle: 50%; /* Site max width */ --site-max-width: 1300px; }

[@medymanno8646]

@ but you actually need to change the max-width : 0 ; to margin : 0 ;

[@ixanagi_]

5:21

[@ishamisham3304]

How to get root

[@CodingNepal]

:root { /* Colors */ --white-color: #fff; --dark-color: #252525; --primary-color: #3b141c; --secondary-color: #f3961c; --light-pink-color: #faf4f5; --medium-gray-color: #ccc; /* Font size */ --font-size-s: 0.9rem; --font-size-n: 1rem; --font-size-m: 1.12rem; --font-size-l: 1.5rem; --font-size-xl: 2rem; --font-size-xxl: 2.3rem; /* Font weight */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Border radius */ --border-radius-s: 8px; --border-radius-m: 30px; --border-radius-circle: 50%; /* Site max width */ --site-max-width: 1300px; }

[@gamingbro2470]

dai, software engineer ho tapai?

[@CodingNepal]

Full-stack developer bro

[@nugi7521]

33.37

[@crashjonhisacrupita79]

The transition at 8:19 it won't work, I also triple check we're I missed and there are none🥲🥲