MSEDC – C.C in Web Designing

Practical Examination

(HTML & CSS)

Time: 2 Hours Maximum Marks: 80
Q1. Design and develop a two-page responsive website for “Inspire College of IT” using HTML5 and CSS3 as per the specifications given below. [40 Marks]
Page 1 – index.html (Home page):
  1. Display college name in a styled header with logo (any placeholder image may be used).
  2. Add a horizontal navigation bar with links: Home, Courses, Admissions, Contact.
  3. Create three sections on the page: “About College”, “Vision & Mission”, and “Facilities” with proper headings and paragraphs.
  4. Include at least one unordered list for facilities and one ordered list for admission steps.
Page 2 – courses.html (Courses page):
  1. Create a table listing minimum 4 courses with columns: Course Code, Course Name, Duration, and Fees.
  2. Highlight the table header row with a different background color using CSS.
  3. Add a “Back to Home” link at the bottom to go back to index.html.
CSS Requirements:
  1. Set a common font family and background color for the body and center the main content area.
  2. Style the navigation bar with background color, padding and hover effect (change link color on hover).
  3. Use margin, padding and border-radius to give a card-like look to the content sections.
Suggested marks distribution:
Q2. Create a styled registration form webpage exam-registration.html for “MSEDC Exam Portal” using HTML5 and CSS3 as per the following requirements. [40 Marks]
Form design requirements:
  1. Set page title as “Inspire Exam Registration” and main heading as “Online Exam Registration Form”.
  2. Include the following form fields: Full Name, Email, Mobile Number, Date of Birth, Gender (radio buttons), Course (dropdown with at least 4 options), Exam Centre (text) and Address (textarea).
  3. Add Submit and Reset buttons.
  4. Make all fields except Address mandatory using the HTML required attribute.
Layout & alignment:
  1. Center the form on the page using CSS and give it a fixed width.
  2. Use a light background color for the page and a white or light card background for the form.
  3. Add proper labels next to each input and maintain neat vertical spacing between fields.
CSS styling:
  1. Use border, padding and box-shadow to make the form look like a card.
  2. Style the Submit button with a different background color and change its color on hover using the :hover selector.
  3. Use at least four different CSS properties such as color, font-size, background-color, border-radius and text-align.
Suggested marks distribution: