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:
STEPS COVERED:
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:
FOLLOW US:
👉 Twitter:
👉 Facebook:
👉 Pinterest:
👉 Reddit:
👉 Tumblr:
IMPOTANT LINKS
👉 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
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..!!!🤗😉
Bro How can We get Full size picture on Carousel. I was getting picture by Small size, not be fit on the Full carousel. Help!!!!!!
It's me or the video don´t have audio?
Why before, After, wrap and next options do not appear most of the time?
hello does this have a connect server ?
cant get passed step 6. did everything you did?
@techruzz I bought a domain through google but want to build my own site in dreamweaver, any links or tips on connecting the two?
Problems with the prewiev in Internet exporer.
Thank you, The size of the pictures?
Thanks for sharing your knowledge. Can't wait to use your steps when I get home from work.
I was learning this for the first time yesterday I only got to the part where you the bar says contacts and stuff, so far it’s pretty simple to learn.
wow this tutorial is awesome!!; i'm using dw 21.3 and missing some bootstrap components like cards pls help!
Hi
How to create rollover button using Dreamweaver, can you please suggest. Because I followed your instructions and I created website, but I don't know how to create rollover buttons. Please suggest me. Thank you
carousel image size please?
No database connection and server application. This DW is not good anymore.
you are so boring , you would have talk step by step so coz I got lost on adding other images
im having trouble with my carousel slide, anyone that can help?
out of intrest how do i put this website out as in how do i put it on google
I stuck in the navbar and spent almost 2 hours and re installed still not resolving this issue. I can't proceed 🙁
Please how set color in menu text "over" mouse. I can only change active or passive. Thanks to much. Nice tutorial.
Appreciate the effort…but it's not a tutorial without narration… makes it way harder to learn. I'm off to a real tutorial… hopefully you'll consider narrating…
Can use dreamwaever to create purl website?
Good tutorial. And I liked the music by the way. 🙂
Believe Me sir every day when I working on this site I found it sweet an sweet thank you very much .
could i get help please ? my carousel control is not underneath as should be its on the side.
thank you so much for that commitment and hard work you did, you're legitimately a life saver
Very helpful!!! Lost me at the Mobile CSS designer though…. 🙁
why don't you talk and explain things?😏😮💨😕🥵
Everytime I try to insert something it is saying "the component is not fully compatible…blah blah blah do you wish to continue?" Also, my nav drop down bar looks like how a website does when it doesn't fully load correctly, if that makes sense? like a drop down menu from the 90s….do these two issues correlate? I also tried viewing it as a preview, but it still looks the same. Please help! (yes I have dreamweaver 2021) I'm also just wondering if I need to run the software on a better computer.
16:03
Can someone explain the last step where he attached css?
Super explanation, thank you very much. The FavIco doesnt work by me but i find surely another solution.
Thank you….Awesome presentation
Thank you!!! I loved it so much. You helped me quite a lot. Its the first tutorial I complete, you were pretty clear everywhere and made everything understandable. Thank you so much!!
also how do you get the popup for nesting? mine does not have it
Hi. Thanks for this video. I'm on step 9 (adding the main menu within the standard container)and when I add the basic navbar and click nest, I only get that additional line under div.container. How did you get all the other items like Home and Link?
I like that…