Log in
Log inBook a demo

Front-End Web Developer Nanodegree

COURSE
A&
AT &T

Front-End Web Developer Nanodegree

COURSE
A&
AT &T

Learn the fundamentals of how the web works and gain a working knowledge of the three foundational languages that power each and every website: HTML, CSS and JavaScript. This Nanodegree will provide a guided, efficient path for you to learn to build beautiful, responsive websites optimized for security and performance. You’ll see the efforts of your work with each click of the browser’s refresh button!

By the end of the Nanodegree you'll have built a diverse portfolio of projects to show employers. You'll also have the opportunity to prepare for your new career with reviews of your online presence (resume, LinkedIn, portfolio), prepare for interviews, take part in workshops covering topics like networking and salary negotiation as well as take part in a new program facilitating job placement.

Why Take This Course?

This Nanodegree program will teach you the skills required to become a Front-End Web Developer. We’ve designed this curriculum with expert web developers and hiring managers, allowing you to demonstrate your skills by completing a series of projects approved by leading employers as the critical indicators of job-readiness. Specifically, you’ll:

  • create a professional portfolio using HTML and the Bootstrap CSS framework
  • use the power of jQuery’s DOM manipulation to dynamically populate a resume with your own information
  • develop your very own arcade game in JavaScript with the HTML5 Canvas API
  • discover how to optimize your application’s perceived load time by taking the Critical Rendering Path into account
  • learn that frames per second isn’t just important for games and how to ensure a silky smooth experience in your applications by optimizing for 60 frames per second
  • explore best practices in application architecture and design patterns
  • build a complex mapping application using the Knockout framework and a variety of third-party API services
  • develop and maintain applications with the confidence test-driven development promotes, using the Jasmine testing framework

Prerequisites and Requirements

General Requirements:

  • You are self-driven and motivated to learn. Participation in this program requires consistently meeting the deadlines set for your cohort and devoting at least 10 hours per week to your work.
  • You can communicate fluently and professionally in written and spoken English.
  • You are willing to contribute to the success of the program, including collaborating with fellow students and giving us feedback on how we can improve.

Front-End Developer Nanodegree Specific Requirements:

  • You have access to a computer with a broadband connection, on which you’ll install a professional code/text editor (ie. Sublime Text or Atom).
  • You can independently solve and describe your solution to a math or programming problem
  • You are familiar with basic programming concepts such as variables, conditions and loops.

What Will I Learn?

P0: About Me

You will get acquainted with your text editor, creating and editing simple HTML and CSS files to create your very first webpage! You should be able to complete this project after reviewing Lesson 1 of the Intro to HTML & CSS course.

Project: Build a Portfolio Site

You will be provided with a design mockup as a PDF-file and must replicate that design in HTML and CSS. You will develop a responsive website that will display images, descriptions and links to each of the portfolio projects you will complete throughout the course of the Front-End Web Developer Nanodegree.

P2: Interactive Resume

You will develop an interactive resume application that reads your resume content from a JSON file and dynamically displays that content within a provided template. You will use objects, functions, conditionals, and control structures to compose the content that will display on the resume.

P3: Classic Arcade Game Clone

You will be provided with visual assets and a game loop engine; using these tools you must add a number of entities to the game including the player characters and enemies to recreate the classic arcade game Frogger.

P4: Website Optimization

You will optimize a provided website with a number of optimization- and performance-related issues so that it achieves a target PageSpeed score and runs at 60 frames per second.

Project: Neighborhood Map

You will develop a single-page application featuring a map of your neighborhood or a neighborhood you would like to visit. You will then add additional functionality to this application, including: map markers to identify popular locations or places you’d like to visit, a search function to easily discover these locations, and a listview to support simple browsing of all locations. You will then research and implement third-party APIs that provide additional information about each of these locations (such as StreetView images, Wikipedia articles, Yelp reviews, etc).

P6: Feed Reader Testing

In this project you are given a web-based application that reads RSS feeds. The original developer of this application clearly saw the value in testing, they’ve already included Jasmine and even started writing their first test suite! Unfortunately, they decided to move on to start their own company and we’re now left with an application with an incomplete test suite. That’s where you come in.

GitHub Profile Review

In this project, you will look at your GitHub profile through the lens of a recruiter or hiring manager, focusing on how your profile, projects, and code represent you as a potential candidate for a company or collaborator on a project.

LinkedIn Profile Review

In this project, you will look at your LinkedIn profile through the lens of a recruiter or hiring manager, focusing on how your experience, education, and interests represent you as a potential candidate for a company or collaborator on a project.

Resume Review

In this project, you will update your resume according to the conventions that recruiters expect and get tips on how to best represent yourself to pass the "6 second screen". You will also make sure that your resume is appropriately targeted for the job you’re applying for. We recommend all students update their resumes to show off their newly acquired skills regardless of whether you are looking for a new job soon.

(Optional) P5-2: Health Tracker

This is an optional project; you are not required to complete this project to graduate your Nanodegree.

Using Backbone, you will develop a single page app that tracks the user's calorie intake, and optionally, other health-related metrics. Typing food names into the search field will display a list of matching foods as provided by the health API. Users will be able to select an item from the list, and the item will be added to the list of foods the user is tracking. The total calorie count will also update to reflect the new daily total.

Syllabus

In the Nanodegree program, you’ll build six portfolio-worthy projects. Depending on your knowledge and skill level, you can either learn the necessary skills through our supporting courses, or jump into the projects directly. A summary of each of these projects, as well as links to their supporting courses are included in the sections below.

PROJECT Build a Portfolio Site

You will replicate a design mockup in HTML and CSS. You will develop a responsive website that will display images, descriptions and links to each of the portfolio projects you will complete throughout the course of the Front-End Web Developer Nanodegree.

Prepare for this project with: Intro to HTML and CSS, Responsive Web Design Fundamentals, and Responsive Images

PROJECT Interactive Resume

You will develop an interactive resume application that reads your resume content from a JSON file and dynamically displays that content within a provided template. You will use objects, functions, conditionals, and control structures to compose the content that will display on the resume.

Prepare for this project with: JavaScript Basics and Intro to jQuery

PROJECT Classic Arcade Game Clone

You will be provided with visual assets and a game loop engine; using these tools you must add a number of entities to the game including the player characters and enemies to recreate the classic arcade game Frogger.

Prepare for this project with: Object-Oriented JavaScript and HTML5 Canvas

PROJECT Website Optimization

You will optimize a provided website with a number of optimization- and performance-related issues so that it achieves a target PageSpeed score and runs at 60 frames per second.

Prepare for this project with: Website Performance Optimization and Browser Rendering Optimization

PROJECT Neighborhood Map

You will...