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

Advanced CSS Concepts
Microsoft via edX
Тонкости верстки
Moscow Institute of Physics and Technology via Coursera
CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass)
Udemy
Build Responsive Real-World Websites with HTML and CSS
Udemy
HTML5 & CSS3 Build: Two Responsive Websites in Hindi
Udemy