prerequisit js and html for pavii

prereq_js_html_problems.md

Prerequisites: HTML and JavaScript Basics

HTML Basics

1. Create a Simple Web Page

• Problem: Design a basic web page with a title, heading, paragraph, and a link to Google.

2. Use Basic Form Elements

• Problem: Create a form with an input field (text type), a checkbox, and a submit button.

3. Create a Table

• Problem: Design a table with three rows and two columns, representing names and ages.

4. Embed Images

• Problem: Display an image on a web page and use alt text for the image.

5. Hyperlinks

• Problem: Create three links: one to an external website, one to another local HTML file, and one that opens an email client.

JavaScript Basics

6. Display Alert on Page Load

• Problem: Write a script that shows an alert saying "Welcome to my website!" when the page is loaded.

7. Console Logging

• Problem: Create a script that logs the message "This is a console message" to the browser's console.

8. Using Variables

• Problem: Declare a variable named 'greeting' with the value "Hello, World!". Display this in an alert.

9. Basic Arithmetic Operations

• Problem: Declare two variables with numeric values. Calculate their sum, difference, product, and quotient. Log results to the console.

10. Basic DOM Manipulation

• Problem: Have a paragraph with some placeholder text in your HTML. Use JavaScript to change this text when a button is clicked.

Setting up the Environment

11. Linking External JS Files

• Problem: Create a separate JavaScript (.js) file and link it to your HTML. Write a function in this .js file to alert a greeting and call this function from an HTML button.

12. Browser Compatibility

• Problem: Open your web page in at least three different browsers (e.g., Chrome, Firefox, Safari) and ensure it looks consistent.

13. Basic Error Handling

• Problem: Intentionally write a JavaScript error in your script (like a reference to an undeclared variable). Open the browser console to understand the error message and then fix it.

14. Inline vs. External Scripts

• Problem: Write two scripts: one inline in the HTML and one in an external .js file. Log different messages from each to understand the order of execution.

15. Basic Event Handling

• Problem: Create a button in your HTML. Write JavaScript so that when the button is clicked, the background color of the page changes.