Course Details
Class: II - Year, B. Tech Semester: 2
Academic Year: 2024-2025
Course Title: FULLSTACK DEVELOPMENT–1 Course Code: 23A52401
Program/Dept.: Computer Science and Engineering (CSE) Regulation: R-23
Faculty: I.KRANTHI (NECN) ,K.SARITHA(NECG),P.SUREKHA(NECG)
II Sem R23
FULLSTACK DEVELOPMENT–1
Hours / Week Total Credit Max Marks
Course Code hrs
L T P C CIE SEE TOTAL
23A52401 0 1 2 48 1.5 30 70 100
Course Objectives: The main objectives of the course are to
• Make use of HTML elements and their attributes for designing static WebPages
• Build a webpage by applying appropriate CSS styles to HTML elements
• Experiment with Java Script to develop dynamic web pages and validate forms
Course Outcomes: After successful completion of this course, the students should be able to:
CO 1 Design Websites.(BL6)
CO 2 Apply Styling to WebPages. (BL4)
CO 3 Make WebPages interactive.(BL6)
CO 4 Design Forms for applications.(BL6)
CO 5 Choose Control Structure based on the logic to be implemented.(BL3)
CO6 Understand HTML tags, Attributes and CSS properties(BL2)
Experiments covering the Topics:
● Lists, Links and Images
● HTML Tables, Forms and Frames
● HTML5 and Cascading Style Sheets, Types of CSS
● Select or 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
● Node.js
COURSE CONTENT CO
List of Experiments
TASK–1 CO1
1. Lists, Links and Images
a. Write a HTML program, to explain the working of lists.
Note: It should have an ordered list, un ordered 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
TASK–2
2. HTML Tables, Forms and Frames
a. Write a HTML program, to explain the working of tables. (usetags:<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).
TASK–3 CO1
3. HTML5andCascadingStyleSheets,TypesofCSS
a. WriteaHTMLprogram,thatmakesuseof<article>,<aside>,<figure>,<figcaption>,
<footer>,<header>,<main>,<nav>,<section>,<div>,<span>tags.
b. Write a HTML program, to embed audio and video into HTML webpage.
c. Write a program to apply different types (or levels of styles or style specification formats)
-inline,internal,externalstylestoHTMLelements.(identifyselector,propertyand value).
TASK–4 CO1
4. Selector forms
a. Write a program to apply different types of selector forms
● Simples elector (element, id, class, group, universal)
● Combinator selector (descendant, child, adjacent sibling, general sibling)
● Pseudo-class selector
● Pseudo-element selector
● Attribute selector
TASK–5 CO2
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. Writeaprogram,toexplaintheimportanceofCSSBoxmodelusing
i. Content ii. Border iii. Margin iv. padding
TASK–6 CO2
6. Applying JavaScript-internal and external, I/O, Type Conversion
a. Write a program to embed internal and external JavaScript in a webpage.
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
TASK–7 CO2
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.
TASK–8 CO3
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 1to10 numbers using for, while and do-while loops.
d. Writeaprogramtoprintdatainobjectusingfor-in,for-eachandfor-ofloops
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)
TASK–9 CO4
9. Java script Functions and Events
a. Design a appropriate function should be called to display
● Factorial of that number
● Fibonacci series upto that number
● Prime numbers upto that number
● 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
1. Factorial of that number
2. Fibonacci series upto that number
3. Prime numbers upto that number
4. 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 length10 digits)
iii. E-mail(should contain form at like [email protected])
Textbooks:
1. Programming the World Wide Web, 7thEdition, RobetWSebesta, Pearson,2013.
2. WebProgrammingwithHTML5,CSS and JavaScript, JohnDean, Jones&Bartlett Learning, 2019
(Chapters 1-11).
3. Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React, and Node,
Vasan Subramanian, 2nd edition, APress, O’Reilly.
Web Links:
1. https://www.w3schools.com/html
2. https://www.w3schools.com/css
3. https://www.w3schools.com/js/
4. https://www.w3schools.com/nodejs
https://www.w3schools.com/typescript
NECG Faculty Signature NECG CSE-HOD NECG Principal
NECN Faculty Signature NECN CSE-HOD NECN Principal
