Front-End Web Developer Nanodegree

Welcome to the Front-End Web Developer Nanodegree program! In this short lesson, we'll introduce you to what it means to be a web developer, and the features of your Nanodegree program!

The Careers team at Udacity is here to help you move forward in your career - whether it's finding a new job, exploring a new career path, or applying new skills to your current job.

What to do if you have questions about your account or general questions about the program.

Set up your development environment for writing HTML and learn basic tags and syntax.

Get practice creating HTML documents and writing tags with this collection of fun challenges.

Learn the basics of CSS syntax and get started adding style to your websites.

Practice writing CSS and styling websites while exploring new properties in this problem set.

Learn tips, tricks, and shortcuts to improve your developer workflow and customize your code editor with packages and themes.

Explore the case for responsive design. You'll see how the experience of using the web changes from one device type to another.

Use the best practices in responsive design to start building from the smallest devices (mobile phones) up to the largest displays (desktop computers).

Use media queries to define breakpoints in your application to easily split your site into different versions based on display size.

Walk through the most popular responsive layout patterns and learn the tools needed to implement them in your own designs.

Learn how to optimize images, tables, and fonts to make for the best responsive layouts.

Begin creating effective documentation for your applications by writing README files to help other developers use and read your code.

Given a PDF mockup of a website from a designer, translate it to a real website using your HTML and CSS skills.

Project Description - Build a Portfolio Site

Project Rubric - Build a Portfolio Site

With this major update to the JavaScript language, a number of syntax improvements have been added. In this lesson, you'll learn to improve your JavaScript code with these syntax updates.

The Document Object Model (DOM) allows developers to interact with and control the rendered page. You'll learn how the DOM is formed, what Nodes and Elements are, and how to select items from the DOM.

Static is boring, so we'll use JavaScript and DOM methods to create new page content, update existing content, and delete content. You'll also learn how to check and set the styling of page elements.

Hundreds of events fire every time you interact with a page. Learn what an event is, how to listen for an event and respond to it, what data is included with an event, and the phases of an event.

Learn how to measure the code you write to make sure it's performing efficiently and how reflow and repaint affect performance. Learn how to harness the JavaScript Event loop for performance gains.

Build your own version of the classic memory game 'Concentration', using JavaScript, DOM selectors and Event Listeners.

Project Description - Memory Game

Project Rubric - Memory Game

Explore the diversity of different users experience with web sites and applications. Learn about using screen readers practically and recognize the challenge of building web experiences for all users.

Manage focus - the location on a page that receives input from the keyboard. Discover how some users navigate website entirely with the keyboard, and how to optimize their experience.

Dive into the differences between visual UI and semantically designed accessible UI. Add semantic elements to HTML to create a user interface that works for everyone.

Implement effective semantic navigation using headings, link text and landmarks.

Sometimes an HTML element may not have a role or value assigned semantically. In this lesson, you'll use ARIA attributes to provide context for screen readers.

Incorporate CSS styling into your accessible web design and use accessible color schemes to improve accessibility.

Objects in JavaScript encapsulate both data and functionality. You'll create, access, and modify objects to build a solid foundation for object-oriented programming.

Functions are one of most important data structures. Learn what a "first-class function" is, learn about scope, dig into closures, and use immediately-invoked function expressions for private state.

Creating objects individually isn't sustainable. Learn how to create similar objects with ease using Classes. You'll also learn how object inheritance works through Prototypal Inheritance.

Discover object-oriented design patterns that can be used to create an object -- all without involving its prototype. What's more: you'll also learn how to implement private properties in objects.

Functions are at the heart of JavaScript! With ES6, functions are getting some much-needed improvements. In this lesson, you'll learn a number of new things including arrow functions and classes.

The JavaScript environment provides you with a number of features by default. In this lesson, we'll take a look at Sets, Maps, Proxies, Generators, how iteration works, and more!

With this massive improvement, not all browsers are able to support this new version of JavaScript. In this lesson, you'll learn about using polyfills and transpiling your ES6 JavaScript code to ES5.

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 a classic game!

Project Description - Classic Arcade Game Clone

Project Rubric - Classic Arcade Game Clone

Learn how automation and tooling can make you more productive as a developer and allow you to work more faster and more efficiently.

Use keyboard shortcuts and code editor extensions to speed up your development process and help to avoid repetitive typing tasks.

Leverage the power of build tools like Gulp and Grunt to automate the process of converting your development code into streamlined production-ready code.

Learn how to set up your environment for live editing. Live editing will cause any connected browser to automatically reload if you change any file it's watching in your project.

Learn how to use tooling to be a safety net for you as you're coding. Use it to automatically check the code you write and automatically run tests.

Learn how to use tooling to optimize your apps for production use. You'll learn how to concatenate, minify, and optimize your code.

You're on your way to tooling greatness. In this lesson, you'll learn about tooling to scaffold entire projects.

