HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@gmail.
com
HTML & CSS Project
NB: where bulky amount of text need to be display on your web page, there is no need wasting
considerable amount time to type it. Random text can be generated either from your web editor
by typing lorem and pressing the Enter key or from your word processor by typing the formula
=rand(p,n) and pressing the Enter key, where p is a numeric value specifying the number of
paragraph and n the number of lines per paragraph.
Where images are required, use any image of your choice and resize it to the size as found in
the figures.
The aim of this tutorial project is to create web pages that have the same structure, formatting,
organization and style with any of the figure below.
Project1
Project2
Project3
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project4
Project5
Design an attractive web page showing the following list.
Department of Tourism
Government of Kerala
Tourist Destinations in Kerala
1. Beaches
a. Kovalam
b. Muzhuppilangad
c. Kappad
2. Hill Stations
i. Munnar
ii. Wayanad
iii. Gavi
3. Wildlife
Iravikulam
Muthanga
Kadalundi
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project6
CSS
Project7
Associate CSS properties to the div tag to obtain the following divisions:
1. Display the divisions as inline elements. Observe the changes in divisions’ size.
2. What difference would it make if the divisions used absolute positioning?
3. Get the divisions to overlap in a way that each shows on the screen.
4. Position the divisions with higher number values on top of the lower number values.
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project8
Project9
Project10
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project11
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project12
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project13
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project14
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project15
Project16
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project17
Project18
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project19
Project20
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project21
Project22
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project23
Project24
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project25
Design the following tables using HTML.
Project26
Project27
Design the following catalogue of products for an IT shop using HTML.
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project28
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project29
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project30
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project31
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project32
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project33
Project34
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project35
Design a simple web page named [Link] as shown below.
Project36
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project37
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
HND-SWE/Year 1 HTML & CSS By TATSOPTEU E ENDELLY / tatsopt@[Link]
Project38