Web Portfolio Projects: API-Based Chrome Developer Tool
41mIntermediate2020-04-22
Authors

Leigh Lawhon
Front-End Developer, UX/UI Designer, Instructor, Author
Course details
Building web applications on APIs has become more and more standard, but it remains a difficult skill to master for developers. Working with the intricate connections of API-based applications can be challenging; however, you can build a developer tool, built into your browser, that communicates with web content and shows your skills to prospective employers. In this course, instructor Leigh Lawhon helps you combine two critical skills: APIs calls and developer tool creation. Using practical examples, Leigh demonstrates how to build a Chrome Developer Tool (DevTool) that interacts with the GitKraken Glo Board API. Along the way, she steps through the basics of working with APIs, how to authenticate using personal access tokens, and how to use Fetch and Promises to get data from the Glo Board API.
Skills covered
JavaScriptWeb Development ToolsOracleWeb DevelopmentOne-Off
Concepts
0. Introduction
- 01 - Create a Chrome developer tool
- 02 - What you should know
- 03 - Use the GitHub exercise files
1. Understand the Tools
- 04 - Learn about Chrome DevTools
- 05 - Work with APIs
- 06 - Learn the Chrome API
- 07 - Learn the Glo API and Swagger documentation
2. Build a Chrome Developer Tool
- 08 - Build a dev tool in five minutes
- 09 - Sending messages with the Chrome API
- 10 - Challenge - Communicate between panel and content
- 11 - Solution - Communicate between panel and content
3. Authenticate with Glo
- 12 - Authenticate with personal access tokens
- 13 - Use Fetch and Promise to get data
- 14 - Use Fetch to get Glo Boards
- 15 - Challenge - Promises and loops
- 16 - Solution - Promises and loops
- 17 - Connect the data to the interface
4. Build the Comment Interface
- 18 - Use Glo API to save comments
- 19 - Challenge - Create new comments
- 20 - Solution - Create new comments
Conclusion
- 21 - Learn more and thank you
Related courses
- JavaScript Code Challenges: Creating Web Apps
- Hands-On RPA: Using APIs with UiPath
- Web Portfolio Projects: Binding and Propagation
- Web Portfolio Projects: Sortable Table and Arrays
- Planning a Web Design Portfolio: Growing Your Freelance Business
- Advanced Python Projects: Build AI Applications
- Microsoft Project Web App Essential Training (2019)
- WordPress: Mastering Full Site Editing
Related learn paths
- Explore Web Development with Vanilla JavaScript
- Advance Your Skills as a Django Developer
- Mastering Executive-Level Data Analytics
- Build a Web Design Business
- Become an AI Engineer
- Develop with Python for AI and Machine Learning
- Getting Started with WordPress
- Prepare for the GitHub Foundations Certification