MET’s Institute of Engineering,
Bhujbal Knowledge City, Nashik
Department of Computer Engineering
Web Development Practical Probable Problem Statements
Class: SE Computer Engg, Div: A & B
Practical Exam Date: 11 & 12 May, 2026.
Problems 1–12: HTML + CSS (Basic)
1. Personal Introduction Card
Create a simple card showing your name, branch, and hobbies. Use HTML headings, paragraphs,
and text formatting tags (bold, italic, underline). Style with inline CSS for background color and
font.
Hint: Use <div> with style="background: lightblue; padding: 20px;". Use <b>, <i>, <u> tags.
2. College Name Display Page
Design a webpage with your college name as heading. Use subscript for year (e.g.,
2025<sub>th</sub>) and superscript for reference number. Apply internal CSS for center
alignment and font color.
Hint: Use <sub> and <sup> tags. Internal CSS in <style> tag inside <head>.
3. Image with Caption and Link
Create a page showing your favorite animal image. Below image, add a hyperlink that says "Click
here to know more". Use external CSS for image border and link color.
Hint: Use <img src="..." width="200">. Link using <a href="#">. External CSS file with .css extension.
4. Simple Time Table
Create a college timetable for 3 days (Monday, Tuesday, Wednesday) with 3 periods per day.
Use HTML table with borders. Apply internal CSS for background color of days.
Hint: Use <table border="1">, <tr>, <th>, <td>. Use background-color in CSS.
5. Subject List with Nested Table
Display "Computer Engineering Subjects" as main list. Inside one list item, show a nested table with
Theory and Practical marks. Use HTML only for structure.
Hint: Use <ul> or <ol>. Inside <li>, create another <table>.
6. Simple Registration Form (No Validation)
Create a form with name, roll number, and branch. Add a submit button. No JavaScript needed.
Use CSS for spacing and alignment.
Hint: Use <form>, <input type="text">, <input type="submit">. Use margin and padding in CSS.
7. About Me Page with Internal CSS
Create an "About Me" page with your photo, name, and 3 hobbies listed. Use internal CSS for heading
color and paragraph font size.
Hint: Use <style> tag. Set h1 {color: blue;}, p {font-size: 18px;}.
8. Recipe Card
Display a simple recipe (e.g., Tea or Sandwich). Use HTML for ingredients list (unordered list) and
steps (ordered list). Use external CSS for card border and shadow.
Hint: Card can be a <div> with border, border-radius, box-shadow.
9. Favorite Links Page
Create a webpage showing 3 of your favorite websites as hyperlinks. Each link should open in a new
tab. Use inline CSS for link colors (visited, hover).
Hint: <a href="url" target="_blank">. Use style="color: green;" inline.
10. Department Contact Table
Create a table showing 3 faculty names and their email IDs. Apply internal CSS for alternate row
background color (zebra striping).
Hint: Use tr:nth-child(even) {background-color: #f2f2f2;}.
11. Simple College Brochure
Design a small brochure with college name, image of campus, and a paragraph about the college.
Use external CSS for all styling.
Hint: Create [Link] file. Link using <link rel="stylesheet" href="[Link]">.
12. Hobby Page with Text Formatting
Create a page titled "My Hobbies". Use text formatting tags like <strong>, <em>, <mark>, and <del>.
Apply inline CSS for background.
Hint: <mark> highlights text, <del> strikes through. Use style="background: lightyellow;".
Problems 13–22: HTML + CSS + JavaScript (Basic)
13. Simple Form with Empty Field Validation
Create a login form (username, password). Use JavaScript to check that neither field is empty when
submit button is clicked. Show alert if empty.
Hint: Use onsubmit event. Check if(username == "") { alert("Empty"); return false; }.
14. Greeting Message Based on Time
Use JavaScript to display "Good Morning", "Good Afternoon", or "Good Evening" based on current
system time on webpage load.
Hint: Use new Date().getHours(). Display message using [Link]() or innerHTML.
15. Button Click Counter
Create a button and a paragraph. Every time button is clicked, increase counter value by 1 and display
"Button clicked X times".
Hint: Use let count = 0; and onclick event. Update innerText.
16. Change Background Color on Button Click
Create a webpage with a button. Each click changes background color to a different color (use array
of 3–4 colors).
Hint: [Link] = colors[index]. Loop colors using modulo.
17. Simple Addition Calculator
Create two input boxes and an "Add" button. When clicked, display sum of two numbers
using JavaScript.
Hint: Use parseInt() or parseFloat(). Sum = num1 + num2.
18. Display Current Date and Time
Use JavaScript to display current date and time in a <div> when page loads. Format: DD/MM/YYYY
HH:MM:SS.
Hint: Use new Date() and getDate(), getMonth()+1, getFullYear(), getHours(), etc.
19. Number Comparison
Take two numbers from user using prompts. Use JavaScript to display which number is greater, or if
both are equal.
Hint: Use prompt() to take input. Use if-else for comparison.
20. Simple Age Check
Create an HTML form with age input and submit button. Use JavaScript to check if age ≥ 18. Show
"Eligible to vote" or "Not eligible".
Hint: Use onclick or onsubmit. Compare using if(age >= 18).
21. Show/Hide Paragraph
Create a paragraph and a button. On button click, hide the paragraph. If clicked again, show it again
(toggle).
Hint: Use display = "none" and display = "block". Check current style.
22. Simple Multiplication Table
Take a number from user using textbox. On button click, display its multiplication table from 1 to 10
using JavaScript loop.
Hint: Use for loop. Display result in <div> using innerHTML +=.
Problems 23–27: HTML + Bootstrap (Basic)
23. Responsive Navbar using Bootstrap
Create a simple responsive navbar with Home, About, Contact links using Bootstrap. Add a brand
name "My Website".
Hint: Use Bootstrap CDN. Use <nav class="navbar navbar-expand-lg">.
24. Bootstrap Grid Layout (2 Columns)
Create a webpage with 2 equal columns using Bootstrap Grid. Left column shows text "About Me",
right column shows "My Skills". Use cards inside.
Hint: Use <div class="container"> and <div class="row">. Columns: col-md-6.
25. Bootstrap Button Styling
Create 3 buttons: Primary, Success, Danger using Bootstrap classes. On clicking any button, show an
alert "Button clicked" using JavaScript.
Hint: Use btn btn-primary, btn btn-success, btn btn-danger. Add onclick alert.
26. Bootstrap Form with Basic Styling
Create a simple contact form (name, email, message) using Bootstrap form classes. Make it
responsive and centered.
Hint: Use form-control class for inputs. Use mb-3 for margin.
27. Bootstrap Alert Component
Create a page with a button. When clicked, show a Bootstrap success alert saying "Form submitted
successfully!" (can be static for demonstration).
Hint: Use <div class="alert alert-success">. Initially hide it, show on button click.
Problems 28–32: PHP Only (Very Basic)
28. Display Welcome Message using PHP
Write a PHP script to display "Welcome to Web Development Practical Exam" on the browser.
Hint: <?php echo "Welcome..."; ?>. Save as .php file.
29. Show Current Date in PHP
Write a PHP script to display today's date in format: 08-05-2026.
Hint: echo date('d-m-Y');
30. Simple POST Form in PHP
Create an HTML form asking for user's name. On submit, PHP displays "Hello [name]". Use POST
method.
Hint: Use $_POST['name']. Check if($_SERVER["REQUEST_METHOD"] == "POST").
31. Print Array using PHP
Create an indexed array of 3 colors (Red, Green, Blue). Use PHP foreach loop to display them in an
unordered list.
Hint: $colors = array("Red", "Green", "Blue"); then echo <li> inside loop.
32. Simple String Length using PHP
Accept a word from HTML form. Use PHP to display its length using strlen().
Hint: echo strlen($_POST['word']);
Problems 33–40: HTML + CSS + PHP (Basic Integration)
33. Simple Interest Calculator (PHP + HTML + CSS)
Create a styled HTML form (principal, rate, time). On submit, calculate simple interest using PHP and
display result on same page.
Hint: Formula: ($p * $r * $t)/100. Use isset($_POST['submit']).
34. Student Result Display using PHP Array
Store marks for 3 subjects in a PHP indexed array. Calculate total and percentage. Display in HTML
table with CSS styling.
Hint: Use array(70, 80, 65). Total = array_sum(). Percentage = (total/300)*100.
35. Even-Odd Checker (PHP + CSS)
Create a number input form. Use PHP to check if number is even or odd. Style the output with colored
background using CSS.
Hint: Use modulo $num % 2 == 0. Apply CSS class dynamically.
36. Simple Login Check (PHP + HTML + CSS)
Create a login form (username: "admin", password: "12345"). Use PHP to check credentials and
display success or error message. Style with CSS.
Hint: Hardcoded check: if($user == "admin" && $pass == "12345").
37. Reverse String using PHP + Form
Accept any word from HTML form. Use PHP strrev() to display reversed string. Apply CSS for form
styling.
Hint: echo strrev($_POST['word']);
38. Vowel Counter using PHP
Create a form to accept a sentence. Use PHP to count number of vowels (a, e, i, o, u) in it. Display count
with CSS styling.
Hint: Use strlen() and loop, or substr_count() with strtolower().
39. Simple Marksheet with Grade (PHP + CSS)
Take marks of 3 subjects via HTML form. Use PHP to calculate total, percentage, and grade
(A/B/C/D/F). Display in styled table.
Hint: Grade: ≥75 A, ≥60 B, ≥45 C, ≥35 D, else F.
40. Favorite Subject Storage using Session (PHP + HTML + CSS)
Create a form to enter favorite subject. Use PHP session to store it and display "Your favorite subject
is [subject]" on next page. Add basic CSS.
Hint: Start session_start(). Store $_SESSION['subject'] = $_POST['subject']. Retrieve and display.
****************