Introduction to Web Development
HTML, CSS, Bootstrap
Project: Build a Portfolio Site
Develop a responsive website to display the portfolio projects you’ll build in the program!
- Precisely translate initial design documents into static web pages
- Diligently employ a code/test/refine strategy
- Investigate the Document Object Model (DOM)
- Create and personalize your own multi-platform, responsive CSS framework
The first thing potential employers look for isn’t which school you attended or what your GPA was; they want to see what you’ve built! You need a professional portfolio to show off your skills.
In this project you’ll build a great looking portfolio where you can show off images, descriptions and links to all of your projects.
Project: Interactive Resume
Showcase your skills by building an interactive resume
- Transform static web pages into dynamic applications
- Use the core features of jQuery -- DOM element selections, traversal and manipulation
Once you've mastered the skills of a front end web developer you'll want to make a great first impression. You need a resume that stands out.
The resume you create will not only help you build important skills, but will also make it easy to show employers why you’re perfect for the job.
Scope, closures, prototypal inheritance, code reuse
Project: Classic Arcade Game Clone
Add entities to a game loop engine and create the classic arcade game Frogger
- Write reusable and maintainable libraries
- Create well architected and performant applications
- Make compositions with text and images with memes
- Modify images by applying various effects and filters
- Create animations
Games have a lot of objects and those objects do a lot of different things; but sometimes they do some very similar things as well. This creates a great opportunity to practice object-oriented programming, an important programming paradigm that influences your application architecture and provides performance optimization.
You’ll be provided with visual assets and a game loop engine. Using these tools, you’ll construct and control player characters and enemies to recreate the classic arcade game Frogger.
Browser Rendering and Web Performance Optimization
RAIL, jank, critical rendering path
Project: Website Optimization
Optimize an existing website that achieves 60 frames per second performance
- Recognize the four distinct phases in an app's lifecycle: Response, Animation, Idle and Load (RAIL)
- Profile different apps to find the source of jank
- Optimize layers to reduce the number of steps the browser needs to take to render each frame
- Measure performance via the Timeline view in Chrome Developer Tools
- Use key metrics to triangulate potential performance bottlenecks
As web applications become increasingly interactive and accessed on a variety of devices there are a variety of opportunities in which performance issues can hinder the user experience.
This project presents a number of those performance issues and provides an opportunity to showcase your skills in identifying and optimizing web applications.
KnockoutJS, third-party APIs, asynchronous programming
Project: Neighborhood Map
Create a single page app featuring a map of a neighborhood of your choice
- Query servers using AJAX
- Build a project with an overall organizational paradigm
- Explore code you didn't write, and use a library or framework you aren't familiar with
- Interact with API servers
- Use third-party libraries and APIs
The neighborhood map application is complex enough and incorporates a variety of data points that it can easily become unwieldy to manage.
There are a number of frameworks, libraries and APIs available to make this process more manageable and many employers are looking for specific skills in using these packages.
Jasmine, red-green-refactor workflow
Project: Feed Reader Testing
Complete a test suite for an existing web-based application
- Write comprehensive suites of tests to validate your application is functioning as intended at all times
- Use the red-green-refactor workflow
- Test asynchronous functions
Testing is an important part of the development process and many organizations practice a standard of development known as "test-driven development".
Whether you work in an organization that uses test-driven development or in an organization that uses tests to make sure future feature development doesn't break existing features, it's an important skill to have!