Intermediate Web and Front-End Development

IBM via Coursera

Go to class Write review

Details

Go to class

Provider

Coursera
Pricing

Free Online Course (Audit)
Languages

English
Certificate

Paid Certificate Available
Duration & workload

12 hours 22 minutes
Sessions

On-Demand
Level

Intermediate
Subtitles

English, Kazakh, German, Hindi, Russian, Swedish, Korean, Portuguese, Greek, Italian, French, Chinese, Spanish, Arabic, Thai, Ukrainian, Japanese, Indonesian, Polish, Dutch, Turkish, Hungarian, Bengali, Pashto, Urdu, Azerbaijani, Farsi

Found in

Part of

IBM Front-End Developer

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Do you want to learn how to optimize your websites for search engines? This course will teach you how Search Engine Optimization (SEO) techniques can help improve the visibility of your website. Then you will investigate automated build tools and bundlers like Webpack, which helps with bundling assets, modules, and dependencies into a single bundle, allowing developers to focus on development. Following that, you will explore how web optimization assesses and perceives the user experience of load time and runtime. You'll examine how JavaScript Testing frameworks like Mocha and Jasmine can automate testing to improve testing speed and efficiency, test accuracy, and reduce test maintenance costs and risks. Finally, you will discover why debugging is such an important part of the software development process. You will learn how to use Google Chrome DevTools to debug a program without recompiling or changing its source code, as well as how to use a variety of add-ons or extensions to debug a program.

Syllabus

Search Engine Optimization (SEO)

After creating a website, web developers should use search engine optimization (SEO) techniques to help their website rank higher in search results, making it more visible to people online. SEO tools provide business owners with information about the overall health and success of their websites. They can optimize their website with an SEO strategy that combines layered on-page, off-page, and technical SEO tactics. You can improve a website's ranking and visibility by optimizing various front-end and back-end components such as page speed, keyword density, and external backlinks; this is known as page optimization for SEO, also known as on-page SEO. You can also use an SEO campaign as a well-planned effort to improve the ranking of a website in search results. This includes optimizing pages for specific keywords, creating high-quality content, constructing backlinks, and promoting the site on social media.

Introduction to Automated Build Tools (Webpack)

Automated build tools and bundlers are a complete game changer in web development. For example, Webpack 5 is a module bundler that assists in handling the bundling of assets, modules, and dependencies into a single bundle while allowing developers to concentrate on the development. The automation process helps to standardize builds, speed them up, and minimize mistakes done manually. Instead of being dependent on online solutions, you can use Webpack 5 to build custom solutions or boilerplates. It allows you to create codes in modules. The initial configuration starts from a single module. It then processes all its dependencies, which can be either direct or indirect. The Webpack configuration further helps to determine whether code should be compressed for quicker execution or packed with source maps for better error tracking. In the production mode, Webpack tries its best to optimize the build by automatically minifying the code. The best production practices can be implemented to improve a website’s performance. Furthermore, you can use different Webpack tools to reduce the bundle size and use it with frontend frameworks for building and deploying web applications. Finally, by implementing the best practices for optimizing Webpack, you can ensure that your applications are optimized and function efficiently.

Cross-Browser JavaScript Optimization and Testing Frameworks

In today's fast-paced world, keeping load and response times to a minimum is critical because the longer it takes a website to respond, the more users will leave. This course teaches how web optimization measures and perceives the user experience of load time and runtime. You can identify tools, APIs, and best practices for measuring and improving web performance. You will discover how JavaScript can create highly interactive websites that engage users. On the other hand, increased engagement comes at a performance cost that can negatively impact website usability. To resolve this, you will learn how to use a testing framework for automated testing to increase testing speed and efficiency, improve test accuracy, and reduce test maintenance costs and risks. Mocha and Jasmine are two open-source testing frameworks you will learn about in this module. You will also learn how front-end testing involves creating a website's graphical user interface (GUI) so that users can view and interact with the website or web app.

Debugging and Troubleshooting

Debugging is an essential part of the software development process. Bugs in software applications are typically caused by an unintentional or unexpected event and must be removed. As software may contain bugs even after meticulous planning and defensive programming, in this course, you will learn the various strategies that can be used to localize the error. You will discover how browsers now include a variety of add-ons or extensions that can be used for debugging and other web development tasks. You will learn how to use a debugging tool to debug a program without recompiling or changing its source code. You'll also know how Google Chrome DevTools allows developers to edit code directly in the browser, set breakpoints to detect problems, and debug code quickly. Finally, you will understand how website monitoring evaluates a website's functionality, performance, or availability and how monitoring tools perform routine tests and send notifications when a website is unavailable, making it easier to identify and resolve problems.