Scribd
Upload
10 views8 pages

Index

The document outlines 8 parts (A and B) that involve creating various web elements using HTML5, CSS3, JavaScript, and Canvas. The tasks include building pages for a college website, forms, toggling images, login pages, modeling the solar system, drawings using SVG, a clock, calculator, quiz, image stacking, truck animation, paint app, and canvas composition.

Uploaded by

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

Index

The document outlines 8 parts (A and B) that involve creating various web elements using HTML5, CSS3, JavaScript, and Canvas. The tasks include building pages for a college website, forms, toggling images, login pages, modeling the solar system, drawings using SVG, a clock, calculator, quiz, image stacking, truck animation, paint app, and canvas composition.

Uploaded by

jNgl Circus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

SI. No.

PART-A PAGE NO
1 Create a home page for a college website containing all latest 1-4
HTML5 tags like
<article>, <aside>, <nav>, <header>, <footer>, <section>,
<figure> and in <nav> create hyperlinks for courses, facilities
and contact details.
On clicking
• Course hyperlink, display the page with course names
offered in the college using ordered list,
• Facilities hyperlink, display the page describing the facilities
using unordered list
• Contact hyperlink, display the page to show phone
number, email and address inseparate columns with
respective headings.

2 Design a HTML5 web page containing form with text, password, 5-8
number, range, email, url, file, submit and reset elements which
must be styled using CSS3 according to following screen shot

Important points to be followed:


● Styling must be exactly the same as shown in the above
screen shot (with border radius, box shadow andcolours).
● Submit and Reset buttons must change their colour on
mouse hovering
● Name and passwords should not be empty. If they
aremust provide error message when clicked submit.
● When clicked on submit button email, Profile URLs must be
validated for proper input.
● Contact number must contain only 10 digits not lesserand
not more.
● Clicking on Reset button must clear all fields’ entry
3 Create an HTML5 web page which shows a smiling face initially 9-11
and a button on clicking the button it should toggle between
smiling face and sad face. Use only one button. And faces should
be drawn using canvas elements. Faces must beexactly like the
following screen shots.
4 Design a mock login page and style it using CSS3. Initially login 12-15
page should look like the following screen shot

And while mouse is hovered on SUBMIT button it should looklike

5 Create a web page to model solar system using canvas element 16-17
animation, where it contains sun, earth and moon (allmust be
created using canvas shapes not images). Earth should revolve
around sun and moon should revolve around earth
simultaneously. Sample screenshot below:

6 Create the following drawing in html page using only SVG 18-19
7 Create the following drawing using SVG 20-21

8 Create a web page using HTML and CSS to create a timetableas 22-25
follows:
Sl.No. PART-B PAGE NO
1 Create a web page using HTML5 canvas element to show a clock 26-28
which changes time for every second minute and hours (asthat of
an analog clock). Clock should have second, minute and hour
needles and minute marking must be there (as shown in screen
shot).

2 Create a web page containing simple calculator which should 29-32


basic arithmetic (+,-,*,/) operation on two floating point numbers
and show result. Validations to be followed:
● (Decimal point) should be taken only once for an
operand.
● Operand can be negative.
● Division by zero must be shown proper error message in
result. Sample screen shot:

3 Create a HTML page make a quiz game where user should answer 33-37
one question at a time, answers must be shown in radio buttons.
Without submitting the answer quiz should not move to the next
question (Minimum five questions must be there). Whenthe user
wishes to get score (using score button) , the score should be
displayed in alert message. All the question must be loaded in
same page (no page navigation is allowed) Sample screen shot:
4 Create a web page using HTML/CSS which contains cards 38-42
(shown as a stack of cards) with image of a tourist place and
below that is a thumbnail (shown in circle with image), when
mouse hovers over thumbnail corresponding card comes in front
and also small description about the tourist place will be
displayed. All these must happen using css animation and
transition.
Initial interface:

Interface should look like below screenshot when mouse hovered


on thumbnail:

(Java script should not be used to animate.)

5 Create a web page using HTML5/CSS3 to animate a truck 43-45


movement. While truck moves trees should move in the
background. Output screen shot:
For tree, truck and wheels download the images from the following
URLs.
https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/tree.svg
https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/truck.svg
https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/wheels.s
vg
Animation must be pure CSS and Java script should not be used.

6 Create a simple paint app which draws lines based on the 46-48
selected colour (chosen using color input) with selected
thickness (chosen using number input) and there must be clear
button clear the canvas. Sample screen shot:

7 Create web page using HTML5 canvas element to illustrate all 49-51
canvas composition. Output must exactly look like the following
screenshot:

8 Create a web page which must be as shown in below image using 52-55
HTML5, SVG and CSS3. Here Mountain must be drawnusing
SVG, Stars in sky changes their position randomly for every time
page is loaded (java script can be used). Sky and stars must be
created using <canvas>element

Note: No Online (live access) CSS files must be used.

You might also like