Tasks:
1. Create a webpage that includes a scrolling header message, a table displaying
details of your favorite movies (such as name, genre, year, and rating), an
image of your favorite actor/actress, a movie trailer video with controls, and
an audio player for a movie soundtrack that auto-plays when the page loads.
2. Design a webpage that includes a horizontal navigation menu with links to
"Home," "About," "Services," and "Contact," followed by a section that
displays a list of your favorite books in a neat table with columns for Title,
Author, and Genre. Below the table, insert an image of the book cover for one
of the books, a video review of the book, and an audio clip of an author
interview.
3. Create a portfolio webpage with a header that scrolls a welcome message
across the screen, followed by a section that includes a table of your recent
projects with columns for Project Name, Description, and Date. Below the
table, add an image of a screenshot from one of the projects, a video tutorial
on the project, and an audio description of the project.
4. Create a basic HTML page introducing yourself. Design a webpage using
appropriate HTML tags that displays:
Your full name as a heading
A short paragraph describing yourself
A list of your hobbies using an unordered list
5. Create a simple resume web page using HTML. The resume should include:
Your name in an <h1> tag
A bio/summary using the <p> tag
A list of your skills using an unordered list
A list of your qualifications using an ordered list
6. Create a paragraph demonstrating the following text formatting tags:
Use the following tags in a single paragraph and observe their effect on text
appearance:
<b>, <strong>, <i>, <em>, <u>, <mark>, <small>
7. Create a nested list of a shopping category.
The main list should have categories like Fruits, Vegetables, Electronics.
Each category should include 3 relevant items using nested lists.
8. Create an ordered list of your semester subjects.
Use roman numerals for list markers
Start the numbering from IV using the start attribute
9. Create a student marks table using HTML table tags.
Your table should contain the following columns:
Name, Subject, Marks, Grade
Use <th> for headers and <td> for table data.
10. Create a webpage that displays two images using the <img> tag.
One image should be sized to 300x300px
The other image should be 500x400px
Include the alt attribute to show alternate text if the image doesn't load
11. Create a multimedia demo page using HTML.
Embed a video using the <video> tag with controls, height, and width
attributes
Embed an audio file using the <audio> tag with the controls attribute
12. Create a styled section using the <div> tag. The <div> should contain:
A heading titled "Notification"
A paragraph with any custom message
Add a border and padding using inline styles
13. Create a scrolling marquee using the <marquee> tag.
Add a scrolling text message from left to right
Add a marquee with an image scrolling vertically (either up or down)
14. Create a web page with a background image.
Use the background attribute in the <body> tag
Add a short paragraph over the background image describing it
15. Create a Student Registration Form Design a simple registration form with
the following fields:
Full Name (Text Input)
Email (Text Input)
Gender (Radio Buttons: Male, Female, Other)
Courses Interested (Checkboxes: C, Java, Python, HTML)
Location (Dropdown: Hyderabad, Vizag, Vijayawada)
About Yourself (Textarea)
A link at the bottom that says: “Already registered? Click here to login” (Use
anchor tag)
16. Online Course Enrollment Page
Instructions: Create an online course enrollment page:
Title of the page should be centered and prominent
Add an introductory paragraph
Include an image related to online learning
Form inputs: o Student Name o Age o Select your course (at least 4
options)
Choose your learning mode (Online, Offline, Hybrid)
Checkbox for: “I agree to the terms and conditions”
Include a text area for additional comments
17. Feedback Form for a Website Instructions: Create a feedback form that asks
users:
Name
Email
How did you hear about the website? (radio options: Google, Social Media,
Friend, Others)
What did you like the most? (checkboxes: UI Design, Speed, Content,
Responsiveness)
Rate us (dropdown with options from 1 to 5 stars)
Leave a message or comment in a large text area
Add a button to submit feedback
Include a link that takes the user back to the homepage
18. College Event Signup Page Instructions:
Design a form for a college tech fest:
Title should scroll from right to left
Include a short welcome message
Embed a short video or audio about the event
Provide a table listing different events and their timings
Registration form should ask:
o Name, Phone Number
o Select your department
o Select the events you want to participate in (at least 4 checkboxes)
o Add a section to share any past experience (text area)
Add a button to register
Include a link to view full event details (link to another page)
19. Job Application Form
Instructions: Design a job application form page:
Use a heading to label the page
Add a short paragraph describing the company
Inputs required:
o Applicant Name, Email ID
o Choose preferred job role (Backend, Frontend, Full Stack)
o Skills (checkboxes like HTML, CSS, Python, Java)
o Upload Resume (use a label here for now)
o Add a box where applicant writes about why they want this job
Add a submission button
Provide a clickable link: “Visit our company page”
20. Create a personal website homepage that includes:
A top section with your name and links to different pages (like Home,
Projects, and Contact).
A short paragraph describing your background.
An image of yourself with a short description below it.
21. Design a layout with two vertical panels:
The left panel should show any website of your choice.
The right panel should show Wikipedia.
Remove the divider between the two panels.
22. Build a form for event registration where:
Users can enter their full name, email, and phone number.
They can choose one gender option and select multiple interests (like music,
sports, art).
Users should be able to pick their city from a dropdown.
A comments box should be available for extra details.
Add buttons to submit, reset, and trigger a confirmation alert
23. Create a single webpage layout that includes:
A section displaying today’s news headline and summary.
Another section beside it displaying tips or advertisements.
A bottom section with author info, the year, and an email to contact
24. Build a payment selection form that groups options like UPI, Credit Card, and
Cash on Delivery under one box.
Add a label above this section describing it as a "Payment Method".
Each option should be selectable by clicking a circle.
25. Display a product offer where:
The original price is shown with a line through it.
The discounted price is highlighted.
A note says that new features are included (highlighted with underlining).
26. Design a layout for a blog with:
A title and navigation menu at the top.
A main article about a trip you took.
A sidebar with travel tips
A footer with your contact email and rights notice.
27. Simulate a science or math article:
Mention the chemical formula for water.
Show the square of a number in proper format.
Mention a quote from a famous scientist
28. Create a support form:
Group address and contact fields inside a boxed section.
Ask users to enter full name, mobile number, and address.
Add a heading to this section like “Delivery Info”
29. Develop a mini photo gallery:
Include one or two images from your favourite place.
Each image should include a small descriptive caption.
Arrange the images below a page title.
30. Create a Layout Using Universal and Type Selectors
Instructions:
Use the universal selector (*) to apply base styles like box-sizing, margin, and
padding.
Apply a common font-family and line-height to all elements.
Use type selectors (h1, p, ul, etc.) to style headings, paragraphs, and lists.
Include a header with a title, a content section with paragraphs, and a footer.
31. Create a Login Form Using the <fieldset> and <legend> Tags
Instructions:
Create a form with username and password input fields.
Wrap the form controls inside a <fieldset>
Add a <legend> with the label “Login Details”.
Style the legend to be bold and slightly larger for emphasis.
32. Style Elements Using Class and ID Selectors
Instructions:
Create a webpage with a title and two or more paragraphs.
Assign a class (e.g., .highlight) to one or more paragraphs to apply the same
style.
Assign a unique ID (e.g., #main-title) to the heading.
Use CSS to:
o Style the ID with a specific font color and alignment.
o Style the class with a background color and padding.
33. Design a timetable using css
34. Create a webpage where you style multiple elements using a class selector.
Apply the following styles:
Set the text color to blue and font size to 18px for all elements that share the
same class.
35. Define a class selector that changes the background color of the elements to
lightgray.
Additionally, set the font-family to Arial and the padding to 10px.
Apply this class to at least two elements in the webpage
36. Use a class selector to style elements with the following properties:
o Set the border of the element to 2px solid black.
o Change the width to 200px and height to 100px.
Ensure these styles are applied to elements with this class
37. Welcome Section Design
Question:
Design a webpage section with a large main title and a brief introduction
below it.
The title should be bold and centered, while the introduction text should be
left-aligned with increased line spacing.
Add a reset to remove any default spacing for the entire page.
Selectors to Use:
Type Selector: For the main title (make it bold and center-aligned).
Type Selector: For the introduction text (left-aligned, line spacing).
Universal Selector: For resetting default spacing (margin and padding)
38. Product Showcase
Question:
Create a card showcasing a product with an image, a product name, a brief
description, and a clickable button for purchase.
The product name should be large and bold, while the description should be
in smaller text with a light background color.
The button should have a hover effect, changing its background color.
Selectors to Use:
Type Selector: For the product name (large and bold).
Type Selector: For the description (smaller text with light background).
Class Selector: For the purchase button (hover effect with background
change).
Universal Selector: For consistent font style and box-sizing.
39. Navigation Bar
Question:
Build a horizontal navigation bar with multiple clickable menu options.
Each option should change color when hovered.
One of the options should appear highlighted as the active option.
Selectors to Use:
Type Selector: For the menu options (basic styling).
Class Selector: For the active menu option (highlighted). Class Selector: For
hover effect on menu options (color change).
Universal Selector: For removing default margin and padding of the navbar.
40. User Profile Card
Question:
Design a card featuring a user’s profile picture, name, and a short bio.
The name should appear prominently, and the bio should be in a smaller
font.
Add a button below the bio that changes color when hovered.
Selectors to Use:
Type Selector: For the profile name (large font) and bio (smaller font).
Class Selector: For the button (hover effect with background change).
Universal Selector: For consistent padding and font style.
41. Blog Layout
Question:
Design a blog layout with a main title, multiple blog posts with a title and
description, and a side section for additional information.
The main title should be large and centered.
The blog posts should appear stacked vertically, each with a bold title and
normal text below.
The side section should be styled separately with a different background
color.
Selectors to Use:
Type Selector: For the main title (large and centered).
Type Selector: For the blog post titles and descriptions (bold for titles).
Class Selector: For the sidebar (different background color).
Universal Selector: For consistent font and layout.
