[go: up one dir, main page]
Scribd
Upload
22 views24 pages

Nishant Yogesh Project

Uploaded by

kumawatyogesh242010
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
22 views24 pages

Nishant Yogesh Project

Uploaded by

kumawatyogesh242010
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/ 24

FRONTEND WEB DEVELOPMENT

CHAPTER 1
INTRODUCTION
1.1 INTRODUCTION
Web development refers to the building, creating, and maintaining of websites. It
includes aspects such as web design, web publishing, web programming, and
database management. It is the creation of an application that works over the internet
i.e., websites.

• HTML: HTML structures web content, defining elements like text, images,
and links, forming the foundation for all websites.
• CSS: CSS styles HTML content, controlling visual appearance such as
colors, fonts, layout, and making websites responsive to different screens.
• JavaScript: JavaScript adds interactivity, enabling dynamic features like forms,
animations, and real-time content updates for an engaging user experience.
• Responsive Design: Ensures websites adapt to various devices by modifying
layout, content, and design based on screen size and resolution.
• Frameworks and Libraries: Tools like React and Vue streamline development
by providing reusable components, improving code efficiency and reducing
development time.

Frontend Development: The part of a website that the user interacts directly is

termed as front end. It is also recurred to as the 'client side' of the application.

1
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

1.2 Frontend Roadmap

• HTML: HTML (Hyper Text Markup Language) is the standard language


used to create and structure content on the web. It defines elements like
headings, paragraphs, links, and images, providing the basic framework for
webpages. HTML tags organize content, making it accessible for browsers to
display text, multimedia, and interactive features effectively.
• CSS: CSS (Cascading Style Sheets) is used to control the appearance and
layout of web pages. It defines the design elements, including colors, fonts,
spacing, and positioning. By separating structure (HTML) from style, CSS
allows for consistent design across multiple pages. It also enables responsive
design, adapting layouts to different screen sizes.

2
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

• JavaScript: JavaScript is a programming language that enables dynamic


interactions on web pages. It allows developers to create features like form
validation, animations, and real-time content updates. JavaScript interacts
with HTML and CSS through the Document Object Model (DOM),
enhancing user experience by making websites interactive, responsive, and
more engaging.

• Bootstrap: Bootstrap is a popular open-source front-end framework that


helps developers design responsive and mobile-first websites quickly. It
provides pre-built HTML, CSS, and JavaScript components like navigation
bars, buttons, forms, and modals, enabling easy customization. Bootstrap
ensures consistency across devices by offering a grid system, which
automatically adjusts content layout for different screen sizes.

3
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

CHAPTER 2
HTML
HTML is the standard markup language for creating Web pages.
• Structure: HTML defines the structure of web pages.
• Elements: HTML uses tags like <h1>, <p>.
• Attributes: Tags have attributes, like href and src.
• Forms: HTML creates forms for user input.
• Links: HTML enables hyperlinking with the <a> tag.
• Integration: HTML works with CSS and JavaScript.

4
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

2.1 Basic Structure Of HTML


The basic structure of HTML includes <!DOCTYPE html>, <html>, <head>,
<body>, <title>, and content tags like <h1>, <p>, and <a>. These elements define the
web page’s structure and content.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to My Website</h1>

<p>This is a paragraph of text on my webpage.</p>

<a href="https://www.example.com">Click here</a> to visit an example site.

</body>

</html>

• <DOCTYPE! html> — A doctype or document type declaration


is an instruction that tells the web browser about the markup language
in which the current page is written. It is not an element or tag. The
doctype declaration is not case-sensitive.

• <html>— This tag is used to define the root element of HTML


document. This tag tells the browser that it is an HTML document. It

5
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

is the second outer container element that contains all other elements
within it.

• <head> — This tag is used to define the head portion of the HTML
document that contains information related to the document.
Elements within the head tag are not visible on the front-end of a
webpage.

• <body> — The body tag is used to enclose all the visible content of
a webpage. In other words, the body content is what the browser will
show on the front end.

2.2 HTML Tags


HTML tags are essential for structuring web pages. Tags like <html>, <head>, and
<body> organize the overall layout. Heading tags such as <h1> define titles, while
<p> denotes paragraphs. Links use <a>, images with <img>, and <div> and <span>
help group or style content for better organization.

The are some important tags.

• <html>: Defines the start of an HTML document.


