Get started with custom lists to organize and share courses.

Sign up

Front End Web Developer

Become a Front-End Web Developer by completing a variety of projects for your portfolio - become an HTML, CSS and JavaScript pro!

Earn a Certificate

  • Nanodegree via Udacity and Google
  • $999 for 4 months
  • 1:1 feedback - Rigorous, timely project and code reviews
22 Reviews
Rating based on 22 student reviews.

Learn More

Front End Web Developer
★★★★★ (22 Reviews)
Become a front-end web developer by completing a variety of projects for your portfolio - become an html, css and javascript pro!
Credential Type
Minimum 10hrs/week
4 months

In the Front End Developer Nanodegree program, you will complete five projects and build a resume-worthy portfolio.

Why Take This Nanodegree?

Demand for front end developers is widespread across every industry, and continues to rise. By mastering the valuable skills taught in this program, you’ll be prepared for roles at a wide array of companies, from startups to global organizations. The projects you’ll build, and the portfolio you’ll develop, will provide ample evidence of your expertise.

Required Knowledge

General Requirements:

  • You are self-driven and motivated to learn. Participation in this program requires consistently meeting project deadlines and devoting at least 12 hours per week to your work.
  • You can communicate fluently and professionally in written and spoken English.

Program-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 HTML, CSS, and JavaScript (or another programming language)


