Web Development Tools: Enhance Workflow and Code Quality
1h 20mIntermediate2023-01-20
Authors

Christina Truong
Educator, Front-End Developer
Course details
Web developers don't have to do everything by hand. There are many tools and frameworks that can make your workflow more productive and efficient. Christina Truong introduces browser tools for analyzing and testing your code, and text editor shortcuts and tools to help you write your code faster and cleaner than before. Plus, learn how CSS frameworks and preprocessors can improve your CSS workflow and how version control systems like Git actually help track your work, in addition to saving you from mistakes. Get an overview of the pros and cons of each tool as well as examples, tips, and guidance for evaluating which ones will work best for you.
Skills covered
FirefoxMozillaChromeGitHubWeb Development ToolsPersonaGoogleWeb Development
Concepts
0. Introduction
- 01 - Supercharge your web development workflow
- 02 - What you should know
- 03 - How to use the exercise files
1. Browser Testing and Tools
- 04 - Cross browser testing
- 05 - Accessing the developer tools
- 06 - Inspect HTML
- 07 - Inspect CSS
- 08 - Inspect flexbox and grid
- 09 - The JavaScript console
- 10 - Testing responsive and mobile layouts
- 11 - Validation tools and linter applications
2. Text Editors
- 12 - Text editors vs. IDEs
- 13 - Getting to know your text editor
- 14 - Using keyboard shortcuts
- 15 - Extensions packages and plugins
- 16 - Code autocompletion
- 17 - Autocompletion with Emmet
3. Front-End Frameworks and CSS Preprocessors
- 18 - CSS reset stylesheets
- 19 - CSS frameworks for front-end development
- 20 - Static site generators CMS website building
- 21 - CSS preprocessors
- 22 - Git and version control
Conclusion
- 23 - Next steps