Learn how to build responsive websites using Dreamweaver CC and the Bootstrap 4 framework.
- [Presenter] Building responsive web pages that work well on phones, tablets, and desktops is time-consuming. You want to concentrate on the design, not the intricate, technical details. That's where Dreamweaver CC and Bootstrap Four make the perfect partnership. Dreamweaver's builtin browser lets you build pages in a visual environment, checking what your design looks like at different screen widths as you go. In this course, you'll see how to define a custom grid, visually resize and align columns, and insert and edit Bootstrap components, such as nav bars, cards, and carousels.
Dreamweaver's visual approach speeds up development, taking care of all the necessary HTML, CSS, and Java Script, allowing you to concentrate on the design and content. I hope you'll join me, David Powers, as we dive into Dreamweaver CC, and responsive design, with Bootstrap Four.
Author
Released
12/21/2018- Defining a layout grid
- Inserting and modifying a navigation bar
- Adding a container for the page content
- Inserting a responsive image
- Resizing and duplicating columns
- Inserting fixed-size images
- Inserting cards
- Editing a carousel
Skill Level Intermediate
Duration
Views
Related Courses
-
Design the Web: Responsive SVG Images
with Chris Converse22m 46s Beginner -
Bootstrap 4 Essential Training
with Ray Villalobos6h 46m Beginner -
Bootstrap 4 Layouts: Responsive Single-Page Design
with Ray Villalobos3h 13m Intermediate -
Designing Websites from Photoshop to Dreamweaver
with Sue Jenkins2h 27m Intermediate
-
Introduction
-
What you should know1m 46s
-
1. Get Started
-
Set the Bootstrap version6m 26s
-
Understand the layout grid3m 52s
-
Define the layout grid5m 9s
-
-
2. Create the Site Navigation
-
Insert a navigation bar3m 34s
-
Edit the links6m 25s
-
Customize the color scheme6m 14s
-
-
3. Add a Hero Image
-
Insert a row and columns5m 46s
-
Insert a responsive image4m 21s
-
Remove gaps around the image5m 43s
-
4. Work with Rows and Columns
-
Resize and duplicate columns5m 29s
-
Use semantic markup3m 41s
-
Paste formatted text4m 50s
-
Insert fixed-size images5m 15s
-
Paste into an empty column6m 14s
-
Style the feature section3m 54s
-
-
5. Edit Bootstrap Components
-
Insert cards4m 46s
-
Add content to cards5m 26s
-
How a carousel is structured5m 13s
-
Edit a carousel4m 51s
-
-
6. Complete the Design
-
Add the footer3m 13s
-
Hide elements3m 8s
-
Add extra pages7m 15s
-
-
Conclusion
-
Next steps1m 55s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Speed up responsive design