• <head>: Contains metadata, links to stylesheets, and the title.
• <title>: Sets the title of the web page displayed in the browser tab.
• <body>: Contains the visible content of the web page.
• <h1> to <h6>: Define headings, with <h1> being the highest level.
• <p>: Represents a paragraph of text.
• <a>: Defines a hyperlink.
• <img>: Embeds images in a page.
• <div>: Groups content for styling or layout purposes.
• <span>: Used for inline styling or grouping small content.
• <form>: Defines an HTML form for collecting user input.
• <input>: Represents input fields in a form.
• <table>: Creates a table, with tags like <tr>, <td>, and <th> for rows,
cells, and headers.

2.3 Attributes of HTML


HTML attributes provide additional information about HTML elements.

• href: Specifies URL for hyperlinks (<a>).

• src: Specifies image source (<img>).

6
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

• alt: Provides alternative text for images.

• class: Assigns CSS class for styling.

The href Attribute

This attribute is used to specify a link to any address. This attribute is used along
with the <a> tag. The link put inside the href attribute gets linked to the text
displayed inside the<a> tag. On clicking on the text, we will be redirected to the link.
By default, the link gets opened in the same tag but by using the target attribute and
setting its value to "_blank", we will be redirected to another tab or another window
based on the browser's configuration

The src Attribute


If we want to insert an image into a webpage, then we need to use the <img> tag and
the src attribute. We will need to specify the address of the image as the attribute's
value inside the double quote.

There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another


website. Example: arc="https://www.w3schools.com/imagcs/img_girl.jpg".

External images might be under copyright. If you do not get permission to use it, you
may be in violation of copyright laws. In addition, you cannot control external
images; it can suddenly be removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here,
the URL does not include the domain name. If the URL begins without a slash, it
will be relative to the current page. Example: src="img_girl.jpg". If the URL begins
with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".

The alt Attribute


This is an alternate tag that is used to show or display something if the primary
attribute i.e., the <img> tag, fails to display the value assigned to it. This can also be
used to describe the Image to a developer who is actually sitting at the coding end.

The style Attribute


This attribute is used to provide various CSS effects to the HTML elements such as
increasing font-size, changing font-family, colouring, etc.

Example: This example explains the HTML style attribute to specify the style
properties for the HTML element.

7
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

<html>

<head>
<title>style Attribute<title>
</head>
<body>
<h2 style=”font-family: Chaparral Pro Light;”></h2>
<h3 style=”font-size:20px;”>Hello</h3>
<h2 style=”color:#8CCEF9;”>Hello</h2>
<h2 style=”text-align: center;”>Hello</h2>
</body>
</html>

8
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

CHAPTER 3
CSS
CSS is used to control the style of a web document in a simple and easy way.

CSS is the acronym for "Cascading Style Sheets" This tutorial covers both the
versions CSSI . CSS2 and CSS3, and gives a complete understanding of CSS,
starting from its basics to advanced concepts.

• 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

3.1 Types & structure of CSS


There arc thrcc types of CSS which arc given below:

9
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

• Inline: Inline CSS contains the CSS property in the body section
attached with the element known as inline CSS.
• Internal or Embedded: The CSS ruleset should be within the
HTML. File in the head section i.e., the CSS is embedded within the
HTML file.
• External: External CSS contains a separate CSS file that contains
only style property with the help of tag attributes.

Basic Format: It is the basic structure of HTML webpage and we use CSS
style inside webpage. In a web page, we use internal CSS (i.e., adding CSS code
inside <head> tag of HTML code).

<!DOCTYPE html>
<html>

<head>
<! —head section of the web page→
<title></style>

<! – stylesheet of web page →


<style></style>
</head>

<body>
<! – Body session of the web page →
</body>

</html>

3.2 Why CSS

Why is CSS used in HTML?


• Separation of Content and Design: CSS separates HTML
structure from styling, making it easier to maintain. It allows
developers to focus on content in HTML and design in CSS for better
organization.
• Customization and Styling: CSS provides various styling options
such as changing fonts, colors, and sizes. It allows precise control over
the design, making websites visually appealing and customized
according to brand preferences.
• Responsive Web Design: CSS enables responsive design,
ensuring that websites are optimized for all screen sizes. With media

10
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

queries, elements adjust based on the device, enhancing user


experience across platforms.
• Layout Control: CSS offers layout management with techniques
like Flexbox and Grid, enabling complex designs like multi-column
layouts, navigation bars, and interactive elements that enhance
usability and functionality.
• Consistency Across Pages: CSS ensures a consistent look across
multiple pages of a website. By linking to a single stylesheet, changes
made in CSS reflect across the entire site, ensuring uniformity in
design.
• Improved Website Performance: Using CSS reduces the
amount of code in HTML, making web pages load faster. External
stylesheets are cached by browsers, enhancing the performance of a
website over time.

