BASAVESHWAR ENGINEERING COLLEGE, BAGALKOTE- 587102

DEPARTMENT OF ELECTRONICS AND COMMUNICACTION

ENGINEERING3
2022-2023
INTERNSHIP
ON
WEB DEVELOPMENT & DESIGN
CARRIED OUT AT

APPONIX TECHNOLOGIES HUBLI

Internal Guide : External Presented By :
Guide:
Prof. M .C. ARALIMARAD Mr. Hemanth Huballi Aditi Shah
USN :2BA21EC005
 Contents :
 Introduction to WEB DEVELOPMENT
 Front end development technologies
 HTML
 CSS
 BOOTSTRAP
 JAVASCRIPT
 Conclusion
 WHAT IS WEB DEVELOPMENT ?

 Web development refers to the process of creating websites, web

applications, and other web-based software programs. It involves a wide
range of activities, including designing, building, testing, and maintaining
websites and web applications.
 Examples of Web Applications are Social networking sites like Facebook or E-
commerce sites like Amazon, Flipkart, etc.
 There are two division of Web Development:
1. Front-end development, which involves designing the user interface and
user experience of a website.
2. Back-end development, which involves server-side programming and
database management.
 FRONT-END DEVELOPMENT TECHNOLOGIES.
Front-end development involves designing and building the user interface and
user experience of a website or web application. The following are some of the
most commonly used front-end development technologies:
1. HTML (Hypertext Markup Language) : The standard markup language
used for creating web pages and web applications.
2. CSS (Cascading Style Sheets) : A stylesheet language used to define the
presentation and layout of web pages.
3. JS(JavaScript) : A programming language used to add interactivity,
dynamic effects, and complex functionality to web pages and web
applications.
4. Bootstrap : A popular front-end framework that simplifies the process of
creating responsive and mobile-friendly web pages and web applications.
And many more…
 HTML
This was first created by Tim Berners-Lee in
1989.
HTML (Hyper Text Markup Language) is a
markup language used for creating web pages
and other types of online content. It provides a
structure for the content of a web page, using
elements and tags to define headings,
paragraphs, lists, images, links, and other
types of content. HTML is the foundation of
every web page, providing the basic structure
and content that is then styled and enhanced
with CSS and JS.
It can be written in NOTEPAD or any other
TEXT EDITORS but is saved as .htm or .html
extension.
HTML TAGS.
Example:
//LOGIN PAGE USING HTML
OUTPUT:
 CSS
CSS was first proposed by Hakon Wium Lie on
October 10,1994.
CSS (Cascading Style Sheets) is a styling language
used to add design and visual effects to HTML
documents. It controls the layout, typography,
colors, and other visual aspects of a web page,
allowing designers to create beautiful and engaging
user interfaces. CSS can be used to apply styles to
individual elements or to groups of elements, and it
can be used in conjunction with HTML and JS to
create dynamic and interactive web pages.
It is also responsible for responsive layouts of a
website.
It can also be written in any text editor but saved
as .css extension.
 CSS PROPERTIES.

• Font properties : Style , Size , Family , Weight , Varient…

• Text properties : Align , Color , Transform , Decoration ,Word spacing…
• Background properties : Color , Image , Repeat , Position , Size…
• Box properties : Height , Width , Margin , Padding…
• Shadow properties : Text Shadow , Box shadow.
• Gradient : Linear Gradient , Radial Gradient.
• Border properties : Color , Style , Width.
Example:
//Login page using css
Output:
 BOOTSTRAP

Bootstrap is a popular front-end framework

that makes it easy to create responsive and
mobile-first web pages. It provides a set of
pre-designed CSS and JS components that
can be easily customized and integrated into
any web project. Bootstrap includes a variety
of UI elements such as navigation bars,
forms, buttons, modals, and more, that can
be used to create modern and responsive
web interfaces.
In other words , bootstrap is a collection of CSS classes
and JavaScript functions that are ready to use.
How to Use:
A basic understanding of HTML is required to start learning
Bootstrap. Some familiarity with how CSS works (CSS Selectors
and Visual Rules) would be helpful,

1. Download Bootstrap from getbootstrap.com

2. Include Bootstrap from a CDN
 A DVANTAGES OF BOOTSTRAP.
1. Fewer Cross browser bugs
2. A consistent framework that supports major of all browsers and CSS
compatibility fixes
3. Lightweight and customizable
4. Responsive structures and styles
5. Several JavaScript plugins using the jQuery
6. Good documentation and community support
7. Loads of free and professional templates, WordPress themes and plugins
8. Great grid system
 JS
Java Script was invented by Brendan Eich in 1995.
JS (JavaScript) is a programming language used to add
interactivity and functionality to web pages. It can be
used to create animations, handle user input,
manipulate the DOM (Document Object Model), and
communicate with web servers. JS is an essential
component of modern web development, and it is often
used in conjunction with HTML and CSS to create
dynamic and interactive web pages.
It is a scripting language that enables us to create
dynamically updating content, control multimedia,
animate images and pretty much everything else.
It is also written in any text editor but saved with .js
extension.
Example.

//Factorial of a number
CODE

Output:
 CONCLUSION
These are just a few examples of the many front-end development
technologies available today. The choice of technology depends on the specific
requirements and goals of the project, as well as the preferences and expertise
of the developers involved.

In today's Web development, a good page design is essential. A bad design will
lead to the loss of visitors and that can lead to a loss of business. In general, a
good page layout has to satisfy the basic elements of a good page design. This
includes color contrast, text organization, font selection, style of a page, page
size, graphics used, and consistency. In order to create a well-designed page
for a specific audience. The developer needs to organized and analyze the
users' statistics and the background of the users. Although it can be hard to
come up with a design that is well suited to all of the users, there will be a
design that is appropriate for most of the audience. The better the page
design, the more hits a page will get. That implies an increase in accessibility
THANK YOU