Lesson 1
Welcome to the Front End Web Developer Nanodegree Program
Basic JavaScript
Basic web development
Courses In This Program
Welcome to the Front-End Web Developer Nanodegree program. This is your first step on your journey to become a Front-End programmer. Learn what this program is all about as well as how to find support along your learning journey.
In this part, you’ll create a multi-page blog website, using best practices for content and page styling with HTML and CSS. Practice using responsive layouts, Flexbox, and CSS Grid to create the structure and design for your own blog.
Lesson 1
HTML
Learn the basics of HTML and start using different elements to build out the basic structure of webpages.
Lesson 2
CSS
Learn the basics of CSS and start using different properties to create appealing layouts and styling for all types of use cases.
Lesson 3
CSS Flexbox
Build on your CSS knowledge by diving into Flexbox, a one-dimensional layout technique for helping organize items within your webpage.
Lesson 4
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.
Lesson 5
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!
Lesson 6 • Project
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!
Expand your understanding of JavaScript syntax and learn about how we can programmatically interact with the DOM. By the end of this course, you'll be able to create or revise content and interact with browser events. In the project, you will build a landing page that combines your skills with JavaScript, HTML, and CSS to update and control the page and create a dynamic user experience.
Lesson 1
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.
Lesson 2
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.
Lesson 3
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.
Lesson 4
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.
Lesson 5
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.
Lesson 6
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.
Lesson 7 • Project
Landing Page
Build a landing page that uses JavaScript to create an interactive navigational experience for the user.
In this part, you’ll 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. This project requires you to create an asynchronous web app that uses Web API and user data to dynamically update the UI for a Weather Journal App.
Lesson 1
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.
Lesson 2
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.
Lesson 3
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.
Lesson 4
Asynchronous JavaScript
In this lesson students will learn how to implement asynchronous JavaScript with the Fetch API and Web APIs.
Lesson 5 • Project
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.
In this part, you’ll get a taste of some common production environments and tools used in a front end developer role. You'll build a web tool that allows users to run Natural Language Processing (NLP) on articles or blogs found on other websites.
Lesson 1
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.
Lesson 2
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.
Lesson 3
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.
Lesson 4
Final Touches
Add some final pieces to your Webpack project, get your full functionality back, and learn about Service Workers.
Lesson 5 • Project
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.
You're now ready to combine all of the skills you’ve developed throughout the Nanodegree program to build an online travel app. You’ll work with data sources from multiple APIs to create a dynamic travel weather planning application that helps people plan trips by generating weather forecasts for the places they’re visiting.
Lesson 1 • Project
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.
Optional Courses
Lesson 1
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.
Lesson 2 • Project
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.
Lesson 3 • Project
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.