• Programs
  • About
  • Contact
Become a Web Developer
Become a Designer

Here’s our Frontend Development Syllabus!

You'll also receive a copy of the syllabus in your email. Check out the next steps for starting our Frontend Development program.

You'll also receive a copy of the syllabus in your email.
Check out the next steps for starting our Frontend Development program.

Watch our Info Session

Our quick info session gives you an overview of our Frontend Development program and Bloc's approach to mentorship.

Explore the Frontend Development Syllabus

This page describes the structure of the program. For a simple list of major technologies taught during the program, see Frontend: Technologies Used.

Prerequisites

  • No prior coding experience required
  • A Mac or PC with a high-speed internet connection

Before You Start

  • Orientation with Bloc
  • 25 hours of pre-course study is required and should be completed during your orientation week. Find the pre-course study plan here
  • Introduction to your Mentor and membership to the Hacker Club community
  • Introduction to Bloc’s project-based approach to learning

Foundation Phase

Build your first application, a browser-based Spotify clone called Bloc Jams, while learning the fundamentals of frontend web development.

Configure Your Developer Environment

  • Basic command line operations
  • Git and GitHub
  • Learn to use Brackets, your text editor

Introduction to HTML and CSS

  • Learn Frontend Development building your first app: Bloc Jams
  • Semantic HTML
  • Including CSS in an HTML Page
  • Including external assets like images and fonts
  • Responsive CSS with Media Queries
  • Building a responsive grid system
  • Floats and Clearfixes

Introduction to JavaScript as a Programming Language

  • JavaScript basics: Primitives, Operators, Arrays, and Conditionals
  • Object-oriented JavaScript: Constructors, Prototypes, this, apply, call, and bind
  • Functions, Scope, and Closures

JavaScript in the Browser

  • CSS transitions and animations
  • Include JavaScript in a web page
  • Learn about the Document Object Model (DOM) and its capabilities
  • The different types of DOM nodes
  • DOM selectors
  • Adding and removing content with DOM Scripting
  • Browser events: propagation and handling
  • JavaScript callbacks
  • Event delegation and event objects
  • HTML5 data attributes

jQuery

  • Including External Libraries like jQuery
  • Refactor DOM Scripting with jQuery
  • Using jQuery events and helper functions
  • Using the Buzz Audio library to play music in Bloc Jams

Projects Phase

You will complete at least two projects during the Project Phase. Projects are prescriptive yet open to interpretation and creativity. They are designed to challenge you while providing guidance to keep you on track. A project is complete when all its requirements are implemented and approved by your mentor.

AngularJS

  • Explore one of the most popular JavaScript MVC frameworks
  • Learn about Angular Controllers, Directives, Services and Modules
  • Refactor Bloc Jams to work with Angular

Bloc Chat

  • Build a real-time chat application
  • Use Grunt to build and serve your assets
  • Learn Firebase, a backend as a service (BaaS) to sync messages in real-time
  • Learn how to use an external API with Angular, Firebase's AngularFire
  • Use cookies to let users set a screen name
  • Create multiple chat rooms for different subjects

Bloc Jams Analytics

  • Learn how to build an Analytics API that tracks metrics like most popular songs in your application
  • Visualize the Data using D3 or ChartJS
  • Learn about the powerful HTML5 Canvas element for visualizing your data
  • Create a full-featured dashboard that tracks your events in real-time

Pong

  • Create the game logic using JavaScript functions and objects, then create the visualization.
  • Use JavaScript's requestAnimationFrame to create seamless animation graphics
  • Explore another use-case for the HTML5 Canvas Element
  • Learn how to use physics in your motion graphics by adjusting things like speed and x, y positioning (we promise, not too much math!)

BlocTime

  • BlocTime loosely emulates the Pomodoro time management technique to manage day-to-day tasks
  • Use Grunt to build and serve your assets
  • Use the Firebase API for persistent storage of the tasks you've completed

Capstone

  • Bring your product idea to life. Use your capstone project as an opportunity to hone your skills in a particular area of interest, or as a springboard to launch a new product
  • Build your idea from scratch, while learning best practices for application scoping, design, and architecture
  • Deploy your application, and we'll help you promote it

Portfolio

  • Create a unique Portfolio site that showcases your personality, projects, and writing
  • Include images and links for your projects
  • Build a blogging engine to explain your coding process and express your opinions
  • Make your site stand out with a stunning design

Still have questions?

Check out FAQ

Ready to enroll?

Programs start every Monday.

Enroll now