R23 Regulations

JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY - GURAJADA -

VIZIANAGARAM
VIZIANAGARAM – 535 003 Andhra Pradesh (India)
(Established by Andhra Pradesh Act No.22 of 2021)

FULL STACK DEVELOPMENT – 1

(Skill Enhancement Course)
Course Objectives:
The main objectives of the course are to
• Make use of HTML elements and their attributes for designing static web pages
• Build a web page by applying appropriate CSS styles to HTML elements
• Experiment with JavaScript to develop dynamic web pages and validate forms

Course Outcomes:
1. Design Websites. (L6)
2. Apply Styling to web pages. (L3)
3. Make Web pages interactive. (L3)
4. Design Forms for applications. (L6)
5. Choose Control Structure based on the logic to be implemented. (L4)

Experiments covering the Topics:

• Lists, Links and Images
• HTML Tables, Forms and Frames
• HTML 5 and Cascading Style Sheets, Types of CSS
• Selector forms
• CSS with Color, Background, Font, Text and CSS Box Model
• Applying JavaScript - internal and external, I/O, Type Conversion
• JavaScript Conditional Statements and Loops, Pre-defined and User-defined Objects
• JavaScript Functions and Events

Sample Experiments:

1. Lists, Links and Images

a. Write a HTML program, to explain the working of lists.
Note: It should have an ordered list, unordered list, nested lists and ordered list in an
unordered list and definition lists.
b. Write a HTML program, to explain the working of hyperlinks using <a> tag and href, target
Attributes.
c. Create a HTML document that has your image and your friend’s image with a specific
height and width. Also when clicked on the images it should navigate to their respective
profiles.
d. Write a HTML program, in such a way that, rather than placing large images on a page, the
preferred technique is to use thumbnails by setting the height and width parameters to
something like to 100*100 pixels. Each thumbnail image is also a link to a full sized version
of the image. Create an image gallery using this technique
 R23 Regulations

JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY - GURAJADA -

VIZIANAGARAM
VIZIANAGARAM – 535 003 Andhra Pradesh (India)
(Established by Andhra Pradesh Act No.22 of 2021)

2. HTML Tables, Forms and Frames

a. Write a HTML program, to explain the working of tables. (use tags: <table>, <tr>, <th>,
<td> and attributes: border, rowspan, colspan)
b. Write a HTML program, to explain the working of tables by preparing a timetable. (Note:
Use <caption> tag to set the caption to the table & also use cell spacing, cell padding, border,
rowspan, colspan etc.).
c. Write a HTML program, to explain the working of forms by designing Registration form.
(Note: Include text field, password field, number field, date of birth field, checkboxes, radio
buttons, list boxes using <select>&<option> tags, <text area> and two buttons ie: submit
and reset. Use tables to provide a better view).
d. Write a HTML program, to explain the working of frames, such that page is to be divided
into 3 parts on either direction. (Note: first frame → image, second frame → paragraph,
third frame → hyperlink. And also make sure of using “no frame” attribute such that frames
to be fixed).

3. HTML 5 and Cascading Style Sheets, Types of CSS

a. Write a HTML program, that makes use of <article>, <aside>, <figure>, <figcaption>,
<footer>, <header>, <main>, <nav>, <section>, <div>, <span> tags.
b. Write a HTML program, to embed audio and video into HTML web page.
c. Write a program to apply different types (or levels of styles or style specification formats)
- inline, internal, external styles to HTML elements. (identify selector, property and value).

4. Selector forms
a. Write a program to apply different types of selector forms
i. Simple selector (element, id, class, group, universal)
ii. Combinator selector (descendant, child, adjacent sibling, general sibling)
iii. Pseudo-class selector
iv. Pseudo-element selector
v. Attribute selector

5. CSS with Color, Background, Font, Text and CSS Box Model
a. Write a program to demonstrate the various ways you can reference a color in CSS.
b. Write a CSS rule that places a background image halfway down the page, tilting it
horizontally. The image should remain in place when the user scrolls up or down.
c. Write a program using the following terms related to CSS font and text:
i. font-size ii. font-weight iii. font-style
iv. text-decoration v. text-transformation vi. text-alignment
d. Write a program, to explain the importance of CSS Box model using
i. Content ii. Border iii. Margin iv. padding

6. Applying JavaScript - internal and external, I/O, Type Conversion

a. Write a program to embed internal and external JavaScript in a web page.
b. Write a program to explain the different ways for displaying output.
c. Write a program to explain the different ways for taking input.
 R23 Regulations

JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY - GURAJADA -

VIZIANAGARAM
VIZIANAGARAM – 535 003 Andhra Pradesh (India)
(Established by Andhra Pradesh Act No.22 of 2021)

d. Create a webpage which uses prompt dialogue box to ask a voter for his name and age.
Display the information in table format along with either the voter can vote or not

7. JavaScript Pre-defined and User-defined Objects

a. Write a program using document object properties and methods.
b. Write a program using window object properties and methods.
c. Write a program using array object properties and methods.
d. Write a program using math object properties and methods.
e. Write a program using string object properties and methods.
f. Write a program using regex object properties and methods.
g. Write a program using date object properties and methods.
h. Write a program to explain user-defined object by using properties, methods, accessors,
constructors and display.

8. JavaScript Conditional Statements and Loops

a. Write a program which asks the user to enter three integers, obtains the numbers from the
user and outputs HTML text that displays the larger number followed by the words
“LARGER NUMBER” in an information message dialog. If the numbers are equal, output
HTML text as “EQUAL NUMBERS”.
b. Write a program to display week days using switch case.
c. Write a program to print 1 to 10 numbers using for, while and do-while loops.
d. Write a program to print data in object using for-in, for-each and for-of loops
e. Develop a program to determine whether a given number is an ‘ARMSTRONG NUMBER’
or not. [Eg: 153 is an Armstrong number, since sum of the cube of the digits is equal to the
number i.e.,13 + 53+ 33 = 153]
f. Write a program to display the denomination of the amount deposited in the bank in terms
of 100’s, 50’s, 20’s, 10’s, 5’s, 2’s & 1’s. (Eg: If deposited amount is Rs.163, the output
should be 1-100’s, 1-50’s, 1- 10’s, 1-2’s & 1-1’s)

9. JavaScript Functions and Events

a. Design a appropriate function should be called to display
i. Factorial of that number
ii. Fibonacci series up to that number
iii. Prime numbers up to that number
iv. Is it palindrome or not
b. Design a HTML having a text box and four buttons named Factorial, Fibonacci, Prime, and
Palindrome. When a button is pressed an appropriate function should be called to display
i. Factorial of that number
ii. Fibonacci series up to that number
iii. Prime numbers up to that number
iv. Is it palindrome or not
c. Write a program to validate the following fields in a registration page
i. Name (start with alphabet and followed by alphanumeric and the length should not
be less than 6 characters)
ii. Mobile (only numbers and length 10 digits)
iii. E-mail (should contain format like xxxxxxx@xxxxxx.xxx)