Web Design Certificate Program

CERTIFICATE OF COMPLETION

All students who finish this program will receive a signed certificate of completion verifying their participation in the program.

What You'll Learn

In this accelerated certificate program you will learn how to design and build a "responsive" website using Bootstrap CSS and HTML/HTML5 including preparing the user interface design in Photoshop, building standards compliant pages and publishing to a web server.

Program Description

This certificate program is the perfect way to learn professional web design using cutting-edge tools and technologies. You'll learn from an industry veteran by building an actual sample website from the ground up using best practices. This program is an engaging combination of lectures, hands-on learning and guided practice time that will guide you through the process, from designing the user interface to writing HTML and CSS and even basic search engine optimization.

The program will leverage the popular Bootstrap CSS Framework as a starting point for rapid site development and include the most practical skills needed to produce amazing websites for personal or business use.

Read more about what makes our certificate programs unique.

Please keep in mind that this is a short, one-week program designed to give you a comprehensive and efficient introduction to the key tools and technologies used in modern web development. In order to become truly proficient and build your skill level we encourage students to apply what they've learned after the program and build websites! If you're looking for something longer, BDA's sister organization CodeCraft School offers a variety of full stack web development bootcamps   that are specifically designed to prepare you for a new career in web development.

Prerequisites

You should have a basic understanding of the web and, ideally have some experience using Adobe Photoshop (see BDA classes on Photoshop). You should also be ready to learn a reasonably technical skill set. This class will focus on professional web development methodologies and tools rather than relying on visual or WYSIWYG editors, a standard text editor like Notepad++ or Sublime will be used for the HTML and CSS coding. We recommend taking Web Development Fundamentals and/or Getting Started with Adobe Photoshop if you need more of the basics first. There will be ample practice time to begin designing and developing your own website if so desired. Come prepared with a concept and any graphic and content material to best make use of your time.

Equipment

This class requires you to bring your own computer that meets the following requirements. If you don't have a computer, we have Apple iMac computers that we can rent you starting at $50 per day or $200 for a week. BDA staff will follow up with you after your register to reserve a computer for you if you need one. Please note that if the computer requirement is a hardship for you, please let us know as we have a number of scholarships available for computer rentals.

  • Windows 7,8,10 or Mac OS X
  • Google Chrome or Safari
  • Adobe Photoshop CC (Adobe offers a free 30-day trial)
  • Brackets code editor (free)
  • NOTE: We will download in class Notepad ++ (Windows) TextWrangler (Mac), and FileZilla. They are all free programs.

After You Register

BDA is committed to making learning process as enjoyable as possible and making sure that you can focus on your learning. After you register you will be contacted by our staff who answer questions you might have and assist you with any logistical and travel concerns.

Schedule

This certificate program is offered in two formats to accommodate the busy schedules of our students! The "Weekday" schedule is one full week - Monday through Friday 9am to 5pm. The "Weekend" schedule is held for 5x consecutive Saturdays from 9am-5pm. So, there are 5, 8-hour sessions regardless of the schedule format you choose. The complete schedule for each instance of the program listed underneath the dates in the right-hand column of this page.

Program Outline

Throughout the program you will apply what you learn by creating a simple 4-page website that will have a home, "about", products/services" and contact pages. The contact page will include a web form your users can use to contact you. During class each student will be creating a nearly identical web site. The website you're building during classes is intended as an exercise only so that you can practice what you're learning and see how the tools and technologies come together to create a functional website. You will not be creating your own, unique website. However, once you finish the program you will have the skills you need to customize the website you built or create a new website from scratch!

Session 1

  • 9:00am - 9:15am: Introductions, review of class syllabus and setting expectations.
  • 9:15am - 10:00am: Download and discuss the tools needed for website design. Overview of these applications and how to use them effectively. You'll be writing your code in a basic text editor called Brackets which is a free download for both Mac and Windows. Once you're ready to publish your site to the internet using FTP with an program called FileZilla.
  • 10:00am - 12:00pm: Introduction to HTML, doc types, page structure and important HTML tags.
  • 12:00pm - 1:00pm: Lunch Break
  • 1:00pm - 2:00pm: Time to write your first web page. We'll focus on the HTML markup only so when you preview it in your web browser it's going to look pretty plain. Over the course of the next few days you'll see how pages come alive when you style them using Cascading Style Sheets (CSS). The instructor will be available to help you and answer any questions.
  • 2:00pm - 3:00pm: Understanding your "local development environment". You'll learn how to view and test your web pages "locally" on your own computer in a variety of web browsers. We'll also go over file organization and "pathing" (relative vs. absolute). You'll learn best practices for naming files and how all the files in your website connect to each other and work together to create complete web pages.
  • 3:00pm - 3:30pm: Learning more HTML including lists (unordered and ordered) and how to use the anchor tag to make links to other pages or other sites.
  • 3:30pm - 4:45pm: Instructor guided practice time. During this time you'll practice your new HTML skills by experimenting with your first HTML page. You'll be adding more elements and then seeing the results in your browser. Try adding some links and lists that you just learned about. Don't worry how the page looks and if it doesn't make any sense. At this point you're just experimenting with HTML tags and seeing the results. Your final website will be pretty and functional!
  • 4:45pm - 5:00pm: Q&A. By the end of the day you should be feeling pretty comfortable with writing basic HTML. We'll wrap up the day with some questions and answers.

