Course Outline

This year we are fortunate enough to use TeamTreeHouse.com as a resource in our quest to learn about computers. I will be sending invites to your school email address very shortly where you can accept, and become a member with unlimited access to over 1000s instructional videos, programs, and exercises in about everything computers can do, including design, programming, and usability.

Week 1 – August 17-18

  • Register with TeamTreehouse
  • Signup for the Front End Development Track

Week 2 – August 21-25·      

Introduction to HTML and CSS
Estimated time (2 hours)

Get started creating web pages with HTML and CSS, the basic building blocks of web development. HTML, or HyperText Markup Language, is a standard set of tags you will use to tell the web browser how the content of your web pages and applications are structured. Use CSS, or Cascading Style Sheets, to select HTML tags and tell the browser what your content should look like. Whether you are coding for fun or planning to start a career in web development, learning HTML and CSS is a great place to start.

What will learn

  • Define HTML and CSS
  • Add and change HTML tags
  • Modify CSS attributes
  • Learn the structural foundation of web pages and applications

Week 3 – August 28 – October 01

HTML Basics
Estimated time (3 hours)

Learn HTML (HyperText Markup Language), the language common to every website. HTML describes the basic structure and content of a web page. If you want to build a website or web application, you'll need to know HTML.

What students will learn

  • Semantic markup
  • Formatting page content
  • Understanding file paths
  • Displaying images
  • Inline vs. block level elements

Week 4 – September 05-08

CSS Basics
Estimated time (7 hours)

CSS (Cascading Style Sheets) is a style sheet language that describes the presentation of web pages. Whereas HTML is what forms the structure of a web page, CSS is what we use to style the HTML with colors, backgrounds, font sizes, layout, and more. As you'll soon learn, CSS is one of the core technologies for designing and building websites.

What students will learn

  • Basic Selectors
  • Common Values and Units
  • CSS Layout
  • New CSS Features

 

Week5 – September 11-15

Continued from previous week through unit.

Week 6 – September 25-29

JavaScript Basics
Estimated time (6 hours)

JavaScript is a programming language that drives the web: from front-end user interface design, to backend server-side programming, you'll find JavaScript at every stage of a web site and web application. In this course, you'll learn the fundamental programming concepts and syntax of the JavaScript programming language.

What you'll learn

  • What JavaScript is and where it is used
  • Basic programming concepts like variables, data types and conditional statements
  • What functions are and why they're useful
  • How to troubleshoot programming problems
  • The basic syntax of the JavaScript programming language

 

Week 7 – October 02-06

Continued from previous week through unit

Week 8 – October 09-13

CSS Layout Basics
Estimated time (2 hours)

Learn to work with common layout and positioning methods used in web design. In this course, you'll get hands-on practice with basic CSS layout techniques like display modes and floats.

 

You'll use your new CSS layout skills to build the layout for a simple web page. Then learn to enhance the layout using relative, absolute and fixed positioning.
 

  • Getting started with CSS
  • Controlling layout with css display modes
  • Page layout with the float property
  • CSS layout project
  • Positioning page content

Week 9 – October 16-20

Responsive Layouts
Estimated time (1 hour)

Responsive web design is a collection of techniques for building websites that work on multiple screen sizes. In these lessons, we're going to use the foundational principles of responsive design as a framework for thinking about page layout. By the end, you should have a better understanding of how to approach common decisions in responsive design.

What students will learn

  • Responsive design theory
  • Media queries
  • Breakpoints
  • Page layout

CSS Flexbox Layout
Estimated time (1 hour)
 

Flexbox is a set of CSS properties that give you a flexible way to lay out content. With flexbox you can change the direction, alignment, size and order of elements, regardless of their original size and order in the HTML. You can even stretch and shrink elements and distribute space, all with just a few lines of CSS!

  • Understanding flexbox
  • Flexbox properties
  • Building a layout with flexbox

Week 10 – October 23-27

HTML Forms
Estimated time (2 hours)

The web is a two-way communication medium. There’s lots of HTML elements for displaying data and producing output, and conversely, there’s also lots of HTML elements for accepting input. Accepting input from the user means creating web forms. In this course, we’ll learn about all the most important form elements that web professionals use on a daily basis.

What students will learn

  • Forms
  • Input elements
  • Select menus
  • Radio buttons
  • Checkboxes

Week 11 – October 29-03

JavaScript Loops, Arrays and Objects
Estimated time – 4 hours

Storing, tracking and handling data is a large part of computer programming. Arrays provide a method for storing multiple values into a single variable. That makes an array a convenient way to pass around a list of items. 

In this course, you'll learn how to create arrays and use loops to access their contents. You'll also learn some advanced methods that make working with arrays easier.

What students will learn

  • Loops
  • Arrays
  • Objects
  • DRY Programming

Week 12 – November 06-10

CSS Selectors
Estimated time (2 hours)

In this short course, we're going to go beyond the basic selector concepts covered in CSS Basics. Besides the common ways to select elements with type, ID and class selectors, we're able to target elements based on their attributes, position in the HTML document, even their relation to other elements. 

By the end of this course, you'll have gained a better understanding of the power and flexibility behind CSS selectors. You'll have a new set of valuable tools in your CSS toolkit to use on your next project.

What students will learn

  • Attribute selectors
  • Advanced pseudo-classes
  • Pseudo-elements
     

Week 13 – November 13-17

JQuery Basics
Estimated time (5 hours)

