IP LAB MANUAL PRACTICE QUESTION
HTML Questions:
Basic Web Page Structure
Create a simple webpage with the following elements: a heading (<h1>), a paragraph
(<p>), an image (<img>), and a link (<a>). Ensure the link directs to a different webpage
when clicked.
HTML Forms
Create a form with the following fields: name, email, password, and a submit button.
Ensure the email field has basic validation (e.g., must be in an email format).
Tables in HTML
Design a table to display the following data:
o Name, Age, and Country of 5 individuals.
o Use <th> for headers, <tr> for rows, and <td> for data cells.
Image Gallery
Create a simple image gallery using <div> elements. Each image should be wrapped in a
<div>, and the gallery should be styled with CSS to display the images in a grid format.
HTML Lists
Create an ordered list of the top 5 movies you like and an unordered list of your favorite
foods. Include appropriate heading elements.
HTML Video Embedding
Embed a video from YouTube or any other video source in your webpage. Provide play,
pause, and mute options.
HTML5 Audio Element
Create a simple webpage with an audio player embedded using the <audio> element.
Add controls to play and pause the audio.
HTML Semantic Tags
Replace <div> tags with HTML5 semantic tags such as <header>, <nav>, <main>,
<section>, <article>, and <footer> to structure a basic webpage.
HTML Meta Tags
Create a webpage with proper meta tags for specifying the character encoding, viewport
settings, and a description of the webpage.
HTML Links and Anchor Tags
Create a webpage that has a navigation bar with links to different sections of the page.
Use anchor links to scroll to sections
CSS Questions:
11. CSS Box Model
o Create a webpage where a div has padding, a border, and margin. Experiment
with different values and observe how the box model works.
12. CSS Flexbox Layout
o Create a webpage that uses a flexbox layout to display three <div> elements in a
row. Each <div> should take up equal width and have some background color.
13. CSS Grid Layout
o Create a simple 2x2 grid using the CSS Grid system. Place text or images inside
the grid cells.
14. CSS Hover Effects
o Style a button with a hover effect that changes its background color and text color
when the user hovers over it.
15. CSS Media Queries
o Create a responsive webpage that uses media queries to change the layout for
mobile and desktop screens. For example, have a two-column layout on large
screens and a single column layout on smaller screens.
16. CSS Shadows and Borders
o Create a container div with a shadow effect on hover. Add a border to the div and
change its style when hovered.
17. CSS Positioning
o Create a webpage with two elements: one is fixed to the top of the page, and the
other moves down as you scroll. Use position: fixed for the first and
position: absolute for the second.
JavaScript Questions:
18. Alert and Prompt
o Write a JavaScript program that shows an alert with a greeting message when the
page loads. Then prompt the user to enter their name and display it in a message
on the page.
19. Simple Calculator
o Create a simple calculator using JavaScript that can perform addition, subtraction,
multiplication, and division. Display the result on the webpage.
20. Toggle Button Visibility
o Create a button that, when clicked, will toggle the visibility of a <div> element on
the page.
21. Change Background Color on Button Click
o Write JavaScript code that changes the background color of a webpage when a
button is clicked. Use multiple colors and cycle through them each time the button
is pressed.
22. Form Validation
o Create a form with an email input field. Write JavaScript to validate that the user
has entered a valid email address before the form is submitted.
23. Counting Button Clicks
o Create a button that keeps track of how many times it has been clicked and
displays the count on the page.
