WEB 214: Bootstrap Using Dreamweaver II

Tap the power of advanced Bootstrap elements

The powerful assets of Bootstrap are made easier to access using Adobe Dreamweaver. In this advanced course, you'll learn how to build responsive layouts using Bootstrap, add advanced CSS styles and transitions, add JavaScript and jQuery features, all without reams of code. Working with a pro Web designer, you'll learn how to apply these techniques to practical design project scenarios.

Web Design | 3 credits | Next Start:
August 26, 2024
Michael-John Vincent web design Student work by Michael-John Vincent.
Visit the Student Gallery.

About This Course

Project-Based Learning

Learn and apply Bootstrap skills on navigation bar design, mini site design, image slideshow and accordion menu, contact form, and jQuery Mobile website design. Areas of accessibility focus include: screen reader use, Google Chrome accessibility audit, testing JavaScript elements for keyboard accessibility, color blindness accessibility test, form accessibility, and mobile device accessibility.

What Skills Will I Develop?

Students in this course can expect to learn to:

  • Develop and submit for feedback six responsive Web sites demonstrating specific Dreamweaver techniques.
  • Create attractive, consistent, and responsive Web site designs relative to target audiences.
  • Use CSS (Cascading Style Sheets) to format all text and content areas in a site.
  • Incorporate a navigation system using a Bootstrap navbar.
  • Utilize the following CSS techniques: text shadows, border radius, box shadow, opacity, and gradients.
  • Employ CSS positioning to accurately position and align content areas.
  • Integrate interactive JavaScript components into a HTML page.
  • Build an attractive working image carousel.
  • Insert three accordion menus and customize the accordion menus styles.
  • Develop and style a photo gallery using caption hover effects.
  • Plan and produce the front-end of a Web-based form using appropriate HTML form elements.
  • Integrate a form with a free form handler service.
  • Apply CSS transitions to the main navigation bar and external links.
  • Design an effective and attractive custom jQuery theme using ThemeRoller.
  • Accurately incorporate jQuery list views and collapsible blocks.
  • Embed Google maps in HTML files and link to them using jQuery buttons.

What Software and Supplies Do I Need?

  • Computer with Internet connection.
  • Adobe Dreamweaver CC
  • Basic experience in the above software.
  • An account with a Web hosting service. Free services are available. Check with your Web host to make sure it supports Dreamweaver's FTP protocol.
  • Adobe Photoshop recommended but not required.

Course Instructor(s)

The course is taught by the following instructor(s):

Course Outline

    1. Bootstrap Layouts

      We'll dive right into the latest options for building responsive layouts using the Bootstrap framework. Emphasis will be placed on making good design decisions, not just the right technical moves. After a foundation in Bootstrap, you'll learn how to use absolute positioning to expand the possibilities of a responsive layout, incorporate and organize HTML5 structural elements within Dreamweaver, and apply layout changes using the Code Navigator and CSS Inspector.

    2. Extending Dreamweaver

      In this lecture, you'll explore how to use Dreamweaver to apply advanced CSS techniques to improve your visual design concepts and speed up site development. Before CSS, text shadows, box shadows, gradients required extra graphics. Now, you can achieve the same effects with a few lines of code. And Dreamweaver can implement that code for you—with the right clicks! We'll also take a look at Dreamweaver's tools for collaborative site editing.

    3. JavaScript Components

      Did you know that—in addition to writing HTML and CSS—Dreamweaver can write some pretty extensive JavaScript code as well? JavaScript can give a Web page added functionality and graphic pizzazz, but it's pretty tricky to master "by hand." In this lecture, you'll explore how to apply a number of useful JavaScript components in Dreamweaver, including carousel slideshows, accordions, tabbed panels, and more.

    4. CSS Transitions

      No matter how pretty your Web page is, no one is going to stop and stare at it for long. What users do is interact. And when they interact, you want that pretty page to come to life. A live Web page is not a static design comp; a live page moves and breathes. Using CSS transitions, you can control the timing and effects created by interactivity. In this lecture, we'll try out transitions of all shapes and forms.

    5. Form Page Design

      In this lecture, you'll learn how to design and "hook up" a basic form that looks and works great. We'll look at how to create various form elements such as text fields, radio buttons, checkboxes, and submit buttons, explore ways of implementing different types of form handlers and learn to troubleshoot common form problems.

    6. jQuery Mobile

      jQuery Mobile is a touch-optimized Web framework for smartphones and tablets. The code is based in HTML5 and the design themes are customized with CSS. Add jQuery widgets for accordions, toolbars, grids, and form elements, and you've got yourself a great toolset. Dreamweaver makes jQuery Mobile easy to implement, whether you are planning to build a native app or a browser-based mobile Web site. It's the perfect place to end our journey through Dreamweaver's advanced features.

Frequently Asked Questions (FAQ)

How Do The Courses Work?

Our courses are project-based and instructor-led. In each course you’ll complete a series of lectures, projects, discussions, and critiques designed to stretch your creative skills. Weekly assignment deadlines keep you on track, and with no set-logins or Zoom meetings, you can build your studies around your schedule.

Who Are The Instructors?

Our courses are developed and taught by our industry-leading faculty of creative professionals. This means that you’ll learn in-demand skills, get feedback on your work, and build a portfolio of creative work. View our Student Gallery for featured student projects.

When Can I Start?

Classes start January, April, and August, and this course is completed in a 15-week term. College credit from this course can be applied to a range of Degree and Certificate programs at Sessions College. You can enroll in this course on an individual basis or as part of a program.

Explore our Programs: Bachelor's Degree | Associate Degree | Undergraduate Certificate

How Do I Register?

To register for a program, complete our program application. To register for this course on an individual basis, please contact our admissions team at An Admissions Advisor will contact you to setup your enrollment.

Course Tuition and Fees
Registration Fee* $200
Total Course Price $1100

Registration fees are nonrefundable after 5 days from enrollment.

Is Sessions College Accredited?

Yes. Since 2001, Sessions College has been accredited by the Distance Education Accrediting Commission (DEAC). The Distance Education Accrediting Commission is listed by the U.S. Department of Education as a recognized accrediting agency and is recognized by the Council for Higher Education Accreditation (CHEA).