Scribd
Upload
5 views6 pages

HTML & CSS

The assignment requires students to create a responsive student registration website titled 'Beautex Student Registration Portal' using only HTML and CSS. It includes building multiple pages such as Home, About, Courses, Registration, and Contact, with specific content and layout requirements for each page. Additionally, students must implement CSS styling for various elements, including navigation bars, tables, forms, and overall page design.

Uploaded by

Douglas Ndinyo
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views6 pages

HTML & CSS

The assignment requires students to create a responsive student registration website titled 'Beautex Student Registration Portal' using only HTML and CSS. It includes building multiple pages such as Home, About, Courses, Registration, and Contact, with specific content and layout requirements for each page. Additionally, students must implement CSS styling for various elements, including navigation bars, tables, forms, and overall page design.

Uploaded by

Douglas Ndinyo
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

HTML & CSS Assignment

Topic: Build a Modern Student Registration Website

Objective

Create a responsive student registration website using HTML and CSS only.
This assignment will help students practice:

 HTML structure
 Forms
 Tables
 Lists
 Images
 Navigation bars
 CSS styling
 Layout design

PROJECT TITLE

“Beautex Student Registration Portal”

PART 1: HTML REQUIREMENTS

Create the following pages:

1. [Link] → Home Page


2. [Link] → About Us Page
3. [Link] → Courses Page
4. [Link] → Registration Form
5. [Link] → Contact Page

PART 2: WEBSITE REQUIREMENTS

1. Navigation Bar

Create a navigation menu with links to all pages.

Example:

 Home
 About
 Courses
 Register
 Contact

2. Home Page ([Link])

The home page should contain:

1
Header Section

Include:

 College name
 Motto/tagline
 Logo/image

Example:

<h1>Beautex Technical Training College</h1>


<p>Empowering Minds. Shaping Innovation.</p>

Hero Section

Add:

 Welcome message
 Large banner image
 “Apply Now” button

Courses Offered

Use an unordered list to display courses.

Example:

<ul>
<li>ICT</li>
<li>Hair Dressing</li>
<li>Beauty Therapy</li>
<li>Barbering</li>
</ul>

Footer

Include:

 Email
 Phone number
 Copyright

3. About Page ([Link])

Include:

 Brief history of the college


 Mission statement
 Vision statement
 Principal’s message
 College image

2
Use paragraphs and headings properly.

4. Courses Page ([Link])

Create a table showing courses.

Example columns:

Course Name Duration Fees


ICT 6 Months Ksh 25,000
Beauty 1 Year Ksh 40,000
Therapy

Requirements:

 Use table borders


 Add table heading colors using CSS
 Add hover effect on rows

5. Registration Page ([Link])

Create a student registration form.

The form should contain:

Personal Details

 Full name
 Gender
 Date of birth
 ID number
 Email
 Phone number

Course Details

 Course selection
 Intake month

Other Fields

 Password
 Confirm password
 Upload photo
 Comments textarea

Buttons

 Submit button

3
 Reset button

Form Requirements
Use the following HTML form elements:

 <input>
 <label>
 <select>
 <textarea>
 <button>

6. Contact Page ([Link])

Include:

 Address
 Phone number
 Email
 Google map image
 Social media links

PART 3: CSS REQUIREMENTS

Create a separate CSS file called:

[Link]

Link it to all pages.

Example:

<link rel="stylesheet" href="[Link]">

CSS TASKS

Students must style the following:

1. Body Styling

Requirements:

 Change background color


 Set font family
 Remove default margin

Example:

4
body{
font-family: Arial;
background-color: #f4f4f4;
margin: 0;
}

2. Navigation Bar Styling

Requirements:

 Horizontal menu
 Background color
 Hover effects

Example:

nav{
background-color: maroon;
padding: 15px;
}

nav a{
color: white;
text-decoration: none;
margin: 15px;
}

nav a:hover{
color: gold;
}

3. Hero Section Styling

Requirements:

 Background image/color
 Center text
 Add button styling

4. Table Styling

Requirements:

 Borders
 Padding
 Hover effect
 Alternate row colors

Example:

table{
width: 100%;
border-collapse: collapse;
}

5
th{
background-color: maroon;
color: white;
}

5. Form Styling

Requirements:

 Input spacing
 Rounded corners
 Button colors
 Responsive width

Example:

input, select, textarea{


width: 100%;
padding: 10px;
margin-top: 5px;
}

6. Image Styling

Requirements:

 Responsive images
 Rounded corners
 Shadows

7. Footer Styling

Requirements:

 Background color
 Center text
 Padding

You might also like