Session 2

  • 9:00am - 11:00am: Introduction to Cascading Style Sheets (CSS). You'll learn what CSS is and how it works with HTML to define the "look" (style) of your website. We'll cover selectors and the variety of properties you can use in your CSS definitions. We'll also discuss basic layout techniques with CSS including "floating" elements.
  • 11:30am - 12:00pm: You'll learn how to include a CSS file into your website using a relative URL as well as how to incorporate CSS into the "head" of your HTML document or "inline" with HTML elements.
  • 12:00pm - 1:00pm: Lunch Break
  • 1:00pm - 2:00pm: Guided practice time. During this hour you'll apply what you learned about CSS and see it come alive in your browser. You'll add "classes" and "ids" to the HTML page you created at the last session and then you'll write CSS rules that correspond to these "selectors" setting properties like color, typeface, borders and more. At this point you should understand the relationship between HTML (the "bones" of web page) and CSS (the "skin" of a web page). Instructor is available to guide students and answer questions during this practice time.
  • 2:00pm - 3:00pm: Working with images in HTML. You should bring one or more images you would like to use in your website. It can be a family photo or an image you would like to see as the background image of your site. For background photos (to cover entire site) we recommend the image be no less than 1920px wide x 1080px tall. For images to be used as "content" inside the site, the image should be at least 700px wide. Generally, the larger the better, they can always be resized.
  • 3:00pm - 3:30pm: Overview of front end frameworks (such as Bootstrap) and why you would want to use them (time savings, reliability and mobile-first responsive). We'll also define what "responsive web design" means very quickly.
  • 3:30pm - 4:00pm: Quick introduction of the Bootstrap front-end framework created by Twitter. Learn about grids and how easy it is to add Bootstrap-specific HTML markup that invokes corresponding styles using Bootstrap's CSS.
  • 4:00pm - 4:30pm: Learn how to download and install Bootstrap into your website project. During this exercise we'll review "pathing" and how all the files of your website work together.
  • 4:30pm - 5:00pm: We'll wrap up the day with a quick tour of some of the the user-interface elements available to us in the Bootstrap library that we'll be using in the coming days including the grid, forms, buttons, typography, navigation and more.

