codex-lv2-may-2025

🧪 Lesson 1: How Forms and URLs Work Together

Tags: #lesson #level2 #forms Goal: Learn how forms create query strings and how websites use them to show results. Level: Beginner web development Tools: Any web browser and code editor (like VS Code or Code.org Web Lab)

Turn in: Create a repo called my-search-params on GitHub and check off Lesson 1 in your Moodle Classroom.

✅ Step 1: Guess What the URL Will Do

Look at these real web addresses (URLs). Try to guess what each one will do.

Then copy and paste each one into your browser and check.

Site URL
Google https://www.google.com/search?q=funny+cat+videos
YouTube https://www.youtube.com/results?search_query=lofi+study+music
WikiHow https://www.wikihow.com/wikiHowTo?search=boil+an+egg

What do you notice?

The code after the & is called the Search Parameter. What is the format of a Search Parameter?

Browser URL Bar Showing Search Parameters

Above: Browser URL bar demonstrating how search parameters appear in the address bar

✏️ Explore

✅ Step 2: Make a YouTube Search Form

Now try making your own form to search YouTube.

Create a new GitHub repo called my-search-params.

Copy this into your HTML file:

<form action="https://www.youtube.com/results" method="GET">
  <label for="search">Search YouTube:</label>
  <input type="text" name="search_query" id="search">
  <button type="submit">Search</button>
</form>

Try it!

You may try it here, first.

YouTube Search Form in Action

Above: YouTube search form demonstrating user input and form submission

More

Try it out! Type something and hit “Search.” What does the browser do with your input? Hint: look at the url bar at the top of your browser.

Exploration Notice the following attributes on your form. Try changing them to something else and changing them back to see what happens.

✅ Step 3: More Search Forms

Try a few of these on your page.

🎯 Google Search Form

<form action="https://www.google.com/search">
  <label for="gsearch">Search Google:</label>
  <input type="text" name="q" id="gsearch">
  <button type="submit">Search</button>
</form>

🎯 WikiHow Search Form

<form action="https://www.wikihow.com/wikiHowTo">
  <label for="wikihow">Search WikiHow:</label>
  <input type="text" name="search" id="wikihow">
  <button type="submit">Search</button>
</form>

✨ Challenge: DuckDuckGo

Use this link pattern: https://duckduckgo.com/?q=your+search+here

Can you create your own DuckDuckGo form?

✨ Challenge: bing.com

Go to https://bing.com. Explore the URL format. Can you create your own form for it?

✅ Step 4: Look at a Pexels Image URL

Try this link by copy-pasting it into your browser:

https://images.pexels.com/photos/3184402/pexels-photo-3184402.jpeg?w=600&h=400&sepia=80

✏️ What do you think each part does?

Try changing:

What happens?

✅ Step 5: Build a Pexels Image Viewer Form

Here’s a form that lets you control the image size and filter:

Copy this into an HTML file, add bootstrap classes for your form and button, and try it out.

<form action="https://images.pexels.com/photos/3184402/pexels-photo-3184402.jpeg" method="GET">
  <label for="w">Width:</label>
  <input type="number" name="w" id="w" value="600">

  <label for="h">Height:</label>
  <input type="number" name="h" id="h" value="400">

  <label for="sepia">Sepia (0–100):</label>
  <input type="text" name="sepia" id="sepia" value="80">

  <button type="submit">View Image</button>
</form>

✏️ Try editing this form to include one or more options listed below.

Pexels Image Viewer Form

Above: Pexels image viewer form with width, height, and sepia controls

📘 Pexels Image Options (Documentation)

Here are some options you can add to the query string in the URL or as input fields in your form:

Option What it does
w Width of the image in pixels
h Height of the image in pixels
sepia Sepia filter level (0–100)
blur Blur amount (0–100)
face-blur Blur face (1-100)
fit Resize style (crop, clip, etc.)
pad How much padding to have around the image in px
bg Background color in hex (e.g., bg=ffffff for white)

Note There are more options for Pexels here.

💡 Optional Activity

Add new fields to the Pexels form to test:

Example field:

<label for="blur">Blur (0–100):</label>
<input type="number" name="blur" id="blur" value="20">

🧪 Final Challenges

🔍 Challenge 1: Search Openverse

Free images and audio. Try:

https://openverse.org/search/?q=mountains

Make your own form like this:

<form action="https://openverse.org/search/">
  <label for="term">Search Openverse:</label>
  <input type="text" name="q" id="term">
  <button>Search</button>
</form>

🌏 Challenge 2: Google Translate a Word

Use this format:

https://translate.google.com/?sl=en&tl=zh-TW&text=hello&op=translate

Build a form that lets the user enter a word in English and opens the translation in Traditional Chinese.

🍝 Challenge 3: AllRecipes Search

Use this format:

https://www.allrecipes.com/search/results/?wt=pasta

Make a form that lets the user search for recipes by ingredient or dish name.

✅ Wrap-Up

You learned:

✅ Great work!

🔗 Navigation