Skip to content

What You Will Learn Each Week You Attend

Level 1: Basic Web Development with HTML5 & CSS3 The first two sessions (4 Projects) are FREE! $99 to complete all 10 projects including live sessions

1) HTML Basics (est. 30 min)FREE!
Learn the basic tags needed to create a valid page. Your Project: Create your first page and show it to the world. more info...
2) CSS Basics (est. 30 min)FREE!
Learn how to create and apply CSS styles to achieve effects. Your Project: Create your first CSS style and apply it. more info...
3) CSS Box Model (est. 30 min)FREE!
Learn about borders, margin & padding and how they affect the spacing of elements. Your Project: Use your browser’s “developer tools” to manipulate margin, padding and other elements on a page. more info...
4) London Bridge at Night (est. 45 min)FREE!
Learn about graphic images, links, background colors, font colors & page centering. Your Project: Build your first page. You will go up to Google and source images to reference on your page. more info...
5) Working with Text & Backgrounds (est. 60 min)
Learn various CSS properties for manipulating text on the page, creating page backgrounds and using professional icons with Font Awesome. Your Project: Replicate an example page but customize it to your liking by changing the Font Awesome icons, background graphic and text. more info...
6) Working with Tables Lists & iFrames (est. 60 min)
Learn how to construct various types of HTML table structures, ordered & un-ordered lists, and iFrames using YouTube as an example. Your Project: This is a MAJOR project and your opportunity to use everything you have learned so far to create your own themed page. When you are finished the goal is to “show it to the world” and get your page indexed on Google. more info...
7) Working with Tables and MP3 Audio (est. 60 min)
Learn how to add your own MP3 Audio clips to a page. Illustrates how to use a 3rd party conversion site to convert YouTube video’s to audio format so you can add them as background music to your page. Your Project: Convert a YouTube video to MP3 Audio format, upload the file and add it to your page as background music. more info...
8) Working with Tables and MP4 Video (est. 60 min)
Learn how to add your own MP4 Video clips to a page. Illustrates how to use a 3rd party conversion site to convert .WAV video’s (iPhone) to MP4 format so you can add them to your page. Your Project: Convert an iPhone video (.WAV file) to MP4 Video format, upload the file and add it to your page. more info...
9) The Email Form Processor (est. 60 min)
Learn about HTML Forms and the different question types available. This form will allow you to solicit feedback from users and have the information sent to your email box. Your Project: Add Audio or Video to a page with a feedback form. You will need to submit this challenge for a code review before moving on. more info...
10) Your Final Project for Level 1 (est. 2+ hours)
This project is all up to you! Bring together everything you have learned and create a page according to a theme of your choosing. When you are finished add it to the “Show Case” on the website to show off your work. more info...

Level 2: Responsive Layouts and Special Effects with jQuery & Bootstrap JS $160 for all 9 projects including live sessions

1) Bootstrap Grid Basics (est. 60 min)
Learn the basics of the Bootstrap Grid structure that breaks a page layout into rows and columns similar to a spreadsheet. Your Project: Create a basic page design of your choosing that uses the grid structure. more info...
2) Bootstrap Fixed vs Fluid Layouts (est. 60 min)
Choosing the right layout structure for the page design is an important 1st step. In this project you will use both a fixed and fluid layout of the same content so you can compare how they respond to changes in the size of the viewing device (laptop, tablet & phone). Your Project: Replace the content placeholders in the template with real text copy and images. Resize the browser width to see how the page responds and it’s impact on the content. more info...
3) Responsive Layouts & Media Queries (est. 60 min)
Learn how to control the appearance of your page as the width of the viewing device expands and collapses. You will be introduced to CSS Media Queries and learn how to set them for screen widths triggering the use of specific CSS classes. You will gain control over how your rows and column align themselves by stacking Bootstrap column classes for specific screen widths. Your Project: This will be a page design of your choosing. Use either a fixed or fluid grid structure from one of the projects. Integrate Media Queries and stack Bootstrap column classes to create a responsive layout based on screen width. more info...
4) Bootstrap Image, Panel & UI Effects (est. 60 min)
Introduces the Bootstrap JumboTron, Page Header, Image Effects, Responsive Videos, Panels and various types of tooltips. Your Project: Create a page design using the Bootstrap Grid Structure, JumboTron, Panels and Media Queries to make it responsive. more info...
5) Bootstrap Tabs, Pills & Accordion (est. 60 min)
Introduces various Bootstrap techniques to hide and show content on a page including Tabs, Pills & the Accordion. Your Project: Customize a template from a previous project by adding in Tabs or Pills and the Accordion. more info...
6) Bootstrap Carousel & Timeline (est. 60 min)
Introduces two powerful effects for presenting your content including the Bootstrap Carousel Slide Show and the Bootstrap Timeline. Your Project: Create or customize a page of your choosing using the Carousel Slide Show and a Bootstrap Timeline. more info...
7) Bootstrap Navigation Menu (est. 60 min)
Create your first responsive navigation menu while building "The Aquarium Shop". This re-usable menu will allow your users to navigate single or multiple page websites with some minor changes. In the lesson series you will build a "single page website" with all the content on one page. This is popular for mobile presentations. Your Project: Make some slight changes to the menu and transition it from supporting a single page website design into a multi-page website design. more info...
8) Bootstrap Modal Form (est. 60 min)
Use a Bootstrap Modal Pop Up Dialog to create a form that solicits hotel reviews from users and displays them on the screen. You will be introduced to JQuery and Javascript to achieve the effects in a preview of Level 3. When you complete this project the customizable modal form will be added to your toolbox. Your Project: You will create a page that customizes the inputs on the Modal Form Dialog to support a theme of your choosing. You will then customize the jQuery code to accommodate your changes and render the feedback to the screen. If you prefer you can use the Email Form Processor code snippets from Level 1 to send an email rather than writing the user feedback to the screen. The choice is yours. more info...
9) Your Final Project for Level 2 (est. 2+ hours)
This project is all up to you! Bring together everything you have learned and create your own single or multi page site according to a theme and layout of your choosing. When you are finished add it to the “Show Case” on the website to show off your work. more info...

Level 3: Advanced Web Development with Javascript & JQuery (coming soon)