Front-End Web Developer Nanodegree

Thank you for signing up for this Nanodegree! For important program information refer to the Nanodegree Student Handbook, also available for download in your Nanodegree Portal. You're part of a cohort - a community of students who will work at about the same pace and interact in Udacity Discussions, our forum system. We look forward to working with you and hearing your feedback in the forum!


Need help getting started?


Contents


Course Resources

What is a Nanodegree?

A Nanodegree is a new type of credential, designed to prepare you for a job. It is built with industry for you to master skills that employers truly seek in a Front-End Web Developer. The Nanodegree is project-based: you'll complete several projects, with guidance and code reviews from our Coaches, to learn and show off your skills. It offers a personalized learning roadmap: take only the courses you need to ace projects! We'll customize your path to be as efficient and effective as possible. See how it works.

Downloadable Materials

You can download Supplemental Materials, Lesson Videos and Transcripts from Downloadables (bottom right corner of the Classroom) or from the Dashboard (first option on the navigation bar on the left hand side).

Nanodegree Projects

Intro Project: HTML5 Hello World

You will get acquainted with your text editor, creating and editing simple HTML and CSS files to create your very first webpage! This project is connected to the Intro to HTML and CSS course but depending on your background knowledge of HTML and CSS you may not need to take the whole course to complete this project.

Project 1: Portfolio Mockup to HTML

This project is connected to the Intro to HTML and CSS course but depending on your background knowledge of HTML and CSS you may not need to take the whole course to complete this project.

How do I complete this project?

  1. Download the design mockup file from the Downloadables section here and review it.
  2. Identify the various boxes you will need to build in order to recreate this design.
  3. Write your HTML and CSS files, continue to iterate until your work is representative of the design mockup.
  4. Take the time to personalize your portfolio with custom colors, additional content and your own images.

Project 2: Javascript Challenge

How do I complete this project?

 1. Go to the JavaScript Basics course and select "View Courseware."
 2. Go through the videos and assignments in this course to learn the JavaScript necessary to answer the challenges.
 3. Review your work against the Project Rubric (on the next page).
 4. When you are satisfied with your project, submit it according to the Submission Instructions on the next page.

Project 3: Classic Arcade Game Clone

How do I complete this project?

  1. Download the art assets and provided game engine.
  2. Review the code and comments provided in app.js
  3. Identify the various classes you will need to write.
  4. Identify and code the properties each class must have to accomplish its tasks.
  5. Write the functions that provide functionality to each of your class instances.

Prepare for this project with: Object Oriented JavaScript

Project 4: Website Optimization

How do I complete this project?

  1. Download the required project assets.
  2. Use Chrome Developer Tools to review the current state of various pages within the application and identify areas for improvement.
  3. Review the code powering the website and identify areas where you believe modifications are warranted.
  4. Iteratively make changes and test those changes using the tools available to you to determine if they are a performance gain or loss.

Prepare for this project with: Website Performance Optimization

Project 5: Neighborhood Map

How do I complete this project?

  1. Download the Knockout framework.
  2. Write code required to add a full-screen map to your page using your library of choice.
  3. Write code required to add map markers identifying a number of locations your are interested in within this neighborhood.
  4. Implement the search bar functionality.
  5. Implement a list view of the identified locations.
  6. Add additional functionality using third-party APIs when a map marker, search result, or list view entry is clicked.

None of these resources are required, but they may be helpful:

Prepare for this project with: JavaScript Design Patterns

(Optional) Project 5-2: Health Tracker

How do I complete this project?

  1. Review our Backbone course.
  2. Write code required to get a project started
  3. Write code required to add a search bar to the application
  4. Write code required to query a health API when the user searches, and return the results in a list (Nutritionix has a good one)
  5. Write code required to add an item to the data store when clicked
  6. Write code required to show the items in the data store, and to display the total number of calories

Prepare for this project with: Learn Backbone.js

Project 6: Feed Reader Testing

How do I complete this project?

  1. Download the required project assets.
  2. Review the functionality of the application within your browser.
  3. Explore the application's HTML (./index.html), CSS (./css/style.css) and JavaScript (./js/app.js) to gain an understanding of how it works.
  4. Explore the Jasmine spec file in ./jasmine/spec/feedreader.js and review the [Jasmine documentation]
    (http://jasmine.github.io).
  5. Edit the allFeeds variable in ./js/app.js to make the provided test fail and see how Jasmine visualizes this failure in your application.
  6. Return the allFeeds variable to a passing state.
  7. Write a test that loops through each feed in the allFeeds object and ensures it has a URL defined and that the URL is not empty.
  8. Write a test that loops through each feed in the allFeeds object and ensures it has a name defined and that the name is not empty.
  9. Write a new test suite named "The menu".
  10. Write a test that ensures the menu element is hidden by default. You'll have to analyze the HTML and the CSS to determine how we're performing the hiding/showing of the menu element.
  11. Write a test that ensures the menu changes visibility when the menu icon is clicked. This test should have two expectations: does the menu display when clicked and does it hide when clicked again.
  12. When complete - all of your tests should pass.

Prepare for this project with: JavaScript Testing

You’ll host all your projects on GitHub and make regular commits. If you haven’t learned version control yet, use our latest course on the topic: How to Use Git and GitHub

Nanodegree Cohorts and Community

Every month, a new cohort will start on the Front-End Web Developer Nanodegree. Each of these cohorts will have its own Udacity Discussions forum. Students will be encouraged to form smaller study groups and to connect with one another over the group chat feature built into Udacity's website.