Techspire College

Fundamentals of Web Development

Lab 2
Part 1: Creating HTML Documents

Name: Sangam Humagai

Section: A4
University ID: NP069751
Date:

1
1. Description
The HTML files collectively form a multi-page website for "ABC Restaurant." The
main page, index.html, features the restaurant's name, operating hours, and
links to the breakfast, lunch, and dinner menu pages. The operating hours are
specified as Monday to Saturday from 7:30 am to 11:30 pm, with the restaurant
being closed on Sundays. Each menu page (breakfast.html, lunch.html, and
dinner.html) shares a similar layout, presenting the restaurant's name and the
respective menu title (Breakfast, Lunch, or Dinner). These pages include a table
showcasing images, names, and prices of the dishes. Additionally, each menu
page provides a link back to the homepage for easy navigation.

2. Objective
 Present the Restaurant's Brand: Display the restaurant's name
prominently and maintain a consistent, visually appealing layout across all
pages to reinforce brand identity.

 Clearly Communicate Operating Hours: Clearly list the operating hours

and closure details to inform customers about the restaurant's availability.

 Organize and Detail Menu Options: Develop separate pages for

breakfast, lunch, and dinner menus, each featuring detailed descriptions,
images, and prices of the dishes.

 Enhance User Navigation: Implement user-friendly navigation with

hyperlinks, enabling users to easily move between the main page and
specific menu pages.

 Ensure Responsiveness: Design the website to be responsive, ensuring it

works well on various devices, including desktops, tablets, and smartphones.

2
3. Code
3.1 Index.html

3.1.1 Output:

3
3.2 Breakfast.html

3.2.1 Output

4
3.2.2 Lunch.html

3.2.2 Output:

5
Dinner.html

3.2.3 Output:

4. Conclusion
The "ABC Restaurant" website strives to establish a robust brand presence,
clearly communicate operating hours, and provide detailed menu information. It
focuses on ensuring easy navigation and maintaining responsiveness across
various devices. These efforts aim to enhance user experience, aid in informed
decision-making, and boost the restaurant's online visibility and customer
satisfaction.

6
 Techspire College

Fundamentals of Web Development

Lab 8
Exercise 1: Input from the user and calculation
Exercise 2: Input From the User and display in an alert box

Name: Sangam Humagai

Section: A4
University ID: NP069751
Date:

7
1. Description
The HTML document "lab 8_1" utilizes JavaScript to execute basic arithmetic
operations with user-provided numbers. It prompts the user to input two
numbers, then calculates and dynamically displays their sum, difference,
product, and quotient on the webpage. This exercise illustrates the practical use
of JavaScript for real-time calculations within an HTML setting, highlighting
essential concepts in client-side scripting and interactive web development.

2. Objective
 Demonstrate JavaScript Integration: Show how JavaScript can be
integrated into an HTML document to perform arithmetic operations.
 Implement User Input Handling: Prompt users to enter numerical values
and handle them using JavaScript's parseFloat() function.
 Perform Basic Arithmetic Operations: Calculate the sum, difference,
product, and division of two numbers entered by the user.
 Display Results Dynamically: Use JavaScript's innerHTML to dynamically
display each arithmetic operation and its result on the webpage.
 Illustrate Interactive Web Development: Showcase the interactive
nature of web development through real-time calculations and updates
based on user input.

8
3. Code

3.1 Output

9
Exercise 2: Input from user and display in alert box (input person’s name and
year born to the prompt box and display the name and current age in the alert
box as per outcome below)

1. Description
This HTML page titled "Age Calculator" features a button labelled "Calculate Age"
that, when clicked, prompts the user to enter their name and birth year using
JavaScript. The birth year is converted to an integer, and the user's age is
calculated based on the current year. An alert then displays the user's name and
calculated age. This interactive application demonstrates the use of JavaScript
for real-time age calculation based on user input within an HTML environment,
providing a user-friendly and engaging experience.

2. Objective
 Implement User Interaction: Develop a user-friendly interface using HTML
and JavaScript to prompt users for their name and birth year.
 Calculate Age Dynamically: Use JavaScript to compute the user's age
based on the current year and the birth year provided by the user.
 Display Results with Alert: Utilize JavaScript's alert() function to
dynamically display the user's name and calculated age in an alert box.
 Demonstrate Real-time Computation: Showcase how JavaScript enables
real-time calculations and interactive user feedback within an HTML
environment.

10
3. Code

4. Output

