DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Industrial training: WEB DEVELOPMENT ( Frontend )

Name: Farah Niyazi
Roll Number: 06
Semester: 7th
Date of Submission: 11/07/23
 ABSTRACT:

This report provides an overview of the web development

internship training program undergone at CODE TODAY . The
primary objective of the internship was to gain hands-on
experience in web development, encompassing a range of
technologies and frameworks such as HTML, CSS, JavaScript.
This report outlines the key activities and projects completed
during the internship, including the development of web
applications, implementation of responsive design principles.
Key observations and learning outcomes from the internship
encompass improved proficiency in frontend web
development, problem-solving abilities, and familiarity with
development methodologies. I also gained valuable insights
into the importance of effective communication, time
management, and teamwork in a real-world development
environment.
Overall, the web development internship training program
proved to be a valuable experience, bridging the gap between
theoretical knowledge and real-world application in the field
of web development. The hands-on training, industry
exposure, and networking opportunities gained during the
internship will significantly contribute to my readiness for a
successful career in web development.
CERTIFICATE:
List of Contents
i. Abstract
ii. Certificate
iii. CONTENTS
1. Introduction to Web Development.
i. Frontend.

2. Introduction to HTML5 and CSS.

i. HTML5.
ii. CSS3.
iii. Project images.

3. Introduction to Bootstrap.

4. Introduction to Javascript.
i. Javascript.
ii. Project image.
 1. Introduction to web development:

Web development is a dynamic field that encompasses the creation

and maintenance of websites and web applications. It involves a range
of skills, technologies, and practices aimed at designing, building, and
deploying functional and user-friendly web solutions.
In today's digital age, having a strong online presence is crucial for
businesses, organizations, and individuals alike. Web development
enables the creation of interactive and engaging platforms where
information can be shared, transactions can occur, and user
experiences can be optimized.
Web developers utilize various programming languages, frameworks,
and tools to bring websites and web applications to life. They work
closely with designers, content creators, and other stakeholders to
ensure that the end product meets both aesthetic and functional
requirements.
The development process typically involves planning and analysis,
wireframing and prototyping, coding and implementation, testing and
debugging, and finally, deployment and maintenance. It requires a
combination of technical expertise, problem-solving skills, creativity,
and attention to detail.
Web development has evolved significantly over the years, with
advancements in technologies, responsive design, mobile
compatibility, and user experience. It is a multidisciplinary field that
continues to evolve as new trends and innovations emerge.
In summary, web development is a dynamic and multidimensional
field that involves the creation of websites and web applications. It
plays a crucial role in establishing an online presence, facilitating
communication, and delivering engaging user experiences.
 i. Frontend:

Frontend development is a vital aspect of web development that

focuses on the visual and interactive elements of a website or web
application. It involves the creation and implementation of user
interfaces, ensuring a seamless and engaging user experience.
Frontend developers utilize various technologies, programming
languages, and frameworks to design and develop the frontend of a
website. They work closely with designers to translate visual concepts
into functional and interactive interfaces that users can interact with.
HTML (Hypertext Markup Language) is the foundational language of
the web and is used to structure the content and elements of a
webpage. CSS (Cascading Style Sheets) is used to style and format the
HTML elements, controlling their layout, colors, fonts, and overall
visual appearance.
JavaScript is a powerful scripting language that adds interactivity and
dynamic functionality to web pages. It enables frontend developers to
create interactive features, handle user interactions, perform data
validation, and make asynchronous requests to servers.
Frontend development also involves the use of frontend frameworks
and libraries such as React, Angular, and Vue.js. These frameworks
provide pre-built components, efficient development patterns, and
state management solutions that streamline the development process
and enhance code reusability.
The primary goal of frontend development is to create user-friendly
and responsive interfaces that work across different devices and
browsers. Frontend developers focus on optimizing performance,
accessibility, and usability to provide an engaging and intuitive user
experience.

In summary, frontend development is the process of designing and