★★★★☆ (33) 3 weeks Self paced
<p>Throughout this course, you&#39;ll learn about the underlying structure of the web - HTML. You&#39;ll learn how to use this tree-like structure to create websites. You&#39;ll also learn how to apply styling to a website through CSS. You&#39;ll learn about CSS syntax, selectors, and units. Along the way, you&#39;ll also learn about code editors and a browser&#39;s Developer Tools.</p><br/><br/><b>Why Take This Course?</b><br/><p>Are you interested in learning about how a website is built? Have you heard of HTML but aren&#39;t sure what it is? Have you always wished you knew how to change the look and style of a website? If you answered &quot;Yes!&quot; to any of these questions, then this course is for you!</p>
★★★★★ (9) 2 weeks Self paced
<p>In this course you&#39;ll learn the fundamentals of responsive web design with Google&#39;s Pete LePage! You&#39;ll create your own responsive web page that works well on any device - phone, tablet, desktop or anything in between.</p><p>You’ll start by exploring what makes a site responsive and how some common responsive design patterns work across different devices. From there, you’ll learn how to create your own responsive layout using the viewport tag and CSS media queries. As you proceed, you’ll experiment with major and minor breakpoints, and optimizing text for reading.</p><br/><br/><b>Why Take This Course?</b><br/><p>The way people browse the web is changing quickly - fewer and fewer users access the web at a desk in front of a large monitor with a keyboard and mouse. The web is increasingly being enjoyed on phones, tablets, wearables, TVs and everything in between. By designing a site to be responsive, it will look good and work well no matter what device your users have in front of them.</p><p>Throughout this course, you&#39;ll work through a project creating a home town website that works well on phones, tablets and desktop displays.</p>
★★★★☆ (5) 2 weeks Self paced
<p>Did you know that images account for more than <strong>60%</strong> of the bytes on average needed to load a web page?</p><p>In this course you will learn how to work with images on the modern web, so that your images look great and load quickly on any device.</p><p>Along the way, you will pick up a range of skills and techniques to smoothly integrate responsive images into your development workflow. By the end of the course, you will be developing with images that adapt and respond to different viewport sizes and usage scenarios.</p><br/><br/><b>Why Take This Course?</b><br/><p>Quick load times and responsive content leads to higher conversions. There&#39;s much more to images on the web than <code>&lt;img&gt;</code>. Attributes like <code>srcset</code>, markup techniques using CSS, fonts, and inline images, and the brand new <code>&lt;picture&gt;</code> element are now available to help you create the best possible experience for your users. This course will help you ensure that you deliver the highest quality images with the fewest possible bytes.</p>
★★★☆☆ (20) 3 weeks Self paced
We're here to help you get you started with JavaScript!<br /> In the twenty plus years since its inception, JavaScript has become the _lingua franca_ of the web, that's to say, it's become the main tool to create interactive content on the Internet.<br /> <br /> In this course, you'll explore the JavaScript programming language by creating an interactive version of your résumé. You’ll learn the JavaScript programming fundamentals you need while building new elements and sections to enhance your résumé.<br /> <br /> This course is also a part of our <a href="">Front-End Web Developer</a> Nanodegree.<br/><br/><b>Why Take This Course?</b><br/>Today, front-end developers work with web designers to create the interactive experiences that make the web the addictive playground we know and love. As the size and influence of the web have expanded, so has the importance of ensuring a website offers users an unforgettable experience.<br /> <br /> Perhaps your end goal is to create a HTML5 game, code the front-end for an app idea you have, or maybe you want to use one of the growing set of libraries that let you compile code written in another language or for another platform down to JavaScript. With JavaScript, you can do all these things and more.<br /> <br /> ###Project<br /> You will create an interactive résumé that you can share to the world and show your growing skills at the time.<br /> <br /> Having a good résumé is a key component of securing a better job. We'll give you the template styles and code to create a modern and mobile friendly résumé (also called a curriculum vitae/CV outside the United States) that you can modify and customize.
★★★★☆ (3) Self paced
<p>jQuery is the most popular JavaScript library today, in use by over 60% of the top 100,000 most visited websites. This course will teach you how to use jQuery’s core features - DOM element selections, traversal and manipulation.</p><p>You&#39;ll also learn how to read and make sense of jQuery&#39;s documentation, making it easy for you to go beyond the methods taught in this class and take advantage of jQuery&#39;s full array of features!</p><p>This course is also a part of our <a href="">Front-End Web Developer</a> Nanodegree.</p><br/><br/><b>Why Take This Course?</b><br/><p>Due to jQuery’s popularity and ease of use, learning jQuery is a must for all front-end web developers. jQuery makes selecting DOM elements and manipulating them simple by providing a consistent API that works across all browsers.</p><p>Proficiency in using jQuery is an important skill that can speed up your development time and opens up a world of useful plugins.</p>
★★★★★ (11) 5 weeks Self paced
<p>Have you been dabbling with JavaScript but find your files keep turning into a mess of spaghetti code? Do you find yourself copying and pasting lines of code over and over throughout your application? Surely there’s a better way, right? </p><p>Yes, there is a better way -- object-oriented programming will allow you to build websites using reusable blocks of code known as libraries, similar to using bricks to build a house. This course is designed to teach web developers how to utilize the various object-oriented programming features within JavaScript, and more importantly, how to write reusable and maintainable libraries that will make your life easier.</p><br/><br/><b>Why Take This Course?</b><br/><p>As a <a href="">Front-End Web Developer</a>, JavaScript is one of the most important languages in your toolbox. A strong foundation in the language’s features empowers you to write efficient and performant web applications. In this course you’ll explore a variety of ways to write object-oriented code in JavaScript.</p><p>You’ll build a variety of JavaScript objects and explore how their different inheritance models affect your code’s execution and in-memory model. You’ll use these features to write memory efficient code and seek simplicity and modularity in your own code.</p>
★★★★☆ (3) 2 weeks Self paced
<p>Canvas is an HTML5 element which gives you drawable surface inside your web pages you can control with JavaScript. Powerful enough to use for compositing images and even creating games.</p><p>In this course, through several sample projects, you’ll learn how to use the canvas; how to make compositions using shapes, images, and text; how to create effects and filters on images and how to create animations.</p><br/><br/><b>Why Take This Course?</b><br/><p>You should take this course if you want to move beyond static HTML tag content and build on your JavaScript skills to make interactive and engaging experiences. Maybe you want to start on the journey of creating a game or complex animations, maybe you want to create visually compelling compositions like infographs, or maybe you just want to make memes. Canvas to the rescue.</p><p><em>This is a recommended course for the <a href="">Front-End Web Developer</a> nanodegree, and will help you complete the Frogger project.</em></p>
★★★★☆ (4) 1 weeks Self paced
<p>You will learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages.</p><p>In this short course, you’ll learn about the Critical Rendering Path, or the set of steps browsers must take to convert HTML, CSS and JavaScript into living, breathing websites. From there, you’ll start exploring and experimenting with tools to measure performance and simple strategies to deliver the first pixels to the screen as early as possible. You’ll learn how to dive into recommendations from <a href="" title="PageSpeed Insights">PageSpeed Insights</a> and the Timeline view of Google Chrome’s Developer Tools to find the data you need to achieve immediate performance boosts!</p><p>This course is also a part of our <a href="">Front-End Web Developer</a> Nanodegree.</p><br/><br/><b>Why Take This Course?</b><br/><p>From Ilya Grigorik&#39;s <a href="" title="High Performance Browser Networking">High Performance Browser Networking</a>:</p><p>&quot;The emergence and the fast growth of the web performance optimization (WPO) industry within the past few years is a telltale sign of the growing importance and demand for speed and faster user experiences by the users. And this is not simply a psychological need for speed in our ever accelerating and connected world, but a requirement driven by empirical results, as measured with respect to the bottom-line performance of the many online businesses:</p><ul><li>Faster sites lead to better user engagement.</li><li>Faster sites lead to better user retention.</li><li>Faster sites lead to higher conversions.</li></ul><p>Simply put, speed is a feature.&quot;</p><h3>Project</h3><p>You will optimize an online portfolio for speed, which you can share with the world to showcase your skills!</p><p>Making a great first impression is absolutely key and an online portfolio can help you stand apart from the crowd. We’ll give you a template for a modern, mobile-friendly portfolio which you’ll be able to completely customize so that it shows off your work and your skills the way you want. But before you show it off to the world, you’ll practice your web performance skills by optimizing the portfolio to render as fast as possible.</p>
★★★★☆ (2) 4 weeks Self paced
<p><a href="" target="_blank">Performance matters</a> to users. Web developers need to build apps that react quickly and render smoothly.</p><p>Google performance guru Paul Lewis is here to help you destroy <a href="" target="_blank">jank</a> and create web apps that maintain 60 frames per second performance.</p><p>You&#39;ll leave this course with the tools you need to profile apps and identify the causes of jank. You&#39;ll explore the browser&#39;s rendering pipeline and uncover patterns that make it easy to build performant apps.</p><br/><br/><b>Why Take This Course?</b><br/><p>Demystifying the browser&#39;s rendering pipeline will make it easy for you to build high performance web apps. By following a few simple principles, you&#39;ll be capable of drastically reducing the browser&#39;s workload and time needed to render each frame.</p><p>You&#39;ll start by getting introduce to the individual steps of the rendering pipeline, beginning with parsing HTML and ending with painting pixels on the screen. Then you&#39;ll quickly dive into tooling with ample opportunities to practice profiling and debugging apps with Chrome Developer Tools.</p><p>The final project uses the <a href="" target="_blank">Hacker News API</a> and gives you an opportunity to show off everything you&#39;ve learned as you turn an awful experience into a high performance web app!</p>
★★★★☆ (7) 2 weeks Self paced
<p>In this course you will learn how to make asynchronous requests with JavaScript (using jQuery’s AJAX functionality), and gain a better understanding of what’s actually happening when you do so. You will also learn how to use data APIs so you can take advantage of freely accessible data in your applications, including photo results, news articles and up-to-date data about the world around us.</p><p>As part of the course, you’ll be building a web app that will help people learn about a place where they want to move! Your app will query the Google Streetview, Wikipedia and New York Times APIs!</p><p>This course is also a part of our <a href="">Front-End Web Developer</a> Nanodegree.</p><br/><br/><b>Why Take This Course?</b><br/><p>User experience is vital to the success of your website or web app. It’s important that the user’s experience be smooth and free of jank, yet the application will have to do things that take a long time to complete. AJAX allows app developers to interact with server-side APIs without pausing script execution or forcing the page to reload.</p><p>Plus, learning how to query data APIs will open you to a tremendous amount of free data that’s freely accessible. Want to build a flight tracking app? How about a photo gallery with image search? Or what about a tweet viewer? Just find an API that provides the data you need, read the documentation and sample code, and query away!</p><p>If you want to build solid and fast web applications, knowing how to query servers using AJAX is a must.</p>
★★★★☆ (3) 6 weeks Self paced
<p>This course covers methods for organizing your code, both conceptually and literally. You’ll learn the importance of separating concerns when writing JavaScript, gaining hands-on experience along the way. Separating concerns can be done with or without an organizational library or framework. We’ll learn how to separate concerns without one, and then we’ll explore an organizational library together. You’ll also learn strategies for exploring other libraries and frameworks on your own.</p><p>By the end of this course, you’ll understand (from experience) the importance of code organization, and how to implement it with either vanilla JavaScript or an organizational library or framework. Your applications will start looking clean and professional—not just to your users, but also to anyone who looks at the code driving your applications.</p><br/><br/><b>Why Take This Course?</b><br/><p>Many developers dive right into projects without thinking of the organization or structure of the code they’re writing. It&#39;s easy to hack projects together, but the best developers spend the extra time to think about the organization of their application and adhere to sound organizational practices.</p><p>In order to write clean code that will get you your next job or promotion, you&#39;ll need to have a solid understanding of organizational techniques, and you&#39;ll need to implement those techniques in your projects. Software developers who write clean and organized code are surprisingly hard to find, so if you can master code organization you’ll be a step above the rest.</p>
★★★★☆ (3) 2 weeks Self paced
<p>In this course you&#39;ll learn how to write JavaScript applications with confidence, using the red-green-refactor workflow. You&#39;ll write comprehensive suites of tests that validate your application is functioning as intended at all times.</p><p>You&#39;ll start by exploring how other industries use a variety of tests and the value it provides. You&#39;ll then start writing your very own tests, using the Jasmine testing framework. Finally, you&#39;ll start developing your very own address book application using the red-green-refactor workflow and explore a variety of scenarios including testing asynchronous functions.</p><br/><br/><b>Why Take This Course?</b><br/><p>As your applications become more complex and you continue adding new features, you need to verify your additions haven&#39;t introduced bugs to your existing functionality. Automated testing provides this functionality and allows you to focus on.</p>

22 Reviews.

José Sancho Pagola
Web developer
Field of study
Computer science
Bachelors Degree
completed this credential in Aug 2015.

A very rewarding experience with a very good staff support.

Samuel Kody Doherty
Linux system administrator / devops
Field of study
Network security
Bachelors Degree
completed this credential in Apr 2015.

Amazing experience from the Udacity's Front End Nano Degree

Marcel Lefebvre
Full stack developer
Field of study
History and japanese studies
Bachelors Degree
completed this credential in Apr 2015.

Awesome program, short and effective, and oriented towards helping you get a job!

More reviews
22 ratings
22 reviews

Front End Web Developer

Receive email notifications about this credential.
Follow Front End Web Developer

Class Central

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free

Never stop learning Never Stop Learning!

Get personalized course recommendations, track subjects and courses with reminders, and more.