Session 3

  • 9:00am - 9:30am: We'll start the day by creating the first page of your new 4-page website using the Bootstrap grid. This will be the site's home page and it will be fully responsive! For this first page you'll follow along with the instructor - as you write the markup, the instructor will explain the purpose of each tag. Then you'll see how it renders in your browser.
  • 9:30am - 10:00am: Next we'll take a look at Bootstrap's "examples" and explore how a few of these layouts were created. Often times, "reverse engineering" a page or a website that you like is a great way to learn from other developers.
  • 10:00am - 11:00am: Guided practice time. Now that you have your home page created, it's time to create your "about", "services/products" and "contact" pages using Bootstrap HTML markup. At this point each page will be pretty sparse - mostly just the layout and some placeholder text. We'll be adding content and fleshing out these pages as the program continues! The instructor will be available to help or answer any questions.
  • 11:00am - 11:30am: Sometimes it's useful or necessary to go beyond Bootstrap's default grid settings. At this point we'll dive into the CSS code that powers Bootstrap and you'll learn how to customize these files. In particular, we'll explore the "media queries" inside Bootstrap that are quietly and confidently hard at work in the background and how to use media queries to control how your website adapts various screen sizes.
  • 11:30am - 12:00pm: Next we'll take a very quick look at image editing for the web in Adobe Photoshop. You'll learn the essentials of how to crop and size images for your website. Along the way you'll learn about common image file formats and why you'd choose one format over another (.psd, .png, and .jpg).
  • 12:00pm - 1:00pm: Lunch Break
  • 1:00am - 1:30pm: Image editing practice time. This is your chance to practice image editing and saving your images in various formats in Adobe Photoshop. You'll find royalty free images to use on your website, scale/crop them and then place them onto pages in your work-in-progress website. Add a photo of yourself to the "about" page. Perhaps a few images of products on the "products/services" page. The instructor will be available to help and answer any questions.
  • 1:30pm - 2:00pm: Bootstrap Glyphicons. Easily put elegant icons on your site and display them any size and color with these vector icons available with Bootstrap.
  • 2:00pm - 2:30pm: Bootstrap Buttons. Learn how to size, nest, color, and link your buttons.
  • 2:30pm - 3:00pm: Bootstrap navigation. Now that you have all of your website's pages it's time to link them up with a standard navigation bar. You'll follow along with the instructor to add a nav bar to the top of your home page and then work independently to add this same navigation bar to the other three pages in your site and work to link up all your pages.
  • 3:00pm - 4:00pm: Intermediate HTML and CSS code examples. A lot of Bootstrap functionality such as element colors and transitions are made in the CSS. If bootstrap fails to do something you can learn to customize your CSS to get exactly the look you want!
  • 4:00pm - 5:00pm: Guided practice time. The instructor will be available to help and answer questions. During this time you can practice your HTML and CSS skills, adjust your website pages or if you're feeling confident, try creating new Bootstrap-based pages and link them up to your navigation bar.