11
5. Conclusion
These lab exercises demonstrated practical applications of HTML and JavaScript
for interactive web development. The "Age Calculator" showcased user
interaction and real-time age calculation using JavaScript, while the "Arithmetic
Operations" example highlighted dynamic calculation and display of basic
arithmetic functions. Both exercises emphasized the importance of responsive
design and user-friendly interfaces in creating engaging web applications. They
provided foundational skills in client-side scripting and interactive web
development, essential for building functional and user-centric web solutions.

12
 Techspire College

Fundamentals of Web Development

Lab 5
Exercise: Responsive Web Design

Name: Sangam Humagai

Section: A4
University ID: NP069751
Date:

13
 1.Description
The HTML document titled "Grid Layout" demonstrates a responsive web
page using CSS Grid. It features a header, eight content boxes, and a footer,
all arranged in a flexible grid format. The header and footer span across all
four columns, while the content boxes have specific column spans. The layout
adapts to different screen sizes: for screens narrower than 768px, the boxes
stack vertically, and for screens narrower than 600px, each box spans the full
width. This example illustrates how CSS Grid can be used to create
responsive, adaptable web layouts for various devices.

2.Objective
 To demonstrate the use of CSS Grid for creating flexible and responsive web
layouts.
 To design a web page that adapts its layout based on different screen sizes
and devices.
 To implement a header and footer that span the entire width of the grid.
 To apply unique styling and grid positioning to multiple content boxes.
 To showcase best practices in responsive web design for enhancing user
experience.

3. Code

Code Continue:

14
Code Continue…..

15
Code Continue:

4. Output
 Desktop View

16
 Mobile View

 Tablet View

17
5. Conclusion
The "Grid Layout" HTML page effectively showcases the use of CSS Grid for
creating a flexible and responsive web design. It organizes a header, eight
content boxes, and a footer within a dynamic grid structure that adapts
seamlessly to different screen sizes, ensuring an optimal user experience on all
devices. This exercise highlights CSS Grid's powerful capabilities in modern web
development, emphasizing the significance of responsive design and adaptable
layouts. The project successfully achieves its objectives by demonstrating CSS
Grid's flexibility, implementing responsive design principles, and enhancing
overall user engagement.

18
 Techspire College

Fundamentals of Web Development

Lab 9
Exercise 2: Tab Content Layout

Name: Sangam Humagai

Section: A4
University ID: NP069751
Date:

19
1. Description
The HTML document titled "Tab Content Layout" implements a tabbed navigation
interface using HTML, CSS, and JavaScript. It features three tabs ("Content1,"
"Content2," and "Content3"), each connected to a distinct content section with
unique background colors. When a tab is clicked, a JavaScript function hides all
content sections, shows the selected one, and highlights the active tab. This
layout demonstrates a straightforward method to create interactive, user-friendly
web pages, enabling users to switch between content sections without reloading
the page.

2. Objective
 Implement a Tabbed Navigation Interface: Use HTML, CSS, and
JavaScript to create a tabbed navigation system.
 Dynamically Display and Hide Content: Demonstrate how to show and
hide content sections based on user interaction.
 Enhance User Experience: Allow seamless switching between different
content sections to improve user experience.
 Apply CSS Styling: Use CSS to visually distinguish and add interactivity
to tabs and content areas.
 Create a Responsive Layout: Design a user-friendly and responsive
web page layout.

20
3. Code

21
4. Output

5.Conclusion

The "Tab Content Layout" effectively showcases the creation of an interactive

tabbed navigation system using HTML, CSS, and JavaScript. It enhances user
experience by allowing seamless switching between different content sections,
offering a clear and organized way to present information. This layout
demonstrates practical applications of dynamic content display, responsive
design, and user-friendly web development techniques. The project successfully
achieves its objectives by implementing a tabbed interface, demonstrating
dynamic content management, and creating an engaging web page layout.

22
 Techspire College

Fundamentals of Web Development

Lab 10
JavaScript – Form Manipulation

Name: Sangam Humagai

Section: A4
University ID: NP069751
Date:

23
 1.Description
The "Registration Form" project is a detailed implementation using HTML,
CSS, and JavaScript to collect user details with validation checks. It features
fields for Full Name, Username, Password, Confirm Password, Email Address,
Phone Number, and Home Address, all styled for user convenience. The
password fields are specially styled to visually indicate errors, enhancing user
experience. JavaScript is used for client-side validation to ensure all fields are
correctly filled out before submission. The script checks that passwords are
10-15 characters long, match each other, and that the email and phone
number follow valid formats. These validation checks ensure that users
provide accurate and properly formatted information, improving data
integrity and usability.

