Search Icon A magnifying glass icon.
Search Icon A magnifying glass icon.
Subject
Admissions

DEGREES

Online Bachelors Degre in Graphic Design - Sessions College
Next Start:
January 6, 2025
Online Graphic Design-Degree - Sessions College
Next Start:
January 6, 2025
Explore Graphic Design Degree Courses
Discover Sessions Graphic Design Hub

Professional Certificates

Graphic Design Career-Certificate - Sessions College
Next Start:
November 1, 2024
Explore Graphic Design Career Courses

DEGREES

Online Web Design Degree - Sessions College
Next Start:
January 6, 2025
Web Design Undergraduate Certificate - Sessions College
Next Start:
January 6, 2025
Explore Web Design Degree Courses
Discover Sessions Web Design Hub

Professional Certificates

Web Design Career Certificate - Sessions College
Next Start:
November 1, 2024
Explore Web Design Career Courses

DEGREES

Next Start:
January 6, 2025
Explore Digital Media Degree Courses
Discover Sessions Digital Media Hub

Professional Certificates

Explore Digital Media Career Courses

DEGREES

Explore Digital Media Degree Courses
Discover Sessions Digital Media Hub
You can deepen your software skills and keep up with the latest Adobe CC updates in our online Digital Arts courses.
Contact Admissions

DEGREES

Online Bachelors Degree in Photography
Next Start:
January 6, 2025
Online digital photography degree - Sessions College
Next Start:
January 6, 2025
Explore Digital Photography Degree Courses
Discover Sessions Digital Photography Hub

DEGREES

Fine Arts Career Certificate - Sessions College
Next Start:
November 1, 2024
Explore Fine Arts Degree Courses

DEGREES

Online Illustration Degree - Sessions College
Next Start:
January 6, 2025
Explore Illustration Degree Courses
Discover Sessions Illustration Hub

Professional Certificates

Digital Arts Career Certificate - Sessions College
Next Start:
November 1, 2024
Explore Illustration Career Courses

DEGREES

Explore Advertising & Marketing Degree Courses
Discover Sessions Advertising & Marketing Hub

Professional Certificates

Explore Advertising and Marketing Career Courses

CERTIFICATES

Digital Arts Career Certificate - Sessions College
Next Start:
November 1, 2024
Fine Arts Career Certificate - Sessions College
Next Start:
November 1, 2024
Graphic Design Career-Certificate - Sessions College
Next Start:
November 1, 2024
Explore Sessions Career Courses
Professional Cert PLUS
Web Design Career Certificate - Sessions College
Next Start:
November 1, 2024
Online Bachelors Degre in Graphic Design - Sessions College
Next Start:
January 6, 2025
Online Bachelors Degree in Photography
Next Start:
January 6, 2025
Online bachelors degree in illustration - Sessions College
Next Start:
January 6, 2025
Explore Sessions Bachelor's Degrees
Online digital photography degree - Sessions College
Next Start:
January 6, 2025
Online Illustration Degree - Sessions College
Next Start:
January 6, 2025

WEB 213: Bootstrap Using Dreamweaver I

Learn the leading framework using Adobe's HTML editor

Bootstrap provides a framework of HTML, CSS, and JavaScript to speed up your site development. Designing with Bootstrap puts a wealth of useful code at your fingertips. In this course, you'll learn how to build responsive, mobile-first web sites using Bootstrap 5 and Dreamweaver, Adobe's HTML editor. Working with an expert instructor, you'll learn how to design web sites from using HTML and CSS to structure and design page layouts, and ensuring that your designs work on a range of platforms and devices. Each project includes accessibility testing as an integral part of the workflow.

Web Design | 3 credits | Next Start:
January 6, 2025
Lauren Greenwald website design
Student work by Lauren Greenwald.
Visit the Student Gallery.

About This Course

Project-Based Learning

Projects include a favorite links/cards page, mini sites for hairdressing, restaurants, gardening industry, and music clients. Accessibility projects focus on: Enabling text resize in the browser, using a screen reader to navigate website content, running accessibility tests using Chrome DevTools, checking tables for accessibility using a screen reader, running a color blindness accessibility test, and testing for accessibility using a keyboard.

