Front End Web Developer

Welcome to the Front End Web Developer Nanodegree Program

HTML

Learn the basics of HTML and start using different elements to build out the basic structure of webpages.

CSS

Learn the basics of CSS and start using different properties to create appealing layouts and styling for all types of use cases.

CSS Flexbox

Build on your CSS knowledge by diving into Flexbox, a one-dimensional layout technique for helping organize items within your webpage.

CSS Grid

Extend your CSS skills even further with CSS Grid, which allows you to organize in two dimensions with rows and columns. Grid can work with Flexbox to lay out pages just like on the modern web.

Creating Responsive Layouts

Start with a basic Grid-based layout for a blog, and learn how to use media queries to build a responsive layout for device types of all sizes!

Personal Blog Website

Use your new skills with HTML and CSS to build a personal blog website, complete with a main page and example blog posts!

Introduction to JavaScript & the DOM

In this lesson you'll get a preview of what you will learn in this course as you continue on your JavaScript journey. You'll also get a sneak peek at the project you'll build at the end of the course.

JavaScript Syntax

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

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.

Creating Content with JavaScript

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.

Working with Browser Events

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.

Performance

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.

Landing Page

Build a landing page that uses JavaScript to create an interactive navigational experience for the user.

Course Introduction

In this lesson we will introduce the main topics of the course and preview the kind of web app that can be made with the skills developed throughout the following lessons.

Node & Express Environment

In this lesson, students will learn how to setup a Node + Express environment to develop a web application on their local machine.

HTTP Requests & Routes

In this lesson students will learn how to use Express to setup server side routes and execute client side handlers for GET and POST requests.

Asynchronous JavaScript

In this lesson students will learn how to implement asynchronous JavaScript with the Fetch API and Web APIs.

Project: Weather Journal App

Apply your new skills to combine data from the OpenWeatherMap API and client side (browser) HTML forms, to create a web app that records a weather journal for users.

Intro to Build Tools

Get a brief introduction to build tools, including how they can help ease and advance your web development, and what some of the most common build tools are.

Basics of Webpack

By the end of this lesson you will understand the reasons developers use webpack, and be able to explain at a high level what webpack does.

Sass and Webpack

By the end of this lesson you will be able to explain what Sass is and its relation to CSS, and understand the steps necessary to use Sass in a project.

Final Touches

Add some final pieces to your Webpack project, get your full functionality back, and learn about Service Workers.

Evaluate a News Article with Natural Language Processing

Build a web tool that allows users to run Natural Language Processing (NLP) on articles or blogs found on other websites.

Project: FEND Capstone - Travel App

Build a travel app, combining all of your Front End skills into an amazing capstone project for your portfolio. Utilize multiple APIs to present a user with all they need to know about their trip.

Conduct Industry Research

You're building your online presence. Now learn how to share your story, understand the tech landscape better, and meet industry professionals.

Take 30 Min to Improve your LinkedIn

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

Optimize Your GitHub 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.