2. Objective
 Design a User-Friendly Registration Form: Create a registration form
with comprehensive input fields for user convenience.

 Implement Real-Time Client-Side Validation: Use JavaScript to

validate user inputs in real-time.

 Ensure Password Security: Enforce password length and matching

criteria to enhance security.

 Validate Email and Phone Number Formats: Check email and phone
number formats to maintain data integrity.

 Enhance User Experience: Provide clear visual feedback for errors to

improve user experience.

24
3. Code

25
4. Output
 Fill in all fields

 Password must be 10-15 characters long

 Please include @ in the email address

26
 Invalid Phone number format

 Password do not match

4. Conclusion
This project effectively showcases the development of a strong registration form
with thorough client-side validation. By incorporating checks for required fields,
password length, password confirmation, and the correct format for email and
phone numbers, the form ensures the collection of precise and secure user
information. This strategy not only boosts data integrity but also enhances the
user experience through instant feedback and clear error messages. The
emphasis on intuitive design and error handling underscores the significance of
creating user-friendly interfaces in web development.

27
 Techspire College

Fundamentals of Web Development

Lab 6
Part 2: Sub Menu
Part 3: Continue responsive layout

Name: Sangam Humagai

Section: A4
University ID: NP069751
Date:

28
Lab 6: Part 3 - Sub Menu
1.Description
This HTML document demonstrates a resizable interface where sections
expand when hovered over. It includes three main sections—HTML, CSS, and
JavaScript—each with subheadings that remain hidden until a hover action
reveals them. The design employs transitions to smoothly adjust the section
height and change background colors, improving user engagement. Styled
with a contemporary look, the layout uses the Arial font family and features
Alice blue-colored headings for better readability and visual appeal.

2. Objective
 Develop a Resizable Interface: Design a web interface where sections
expand and display additional content based on user interaction.

 Improve User Experience: Increase user engagement by adding hover

effects that dynamically adjust section sizes and background colors.

 Showcase CSS Transitions: Use CSS transitions to create smooth

animations for expanding and contracting section heights and changing
background colors.

 Implement JavaScript for Interactivity: Leverage JavaScript to manage

the visibility of subheadings in each section according to user hover actions.

 Focus on Accessibility and Readability: Create a visually appealing and

accessible interface with clear font styles and colors to ensure content
readability.

3. Code
29
30
4. Output

Conclusion
The resizable HTML layout illustrates a successful application of CSS transitions
and JavaScript interactivity to create an engaging user experience. The design
allows sections to expand and reveal additional content on hover, which boosts
both usability and visual appeal. This implementation effectively demonstrates
the use of CSS for smooth animations and dynamic element styling, while
JavaScript introduces interactivity by managing content visibility based on user
actions. Overall, the project blends design aesthetics with functional usability,
serving as a practical example of contemporary web interface techniques.

31
Lab 6: Part 3 - Continue responsive layout
1.Description
This web page layout employs CSS Grid to create a well-organized design
with distinct sections: header, navigation, main content, side content, and
footer. The header features a bold orange background, centered text, and
generous padding to make it stand out. The navigation area includes
resizable sections that expand on hover to reveal subheadings, improving
usability. The main content area is highlighted with a light yellow background
and contains detailed text. The right-side content area, with a light blue
background, displays multiple text sections. The footer concludes the layout
with a green background and centered text, ensuring a cohesive visual and
functional structure.

2. Objective
 To demonstrate proficiency in using CSS Grid: Utilize CSS Grid to create
a responsive and structured layout for various sections of the web page,
including header, navigation, main content, side content, and footer.
 To implement interactive features: Implement JavaScript to enable
resizable sections within the navigation area, enhancing user interaction by
revealing additional content on hover.
 To ensure accessibility and usability: Design the layout with clear visual
hierarchy, adequate padding, and contrasting colors to ensure readability and
ease of navigation across different devices and screen sizes.

32
3. Code

33
4. Output

5. Conclusion
The web page layout created with CSS Grid effectively showcases a structured
and responsive design approach. Utilizing the features of CSS Grid, the layout
organizes distinct sections—header, navigation, main content, side content, and
footer—across various screen sizes with ease. Hover effects for resizable
sections in the navigation area enhance user engagement and interaction.
Overall, the design strikes a balance between visual appeal and functional
usability, ensuring accessibility and readability. This project highlights the
significance of CSS Grid in modern web design for developing versatile and
attractive layouts that adapt to different content and user requirements.

