Front-End Web Developer Nanodegree

Create Stunning User Experiences
Co-Created By:
  • Logo color att 52a5e0f
  • Logo color google 1c8cf8f
  • Logo color github b09d32a
  • Logo color hackreactor 34fdc7b

About This Nanodegree

Master the skills required to become a Front-End Web Developer, and start building beautiful, responsive websites optimized for mobile and desktop performance.

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.

  • Time
    Learn at Your Own Pace

    Study 8 hrs/week and complete in 6-8 mo.

  • Pre-reqs
    Basic Computer Knowledge

    No programming experience required!

  • Student Rating

    View all reviews

  • FRONT-END DEVELOPER SALARY
    $45k-105k

    Based on US job data

What is a Nanodegree?

  • Content by leaders Content by Industry Leaders

    We built this program with expert developers and leading technology companies like Google and GitHub to ensure you master the skills needed to meet the requirements of industry.

  • Fast feedback Fast And Effective Human Feedback

    Our mentor network of experienced front-end developers will return your project within 24 hours, with line-by-line comments and tips to ensure you are mastering the material.

  • Career guidance Personalized Career Guidance

    Take advantage of free resume and online profile reviews. Additionally, you’ll receive access to our network of hiring partners, and prepare for hiring questions with mock interviews.

  • Self placed Self-Paced Progress

    Work at your own pace, on your own schedule. You can even pause your subscription when life gets busy or you need a short break.

  • Tailored portfolio Tailored Project Portfolio

    You’ll build a portfolio of industry-relevant projects to showcase your skills as a front-end developer. Upon graduation, you’ll have an array of example work to impress any employer.

  • 1 on 1 1-on-1 Coaching And Mentorship

    Whether you're stuck on a project or confused by a concept in class, our mentors can answer any question in personal 1-on-1 sessions.

Front-End Developer Nanodegree Program Syllabus

  • Module 1
    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!

    Down Arrow Up Arrow
    • 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.

  • Module 2
    JavaScript Basics

    JavaScript, jQuery

    Project: Interactive Resume

    Showcase your skills by building an interactive resume

    Down Arrow Up Arrow
    • Transform static web pages into dynamic applications
    • Use variables, data structures, conditional statements, loops, and function in JavaScript
    • 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.

  • Module 3
    Object-Oriented Javascript & HTML5 Canvas

    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

    Down Arrow Up Arrow
    • Utilize the various object-oriented programming features within JavaScript
    • 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.

  • Module 4
    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

    Down Arrow Up Arrow
    • 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.

  • Module 5
    Intro to AJAX & JavaScript Design Patterns

    KnockoutJS, third-party APIs, asynchronous programming

    Project: Neighborhood Map

    Create a single page app featuring a map of a neighborhood of your choice

    Down Arrow Up Arrow
    • 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.

  • Module 6
    JavaScript Testing

    Jasmine, red-green-refactor workflow

    Project: Feed Reader Testing

    Complete a test suite for an existing web-based application

    Down Arrow Up Arrow
    • 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!

Graduate in 12 months and get a 50% tuition refund

On average students complete the Nanodegree in 9 months studying 10 hours/week

$199 USD / month

Join 1,654 students from 72 countries currently enrolled in the Front End Web Developer Nanodegree

Student Reviews

Loading the latest reviews from our Nanodegree Students Latest reviews from our Nanodegree Students

Icon globe e82eae5d45465aba4fbe4bb746905ce55dc3324f310b79c60e4a20089057d347

Udacity 现已提供中文版本! A Udacity tem uma página em português para você! There's a local version of Udacity for you!

前往优达学城中文网站 Ir para a página brasileira Go to Indian Site or continue to Global Site