YoVDO

Dreamweaver CC: Responsive Design with Bootstrap 4

Offered By: LinkedIn Learning

Tags

Responsive Web Design Courses Computer Science Courses Web Development Courses Flexbox Courses HTML Courses

Course Description

Overview

Learn how to build responsive websites using Dreamweaver CC and the Bootstrap 4 framework.

Syllabus

Introduction
  • Speed up responsive design
  • What you should know
1. Get Started
  • Set the Bootstrap version
  • Understand the layout grid
  • Define the layout grid
2. Create the Site Navigation
  • Insert a navigation bar
  • Edit the links
  • Improve usability on small screens
  • Apply quick styles to the navigation bar
  • Customize the color scheme
  • Add a background image to the brand
3. Add a Hero Image
  • Add a container for the page content
  • Insert a row and columns
  • Insert a responsive image
  • Remove gaps around the image
  • Position text over the image
4. Work with Rows and Columns
  • Resize and duplicate columns
  • Flex layout: Equally distributed columns
  • Use semantic markup
  • Paste formatted text
  • Insert fixed-size images
  • Flex layout: Centered columns
  • Paste into an empty column
  • Style the feature section
5. Edit Bootstrap Components
  • Insert cards
  • Add content to cards
  • Superimpose text on a card image
  • How a carousel is structured
  • Edit a carousel
6. Complete the Design
  • Add the footer
  • Hide elements
  • Add extra pages
Conclusion
  • Next steps

Taught by

David Powers

Related Courses

Software as a Service
University of California, Berkeley via Coursera
Intro to Computer Science
University of Virginia via Udacity
Web Development
Udacity
Software Engineering for SaaS
University of California, Berkeley via Coursera
CS50's Introduction to Computer Science
Harvard University via edX