34
 Techspire College

Fundamentals of Web Development

Lab 7
Animation

Name: Sangam Humagai

Section: A4
University ID: NP069751
Date:

35
 1.Description
This HTML document presents a basic webpage layout with animations. The
page consists of three main components: a full-screen background image, a
rotating sun image, and a moving car image. The background image (bg.jpg)
covers the entire viewport height, while the sun image (sun.png) is fixed in a
specific position and rotates endlessly. The car image (car.png) is anchored to
the bottom-right corner and moves back and forth horizontally across the
screen in a continuous loop. CSS keyframe animations are employed to
create the sun's rotation and the car's horizontal motion.

2. Objectives
 To implement a full-screen background image that covers the entire viewport.
 To create an infinite rotating animation for a sun image using CSS keyframes.
 To animate a car image moving horizontally across the screen using CSS
keyframes.
 To position elements using CSS to achieve a fixed layout for the sun and car
images.
 To demonstrate the use of CSS animations and keyframes for enhancing
visual appeal.

36
3. Code

4. Output
1. Initial Phase

37
 2. Second phase – Car moving (In frame)

3. Third Phase – Car (Out of frame)

5. Conclusion
This HTML and CSS setup designs a visually captivating web page featuring a
full-screen background image, a continuously rotating sun, and a horizontally
moving car. Utilizing keyframe animations and fixed positioning, the layout
achieves smooth, dynamic effects for both the sun and the car, elevating the
page's overall visual appeal.

38
 Techspire College

Fundamentals of Web Development

Lab 4
2- level Navigation Dropdown List

Name: Sangam Humagai

Section: A4
University ID: NP069751
Date:

39
1. Description
This HTML document features a well-organized web page layout that integrates
navigation menus, images, and styled containers. Internal CSS is used to define
the visual aspects of the layout, including background colors, dimensions, and
positioning. The navigation bar includes dropdown menus that expand to show
additional links on hover. The content area is designed with multiple image
sections arranged in a flexible layout.

2. Objectives
 To create a visually appealing web page layout using HTML and CSS.
 To demonstrate the use of internal CSS for styling various elements of the
web page.
 To implement a responsive navigation bar with dropdown menus for enhanced
user interaction.
 To arrange multiple images in a flexible and organized manner using flexbox
layout.
 To ensure the web page layout is coherent and aesthetically pleasing.

40
3. Code

41
3. Code continue

4. Output
1. Full layout

2. Dropdown

42
5. Conclusion
This HTML document successfully achieves a structured and visually engaging
web page layout. It demonstrates the effective use of internal CSS for styling,
including flexbox for flexible layout management and dropdown menus for
enhanced navigation. The inclusion of multiple images in a grid-like arrangement
highlights the use of CSS for controlling dimensions and positioning, resulting in
a coherent and aesthetically pleasing web page design.

43
 Techspire College

Fundamentals of Web Development

Lab 3
Web Layouting (CSS)

Name: Sangam Humagai

Section: A4
University ID: NP069751
Date:

44
1. Description
This HTML document creates a centered, visually appealing web page layout
using Flexbox for alignment and distribution. The main container, with a
translucent white background, houses three sections. The top section features
four colorful circles (yellow, light green, green, and light blue), each containing
text and aligned horizontally. Below it, a menu bar with five centered, bolded
items is presented on a light yellow background. The bottom section contains
three content boxes, each displaying an image (with placeholders for car, sun,
and Nepal images) and a bordered text area below it. The design ensures a clean
and organized layout, with consistent dimensions and alignment across all
elements.

2. Objectives
 Demonstrate a responsive and visually appealing web page layout using
Flexbox.
 Provide a structured and aesthetically pleasing presentation of content.
 Create a central container that organizes images and text effectively.
 Showcase design elements like colorful circles, a menu bar, and content
boxes to enhance user engagement.

45
3. Code

46
Code Continue

4. Output

5. Conclusion
The web page layout effectively demonstrates the use of Flexbox to create a
centered and balanced design that is visually appealing and user-friendly. The
structure, including colorful circles, a well-organized menu bar, and content
boxes, ensures clarity and enhances user engagement. This design meets the
objectives of providing a clean, organized, and responsive web page that is both
functional and aesthetically pleasing.

47