What we cover

In this tutorial we cover the basics of web scraping (also called web harvesting, or web data extraction).

We will cover:

The content about HTML and CSS selesctors is mainly based on Dmytro Perepolkin's "Introduction to HTML elements"

To start this tutorial, you need:

Watch this short video from w3schools which covers the basics of "Hyper Text Markup Language" (HTML):

HTML page

HTML page

HTML tags

HTML attributes

You can learn more about HTML tags and attributes from online resources, such as W3schools


Watch this short video tutorial about the Cascading Style Sheets (CSS) Syntax:

CSS Selectors

Learn the basics of viewing a page's CSS using Chrome DevTools:

The following process is described in this screencast:

  1. A box will open in the bottom right of the website.
  2. Click on a page element that you would like your selector to match (it will turn green).
  3. SelectorGadget will then generate a minimal CSS selector for that element, and will highlight (yellow) everything that is matched by the selector.
  4. Now click on a highlighted element to remove it from the selector (red), or click on an unhighlighted element to add it to the selector.

Through this process of selection and rejection, SelectorGadget helps you come up with the perfect CSS selector for your needs.

To learn more about CSS Selectors, review w3schools CSS Selector Reference

Congratulations! You have completed the tutorial and learned the basics of:

✅ Chrome DevTools and SelectorGadget

Next, you may want to proceed with this tutorial:

Jan Kirenz

Thank you for participating in this tutorial. If you found any issues along the way I'd appreciate it if you'd raise them by clicking the "Report a mistake" button at the bottom left of this site.

Copyright: Jan Kirenz (2021) | kirenz.com | CC BY-NC 2.0 License