Tactics and Tools for Troubleshooting Front-end Web Development

This course introduces front-end web developers to the most popular professional tools available to help them troubleshoot issues in HTML, CSS, and JavaScript and make their websites cross-browser compatible.
Course info
Rating
(46)
Level
Intermediate
Updated
Sep 14, 2016
Duration
1h 37m
Table of contents
Description
Course info
Rating
(46)
Level
Intermediate
Updated
Sep 14, 2016
Duration
1h 37m
Description

At the core of any fully responsive website is a thorough knowledge of how to troubleshoot HTML, CSS, and JavaScript. This course, Tactics and Tools for Troubleshooting Front-end Web Development, will show you how to troubleshoot HTML, CSS, and JavaScript using the Chrome DevTools, Firebug, Firefox Developer Edition, and IE Developer Tools. You will learn how to view and test CSS for any HTML element, log JavaScript errors to the console, and step through JavaScript code using the debugger. Then, you will build on this knowledge and use these tools in BrowserStack's live testing environments for any OS, Browser, and Device combination. When you're finished with this course, you will have the knowledge to troubleshoot any front-end issue on your website, which will help you as you move forward to building a completely responsive website that displays properly across all browsers and devices.

About the author
About the author

Shelley has over 16 years of experience in IT as a Web Developer, Technical Architect, Manager, and Trainer. Her years of experience designing, developing, and managing global corporate training programs gives her the ability to effectively organize training programs that are engaging and entertaining.

More from the author
Launching Successful Teams
Intermediate
2h 24m
4 Jan 2018
Managing Technical Professionals
Intermediate
2h 30m
4 Oct 2017
Section Introduction Transcripts
Section Introduction Transcripts

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.