implementing the visual and interactive aspects of a website or web
application. It involves utilizing HTML, CSS, JavaScript, and frontend
frameworks to create user-friendly and visually appealing interfaces
that enhance the overall user experience.
 1. Introduction to HTML5 and CSS3:

i. HTML5:
HTML5 (Hypertext Markup Language 5) is the latest version of the
standard markup language used to structure and present content on
the web. It introduces new features, elements, and attributes that
enhance the capabilities of web pages and improve the user
experience.
HTML5 provides a semantic structure that allows developers to define
the meaning of content within a webpage. It includes a wide range of
tags that describe various types of content, ensuring accessibility and
search engine optimization. Some commonly used HTML5 tags
include:
1. <html>: Represents the root element of an HTML
document.
2. <head>: Contains metadata about the HTML document,
such as the title and linked stylesheets or scripts.
3. <title>: Defines the title of the webpage, displayed in the
browser's title bar or tab.
4. <body>: Contains the visible content of the webpage.
5. <h1> to <h6>: Heading tags used to define hierarchical
headings, with <h1> being the highest level and <h6> the
lowest.
6. <p>: Represents a paragraph of text.
7. <a>: Creates a hyperlink, allowing users to navigate to
another webpage or location.
8. <img>: Embeds an image into the webpage.
9. <ul> and <li>: Creates an unordered list and its list items,
respectively.
10. <ol> and <li>: Creates an ordered list and its list items,
respectively.
 11. <div>: Defines a division or container for grouping
and styling related elements.
12. <span>: Inline element used for styling or targeting
specific sections of text within a larger block of content.
13. <table>: Represents a tabular data structure, with
<tr> defining table rows and <td> defining table cells.
14. <form>: Creates a form for user input, typically
including input fields and submit buttons.
15. <input>: Generates an input field for user data entry.

Declaration:
<!DOCTYPE html>
<html>
<head>
<!-- Head content goes here -->
</head>
<body>
<!-- Body content goes here -->
</body>
</html>
 ii. CSS3:
CSS3 (Cascading Style Sheets 3) is the latest version of the CSS
language used to style and design web pages. It introduces new
features, selectors, and properties that enhance the visual
presentation and layout capabilities of websites.
CSS3 provides a wide range of design tags that allow developers to
style and customize the appearance of HTML elements. These design
tags enable fine-grained control over colors, fonts, borders,
backgrounds, animations, and more. Here are some commonly used
CSS3 design tags:
Color and Background Tags:
1. color: Sets the text color.
i. background-color: Sets the background color.
ii. background-image: Specifies an image as the background.
iii. background-size: Controls the size of the background image.
iv. background-repeat: Determines how the background image
repeats.
2. Font Tags:
i. font-family: Specifies the font family for text.
ii. font-size: Sets the size of the font.
iii. font-weight: Specifies the font weight (e.g., bold or normal).
iv. text-decoration: Controls text decoration (e.g., underline,
overline).
3. Box Model Tags:
i. margin: Sets the margin space around an element.
ii. padding: Specifies the padding space within an element.
iii. border: Defines the border properties.

4. Animation Tags:
i. animation-name: Specifies the name of the animation.
ii. animation-duration: Sets the duration of the animation.
iii. animation-timing-function: Controls the speed curve of the
animation.
iv. animation-delay: Specifies the delay before the animation
starts.
5. Selectors:

i. :nth-child(): Selects elements based on their position within a

parent element.
ii. :hover: Applies styles when an element is hovered over.
iii. :focus: Applies styles when an element is in focus (such as
when clicked or tabbed into).

Connecting HTML and CSS:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- HTML content goes here -->
</body>
</html>
Project Images:
i. Login page and Registration form using HTML5 ans CSS3:
 2. Introduction to Bootstrap:

Bootstrap is a popular open-source front-end framework that provides

