How to Make a Responsive Website Design in Dreamweaver CC 2021 | Beginners Tutorial

How to Build a Responsive Website using Dreamweaver CC 2021: This is a step by step tutorial on how to create a responsive website with Dreamweaver CC.
👉 Website Download: 👉 Contact Form:
👉 Site Preview:
👉 Creating a contact form in Dreamweaver:
👉 Read more:

If you are a beginner, this tutorial is for you. It will help you understand the basics when it comes to making a responsive website using HTML, CSS and Bootstrap in Adobe Dreamweaver.
Watch till the end to be able to learn how to make a website in Dreamweaver.

👉 Subscribe For More:
👉 Get Project Files:
👉 Complete Dreamweaver Website Template:
📫 Join Our Email List:

00:00 Introduction
00:21 Complete Website Preview
1. 02:25 Creating a Root Folder
2. 02:59 Launching Dreamweaver CC
3. 03:30 Creating the Site: Navigate to Site Menu, click on New Site, give it a name then point it to the Root Folder.
4. 04:25 Working on the Home page. (index.html)
5. 04:31 Go to File/New then select Bootstrap
6. 05:15 Save the page as index.html then preview it on your browser.
7. 06:00 Let’s add a fluid container for page contents (Insert/Bootstrap Components/Container-fluid)
8. 06:39 Now add a standard container inside the fluid container.(Insert/Bootstrap Components/Container)
9. 07:21 Adding the main menu within the standard container. (Insert/Bootstrap Components/Navbar: Basic Navbar)
10. 10:07 Adding the slideshow within the standard container but after the main menu. (Insert/Bootstrap Components/Carousel)
11. 14:06 Adding Heading and Paragraph texts after the slideshow. (Insert/HTML/Heading: H1) then (Insert/HTML/Heading: Paragraph)
12. 16:24 Adding the three thumbnails after the Paragraph text (Insert/Bootstrap Components/Grid Row with column) then (Insert/Bootstrap Components/Cards: Card)
13. 20:19 Adding Accordion after the three thumbnails. (Insert/Bootstrap Components/Accordion)
14. 23:20 Adding footer content (Insert/HTML/Footer) the (Insert/Bootstrap Components/Grid Row with column)
15. 26:45 Working on the page CSS (CSS Designer/Sources + styles.css)
16. 37:08 Adding logo on the website header and footer
17. 40:29 Adding About, Services, Gallery & Contact pages
18. 41:52 Linking menu items to pages and other relevant sections
19. 48:32 Adding content to About, Services, Gallery & Contact pages
20. 55:11 Adding a favicon
21. 1:00:24 Working on Mobile Menu CSS
22. 1:02:56 Moving the styles.css file inside the CSS folder
23. Creating a contact form:

👉 Twitter:
👉 Facebook:
👉 Pinterest:
👉 Reddit:
👉 Tumblr:

👉 Get Domain & Hosting:
🛒 Alidropship Plugin: (use GETPLUGIN25 for 25% off)
👉 Download Animation Composer:
👉 Web hosting with HOSTGATOR: | Get 60% OFF! Use Coupon Code: TECHRUZZ60

Disclaimer: TechRuzz Tutorials is supported by its audience. When you purchase through links on our channel, we may earn an affiliate commission.

#TechRuzz #Dreamweaver_Tutorials #Responsive_Web_Design


  1. for those who are having a problem in nesting the navbar…. just switch from split to live and try it again and it will work…then you can switch to split again if you want..!!!🤗😉

  2. Great tutorial but mine doesn’t look right in preview or a browser. It looks fine in live view in Dreamweaver though, can anyone help?

  3. Congratulations for the video, and the tutorial, I'm Brazilian and I haven't found any local video like that, its format was the best I found and thanks to that I've been able to adapt my site, besides that the soundtrack is very nice to listen to in the process.

  4. I am using DW 21.1 and can't get that "nesting" graphic so I can't nest code, and the basic nav is very different. Is this just how it works now? Or doesn't? Thanks!

  5. Thank you for your video and step by step guidance.
    Btw, mine doesn't have the pop-up confirmation for the "Before, After, Wrap, Nest". I have manually move the code out. How can I get that to show up each time I place a new code?

  6. Loved this tutorial, one thing did not work as yours. The navbar doesn't show the content in dreamweaver, but looks ok in preview. Please advise. Thanks in advance.

  7. I was about to succeed building my website and all hell broke loose. I may have missed a minor but important step. Now I cannot get a simple index.html file with only the navbar to display. Error points to a malformed bootstrap-4.3.1.css file. The website looks good within Dreamweaver 2019 but when 'previewing' on a variety of browsers, they all fail miserably in displaying the nicely formatted website. Any ideas?

  8. Why do people make tutorial like this. Since when have people found it more useful to not speak. This could have been a great tutorial. Two thumbs down.

  9. This is a great tutorial! But whenever I try to preview the website, it just says "Save all the files (including related files) to preview." I'm confused on what I didn't save because I did exactly what you did.

  10. I need some help at the point of inserting the navbar, after inserting the navbar only navbar can be seen in dreamweaver but when I preview the site I can see the other element i.e home, link, dropdown disable and the search that are not showing in dw, what is the solution?

  11. can somebody help me with my problem? My problem is if you click the word in the white spot the normally it's a blue square but in mine it's gray. Somebody, please help me ASAP. PLEASE

  12. if you're using OneDrive (or maybe another cloud storage software) the file path for the CSS and JS files may not work, I had this issue and switched to using local storage and it fixed itself.

  13. I at first thought… is this it? Then you went into the tutorial. Nice, I like your methodology. Works great for me. Relaxing music too.

Leave a comment

Your email address will not be published.