Front End Developer v1.0.0

Nanodegree key: nd0011

Version: 1.0.0

Locale: en-us

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

Content

Part 01 : Welcome to the 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.

Module 01: Front End Web Developer Nanodegree Orientation
- Lesson 01: Welcome to the Front End Web Developer Nanodegree Program

Part 02 : CSS, Website Layout, Website Components

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.

Module 01: Personal Blog Website
Module 02: CSS, Website Layout, Website Components
- Lesson 01: HTML
  Learn the basics of HTML and start using different elements to build out the basic structure of webpages.
- Lesson 02: CSS
  Learn the basics of CSS and start using different properties to create appealing layouts and styling for all types of use cases.
- Lesson 03: CSS Flexbox
  Build on your CSS knowledge by diving into Flexbox, a one-dimensional layout technique for helping organize items within your webpage.
- Lesson 04: 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 05: 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 06: 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!
  
  Project Description - Personal Blog Website
  
  Project Rubric - Personal Blog Website

Part 03 : JavaScript & The DOM

In this part, you will build a multi-section landing page. You will learn to dynamically add content to a web page and 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.

Module 01: JavaScript & The DOM
- Lesson 01: 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 02: 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 03: 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 04: 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 05: 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 06: Landing Page
  Build a landing page that uses JavaScript to create an interactive navigational experience for the user.
  
  Project Description - Landing Page
  
  Project Rubric - Landing Page

Part 04 : Web APIs and Asynchronous Applications

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.

Module 01: Web APIs and Asynchronous Applications
- Lesson 01: 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 02: 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 03: 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 04: Asynchronous JavaScript
  In this lesson students will learn how to implement asynchronous JavaScript with the Fetch API and Web APIs.
- Lesson 05: 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.
  
  Project Description - Weather Journal App
  
  Project Rubric - Weather Journal App
  - Concept 01: Getting Started
  - Concept 02: Development Strategy

Part 05 : Build Tools and Single Page Web Apps

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.

Module 01: Build Tools and Single Page Web Apps
- Lesson 01: 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 02: 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 03: 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 04: Final Touches
  Add some final pieces to your Webpack project, get your full functionality back, and learn about Service Workers.
- Lesson 05: 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 Description - Evaluate a News Article with Natural Language Processing
  
  Project Rubric - Evaluate a News Article with Natural Language Processing
  - Concept 01: Introduction
  - Concept 02: Instructions

Part 06 : Career Services

Module 01: Career Services
- Lesson 01: 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 02: 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.
  
  Project Description - Improve Your LinkedIn Profile
  
  Project Rubric - Improve Your LinkedIn Profile
- Lesson 03: 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.
  
  Project Description - Optimize Your GitHub Profile
  
  Project Rubric - Optimize Your GitHub Profile

Part 07 : Capstone

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.

Module 01: FEND Capstone - Travel App
- Lesson 01: 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.
  
  Project Description - FEND Capstone - Travel App
  
  Project Rubric - FEND Capstone - Travel App