CodingBowl

You’ve built the skeleton and added some paint—now it’s time to make your website truly professional. In these next four lessons, we move beyond simple text and images to focus on user input, modern layouts, and smarter code.

Lesson 5: Gathering Data (HTML Forms)

Websites aren't just for reading; they are for interacting. Forms are how you collect info from users. We cover:

• Input Types: Using <input type="text">, password, and email.
• Labels: Why the <label> tag is essential for accessibility and user experience.
• The Submit Button: Creating a <button> that sends data to be processed.

Lesson 6: Modern Layouts (Flexbox & Grid)

Standard CSS is great, but modern design requires flexibility. We explore how to align elements perfectly on any screen size:

• Flexbox: Easily centering items or creating rows that automatically adjust.
• CSS Grid: Building complex, magazine-style layouts with columns and rows.
• Responsiveness: A first look at how to make your site look good on both a laptop and a phone.

Lesson 7: Smart Logic (Conditionals in JavaScript)

JavaScript gets much more powerful when it can make decisions. This lesson introduces Control Flow:

• If/Else Statements: Telling your website to do one thing if a condition is true, and another if it's false (e.g., "If the password is correct, show the secret page").
• Comparison Operators: Using ==, >, and < to check values.
• Booleans: Understanding true and false—the logic gates of the web.

Lesson 8: Repetitive Tasks (Loops & Arrays)

Coding is about working smarter, not harder. Instead of writing the same code 10 times, we use Loops:

• Arrays: Storing lists of data (like a list of usernames or product prices) in a single variable.
• For Loops: Running a block of code multiple times to process every item in an array.
• Efficiency: Learning how to update 100 items on a page with just a few lines of code.

Summary Table