Tactics and Tools for Troubleshooting Front-end Web Development

Course Overview
Hi, everyone. My name is Shelley Benhoff and welcome to my course Tactics and Tools for Troubleshooting Front-end Web Development. I am a senior consultant and professional trainer at HoffsTech. In today's world there are so many different devices that people can use to view websites. It is very important for front end web developers to make websites fully responsive and cross-browser compatible. In this course, we're going to fix all of the errors on a sample website using HTML, CSS, and JavaScript to make it fully cross-browser and device compatible. Some of the major topics that we will cover include number one, troubleshooting HTML, CSS, and JavaScript using the four most popular developer tools, the Chrome DevTools, Firebug Firefox Developer Edition and IE developer tools. Number two, debugging JavaScript using the Chrome DevTools and Firefox Developer Edition, and number three, testing responsive design and device compatibility issues using BrowserStack. By the end of this course you will be able to troubleshoot any issue to make your website fully responsive and functional on any device. Before beginning the course you should be familiar with HTML, CSS, and JavaScript from here, you should feel comfortable diving into advanced front-end development with courses on responsive design, cross-browser compatibility and device compatibility. I hope that you'll join me on this journey to learn how to troubleshoot any front-end web development issue with the Tactics and Tools for Troubleshooting Front-End Development course here at Pluralsight.

An Introduction to Front-end Developer Tools
Hello, and welcome to this course where you will learn tactics and tools for troubleshooting front-end web development. This course will introduce you to the most popular professional tools available to help you troubleshoot issues in CSS, JavaScript, and cross-browser and device compatibility. You will learn how to determine the cause of and fix the most common front-end web development issues. You will also learn techniques to help troubleshoot more advanced and complex issues. In this introductory module, I will show you the tools that we will use throughout this course and walk you through installation and configuration. You will also see the sample website that you will begin with which includes a lot of errors by design that you will learn how to fix to create a fully-working and polished website by the end of this course. The benefits of learning these tactics and tools cross many different roles in web technologies. HTML, CSS, and JavaScript are the backbone of any front-end or back-end developer's toolkit. Whether you are working with ASP. NET, PHP, or some other webdev technology, you will be working with HTML, CSS, and JavaScript, so having a good understanding of the common errors and how to fix them will really help you level up your skills and forward your career. Let's go ahead and get started.

Troubleshooting CSS
Now that we have learned how to install and configure our front-end developer tools, let's put them to the test and troubleshoot some of the most common CSS errors. Using the Chrome developer tools, Firebug, Firefox Developer Edition and Internet Explorer developer tools, we will view HTML elements, their assigned styles, inherited styles and computed styles. We will not use all four developer tools for each individual error. Instead, we will focus on the tools that are most useful to help troubleshoot each error. To experience the full potential of this course, you should already be familiar with CSS and Bootstrap. If you're not familiar with CSS and Bootstrap, there are many courses available on Pluralsight to help you get started.

Troubleshooting JavaScript
Next, let's use our developer tools to troubleshoot JavaScript. You've already seen the power of the DevTools at work with CSS, and there are even more tools to help you troubleshoot JavaScript. Until now, we have only made our sample website look good. Now, we're going to make it fully functional. To experience the full potential of this course, you should already be familiar with JavaScript and jQuery. If you are not familiar with JavaScript and jQuery, there are many courses available on Pluralsight to help you get started.

Troubleshooting Cross-browser Compatibility
In this module we will test and troubleshoot cross-browser compatibility issues using BrowserStack. Now that we've used our developer tools to troubleshoot CSS in JavaScript, we're going to apply your knowledge of these tools to fix cross-browser compatibility issues.

Troubleshooting Device Compatibility
In this module, we will test and troubleshoot device compatibility issues and responsive designs using BrowserStack. By the end of this module, we will have a fully functional website that will render correctly on any browser or device.