Codelab: A Card That Adapts

In this codelab, you'll build a product card component — the kind you see on Amazon product listings, Airbnb property cards, or app store listings. On mobile, the card shows the image on top and details below (vertical layout). On tablet and up, the image moves to the left side with details on the right (horizontal layout). This is one of the most common responsive patterns on the web.

Open a terminal by pressing Ctrl + Alt + T on Linux, then type the following commands one at a time, pressing Enter after each:

• mkdir ~/responsive-card — This creates a new folder called responsive-card in your home directory. mkdir stands for "make directory."
• cd ~/responsive-card — This moves you into the folder you just created. cd stands for "change directory."
• touch index.html style.css — This creates two empty files: index.html for the HTML structure and style.css for the CSS styles.
• code . — This opens VS Code with the current folder loaded. The dot (.) means "the folder I'm currently in."

If you don't have VS Code installed, use any plain-text editor — gedit, nano, Kate, or Mousepad all work fine.