Session 4

  • 9:00am - 9:15am: Recap of HTML, CSS & Bootstrap. You've learned a lot of new stuff so if you have any new questions this is a great time to ask!
  • 9:15am - 10:00am: Overview of UI/UX design (user interface, user experience design). How to adopt best practices to create the best experience for your clients
  • 10:00am - 10:30am: Exploration of the differences between "front-end" and "back-end" development (you're learning front-end development). Overview of server-side programming (PHP, Ruby on Rails, etc.) and its role in web design. We'll take a quick look at a PHP script that we'll use later in the day to "process" our contact form and you'll add a copy of script to your website. Note: we won't be writing any PHP in this class, you'll simply be using an existing script.
  • 10:30am - 11:30am: Servers and publishing. Now that you have a basic, functional website you'll learn how to connect to a web server via FTP to publish your files to the internet (using FileZilla) as well as a high-level overview of domain names, DNS and working with web hosting services. For the purposes of the class, you'll publish to one of our web servers but you'll know how to use FTP to publish to other "hosts" in the future. You'll also learn how to edit a page and then re-publish it to the web server to make changes to your pages over time.
  • 11:30am - 12:00pm: Introduction to web forms. You'll learn how web forms and how Bootstrap makes adding forms to your site a breeze.
  • 12:00pm - 1:00pm: Lunch Break
  • 1:00pm - 1:30pm: Now you'll apply your knowledge of web forms to add a form to your website's "contact" page. Then you'll publish the updated page using FTP. Your form will "post" the PHP script which will do the work of reading the form contents and sending an email to you on the server.
  • 1:30pm - 3:00pm: Finish up your website and practice your HTML and CSS skills. Add or edit content, images, links, etc. You can also edit your CSS to add a unique style to your site. Remember, the more you practice, the better you'll be! The instructor will be available to help or answer questions.
  • 3:00pm - 4:00pm: Troubleshooting and resources. Troubleshooting and testing is one of the most important skills you need as a web developer. During this hour you'll learn how to use the "element inspector" in your browser and other tools and tips to troubleshoot issues with your layout and CSS. We'll also take a look at a variety of online resources that you can use for reference and to continue learning as you build more sites!
  • 4:00pm - 5:00pm: Questions, comments and day recap and more code samples.

Session 5

  • 9:00am - 10:00am: We'll start the day taking a look at any Bootstrap user interface elements that we haven't covered using the Bootstrap "kitchen sink" page.
  • 10:00am - 11:00pm: Overview of Search Engine Optimization (SEO) best practices. Making sure your websites are search friendly is very important and in this hour you'll learn the basics of SEO.
  • 11:00am - 12:00pm: Brief introduction to JavaScript and it's role in front-end web development. If HTML is the "bones" and CSS is the "skin" then JavaScript adds some "muscle". You'll add the popular jQuery JavaScript library to your website and be shown how to manipulate the DOM (document object model) with jQuery.
  • 12:00pm - 1:00pm: Lunch Break
  • 1:00 - 3:00pm: Wrap up and final guided practice time. Add some jQuery magic to your site and practice your existing HTML and CSS skills. The instructor will be available to answer any last questions or provide guidance on anything you're struggling with.
  • 3:00pm - 4:00pm: Discussion of content management systems (CMS) such as WordPress or Drupal - why you might want to use them and how what you've learn applies to them.
  • 4:00pm - 5:00pm: Discussion of Integrated Development Environments (IDEs) and a professional development workflow.

Instructor

Eric WallenAs the owner of a local website design & SEO company, envolvd.com, Eric Wallen wears many hats. He build websites, works in Photoshop and manages client relationships. My passions are responsive website development, fast computers, coffee, hiking and time with my family. If you're not living on the edge, you're taking up too much room!

Location

This certificate program will be held in the Boulder Digital Arts Boulder location classroom.

$999
BDA Members
$1099
Non-Members

Registration:

BDA Members: $999.00

Non-Members: $1,099.00

Available Dates

July 2 - 30, 2016

Weekend Format Schedule

Register
Complete Schedule:
Saturday, July 2, 2016
9am - 5pm
Saturday, July 9, 2016
9am - 5pm
Saturday, July 16, 2016
9am - 5pm
Saturday, July 23, 2016
9am - 5pm
Saturday, July 30, 2016
9am - 5pm

Location: Boulder Location (Details)

Boulder Location
1600 Range Street, Suite 100
Boulder, CO  80301

This is BDA's headquarters located at Arapahoe Avenue and Range Street in Boulder (approximately 52nd and Arapahoe) on the northeast corner of Range and Arapahoe. The building is .6 miles east of Foothills Parkway, and .25 miles west of 55th Street. Range is the street that is between the stoplights at Conestoga and Commerce. Parking is available all around the building.

August 13 - September 17, 2016

Weekend Format Schedule

Register
Complete Schedule:
Saturday, August 13, 2016
9am - 5pm
Saturday, August 20, 2016
9am - 5pm
Saturday, August 27, 2016
9am - 5pm
- - - SKIP Sat. September 3 for Labor Day Weekend - - -
Saturday, September 10, 2016
9am - 5pm
Saturday, September 17, 2016
9am - 5pm

Location: Boulder Location (Details)

Boulder Location
1600 Range Street, Suite 100
Boulder, CO  80301

This is BDA's headquarters located at Arapahoe Avenue and Range Street in Boulder (approximately 52nd and Arapahoe) on the northeast corner of Range and Arapahoe. The building is .6 miles east of Foothills Parkway, and .25 miles west of 55th Street. Range is the street that is between the stoplights at Conestoga and Commerce. Parking is available all around the building.

Customer Comments

I have a much better understanding of CSS and HTML. [Kelly] was very organized and easy to follow and understand. [He] went through the most information he could in a short time, very helpful.Tiffany
Read All Comments

Related To: Web Design Certificate Program

Digital Marketing Certificate Intensive
WordPress for Beginners - How to Run Your Own Site/Blog
Understanding CSS

Understanding CSS

With Douglas Wray

Fees: $999 for members / $1099 for non-members

×

Comments For: Web Design Certificate Program

I really had a great experience in the Web Certification class! The instructor was well organized, very well-versed as well as being passionate and engaged. It was a lot to take in, but well worth my time!Andrew on 1/31/2015
As usual, your class is amazing.anonymous on 1/26/2015
This class was very valuable - helped bridge semantical gap between developers and business analysts. Brian had great energy, patience, knowledge, and kept things understandable.Jon on 11/1/2014
Brian was patient, knowledgeable, and willing to answer individual questions.Amy on 11/1/2014
This is a great program for gaining a solid foundation in HTML, CSS and Dreamweaver. Brian is an excellent instructor.Laine on 2/1/2014
With as much information as the course covered, it was entirely manageable and fluid. Brian is a truly gifted instructor, highly energetic and equally patient. A great course! Kara on 11/18/2013
Coming from an anthropological background, I took your classes trying to learn something about websites and learn some real world technological skills. A year later, I have paid myself back for the costs of the certification and Adobe programs. Through freelancing and starting a digital marketing company with a fellow aspiring, entrepreneurial girl, I am now leaps and bounds from where I was before. I wanted to express my gratitude to BDA. I have recommended your studio to anyone who asks about my education, and flaunt my certification to potential clients.Amy J on 7/16/2013
Brian is very good, very energetic...Overall very good class.William A. on 7/1/2013
It was awesome!Tricia on 7/1/2013
I have a much better understanding of CSS and HTML. [Kelly] was very organized and easy to follow and understand. [He] went through the most information he could in a short time, very helpful.Tiffany on 3/29/2013
This class moves fast and covers a lot of group for beginners new to programming, but it was very helpful and informative.Steven on 10/25/2012
This class moves fast and covers a lot of group for beginners new to programming but it was very helpful and informative.Steven on 10/24/2012
This class moves fast and covers a lot of group for beginners new to programming, but it was very helpful and informative.Steven on 10/24/2012
This class moves fast and covers a lot of group for beginners new to programming but it was very helpful and informative.Steven on 10/24/2012
This class moves fast and covers a lot of group for beginners new to programming, but it was very helpful and informativeSteven on 10/24/2012
This class moves fast and covers a lot of group for beginners new to programming but it was very helpful and informative.Steven on 10/24/2012
Extremely Happy. [The Instructor was] very knowledgeable and helpful.Susanna on 8/17/2012
[The instructor] is the quintessential website designer. The master of tech and art.Rebecca on 6/22/2012
Excellent overview of the many features and possibilities.Marni on 5/2/2012
I feel like I learned a huge amount in a very short time. This class was full to the brim with valuable & current web design information. The instructors real-world experience and advice was extremely valuable. He was also very good at explaining complex techniques in a way understandable to a novice.Heather on 5/2/2012
SO much information in one short class!Iris Sela on 5/2/2012
Condensed, concise tour of the components needed and available for web design. Handouts will be very valuable for future development. Instructor was very knowledgeable and experienced, providing us with best practices. Covered a huge amount of information, providing us with a great foundation to do website design development.Deborah on 2/10/2012
This program was invaluable. I now have qualifications to forward my career. Kelly's knowledge is so vast that it is rote for him!Tracy [Theresa] A on 2/10/2012
I learned a great deal - enough to continue on my own. The instructor was very knowledgeable and patient.Kate on 1/13/2012
I had a little knowledge of several topics - this class connected the dots. Kelly's knowledge is extraordinary!Jill M on 1/13/2012
Very informative with the latest available information. Great handouts for reference. I like instructors who are currently working in the field. Very knowledgeable.Jennifer on 11/9/2011
Leaned a lot!James on 8/12/2011
Practical instruction, skillfully delivered. A home run!Jearld Greg on 8/12/2011
This class was great! A lot of material was covered. It was a great introduction to web design and I feel as if I have a good foundation upon which to build my skills.Shelby on 3/10/2011
Accomplished building a large part of my website. All the classes are well run.Gregg on 11/12/2010
Fabulous overview of Adobe web apps and basic intro to internet design and strategy. BDA is fantastic, so glad to discover it! I'll be back!Cynthia on 11/12/2010
Great hands on training, well worth the money. Kelly is very informative and knows a lot!Kyle on 10/11/2010
I can now read and create CSS!! This will drastically improve the quality on my work life, and decrease my stress level. The instructor is knowledgeable, clever, and very patient.Lea on 10/11/2010
The combination of instruction and hands on helps build understanding and confidence to build your own sites.Jessica on 10/11/2010
×

Optional Payment Plan for Certificate Programs:

We want to make our training as accessible as possible so we offer a simple payment plan for our Certificate Programs. Each of the 4 payments is 25% of the total registration fee with no finance charges or other costs. The first payment will be taken when you register and the remaining 3 payments are paid every month for the following 3 months (detailed payment information in the table below). It's easy to take advantage of this option and we encourage you to sign up early since these programs often fill up fast! If you're interested, don't register online. Instead, please contact BDA staff at 303-800-4647 or email us with the name and start date of the class you wish to attend (info@boulderdigitalarts.com) and we'll get you setup, take your first payment, and confirm your registration.

 

Payment Program Details

  BDA Member Non-Member
Payment 1
Paid at time of registration.
$249.75 $274.75
Payment 2
Due one month after registration.
$249.75 $274.75
Payment 3
Due two months after registration.
$249.75 $274.75
Payment 4
Due three months after registration.
$249.75 $274.75
Note: registrants using the payment plan are not eligible for the early registration discount and always pay the standard registration fee ($999.00 for BDA members and $1,099.00 for non-members).
×

GET INSTANT ALERTS ABOUT

NEW CLASSES & EVENTS!

SIGN UP FOR OUR NEWSLETTER!

WIN FREE CLASSES BY CONNECTING WITH US!

CLOSE THIS THING