This page contains the weekly summary for the gr8code Frontend Engineering Course.

Week 1: HTML and CSS Basics

Cover basic HTML and CSS. During this initial week we will walk our students through setting up their development machines and teaching them the basics and core building blocks they will need for the course. This includes teaching them commonly used HTML elements and what they control when displaying on a webpage.

After they have the basic elements of HTML down, we will throw another layer at them, adding CSS, or styles to the webpage they were already creating in the previous lessons. This will give students the understanding of how the two components work together to create a webpage while giving them instant feedback.

Towards the end of the week we will introduce them to Bootstrap, a CSS framework, which will make scaffolding projects in the class much easier without the need for an intense design background. Bootstrap is one of the most commonly used frontend frameworks today, so this introduction is a vital component in their educational arc.

Week 2: JavaScript Basics, jQuery

In this second week we plan to build upon what we taught them in the first week by introducing the third component to client side web work, - JavaScript. We will walk the students through what JavaScript is, introducte foundational programming concepts like variables, loops, conditionals and classes, discuss why JavaScript is used, as well as when not to use it. We will teach them proper fallback techniques and degradations.

From there we will show the students the power of JS by introducing CSS injection using the tools they learn. Later in the week we will introduce students to jQuery, a JavaScript framework that makes implementing JavaScript easier and more standarized. We also touch on Ajax using both regular JS as well as a framework like jQuery and the advantages and disadvantages to both.

Week 3: Putting it all together - build a basic site

This week we will be focusing making sure the students understand the concepts we introduced to them in the previous two weeks. They will be able to spend this week catching up on assignments they may be still confused about with their instructors.

This will also be a time to prime them for what will be coming in week 4, giving them a possible head start, based on project progress. This will also be a flex week in case there is any fall behind from the previous 2 weeks.

Week 4: Sass, Building from a PSD

This week we will be introducing students to how to build a website from a Photoshop Document (PSD). They will dive into Adobe Photoshop with an already produced PSD file provided to them. We will then spend the week teaching the students about how to create assets from the PSD file and build a fully functioning website. We will introduce them to some advanced shortcut HTML options for quicker prototyping.

We will also introduce them to SASS, a pre-processor for CSS. This will allow the students greater flexibility in their style sheet writing while being able to utilize variables and mixins. This week’s work will eventually lead into the students future portfolio website, so we will be looking to them to really own it and make it their own.

Week 5: APIs, Advanced JavaScript

We will intro students into advanced JS concepts and how to interface with API's. This will prepare them for the final project as well as give them a solid base for when they step foot into future jobs. Additionally, we’ll introduce them to JS task runners like Grunt.JS to handle a lot of the legwork during a project development lifecycle.

Week 6: UX, Introduction to Frameworks and MVC

This week we will spend some time with the students introducing them to UX concepts and why they are important when developing websites. This will include concepts like user research, design critique, and usability testing. Further into the week we will introduce students into JS testing, the frameworks available for testing and why testing is important. The latter part of the week will be spent introducing Model-View-Controller (MVC) concepts to prepare them for the final project in Angular.JS.

Week 7: Angular.JS

This week will begin the student’s final projects. We will start with explaining what Angular is and the power that lies in the framework of Angular. We will refresh what happened in the previous week by reviewing MVC concepts and talking about how it will relate to this final project and its importance.

The first days we will go through step-by-step code examples using Angular so students can get some familiarity with the framework. From there they will watch additional materials around this to fully understand the concepts being taught. Mid week we will jump into their final project and break them into teams. For the remainder of the week the students will be focused building out the markup and stubbing out the portions that will be altered using JS.

Week 8: Angular.JS

This week will be focused on working with the Angular Controllers to change functionality on the students’ final projects. The students will be working in team environments to help self-solve problems with the instructor there to step in when a problem arises. Some challenges will be thrown in this week including connecting with API's to integrate with exterior services depending on what the teams of students decided they would like to do for their final projects.

Week 9: Angular.JS, Interviewing Skills

This week will be spent polishing their final projects. It will also be a time where we talk over how to effectively write proper proposals and how to handle their interview process. Depending on how far teams manage with their final projects this may also be a time where they can revisit their portfolio project and update based on the skills they have learned over the course to be able to present to future employers.