SRK INSTITUTE OF TECHNOLOGY, Enikepadu,Vijayawada 521108
Approved by AICTE, An Autonomous institution, Affiliated to JNTUK, Kakinada,
Accredited with NAAC ‘A’ grade, ISO 9001:2015 Certified Institution
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERIING
LAB MANUAL
FULL STACK DEVELOPMENT – 1
ACADEMIC YEAR 2024-25
(II CSE II Sem R23 Regulation)
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
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
[Link]
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
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.
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. Java Script 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. Java Script 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 aprogram 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. Java Script 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@[Link])
