☕ Create a Responsive Coffee Website Design Using HTML CSS & JavaScript

In this video, I show you how to create a responsive coffee website design using HTML, CSS and JavaScript. Developed first with the Mobile First methodology, then for desktop.

❤ Get template

❤ Get template by PayPal

📁 Assets

✒️ Inspirate

👨‍💻 Start project from scratch

☝ Download the project base files on GitHub
– Click on the GitHub link
– Click the green Code button
– Download ZIP
– Save and extract where you prefer

🔔 Subscribe for more!

⏱ Timestamps
0:00 Intro Responsive Coffee Website
3:32 Project Setup
5:20 Variables CSS
7:27 Reset HTML & Reusable CSS Classes
10:38 Header & Nav Menu
19:25 Home
27:24 Change Background Header
29:32 Specialty
34:53 Products
53:31 Quality
01:00:50 Logos
01:03:02 Blog
01:10:42 Footer
01:21:14 Scroll Bar
01:22:12 Scroll Up
01:25:44 Scroll Sections Active Link
01:27:22 Breakpoints
01:49:21 Loader
01:51:56 Final Project

☕️ Support me

💙 Support me by PayPal

👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤

Home images

#responsivewebsite #coffeewebsite #bedimcode


  1. GREAT VIDEOS! I like how you reuse your code! I always enjoy watching your videos. Can you create a 2 pages website? or the read more / read less buttons. Thanks

  2. the tutorial you provide is very helpful to understand how to code structured,

    I want to ask how do you determine the size of the font and padding or margin? is there a standard?

    do you have any references i can study?

Leave a comment

Your email address will not be published.