a comprehensive set of CSS, JavaScript, and HTML components for
building responsive and mobile-first websites and web applications. It
simplifies the development process by offering pre-built UI
components and a responsive grid system.
It provides pre-built CSS and JavaScript components, a responsive grid
system, and a range of design templates. With Bootstrap, developers
can create modern, responsive, and mobile-first websites and web
applications. It offers a consistent and visually appealing design across
different devices and screen sizes, eliminating the need to build
everything from scratch. Bootstrap's extensive library of components
and utilities accelerates development and ensures a cohesive user
experience. It is widely used and supported, making it a valuable tool
for developers of all skill levels.
Bootstrap utilizes various HTML tags along with CSS classes to create
consistent and visually appealing designs. Here are some commonly
used Bootstrap tags:
1. Grid System:
i. <div class="container">: Creates a container for the content
with a fixed width.
ii. <div class="row">: Defines a row within the container.
iii. <div class="col">: Specifies columns within a row, utilizing a
12-column grid system.
2. Typography:
i. <h1> to <h6>: Heading tags used to define different levels of
headings.
ii. <p>: Represents a paragraph of text.
iii. <blockquote>: Displays a block-level quotation.
3. Buttons:
i. <button class="btn">: Creates a basic button.
ii. <a class="btn">: Generates a button-like link.
iii. <input class="btn">: Renders a button-like input element.
4. Forms:
i. <form>: Wraps a collection of form elements.
ii. <input>: Creates an input field for user input.
iii. <label>: Associates a label with an input field.
iv. <select>: Generates a dropdown selection menu.

5. Navigation:
i. <nav>: Defines a navigation bar.
ii. <ul> and <li>: Used for unordered navigation lists.
iii. <a>: Creates navigation links.
6. Components:
i. <div class="card">: Displays a card-like component for
content.
ii. <div class="jumbotron">: Presents a large callout section.
iii. <div class="modal">: Creates a modal dialog box.
 3. Introduction to Javascript:
i. Javascript:
JavaScript is a widely-used programming language primarily used for
web development. It enables interactive and dynamic behavior on
websites, enhancing user experiences and enabling powerful
functionalities. JavaScript can be executed directly within a web
browser without the need for compilation, making it a versatile
language for client-side scripting.

JavaScript allows developers to manipulate HTML elements, handle

user interactions, perform data validation, create animations, fetch
data from servers asynchronously, and much more. It provides a rich
set of features and APIs that enable developers to build responsive and
interactive web applications.

JavaScript is also used for server-side development with technologies

like Node.js, allowing developers to build full-stack applications using
a single programming language.

With its versatility and widespread adoption, JavaScript has become

an essential language in modern web development. Its continuous
evolution, along with the support of a vast community and numerous
frameworks and libraries, makes it a powerful tool for creating
dynamic and engaging web experiences.

JavaScript provides a wide range of built-in libraries without requiring

external APIs. Here is a list of some important built-in libraries in
JavaScript:
i. Math: Provides mathematical functions and constants, such
as Math.random(), Math.floor(), Math.sqrt(), and more.
ii. String: Offers methods for working with strings, such as
String.length, String.charAt(), String.indexOf(), String.split(),
and more.
iii. Array: Provides methods for working with arrays, including
Array.length, Array.push(), Array.pop(), Array.concat(),
Array.join(), and more.
iv. Date: Enables working with dates and times, including
methods like Date.now(), Date.getFullYear(),
Date.getMonth(), Date.getDate(), and more.
v. RegExp: Supports regular expressions for pattern matching
and manipulation using methods like RegExp.test(),
RegExp.exec(), and more.
vi. JSON: Provides methods for working with JSON (JavaScript
Object Notation) data, including JSON.stringify() and
JSON.parse().
vii. Boolean: Offers methods and operations for working with
boolean values, such as Boolean() constructor and logical
operators like &&, ||, and !.
viii. Error: Includes built-in error types like Error, TypeError,
SyntaxError, and more, for handling and throwing errors.
ix. Function: Provides functionality for working with functions,
including creating and invoking functions using the Function
constructor and function declarations.
ii. Project Images:

a. OTP generator using HTML5, CSS3, BOOTSTRAP, JAVASCRIPT:

 b. Tic Tac Toe using HTML5, CSS, BS, JS:

------------------------------------------End of File------------------------------------