Learn why writing tests is an important part of any project and get started writing your own tests.

Learn how to use the Jasmine test suite to run tests against your code and handle varying situations including asynchronous code.

You have been given a feed reader application that another developer has worked on, and now need to write tests against it using Jasmine's testing syntax.

Project Description - Feed Reader Testing

Project Rubric - Feed Reader Testing

Find your next job or connect with industry peers on LinkedIn. Ensure your profile attracts relevant leads that will grow your professional network.

Project Description - Improve Your LinkedIn Profile

Project Rubric - Improve Your LinkedIn Profile

Other professionals are collaborating on GitHub and growing their network. Submit your profile to ensure your profile is on par with leaders in your field.

Project Description - Optimize Your GitHub Profile

Project Rubric - Optimize Your GitHub Profile

Learn why well-structured code is vitally important to a web app's structure, especially as the app gets larger. Explore how you can use MV* organizational framework to create cleaner projects.

Begin refactoring your Cat Clicker code and learn the best ways to improve its structure.

Learn what a promise is, how it makes writing asynchronous JavaScript simpler and how to handle errors.

Create sequences of asynchronous work by chaining Promises together and dive into more advanced error handling.

In this lesson, you'll learn why you should use asynchronous data requests. Use the XHR object to send and receive data asynchronously.

In this lesson, you'll compare using XHR with using jQuery's Ajax method. You'll send and receive data using jQuery's Ajax methods and learn how jQuery's Ajax works under the hood.

In this lesson, you'll use JavaScript Promises to create a fetch request and handle the returned data asynchronously. You'll also learn how to handle errors for failed requests.

Learn about the features of a single page web application.

Dig around in the Backbone framework to discover how many of its most popular features work.

Learn how to build a single page application in the Angular framework.

Learn how to build a single page application in the Ember framework.

Discover the differences between a standard web app and an offline-first application and get an introduction to new APIs.

Write your first Service Workers and get comfortable with the lifecycle of a request when using a service worker

In this real-world case study, given the front-end code for a static Restaurant Reviews App, revise the site to be responsive and achieve accessibility standards.

Project Description - Restaurant Reviews App

Project Rubric - Restaurant Reviews App

Congratulations! You've completed the Front-End Nanodegree program! Check out this overview of all the great things you've learned and some of the next steps available to you.

Get started using the proper input types to make forms as simple to complete as possible for your users.

Start adding other features to your inputs, such as autofill and validation.

Begin optimizing entire forms, rather than individual elements, to create high conversion web forms.

Learn about the special considerations required when building excellent forms on mobile devices, such as touch events.

You'll learn the ins and outs of requests. You'll look at how a page is requested, the headers that are received, HTTP codes, and how data is transferred.

You'll take a deep dive into HTTP verbs. You'll dig in deep to the vital headers used in HTTP. You'll also learn how to efficiently structure applications using REST.

You'll discover just how important security is to the web. You'll learn about TLS, discover issues with loading mixed content, have a quick primer on cryptography and verify Certificate Authorities.

HTTP/1 is great, but the future is HTTP/2! You'll learn about the changes that HTTP/2 brings. You'll learn the current "best practices" that HTTP/1 extols, but that are now anti-patterns in HTTP/2.

Security is vital for every web application! You'll learn about common security pitfalls and how to avoid them. You'll also get a chance to don your white hat and hack into a (sample) bank's website.

The Unix shell is a powerful tool for developers of all sorts. In this lesson, you'll get a quick introduction to the very basics of using it on your own computer.

Version control is an incredibly important part of a professional programmer's life. In this lesson, you'll learn about the benefits of version control and install the version control tool Git!

Now that you've learned the benefits of Version Control and gotten Git installed, it's time you learn how to create a repository.

Knowing how to review an existing Git repository's history of commits is extremely important. You'll learn how to do just that in this lesson.

A repository is nothing without commits. In this lesson, you'll learn how to make commits, write descriptive commit messages, and verify the changes you're about to save to the repository.

Being able to work on your project in isolation from other changes will multiply your productivity. You'll learn how to do this isolated development with Git's branches.

Help! Disaster has struck! You don't have to worry, though, because your project is tracked in version control! You'll learn how to undo and modify changes that have been saved to the repository.

You'll learn how to create remote repositories on GitHub and how to get and send changes to the remote repository.

In this lesson, you'll learn how to fork another developer's project. Collaborating with other developers can be a tricky process, so you'll learn how to contribute to a public project.

You'll learn how to send suggested changes to another developer by using pull requests. You'll also learn how to use the powerful git rebase command to squash commits together.

Enter the exciting, interactive world of the DOM! Learn how to use JavaScript and jQuery to select and manipulate HTML elements on a page.

Now that you've seen how to select elements using jQuery, learn to manipulate the DOM and change a webpage dynamically.

Learn how to use jQuery to listen for events (like a mouse click or the pressing of a key on the keyboard) and respond to these events.