Why we learn CSS?


Learning CSS is vital for web development as it allows you to control the
layout, design, and appearance of a website. It separates content from
presentation, making maintenance easier. CSS enables responsive design for
different devices, enhances user experience with animations, and ensures
consistency across pages, making websites visually appealing and function.
• Web Design Control: CSS allows you to control the appearance
and layout of web pages, enabling you to create visually appealing,
customized designs that align with your vision and user needs.
• Separation of Content and Design: With CSS, you can separate
the content (HTML) from the design, making it easier to update and
maintain websites without affecting the structure or functionality.
• Responsive Design: CSS is key to building responsive websites
that adapt to different screen sizes and devices. Media queries and
flexible layouts ensure a seamless user experience on mobile, tablet,
and desktop devices.
• Consistent Styling: CSS helps maintain consistent styling across
multiple pages, ensuring uniformity in fonts, colors, and spacing,
which creates a professional and cohesive look for websites.
• Improved User Experience: By using CSS, you can create
intuitive navigation, better readability, and aesthetically pleasing
layouts that enhance user interaction and engagement with your
website.

11
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

CHAPTER 4
JAVASCRIPT
Java Script is used by programmers across the world to create dynamic and
interactive web content like applications and browsers. JavaScript is so popular
that it's the most used programming language in the world, used as a client-side
programming language by 97% of all websites. Client-side languages are those
whose action takes place on the user's computer, rather than on the server.
JavaScript is versatile enough to be used for a variety of different applications, like
software, hardware controls, and sewers. JavaScript is most known for being a
web-based language, because it's native to the web browser. The web browser can
naturally understand the language, like how a native English speaker can naturally
understand English.

12
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

4.1 JavaScript was designed for:


1. Dynamic Content: JavaScript allows real-time content updates on web
pages, enabling interactive experiences without needing to reload the entire
page.

2. Form Validation: It validates user input in forms, ensuring correct data


formats before submission, improving the quality of data collected.

3. Event Handling: JavaScript handles user actions such as clicks, hover,


and key presses, enhancing interactivity and user engagement on websites.

4. Animations and Effects: JavaScript creates animations, transitions, and


visual effects like fading and sliding, making websites visually appealing and
engaging.

5. Improved User Experience: By executing code on the client-side,


JavaScript reduces the need for server communication, enhancing speed and
responsiveness.

6. Interactive Interfaces: JavaScript enables interactive features such as


dropdown menus, carousels, and modal windows, enhancing user navigation
and engagement.

7. AJAX Requests: JavaScript uses AJAX (Asynchronous JavaScript and


XML) to load data asynchronously, allowing content to update without
reloading the page

8. Browser Compatibility: JavaScript ensures consistent behaviour across


different browsers making websites functional and accessible for a wide
range of users.

9. Backend Integration: With Node.js, JavaScript is used for server-side


programming, enabling developers to build full-stack applications using a
single language.

4.2 Is JavaScript Used for Front-End or Back End?


JavaScript is a client-side language, which technically makes it a front-end language.
But with the Node.js framework, JavaScript can also be used in back-end. Using
JavaScript across the whole stack, for both front-end and back-end, is an excellent
practice because it creates a cohesive application. When as much code as possible is

13
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

all in the same language, it makes it easier to maintain, manage, update, and build
with a single team.

When it's used for front-end, JavaScript makes web pages dynamic and interactive. It
validates submission forms, updates certain pieces of content on the page without
updating the entire page, shows and hides menus, and displays animations. When it's
used for backend, the Node.js framework allows a server to handle front-end data
updates and build scalable network applications to process simultaneous user
requests.

14
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

Chapter 5
SETUP OF CODE EDITOR

5.1 Web Development code Editor (V.S CODE):


So, if you have been looking for a good, extensible code editor that helps you during
your journey as full stack web developer, there is visual studio code from Microsoft
which is open source, has large support community and large extensions library that
helps you pretty much on any task you need, so in this overview tutorial I'm going to
explain why I user visual studio code for my daily basis and not any other code editor
besides the extensions I use during my development career.

5.2 Why Visual Studio Code


So, you are probably thinking of why I have gone specifically for visual studio code
and not atom or sublime text, I know you can go for atom it is good as well, but
visual studio code still wins the race, for a couple of reasons actually

1. Performance: I like the editor for its perfect performance which actually
runs perfectly while coding without crashes or typing-lag, no nothing like
that, besides opening a huge number of windows won't slow down your
machine.

15
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

2. Monthly Updates: Another thing is updates, cach month there is a new


