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 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!

Prerequisites

You should have a basic understanding of using the internet and the web and 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. It's helpful to have some experience with Adobe Photoshop but this is not required. BDA offers a variety of Photoshop classes. 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 (see below). 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 7-day trial)
• Sublime (free)
• NOTE: We will download Sublime and FileZilla in class. They are both free programs.

Computer Requirement

This is a hands-on class where you'll "learn by doing" - therefore you'll need a computer (Mac or PC). If you need any particular software installed, that will be detailed below. Not all programs require special software so if there isn't any detailed listed below you will only need a computer with an up-to-date web browser.

If you would like to take your class work and sample projects home, please be sure to bring a Mac compatible portable drive with 4GB of free space.

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 Sublime 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

Brian Shaffer is a seasoned web developer and Internet marketer. Over the past eight years, Brian has designed, developed, and marketed over 70 sites that are growing and thriving today. As an HTML, CSS, Javascript, and PHP expert, Brian builds on all major open source platforms, including WordPress and BigCommerce, to provide companies with sites that they can maintain without knowing how to program. Over the past few years, Brian has taken a liking to Twilio, and has built many phone and text message applications for clients using their platform. Take a look at some of the demos at Brian Shaffer's blog.

Location

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