jQuery Basics covers why you'd want to use jQuery, what it is and how to include it in your projects. You'll build several projects over the course to give you the confidence to integrate jQuery in your own projects and add that level of flair and interactivity to any site you work on.
 

  • Introduction to jQuery
  • Creating a spoiler revealer
  • Creating a simple lightbox
  • Creating a password confirmation form
  • Creating a simple drawing application
     

Week 14 – November 20-22

Bootstrap 4 Basics
Estimated time (2 hours)

Learn to use Bootstrap 4, one of the most popular open source front end frameworks, to help you build a functional design and layout in little time.

 

  • Getting to know bootstrap 4
  • Responsive layouts with the Bootstrap grid
  • Using Bootstrap components
  • Building forms with Bootstrap

Week 15 – December 27-01

HTML Tables
Estimated time (1 hour)

The web is filled with text and images, but it's also filled with information like sports scores throughout the years, list of employee names and email addresses, or nutrition facts for your favorite foods. HTML tables enable the display information in what is commonly known as tabular data, which is information that's stored in a table-like structure of columns and rows. In general, anything that you might put into a spreadsheet could go in a table. There are many use cases for a table, so it's important to add them to your skills because it's a very common method for displaying information.

What students will learn

  • Table elements
  • Organizing tables

     

HTML Video and Audio
Estimated time (2 hours)

Text and images have always been the foundation of web content, but more than ever, video and audio are also a part of that content mix. Fortunately, we can now create standards-based video and audio players that don't require the use of plugins. Adding video and audio to a webpage is almost as easy as adding an image or formatting some text.

What you'll learn

  • Video element
  • Audio element
  • Custom media players

 

Create a Media Player with MediaElements.JS
Estimated time (30 minutes)

MediaElement.js allows you to offer a consistent experience with audio and video across browsers. You can also customize the players to your heart's content. Let's learn how to use MediaElement.js to share audio and video with your users.

Week 16 – December 04-08

AJAX Basics
Estimated time (5 hours)

AJAX is an important front-end web technology that lets JavaScript communicate with a web server. It lets you load new content without leaving the current page, creating a better, faster experience for your web site's visitors. In this course, you'll learn how AJAX works and how you can use JavaScript to communicate with a web server. We'll use plain JavaScript as well as jQuery to create AJAX requests and use the response to dynamically update your web pages. Along the way, you'll build mini-projects to reinforce your learning. We wrap up the course with a small project, showing you how to apply what you've learned to pull images from Flickr and display them on your web site.

What students will learn

  • AJAX Concepts
  • How to use JavaScript to make AJAX requests
  • How to use jQuery to make AJAX requests
  • How to process JSON with jQuery and JavaScript
  • How to use a 3rd party API with AJAX and jQuery
     

Students who like to work ahead

Object-Oriented JavaScript
Estimated time (2 hours)

Objects in JavaScript are everywhere. Whether you know it or not, you've been using them already. You can use the document object to find HTML elements and modify their contents. You've been using the console to log out values. However, you can make your own objects to organize your own code and do some awesome things. In this course we'll build a couple of projects to get a handle on creating your own objects.

What students will learn

  • Create your own objects with methods
  • Use constructors
  • Creating prototypes
  • Use prototypal inheritance

 

Accessibility
Estimated time (1 hour)

Accessibility is the practice of making websites available to all people, regardless of their abilities or disabilities.

 

Website Optimization
Estimated time (2 hours)

In this course we'll cover tools needed in keeping your website in top shape. These tools will help you perform tasks like debugging a problem to improving your page load times.

 

Console Foundations
Estimated time (4 hours)

The console is an important skill for any developer. Many programs can only be used via a command line interface, and often the only access you have to a server will be over a command line interface. Once you are familiar with the basics of the console, you will be able to perform very powerful tasks quickly and easily.

 

GIT Basics
Estimated time (4 hours)

If you’re serious about pursuing a career as a software developer or designer, at some point, you will need to learn a version control system. A VCS is an important, but sometimes overlooked, tool that is essential for keeping all but the most trivial projects on track. In this course we'll talk about what version control is and how it works before covering the basics of one of the most popular version control systems available today - Git. By the time you’re finished with the course, you’ll be ready to start using Git on your next project.

What students will learn

  • What Version Control Does
  • How Version Control Works
  • What Makes Git a Good Choice
  • Using Git to Manage Basic Projects
  • Working With GitHub and other Git Hosting Solutions

 

Introduction to Frontend Performance Optimization
Estimated time (2 hours)

People want to use websites that load quickly, and every second counts. If a website takes more than 3 seconds to load, you can lose 40% of your audience. Every additional second in page response can result in a 7% reduction in conversions. In these lessons, we're going to take a slow website and make it load faster using front end performance optimization. By the end, you'll know many practical techniques that can speed up any website.

What students will learn

  • Performance measurement
  • Reduce HTTP requests
  • CSS and JavaScript minification

About Introduction to Computers

Today, most people don't need to know how a computer works.  Most people can simply turn on a computer or a mobile phone and point at some little graphical object on the display, click a button or swipe a finger or two, and the computer does something. 

An important reason to consider learning about how to program a computer is that the concepts underlying this will be valuable to you, regardless of whether or not you go on to make a career out of it.  One thing that you will learn quickly is that a computer is very dumb, but obedient.  It does exactly what you tell it to do, which is not necessarily what you wanted.  Programming will help you learn the importance of clarity of expression.

But, most of all, it can be lots of fun!  An associate once said to me "I can't believe I'm paid so well for something I love to do."