update which brings new bug fixes, improvement and more features for
developers.
3. Extensions: The Editor has a large Extensions Library that pretty much
offers you an extension for any task you need to automate, which actually
going to make your life easier especially as web-developer, all you nccd to
do is click install.

So those are the major things that I find very useful for me (my opinion).

5.3 VS Code Welcome Tab


Once you have it installed and opened, the first thing you will see is a Welcome tab.
Here, you'll find 5 sections:

16
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

5.4 VS Code File Explorer


Next, let's go to File Explorer by selecting the first tab on the side navigation or
Command/Control + Shift + E.

Here you can open an existing folder, but let's create a new folder and a new file.
Instead of opening a new window, let's open the terminal in VS Code. You can select
the error and warning button on the status bar and then select the Terminal tab or you
can use the shortcut Control +

Right now, I am in Iny home directory. Let's create a new Colder by typing mkdir
vscode- tutorials and let's go inside it with cd vscodc-tutorials.

Now we want to open this Colder, so we can sclcct the open folder button and
navigate to the folder directory — but that's a lot of work. So instead, in the terminal,
we can say code .. Now, you might face an error: bash: code: command not found.

17
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

5.5 VS code Extension


The last thing I want to show you how to use is Extensions. You can select the
extensions tab from the side navigation or with the shortcut: Command/Control +
Shift + X.

Here we can filter the extensions by, for example, Most Popular or Recommended.

There are many extensions to choose from. But the first extension that we need to
install is Live Server. With this, we can have a local server reload static web pages.

18
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

CHAPTER 6
PROJECT
ADIDAS

ADIDAS
Adidas is a globally recognized brand, founded in 1949 by Adolf "Adi" Dassler in
Herzogenaurach, Germany. Known for its iconic three-stripe logo, Adidas has
become a leader in the sportswear industry, offering a wide range of products such as
shoes, clothing, and accessories for athletes and casual wearers alike. The brand is
celebrated for its commitment to innovation and performance, with notable
technologies like Boost cushioning and Primeknit, which enhance comfort and
durability.

Adidas is also a pioneer in sustainability, incorporating recycled materials into


products like the Parley collection, which uses ocean plastic. The brand’s
collaborations with athletes, sports teams, and designers like Kanye West and
Pharrell Williams have elevated Adidas as both a performance and fashion brand. By
combining cutting-edge design with functionality, Adidas continues to set trends in
sportswear, providing products that appeal to athletes and fashion-conscious
consumers worldwide. Through its ongoing focus on innovation and sustainability,
Adidas maintains its status as a global leader in the sportswear market.

19
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

Adidas stands out for its innovative technologies like Boost cushioning and Prime
kit, enhancing comfort and performance. The brand is also committed to
sustainability, collaborating with Parley for the Oceans to create products from
recycled ocean plastic. Iconic collaborations, such as with Kanye West for Yeezy and
Pharrell Williams, have elevated Adidas in the fashion world. Its heritage, especially
through the Adidas Originals line, has cemented its cultural impact. Adidas is also a
leader in inclusive design, offering adaptive products for diverse needs, and holds a
strong presence in football, being a key player in major global events.

20
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

CHAPTER 7

PROS & CONS


HTML
PROS:

• Simple and Easy to Learn: HTML is straightforward and beginner-


friendly, requiring little prior knowledge of programming languages.
• Platform Independent: HTML works universally across all browsers,
ensuring compatibility on any device or operating system.
• Free to Use: HTML is an open-source language, meaning there are no
costs for usage or learning.
• Search Engine Friendly: Proper HTML structure helps optimize web
pages for search engines, improving visibility and ranking.
• Hyperlinking: HTML allows users to create links between pages and
websites, ensuring seamless navigation and interactivity.
• Multimedia Support: HTML supports images, audio, video, and other
media formats, enhancing user engagement and experience.
• Structured Content: HTML provides organization through headings,
paragraphs, and lists, making content easier to understand and navigate.
• Wide Browser Compatibility: HTML is supported by all modern
browsers, ensuring websites are accessible to a wide audience.

CONS :

• Limited Functionality: HTML lacks the ability to perform complex


tasks like calculations or data processing on its own.
• No Styling on Its Own: HTML provides structure but requires CSS
for advanced styling, visuals, and design enhancements.
• No Advanced Interactivity: HTML cannot create advanced
interactions or dynamic behavior, requiring JavaScript or other languages
for that.
• Security Risks: Improperly structured HTML can expose websites
to security vulnerabilities like Cross-Site Scripting (XSS) attacks.
• Requires Regular Maintenance: Websites made with HTML alone
may need frequent updates to stay modern and compatible.
• Not Ideal for Complex Applications: HTML cannot handle server-
side functionality, databases, or complex web application needs alone.
• Does Not Handle Data Processing: HTML does not store or
process data; it requires server-side technologies like PHP for that.
• No Built-in Error Handling: HTML lacks error handling features,
making debugging and troubleshooting code more difficult for
developers.