What Skills Will I Develop?

Students in this course can expect to learn to:

  • Install the Bootstrap 5 framework and manage its assets using Dreamweaver.
  • Edit page content in Dreamweaver, insert images and text, create links, and preview a page in a browser.
  • Define a site in Dreamweaver and publish website content.
  • Design responsive layouts in Bootstrap, using media query ranges, containers, and responsive column classes.
  • Develop custom CSS styles for Bootstrap sites, using tag, class, and ID selectors to style page elements and link states.
  • Develop and edit the layout, type, border and background attributes of page elements.
  • Design responsive data tables.
  • Control page layouts using absolute positioning, content overflow properties, and fixed and static positioning.
  • Add multimedia features such as jQuery lightbox gallery and a Bootstrap image carousel.
  • Test and troubleshoot a site to eliminate issues before it goes live.
  • Tackle a range of project scenarios and create consistent, appealing web site designs.

What Software and Supplies Do I Need?

  • Computer with Internet connection.
  • Adobe Dreamweaver CC.
  • An account with a Web hosting service. Free services are available. Your Web host must support Dreamweaver's FTP protocol.
  • Adobe Photoshop or equivalent program recommended but not required.

Course Instructor(s)

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

Course Outline

    1. Intro to Bootstrap and Dreamweaver

      Bootstrap 5 and Dreamweaver work very well together; Adobe's HTML editor provides an intuitive platform for managing the Bootstrap's extensive resources. In this session, you'll learn how to edit page content in Dreamweaver, and navigate document views, insert images and text, create links, and preview a page in a browser. You will learn how to define a site, so you can publish your project to the Web, and discover the three common ways to install the Bootstrap framework.

    2. Bootstrap Layouts

      This week we will begin by exploring how Bootstrap uses media query ranges to adapt the display of images to the different ways that users will access your site. You will learn how containers can be used to construct page layouts and how responsive column classes can help you refine your layouts. You will learn to manipulate the vertical and horizontal alignment of rows and columns so that your pages are optimized for a range of browsers and devices.

    3. Custom CSS

      There's nothing wrong with using Bootstrap's CSS utilities, but as a designer you'll need to develop custom CSS for your site designs. This week we will learn how to use tag, class, and ID selectors to style page elements and link states, and add custom CSS stylesheets to a Bootstrap site. You'll discover how to edit layout, type, border and and background attributes to give you fine control over content areas and explore the many advantage of Dreamweaver's CSS Designer panel.

    4. Data Tables

      HTML tables were developed for data display: rows and columns of facts and figures. With the advent of CSS positioning, tables regained their original purpose: representing data. In this session you'll learn how to create and edit tables in an HTML document and apply Bootstrap's table selectors, making HTML tables responsive.

    5. CSS Positioning

      Web designers who want to break out of the box need to explore CSS positioning: absolute, relative, fixed, and static. Using a combination of floats and CSS positioning, you can build virtually any layout imaginable. This week, you 'll learn how to apply absolute positioning and overlap elements using CSS and Bootstrap. To ensure your content displays as intended, we'll discuss how to manage content overflow properties and fixed and static positioning options.

    6. jQuery, Multimedia, and Troubleshooting

      In this last lecture, we'll venture beyond the bones of layout design in Bootstrap and look at some exciting (and important) extras. It's important to realize that Bootstrap sites can be enhanced with any number of add-ons from Bootstrap or other frameworks. Thus we will explore how to add a jQuery lightbox gallery and a Bootstrap image carousel to your site. Finally, because troubleshooting is a key final stage in any Web project, we'll review some essential ground rules to follow to make sure your sites are successfully launched.

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 admissions@sessions.edu. An Admissions Advisor will contact you to setup your enrollment.

Course Tuition and Fees
Tuition$300/credit
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).

©2024 Sessions College for Professional Design  All rights reserved

Terms & Conditions       Privacy Policy