Nanodegree key: nd0011
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: Welcome to the 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: 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.
- Concept 01: Course Introduction
- Concept 02: Intro to HTML
- Concept 03: Text Editors
- Concept 04: Exercise: Creating an HTML File
- Concept 05: Text Elements I
- Concept 06: Text Elements II
- Concept 07: HTML Lists
- Concept 08: Attributes
- Concept 09: The DOM
- Concept 10: Exercise: Creating an HTML Template
- Concept 11: Forms
- Concept 12: Exercise: Debugging HTML
- Concept 13: Recap
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.
- Concept 01: Why learn CSS?
- Concept 02: Selectors
- Concept 03: Linking CSS
- Concept 04: Exercise: Linking CSS
- Concept 05: Specificity
- Concept 06: The Box Model
- Concept 07: Exercise: The Box Model
- Concept 08: Display and Positioning: Inline & Block
- Concept 09: Display and Positioning: Z-index
- Concept 10: Absolute & Relative Units
- Concept 11: Typography
- Concept 12: Fonts
- Concept 13: Colors
- Concept 14: Exercise: Debugging CSS
- Concept 15: Recap
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.
- Concept 01: Introducing Flexbox
- Concept 02: A Quick Flexbox Example
- Concept 03: Axes and Direction with Flexbox
- Concept 04: Axes and Direction in Action
- Concept 05: Ordering Elements with Flexbox
- Concept 06: Ordering Elements Demo
- Concept 07: Aligning Items & Justifying Content with Flexbox
- Concept 08: Aligning & Justifying in Action
- Concept 09: Recap
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.
- Concept 01: Grid vs Flexbox
- Concept 02: An Example of Grid vs Flexbox
- Concept 03: Rows & Columns
- Concept 04: Rows & Columns in Action
- Concept 05: Grid Areas
- Concept 06: Working with Grid Areas
- Concept 07: Working with Grid Areas II
- Concept 08: Advanced Grid
- Concept 09: Advanced Grid Playground
- Concept 10: Recap
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!
- Concept 01: Building Layouts with Grid
- Concept 02: A Simple Blog Page
- Concept 03: Media Queries
- Concept 04: Adding Media Queries in Code
- Concept 05: Multiple Breakpoints
- Concept 06: Building Responsive Layouts with Flexbox & Grid
- Concept 07: Nesting Grids in Practice
- Concept 08: Course Recap
- Concept 09: Instructor Interview
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!
Lesson 01: Syntax
- Concept 01: Harmony, ES6, ES2015...
- Concept 02: Let and Const
- Concept 03: Quiz: Using Let and Const (1-1)
- Concept 04: Template Literals
- Concept 05: Quiz: Build an HTML Fragment (1-2)
- Concept 06: Destructuring
- Concept 07: Quiz: Destructuring Arrays (1-3)
- Concept 08: Object Literal Shorthand
- Concept 09: Lesson 1 Checkup
- Concept 10: Iteration
- Concept 11: Family of For Loops
- Concept 12: For...of Loop
- Concept 13: Quiz: Writing a For...of Loop (1-4)
- Concept 14: Spread... Operator
- Concept 15: ...Rest Parameter
- Concept 16: Quiz: Using the Rest Parameter (1-5)
- Concept 17: Lesson 1 Summary
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.
- Concept 01: Introduction
- Concept 02: The DOM
- Concept 03: Selecting Page Elements With CSS Selectors
- Concept 04: Select Page Element By ID
- Concept 05: Select Page Elements By Class Or Tag
- Concept 06: Nodes, Elements, and Interfaces...Oh My!
- Concept 07: More Ways To Access Elements
- Concept 08: Lesson Summary
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
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.
- Concept 01: Node.js Overview
- Concept 02: Using Node
- Concept 03: Exercise: Node and Package Installation
- Concept 04: Express Overview
- Concept 05: Exercise: Including Packages
- Concept 06: Creating a Local Server I
- Concept 07: Creating a Local Server II
- Concept 08: Exercise: Server Set-up
- Concept 09: Servers-File Structure Hierarchy
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.
- Concept 01: Routes & GET Requests
- Concept 02: Exercise: GET requests
- Concept 03: More Powerful GET Requests
- Concept 04: Routes & POST requests
- Concept 05: Exercise: POST requests
- Concept 06: Client Side, Server Side
- Concept 07: Client Side & Server Side Example
- Concept 08: Exercise: Client Side & Server Side
- Concept 09: Processing the POST request
- Concept 01: Async JS
- Concept 02: Async Promises
- Concept 03: Exercise: Async Function
- Concept 04: Async Fetch w/ Web APIs Intro
- Concept 05: Credentials and API keys
- Concept 06: Adding Fetch to Your Code
- Concept 07: Exercise: Async GET
- Concept 08: Async Fetch with Web APIs Demo
- Concept 09: Chaining Promises
- Concept 10: Updating UI Elements
- Concept 11: Exercise: Putting It All Together
- Concept 12: Updating UI Elements Demo
- Concept 13: Outro
- Concept 14: Instructor Interview
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.
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.
- Concept 01: Introduction to Webpack
- Concept 02: Getting Started
- Concept 03: Ex 0: Getting Started - Workspace
- Concept 04: Install Webpack
- Concept 05: Ex 1: Install Webpack - Workspace
- Concept 06: Webpack Entry
- Concept 07: Ex 2: Webpack Entry - Workspace
- Concept 08: Output and Loaders
- Concept 09: Ex 3a: Output & Loaders - Workspace
- Concept 10: Loaders
- Concept 11: Ex 3b: Loaders
- Concept 12: Plugins
- Concept 13: Ex 4: Plugins
- Concept 14: Mode
- Concept 15: Ex 5: Mode
- Concept 16: Convenience in Webpack
- Concept 17: Ex 6: Convenience
- Concept 18: Conclusion
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.
- Concept 01: Broken Project
- Concept 02: Fixing Our Functionality
- Concept 03: Exercise: Fixing Functionality
- Concept 04: Exercise: API Call Challenge
- Concept 05: Webpack for Production
- Concept 06: Exercise: Dev Tools Challenge
- Concept 07: Service Workers
- Concept 08: Exercise: Service Workers
- Concept 09: Course 4 Conclusion
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.
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.
- Concept 01: Self-Reflection: Design Your Blueprint for Success
- Concept 02: Debrief: Self-Reflection Exercise Part 1
- Concept 03: Debrief: Self-Reflection Exercise Part 2
- Concept 04: Map Your Career Journey
- Concept 05: Debrief: Map Your Career Journey
- Concept 06: Conduct an Informational Interview
- Concept 07: How to Request an Informational Interview
- Concept 08: Ways to Connect
- Concept 09: Ask Good Questions
- Concept 10: Debrief: Sample Questions Quiz
- Concept 11: Keep the Conversation Going
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.
- Concept 01: Get Opportunities with LinkedIn
- Concept 02: Use Your Story to Stand Out
- Concept 03: Why Use an Elevator Pitch
- Concept 04: Create Your Elevator Pitch
- Concept 05: Use Your Elevator Pitch on LinkedIn
- Concept 06: Create Your Profile With SEO In Mind
- Concept 07: Profile Essentials
- Concept 08: Work Experiences & Accomplishments
- Concept 09: Build and Strengthen Your Network
- Concept 10: Reaching Out on LinkedIn
- Concept 11: Boost Your Visibility
- Concept 12: Up Next
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.
- Concept 01: Prove Your Skills With GitHub
- Concept 02: Introduction
- Concept 03: GitHub profile important items
- Concept 04: Good GitHub repository
- Concept 05: Interview with Art - Part 1
- Concept 06: Identify fixes for example “bad” profile
- Concept 07: Quick Fixes #1
- Concept 08: Quick Fixes #2
- Concept 09: Writing READMEs with Walter
- Concept 10: Interview with Art - Part 2
- Concept 11: Commit messages best practices
- Concept 12: Reflect on your commit messages
- Concept 13: Participating in open source projects
- Concept 14: Interview with Art - Part 3
- Concept 15: Participating in open source projects 2
- Concept 16: Starring interesting repositories
- Concept 17: Next Steps
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: Capstone
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.