21
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

CSS
PROS:

• Separation of Content and Design: CSS separates layout from


content, improving code organization and readability.
• Responsive Web Design: CSS enables responsive designs that adapt
to different screen sizes.
• Customization and Flexibility: CSS allows extensive customization
of colors, fonts, and layouts.
• Faster Page Load: CSS reduces code repetition, improving website
load times significantly.
• Consistent Design Across Pages: CSS ensures uniform styling
across multiple web pages consistently.
• Easy Maintenance: CSS makes it easier to update styles globally
without modifying HTML.
• Improved Accessibility: CSS helps create more accessible websites
through better layout control.
• Cross-Browser Compatibility: CSS provides cross-browser
compatibility, ensuring consistent visual design across browsers.
• Accessibility: CSS can adjust visual elements to improve readability
and accessibility for users with disabilities.
• Reduced Code Duplication: Centralizes styling in one file, reducing
redundant code and simplifying maintenance across multiple pages.

CONS:

• Browser Inconsistencies: CSS can sometimes display inconsistently


across different web browsers.
• Learning Curve: Advanced CSS techniques can be complex and
challenging for beginners.
• Limited Styling Control: CSS lacks complete control over dynamic
behaviors or complex animations.
• Compatibility Issues with Older Browsers: Older browsers may
not support newer CSS properties or features.
• Complexity with Large Websites: Managing large websites with
extensive CSS files can become cumbersome.
• No Built-in Functionality: CSS cannot handle interactive behavior,
requiring JavaScript for functionality.
• Performance Concerns: Complex CSS can negatively impact page
rendering and performance.
• Difficult Debugging: Debugging CSS issues can be time-consuming
and challenging, especially with large codebases.
• Maintenance Challenges: Over time, large and complex CSS files
can become hard to maintain and troubleshoot effectively.

22
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

JAVASCRIPT

PROS:

• Client-Side Scripting: JavaScript runs on the client-side, reducing server


load and improving website responsiveness and speed.
• Interactive Web Pages: Enables dynamic interactions like forms,
animations, and real-time updates, enhancing user experience.
• Cross-Platform Compatibility: JavaScript works across all modern
browsers and operating systems, ensuring consistency in user
experiences.
• Large Community and Resources: A vast community offers plenty of
tutorials, libraries, and frameworks to support developers.
• Asynchronous Programming: JavaScript's asynchronous features (e.g.,
callbacks, promises) allow non-blocking code execution for smoother
performance.
• Extensive Libraries and Frameworks: Libraries and frameworks like
React, Angular, and Vue make web development faster and easier.
• Easy to Learn: JavaScript has a simple syntax and is easy for beginners
to pick up and learn.
• Full-stack Development: JavaScript can be used for both front-end and
back-end development, supporting full-stack web development.
• Real-time Applications: Enables the creation of real-time applications,
like chat apps or live notifications, via WebSockets.

CONS:

• Security Issues: JavaScript is vulnerable to cross-site scripting (XSS) and


other security exploits, requiring precautions.
• Browser Dependency: Inconsistent behaviour across different browsers
can lead to compatibility issues and extra testing efforts.
• Slower Performance: JavaScript is slower than compiled languages like
C++ due to its interpreted nature.
• Single-threaded: JavaScript runs on a single thread, which may limit
performance for highly complex computations.
• Error Handling: JavaScript lacks robust error handling compared to other
languages, making debugging more challenging.
• Limited Access to System Resources: JavaScript’s sandboxed
environment restricts access to system-level resources, limiting its
functionality.
• Complex Syntax for Advanced Features: As applications grow, complex
features in JavaScript (like callbacks) can lead to confusion.
• Difficult to Maintain Large Projects: Large JavaScript codebases without
proper structure become difficult to maintain and scale efficiently.
• Lack of Strong Typing: JavaScript's dynamic typing can result in runtime
errors, making debugging harder in large projects.

23
Dept. Of CSE
FRONTEND WEB DEVELOPMENT

CHAPTER 8

REFRENCE

• https://www.tutorialspoint.com/index.htm
• https://www.geeksforgeeks.org/
• https://www.freecodecamp.org/
• https://www.javatpoint.com/javascript-tutorial
• https://www.w3schools.com/

24
Dept. Of CSE

You might also like