File questions
Frontend Web Development
1. Create a simple webpage structure using HTML that includes:
A header with the website title
A navigation bar with 4 links (Home, About, Services, Contact)
A main content section with two paragraphs and one image
A footer with copyright information
2. Design a webpage that contains:
An ordered list of your favorite websites
An unordered list of your hobbies
Add hyperlinks to each website in the list that open in a new tab
3. Create an HTML data table displaying at least 5 students’ details (Name, Roll No, Course, Email, Marks).
Apply CSS to:
Add borders
Change header background color
Center-align text
3. Design a webpage to demonstrate different CSS selectors (element, class, ID). Also apply typography
styles — change font family, size, weight, and line spacing for different text sections.
4. Create a responsive webpage with two columns that automatically become a single column on screens
smaller than [Link] media queries and test in browser by resizing the window.
5. Develop a simple webpage using Bootstrap that includes:
A navigation bar
A responsive image grid (3 images per row on large screens, 1 per row on mobile)
A styled button and a form with input fields
6. Create a simple webpage using basic HTML tags (heading, paragraph, image, link) and apply UX/UI
principles such as layout, color harmony, and typography.
7. Design a webpage layout using HTML <div> tags that includes a header, navigation bar, content section,
sidebar, and footer.
8. Create an HTML page that uses ordered lists, unordered lists, and nested lists to present information.
9. Create a data table using HTML with proper headings, borders, cell spacing, and cell padding.
10. Write a program to apply CSS selectors (element, class, ID, universal, group selectors) and style text
with color, font-size, and alignment.
11. Create a CSS Box Model demonstration page showing margin, padding, border, and content area in
different colors.
12. Create a two-column responsive layout using Flexbox or CSS Grid that adjusts automatically on mobile
screens.
13. Build a simple webpage using Bootstrap with a responsive navigation bar, buttons, and a grid-based
layout.
14. Create a webpage with JavaScript-based dropdown menu that expands or collapses on click.
15. Create an image slider using basic JavaScript (auto-slide or next/previous buttons).
16. Make a modal popup box that opens when a button is clicked and closes when the user clicks outside it.
17. Create a form with validation using JavaScript (validate name, email, password length).
18. Optimize a webpage by compressing images, using alt attributes, reducing CSS/JS file sizes, and
showing the before/after page size difference.
19. Create a webpage with SEO best practices (title tag, meta description, keywords, alt text, heading
structure, clean URL example) and make it accessibility-friendly (proper contrast, semantic tags, ARIA
labels).