Dreamweaver CC: Responsive Design with Bootstrap 4

Dreamweaver CC: Responsive Design with Bootstrap 4
Dreamweaver CC: Responsive Design with Bootstrap 4

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 2h 34m | 564 MB
eLearning | Skill level: Intermediate

Dreamweaver CC—coupled with Bootstrap 4—makes it easier for design-minded professionals to build websites that look great on desktops and mobile devices alike. In this course, learn how to efficiently build responsive web pages using Dreamweaver CC and Bootstrap, the popular HTML, CSS, and JavaScript framework. Instructor David Powers demonstrates how to define a Bootstrap layout grid, insert a navigation bar, add a hero image, and resize, offset, duplicate, and copy Bootstrap columns. Plus, he covers how to edit Bootstrap components such as cards and carousels.

Topics include:

  • 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
+ Table of Contents

1 Speed up responsive design
2 What you should know

Get Started
3 Set the Bootstrap version
4 Understand the layout grid
5 Define the layout grid

Create the Site Navigation
6 Insert a navigation bar
7 Edit the links
8 Improve usability on small screens
9 Apply quick styles to the navigation bar
10 Customize the color scheme
11 Add a background image to the brand

Add a Hero Image
12 Add a container for the page content
13 Insert a row and columns
14 Insert a responsive image
15 Remove gaps around the image
16 Position text over the image

Work with Rows and Columns
17 Resize and duplicate columns
18 Flex layout – Equally distributed columns
19 Use semantic markup
20 Paste formatted text
21 Insert fixed-size images
22 Flex layout – Centered columns
23 Paste into an empty column
24 Style the feature section

Edit Bootstrap Components
25 Insert cards
26 Add content to cards
27 Superimpose text on a card image
28 How a carousel is structured
29 Edit a carousel

Complete the Design
30 Add the footer
31 Hide elements
32 Add extra pages

33 Next steps