Practical Questions for HTML, CSS & Java Script (3 Hours)
1. Create a simple webpage that includes:
A heading
A paragraph
An image
A link to another website
2. Build a registration form that includes:
Name, Email, Password, branch dropdowns, subjects’ checkboxes, and semester’s radio buttons and Submit
button (use bootstrap grid)
3. Create a button with hover effects that changes color and adds a shadow.
4. Build a 3-column layout using float, then replicate it using flexbox.
5. Create a Simple Web Page Layout
Figure Description:
---------------------------------
| Header (100% width, 80px height) |
---------------------------------
| Sidebar | Main Content |
| (30%) | (70%) |
---------------------------------
| Footer (100% width, 50px height)|
---------------------------------
Task:
Build this page layout using Flexbox or CSS Grid.
6. Build a Navigation Bar
Figure Description:
A horizontal bar with a logo on the left and 4 menu links on the right.
When hovered, the link background turns blue and text becomes white.
Task:
Create this using <nav>, <ul>, <li>, and CSS :hover effects.
7. Design a Login Page
Figure Description:
Centered box on a blurred background:
“Login” heading
Username, Password fields
“Login” button (blue, full width)
“Forgot password?” link at bottom
Task:
Use background-image with opacity overlay. Center the form using Flexbox (align-items and justify-content).
8. Build a Responsive Footer
Figure Description:
Footer divided into 3 sections:
Practical Questions for HTML, CSS & Java Script (3 Hours)
1. Company Info
2. Quick Links
3. Contact Info
Task:
Use Flexbox for alignment. Add icons (Font Awesome). On small screens, stack vertically.
9. Create a Blog Layout
Figure Description:
-------------------------------
| BLOG TITLE |
-------------------------------
| Image (left) | Blog Text (right) |
-------------------------------
Below that, show two smaller posts side-by-side.
Task:
Use semantic tags (<article>, <aside>, <section>). Add hover shadow on each post.
10. Create a Pricing Table
Figure Description:
Three pricing cards side-by-side:
“Basic”, “Pro”, “Enterprise”
Each has a plan name, price, and button.
The middle (Pro) plan card is highlighted with a blue background.
Task:
Create the structure with <div> and style with box-shadow and hover effects.
11. Simple Calculator
Create a calculator that takes two numbers and performs addition, subtraction, multiplication, and division using
prompt() and alert().
12. Table Generator
Ask for a number and print its multiplication table (1 to 10) dynamically in HTML.
13. Palindrome Checker
Check whether an entered string or number is a palindrome.
14. Largest of Three Numbers
Take three numbers and display which one is largest using nested if-else.
15. To-Do List
Create a simple to-do list where:
You can add new tasks
Mark them as complete
Delete tasks
Use HTML, CSS, and JS DOM methods (createElement, appendChild, removeChild).
16. Digital Clock
Display a live digital clock that updates every second using setInterval().
Practical Questions for HTML, CSS & Java Script (3 Hours)
17. Dynamic Table
Allow the user to input rows and columns, then dynamically generate a table with those dimensions.
18. Modal Popup
Create a modal (popup box) that opens when a button is clicked and closes when clicking outside the modal or on “X”.
19. JavaScript Form Validation (10+ Fields)
You are designing a user registration form for a company’s internal employee portal.
Your task is to validate the form using JavaScript before submission — no field should be left blank, and data must
meet all validation rules.
📋 Form Fields (Total 12)
Field Type Validation Rules
1️⃣ Full Name Text Only alphabets and spaces, min length 3
2️⃣ Username Text 5–15 characters, no spaces
3️⃣ Email Address Email Must contain “@” and a valid domain
At least 8 characters, must include one uppercase, one lowercase, one
4️⃣ Password Password
number, and one special character
5️⃣ Confirm
Password Must match the Password field
Password
6️⃣ Mobile Number Number Must be exactly 10 digits
Radio
7️⃣ Gender One option must be selected
Buttons
8️⃣ Date of Birth Date Must not be empty; user must be at least 18 years old
9️⃣ Address Textarea Minimum 10 characters
🔟 Country Dropdown Must select a country (not the default “Select”)
1️⃣1️⃣ Skills Checkbox At least one skill must be selected
1️⃣2️⃣ Terms &
Checkbox Must be checked before submission
Conditions