Scribd
Upload
9 views

Vaghela 1

Uploaded by

royalrajputana015
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Vaghela 1

Uploaded by

royalrajputana015
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

INTRODUCTION

TO
WEB DEVELOPMENT

Presentation By :-
Vaghela DIgvijaysinh(21cs052)
Computer Science
Anand-ICE, Jaipur
Objectives

➢ Introduction to Web Development


➢ What is HTML?
➢ Introduction to CSS
➢ Introduction to Javascript
➢ Bootstrap
INTRODUCTION

1. Frontend Development :- Focuses on the user interface and experience, involving HTML,
CSS, and JavaScript. HTML structures web content, CSS styles it, and JavaScript adds
interactivity and dynamic behavior to web pages.
2. Frontend development refers to the creation and design of the visible parts of websites or web
applications that users interact with directly.
3. It involves using languages like HTML, CSS, and JavaScript to build the layout, style, and
functionality of a website's user interface, ensuring a seamless and engaging user experience
across various devices and browsers.
4. Frontend developers focus on making web content visually appealing, responsive, and
interactive.
What is HTML?

HTML is a fundamental language used in web


development to structure and create the content of web
pages.

It utilizes a system of tags to define different types of


content elements such as headings, paragraphs, images,
links, and more.

It forms the backbone of web pages and works together


with CSS for styling and JavaScript for interactivity.
HTML Elements

● An HTML element is defined by a start tag, some content,


and an end tag.

Start tag Element content End tag


<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
HTML Lists
● HTML lists allow web developers to group a set of related
items in lists.

● HTML lists is 2 Types :-


1) ordered list
2) unordered list
What is CSS

● CSS is the language we use to style an HTML document.

● CSS describes how HTML elements should be displayed.

● CSS stands for Cascading Style Sheets

● CSS describes how HTML elements are to be displayed on screen, paper, or in


other media

● CSS saves a lot of work. It can control the layout of multiple web pages all at
once

● External stylesheets are stored in CSS files


CSS Syntax
What is JavaScript

● JavaScript is a programming language used to make websites


interactive.

● It enables dynamic content, such as animations, interactive forms,


and changing website behavior based on user actions.

● JavaScript runs in web browsers, allowing developers to create


engaging and responsive web experiences.
JavaScript Variables
Variables are Containers for Storing Data

JavaScript Variables can be declared in 3 ways:

1) Using var
2) Using let
3)Using const
EX :-
</script>
var x = 5;
var y = 6;
var z = x + y;
Console.log(z);
</script>

OutPut :- 11
JavaScript Strings

● JavaScript strings are for storing and manipulating text.

Ex :-

<script>
let text = "John Doe";
Console.log(“text”)
</script>

OutPut :- John Doe


WHAT IS BOOTSTRAP

● Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many other, as well as optional
JavaScript plugins

● Bootstrap also gives you the ability to easily create responsive designs

● Bootstrap is a popular framework used for building websites and web applications.

● It provides a collection of pre-made design elements, like buttons, forms, and grids,
along with CSS and JavaScript components.

● Bootstrap helps developers create responsive, modern-looking websites more quickly


and easily by offering ready-to-use tools and a consistent layout.
Why Use Bootstrap

● Easy to use: Anybody with just basic knowledge of HTML and CSS can start
using Bootstrap

● Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets,


and desktops

● Mobile-first approach: In Bootstrap, mobile-first styles are part of the core


framework

● Browser compatibility: Bootstrap 5 is compatible with all modern browsers


(Chrome, Firefox, Edge, Safari, and Opera). Note that if you need support for
IE11 and down, you must use either BS4 or BS3.
THANK YOU

You might also like