MODULE 4

WEB
DEVELOPMENT
 •Web
development refers to
the creating, building,
and maintaining of
websites. It includes
aspects such as web
design, web publishing,
web programming, and
database management. It •The word Web
is the creation of an Development is made up
application that works of two words, that is:
WEB over the internet i.e. •Web: It refers to
websites.
DEVELOPMENT websites, web pages or
anything that works over
the internet.
•Development: It refers
to building the
application from scratch.
•Web Development can
be classified into two
ways:
•Frontend Development
•Backend Development
Popular Frontend Technologies ∙ •HTML

∙ •CSS
∙ •Popular Frontend Technologies
∙ •CSS Frameworks
∙ •HTML: HTML stands for HyperText Markup Language. It is
used to design the front end portion of web pages using markup ∙ •Bootstrap

language. It acts as a skeleton for a website since it is used to ∙ •Tailwind CSS

make the structure of a website.
∙ •Bulma
∙ •CSS: Cascading Style Sheets fondly referred to as CSS is a
∙ •Foundation
simply designed language intended to simplify the process of
making web pages presentable. It is used to style our website. ∙ •Primer CSS

∙ •JavaScript: JavaScript is a scripting language used to provide ∙ •Spectre CSS

a dynamic behavior to our website.
∙ •Materialize CSS
∙ •Bootstrap: Bootstrap is a free and open-source tool collection
∙ •Onsen UI
for creating responsive websites and web applications. It is the
most popular CSS framework for developing responsive, ∙ •Semantic UI
mobile-first websites. Nowadays, the websites are perfect for
all browsers (IE, Firefox, and Chrome) and for all sizes of
∙ •Blaze UI

screens (Desktop, Tablets, Phablets, and Phones). ∙ •Pure CSS

∙ •SASS

∙ •LESS
Front end and Backend Technologies
Backend
Technologies
∙ Popular Backend Technologies

∙ PHP: PHP is a server-side scripting language designed

specifically for web development.

∙ Java: Java is one of the most popular and widely used

programming languages. It is highly scalable.

∙ Python: Python is a programming language that lets

you work quickly and integrate systems more
efficiently.

∙ Node.js: Node.js is an open source and cross-platform

runtime environment for executing JavaScript code
outside a browser.
Framework
WEB DEVELOPMENT
TOOLS

∙ Web Development Tutorials

∙ HTML
∙ CSS
∙ JavaScript
∙ jQuery
∙ Bootstrap
∙ React JS
∙ AngularJS
∙ PHP
∙ Node.js
Hypertext Markup Language
∙ Get familiar with web development tools: Learn how to
use developer tools such as Chrome Dev Tools,
Firebug, and WebStorm to debug and inspect web
pages.

∙ Learn a web development framework: Learn a web

development framework such as React, Angular, or
Vue.js to structure and organize your code.

∙ Learn a server-side programming language: Learn a

server-side programming language such as Node.js,
PHP, or Ruby to create dynamic web pages and web
applications.

∙ Learn a database technology: Learn a database

technology such as MySQL, MongoDB or SQLite to
store and retrieve data for your web applications.

∙ Build a portfolio: Build a portfolio of web projects that

showcases your skills and abilities as a web developer.

∙ Join a community: Join a community of web developers

to connect with like-minded individuals, get feedback
on your work, and learn from others.
 Myths of Web
Development
∙ Myths of Web Development

∙ The most common myths about web development are:

∙ WebDev is limited to creating websites.

∙ WebDev cannot get you ‘high-paid’ jobs.

∙ WebDev is easy.

∙ No Dear! Web Development is not limited to websites, you can create browsers,
plugins, games, e-commerce, and SOFTWARES too. The development scope is
too vast, describing it would take more than one article. WebDev can get you jobs
in high-reputed companies like Facebook, Microsoft, Google, etc. or you could
always work as a high-profiled freelancer. Although beginning a career might
disappoint you, as you keep growing, so does your paycheque.

∙ Web Development, although fun, requires hard work, especially during the
PHP/ASP.net phase. You have to work in a specific order if you want to become a
good web developer.
Why Web Development ?

∙ Why Web Development?

∙ The trade of IT and Computer Science (CSE) is basically
categorized into three sub-domains; Software engineering,
Networking, and website development. However former two are
also very interesting and fruitful as web development, students are
consistently made to believe that those are more important and
significant than WebDev. I can’t stress this point enough, Web
Development and Designing is the third wheel in computer
technologies and it can’t be underestimated.
 Who can If you understand the basic logic of programming (loops, classes,
objects, functions, etc.), you can easily construct a web application as
develop huge as Google Chrome. Nothing Fancy.
If you like spending your time with a code editor rather than doing
websites and other mediocre chores, then yes, you can be the next Zuckerberg.

web Coding during web development is relatively easy than that in

software designing but it still requires logic and a focused mindset.
applications
?
 Web Application
Framework or simply “web
framework” is a software
framework that is designed to
support the development of web
applications including web
Web services, web resources, and
web APIs. Frameworks are, in
short, libraries that help you
Application develop your application faster
and smarter!
Nowadays, the number of Web
Frameworks
Frameworks has increased
greatly. To help you pick up the
most suitable one for your Web
Application, we have compiled
a list of 10 best frameworks
available online, in your
preferred language.
1. Ruby on Rails
Ruby on Rails is an extremely
productive web application
framework written by David
Heinemeier Hansson. One can
develop an application at least
ten times faster with Rails than
a typical Java framework.
Moreover, Rails includes
everything needed to create a
database-driven web
application, using the Model-
View-Controller pattern.
Language: Ruby
Latest Version: Rails
5.0.0.beta2
Framework
Link: http://rubyonrails.org
Github
Link: https://github.com/rails/ra
ils
Django
∙ Django
∙ Django is another framework that helps in building quality
web applications. It was invented to meet fast-moving
newsroom deadlines while satisfying the tough requirements
of experienced Web developers. Django developers say the
applications are ridiculously fast, secure, scalable, and
versatile.
∙ Language: Python
∙ Latest Version: Django 1.9.2
∙ Framework Link: https://www.djangoproject.com
∙ Github Link: https://github.com/django/django
∙ Websites using Django are Disqus, Pinterest, Instagram,
Quora, etc.
∙ Angular(Also, know as Angular JS)
∙ Angular is a framework by Google (originally developed by
Misko Hevery and Adam Abrons) which helps us in building
powerful Web Apps. It is a framework to build large scale
and high-performance web applications while keeping them
as easy-to-maintain. There are a huge number of web apps
that are built with Angular.
∙ Language: JavaScript
∙ Latest Version: Angular 7.1.5
∙ Framework Link: https://angular.io/
∙ Github Link: https://github.com/angular/angular
∙ Websites using Angular are Youtube on PS3, Weather,
Netflix, etc.
10 Web Development and Web Design Facts
That You Should Know
Web Development has grabbed a lot of attention in today’s
date. But the question arises, why has it gained such a
massive audience in the last decade. So Here’s the answer:
Web development is the basic building and maintenance of
websites; it’s the whole procedure that happens to make a
website look great, responsive, work smooth, and
performing well with seamless user experience.
1. First Impression is the Last Impression
It takes less than a second, for a user to make
his/her view on the organization by its initial
experience through its web page. It is very
significant to make the first impression as the best
for everyone who lands on the page with the help
of adequate background theme, fonts, icon designs,
color combinations, proper animations(if required),
layout, and maintaining the sections of the page in
a well-designed manner. The first and most
significant role for standing out through digital
means is played by Web Development.
∙ 2. Easy, Easier, Easiest
∙ Web development uses HTML, CSS, and Javascript to
create responsive and attractive websites which are far easier
than software development or android application
development comparatively because in the native
applications code should be programmed according to the
platform because of the significant difference in language
and processes resulting extra resources and skills to be
familiar with it. But a web page has just to be built once
with cross-browser support which not only makes it ready to
use in all devices but also reaches a greater number of
audiences. After all, the number matters the most for an
organization.
∙ 3. Interrelation of Code and SEO
∙ Your website should be the one that can stand out there.
Many developers do not keep this point in their mind while
writing the codes but each word can have a great impact to
affect the reach of the page. Source code should be written
considering SEO(Search Engine Optimization) which
increases the rankings in search engines. Page titles and tags
should be focused on during development.
∙ More the Lists and Lesser the Paragraphs
∙ A Bulky page with gigantic paragraphs is SEO friendly, but too
much text reduces the responsiveness and avoided by the users.
No users would prefer to large texts but surely go throughout the
page if the details are mentioned in the form of lists with sub-
points, pointing out the specialties, and along with it proper
multimedia materials make it better.
∙ 5. The Older, the Worst
∙ An average lifespan of a website is between two or three years
because digital technologies are continuously evolving. The
aspects all over the internet never remain constant, so adapting
to the change is necessary. Constant nurturing and modifications
as per the trends are necessary to catch the audience.
∙ 6. You can Learn it All Within a Week
∙ Learning Web development from scratch is not a tough task at
all because HTML, CSS, and Javascript are far easier and one
can easily get used to it within a week. After learning the
fundamentals, making a normal responsive website is just a task
of less than an hour. One can become an expert at it from a
beginner in a short span due to which it has been a great choice
among the developers to opt for.
∙ 7. Won’t Go Out of Your Budget
∙ Building and Maintaining a responsive design and making
the web page search engine friendly can do really for a lower
cost as compared to native applications that require separate
work for multiple platforms. The majority organization goes
for a webpage rather than an android app to spread the brand
to its target audience because it takes just seconds to load
and run in any kind of device because of its cross-browser
support. So you do not need to worry about the budget.
∙ 8. Targeting the DemoGraphics
∙ Proper research of user demographics must be done and
design must be presented according to it so that your larger
group of audience connects well with your web page.
Different places with different people and their different
norms, due to which the reactions to technology might differ.
Themes and page backgrounds should be considered by
demographics.
∙ Making it Go Better with the Smartphones
∙ According to the research reports, two-thirds of the users surf
the web pages on their smartphones. So it is necessary to use
things such as CSS Flexbox or other tags which changes
page as per the screen ratio and doesn’t compromise with the
quality. All users surely might not be having desktop and
laptops, so proper communication with the smartphone
audience with the chatbot feature might play a good role.
∙ 10. Web Development is Not Web Design
∙ Many people might think that web design and web
development are synonyms of each other. That’s completely
misleading. Web design is a subset of web development
because the web developer has a lot more to do than just
design and write code. Designers are those guys who are
focused on the look and finish of a website; whereas web
developers have a broader responsibility to make all the
aspects(Back-end and Front-end) of the site perform in an
error-free manner. These myths have been brought up
because of similarness between front end development and
web design.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
∙ Learning to code is always exciting and fun for everyone
and when it comes to stepping into the programming world
most of the people start with the easiest thing HTML and
CSS. Every beginner’s coding journey in frontend starts
with these two basic building blocks and you need to be
creative when it comes to designing a beautiful
application.
∙ A Tribute Page
∙ The simplest website you can make as a beginner is a
tribute page of someone you admire in your life. It
requires only basic knowledge of HTML and CSS.
Make a webpage writing about that person adding
his/her image. On the top of the webpage, add the
image and name of the person and below that give
layout for the rest of the details. You can use
paragraphs, lists, links, images with CSS to give it a
descent look. Add a suitable background color and
font style on your webpage. Most of the parts you can
make using HTML but to give it a better look using a
bit of CSS. Take help from the link given below.
• My Tribute Page
Top ten Projects for webpages using HTML and
CSS
∙ Webpage Including Form
∙ Forms are always an essential part of any project and
you will be working with a lot of forms in most of the
applications so why not practice it earlier and test
your knowledge. Once you get familiar with the input
field or basic tags in HTML to create a form make a
project using all those tags. How to use a text field,
checkbox, radio button, date, and other important
elements in a single form. You will be learning how to
give a proper structure to a webpage while creating a
form. Knowledge of HTML/HTML5 is good enough
but you can use a bit of CSS to make the project look
better. Take help from the links given below.
• Survey Form
∙ 3. Parallax Website
∙ A parallax website includes fixed images in the
background that you can keep in place and you can
scroll down the page to see different parts of the image.
With basic knowledge of HTML and CSS, you can give
a parallax effect to a website. Using the parallax effect
in web designing is really popular and it gives beautiful
look and feels to the webpage. Give it a try and divide
the whole page into three to four different sections. Set
3-4 background images, align the text for different
sections, set margin and padding, add background-
position and other CSS elements and properties to
create a parallax effect. You can take help from the link
given below.
• Parallax Website
Top ten projects required for the HTML and CSS
∙ Restaurant Website
∙ Showcase your solid knowledge of HTML and CSS
creating a beautiful webpage for a restaurant. Making a
layout for a restaurant will be a bit complicated than
previous project examples. You will be aligning the
different food items and drinks using a CSS layout grid.
You will be adding prices, images and you need to give
it a beautiful look and feel as well using the proper
combination of colors, font-style and images. You can
add pictures gallery for different food items, you can
also add sliding images for a better look. Add links for
redirection to internal pages. Make it responsive setting
a viewport, using media queries and grid. You can take
help from the link given below.
• Restaurant Website
∙ An Event or Conference Webpage
∙ You can make a static page holding an event or conference.
People who are interested in attending the conference create
a register button for them. Mention different links for
speaker, venue and schedule at the top in the header section.
Describe the purpose of the conference or the category of
people who can get benefit from this conference. Add an
introduction and images of the speaker, venue detail and the
main purpose of the conference on your webpage. Divide
the page into sections, add header and footer showcasing the
menu. Use proper background color that can go well with
each other for various sections. Choose a descent font style
and font color that matches the theme of your web page. It
requires HTML/HTML5 and CSS knowledge in depth. You
can take help from the link given below.
• Event webpage
Top ten projects required for the HTML and CSS
∙ Music Store Page
∙ If you are a music lover you can make a webpage for
it. It requires HTML5/CSS3 knowledge. Add a
suitable background image describing the purpose or
what the page is all about. In the header section add
different menus. Add buttons, links, images and some
description about the collection of songs available. At
the bottom mention the links for shopping, store,
career or contact details. You can also add other
features on your webpages such as a trial option, gift
cards or subscription. Make it responsive setting
viewport or using media queries and grid. You can
take help from the link given below.
• Event webpage
∙ Photography Site
∙ If you have in-depth knowledge of HTML5 and CSS3,
you can make a one-page responsive photography site.
Use flexbox and media queries for responsiveness. Add
the company name with an image (related to
photography) on the top (landing page). Below that
showcase your work adding multiple images. Mention
the contact detail of the photographer at the bottom
(footer). Add a button to view your work. This button
will directly bring you down to the images section. You
need to take care of the margin, padding, color
combination, font-size, font-style, image size and
styling of a button. You can take help from the link
given below.
• Image gallery
Top ten projects required for the HTML and CSS
∙ Personal Portfolio
∙ With knowledge of HTML5 and CSS3, you can also
create your portfolio. Showcase your work samples
and skills in your portfolio with your name and
pictures. You can also add your CV there and host
your complete portfolio on GitHub account. In your
header section mention some menus like about,
contact, work or services. At the top add one of your
images and introduce yourself there. Below that add
some work samples and at last (footer) add contact
information or social media account. You can take
help from the links given below.
• Simple portfolio
• Portfolio gallery
∙ 10. Technical Documentation
∙ If you have a little bit of knowledge of Javascript then you
can create a webpage of technical documentation. It
requires knowledge of HTML, CSS and basic javascript.
Divide the whole webpage into two sections. The left side
creates a menu with all the topics listed from top to
bottom. Right side you need to mention the
documentation or description for the topics. The idea is
once you click on one of the topics in the left section it
should load the content on the right. For click, you can
use either javascript or CSS bookmark option. You don’t
need to make it too fancy, just give it a simple and descent
look, that looks good for technical documentation. You
can take help from the links given below.
• Technical Documentation
How to set Background Color in HTML ?
∙ In this article, we will see how to set the background
color of an element. The purpose of
∙ The HTML5 doesn’t support the
using style attribute is to add styles to the elements.
Using style attribute with different elements results
in change in that element only. This attribute can be
used as inline, internal or external. The style attribute
provides number of properties which can be used to
improve a simple html page.
∙ The background color can be changed in three ways:
• Inline style attribute
• Internal CSS
• External CSS
‘bgcolor’ attribute of <body> tag,
therefore we need to use the inline
style attribute and internal CSS
options for changing the color of a
web page. For internal CSS
add <style> tag at beginning of html
file and add the tag to which the
changes are being applied in this case
the <body> tag is used.
HTML
<!DOCTYPE html>
<html>

<head>
<style>
body {
background-color: powderblue;
}
<!DOCTYPE html>
<html> h1 {
color: green;
<!--This line changes the color of background--> text-align: center;
<body style="background-color:pink"> }
<h1 style="color:green;text-align:center;">
GeeksForGeeks h3 {
</h1> text-align: center;
}
<h3 style="text-align:center;"> </style>
How to change color of Background? </head>
</h3>
</body> <body>
<h1>GeeksForGeeks</h1>
</html>
<h3>
How to change color of
Background?(Using Internal CSS)
</h3>
</body>

</html>
HTML TEXT EDITORS
∙ HTML text editors are used to create and modify
web pages. HTML codes can be written in any
text editor including the notepad. One just needs
to write HTML in any text editor and save the
file with an extension “.html” or “.htm”. Some
of the popular HTML text editors are given
below:
• Notepad
• Notepad++
• Sublime Text 3
• Atom
• GeeksforGeeks IDE
Sublime
∙ Sublime is a cross platform code editor
tool. It supports all markup languages.
Atom ∙ Steps to write HTML code in Editor:
1.Open any of the text editors of your
∙ Atom
choice. Here we are using
∙ Atom is an open source code editor the notepad text editor.
tool for MAC, Linux and Windows.
∙ Create new file: File->New File or ∙ Write HTML code in text
Ctrl+N. editor
∙ Save the file with a suitable name of
your choice and a .html extension.
∙ Open the saved HTML file
in your favorite browser
(double-click on the file, or
right-click – and choose
“Open with”).
HTML Code
∙ Example: In this example, we simply <!DOCTYPE html>
<html>
display text in HTML strong, small,
and Highlight formatting respectively. <body>
<h2>Welcome To GeeksforGeeks</h2>

<!--Text in Strong-->
<strong>Hello Geeks</strong>
<br>

<!--Text in small-->
<small>Hello Geeks</small>
<br>

<!--Text in Highlight-->
<mark>Hello Geeks</mark>
</body>

</html>
 Example 1: The below example describes the formatting of the text to normal, bold, &
strong.

<head>
<title>Bold Text</title>
</head>

<body>
<!--Normal text-->
<p>Hello GeeksforGeeks</p>

<!--Text in Bold-->
<p>
<b>Hello GeeksforGeeks</b>
</p>

<!--Text in Strong-->
<p>
<strong>Hello GeeksforGeeks</strong>
</p>
</body>

</html>
Example 2: The below example describes the formatting of the text to Italic or

emphasize .
<!DOCTYPE html>
<html>
∙ Example: The below example describes the use of the <mark> tag that
<head> is used to define the marked text.
<title>Italic</title> <!DOCTYPE html>
</head> <html>

<body> <head>
<!--Normal text--> <title>Highlight</title>
<p>Hello GeeksforGeeks</p> </head>

<!--Text in Italics--> <body>

<p> <!--Text in Normal-->
<i>Hello GeeksforGeeks</i> <p>Hello GeeksforGeeks</p>
</p>
<!--Text in Highlight-->
<p>
<!--Text in Emphasize--> <mark>Hello GeeksforGeeks</mark>
<p> </p>
<em>Hello GeeksforGeeks</em> </body>
</p>
</body>
</html>
</html>
 Example: The below example describes the use of the <sup> & <sub> tags that are
used to add the superscript & subscript texts to the HTML document.
<!DOCTYPE html>
<html>

<head>
<title>Superscript and Subscript</title>
</head>

<body>
<!--Text in Normal-->
<p>Hello GeeksforGeeks</p>

<!--Text in Superscript-->
<p>Hello
^{GeeksforGeeks}
</p>

<!--Text in Subscript-->
<p>Hello
_{GeeksforGeeks}
</p>
</body>

</html>
Tables IN HTML
∙ Defining Tables in HTML: An ∙
∙
A simple HTML table:
<table>
HTML table is defined with the <tr>
<th>Company</th>
“table” tag. Each table row is defined <th>Contact</th>
<th>Country</th>
with the “tr” tag. A table header is </tr>
<tr>
defined with the “the” tag. By default, <td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
table headings are bold and centered. <td>Germany</td>
</tr>
A table data/cell is defined with the <tr>
<td>Centro comercial Moctezuma</td>
“td” tag. <td>Francisco Chang</td>
<td>Mexico</td>

∙ Example 1: In this example, we are </tr>

</table>
creating a simple table in HTML using ∙ Try it Yourself »

a table tag.
CSS Basics
∙ This CSS tutorial contains hundreds of CSS
examples.
∙ What is CSS?

∙ With our online editor, you can edit the CSS, and • CSS stands for Cascading Style Sheets
click on a button to view the result.
• CSS describes how HTML elements are
∙ CSS Example
to be displayed on screen, paper, or in
∙ body {
other media
background-color: lightblue;
}
• CSS saves a lot of work. It can control
h1 {
the layout of multiple web pages all at
color: white; once
text-align: center;
} • External stylesheets are stored in CSS
files
p {
font-family: verdana;
font-size: 20px;
}
Why use CSS?
∙ Why Use CSS? ∙ CSS Solved a Big Problem

∙ CSS is used to define styles for your web pages, ∙ HTML was NEVER intended to contain tags for
including the design, layout and variations in display formatting a web page!
for different devices and screen sizes. ∙ HTML was created to describe the content of a web
∙ CSS Example page, like:

∙ body { ∙ <h1>This is a heading</h1>

background-color: lightblue; ∙ <p>This is a paragraph.</p>
}
∙ When tags like <font>, and color attributes were
added to the HTML 3.2 specification, it started a
h1 {
nightmare for web developers. Development of large
color: white;
websites, where fonts and color information were
text-align: center;
added to every single page, became a long and
}
expensive process.

p { ∙ To solve this problem, the World Wide Web

font-family: verdana; Consortium (W3C) created CSS.
font-size: 20px; ∙ CSS removed the style formatting from the HTML
} page!
CSS
∙ A CSS rule consists of a
selector and a declaration
block.
The selector points to the HTML element you want to
style.
The declaration block contains one or more
declarations separated by semicolons.
Each declaration includes a CSS property name and a
value, separated by a colon.
Multiple CSS declarations are separated with
semicolons, and declaration blocks are surrounded by
curly braces.
CSS
∙ Example ∙ Example
∙ In this example all <p> ∙ In this example the <p>
elements will be center- element will be styled
aligned, with a red text color: according to class="center"
and to class="large":
∙ p {
color: red; ∙ <p class="center large">This
text-align: center; paragraph refers to two
} classes.</p>
CSS GROUPING SELECTOR
∙
∙
The CSS Grouping Selector
The grouping selector selects all the HTML elements
∙ Example

∙
with the same style definitions.
Look at the following CSS code (the h1, h2, and p
∙ In this example we have
elements have the same style definitions): grouped the selectors from
∙ h1 {
the code above:
text-align: center;
color: red;
} ∙ h1, h2, p {
h2 { text-align: center;
text-align: center;
color: red; color: red;
}
}
p {
text-align: center;
color: red;
}
All CSS Simple Selectors

Selector Example Example description

#id #firstname Selects the element with id="firstname"
.class .intro Selects all elements with class="intro"
element.class p.intro Selects only <p> elements with class="intro"
* * Selects all elements
element p Selects all <p> elements
element,element,.. div, p Selects all <div> elements and all <p> elements
Example:
∙ Example ∙ CSS Background Color

∙ External styles are defined within the <link> ∙ You can set the background color for HTML elements:
element, inside the <head> section of an HTML ∙ Hello World
page: ∙
∙ <!DOCTYPE html>
Lorem ipsum dolor sit amet, consectetuer adipiscing
<html> elit, sed diam nonummy nibh euismod tincidunt ut
<head> laoreet dolore magna aliquam erat volutpat. Ut wisi
<link rel="stylesheet" href="mystyle.css"> enim ad minim veniam, quis nostrud exerci tation
</head> ullamcorper suscipit lobortis nisl ut aliquip ex ea
<body> commodo consequat.

<h1>This is a heading</h1>
<p>This is a paragraph.</p> ∙ Example
∙ <h1 style="background-color:DodgerBlue;">Hello
</body> World</h1>
<p style="background-color:Tomato;">Lorem
</html>
ipsum...</p>
CSS TEXT Color
∙ CSS Text Color
∙ You can set the color of text:
∙ Hello World
∙ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
∙ Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
∙ Example
∙ <h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
 CSS BACKGROUND COLOR

CSS background-color
The background-color property specifies the background color of an element.

Example
The background color of a page is set like this:
body {
background-color: lightblue;
}
 OPACITY

Opacity / Transparency
The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

Example
div {
background-color: green;
opacity: 0.3;
}
CSS BACKGROUNDS
∙ Example ∙ Example
∙ Set the background image for ∙ This example shows a bad
a page: combination of text and
background image. The text is
∙ body {
hardly readable:
background-
image: url("paper.gif"); ∙ body {
} background-
image: url("bgdesert.jpg");
}
 Margin - Shorthand Property
Margin - Individual Sides To shorten the code, it is possible to specify all the margin properties in one
CSS has properties for specifying the margin for each side of an element: property.
•margin-top The margin property is a shorthand property for the following individual margin
•margin-right properties:
•margin-bottom •margin-top
•margin-left •margin-right
All the margin properties can have the following values: •margin-bottom
•auto - the browser calculates the margin •margin-left
•length - specifies a margin in px, pt, cm, etc. So, here is how it works:
•% - specifies a margin in % of the width of the containing element If the margin property has four values:
•inherit - specifies that the margin should be inherited from the parent •margin: 25px 50px 75px 100px;
element •top margin is 25px
•right margin is 50px
•bottom margin is 75px
•left margin is 100px
 CSS OVERFLOW

CSS Overflow
The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.
The overflow property has the following values:
•visible - Default. The overflow is not clipped. The content renders outside the element's box
•hidden - The overflow is clipped, and the rest of the content will be invisible
•scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
•auto - Similar to scroll, but it adds scrollbars only when necessary
 FLOAT PROPERTY

The float Property

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.
The float property can have one of the following values:
•left - The element floats to the left of its container
•right - The element floats to the right of its container
•none - The element does not float (will be displayed just where it occurs in the text). This is default
•inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around images.
Example - Float Next To Each Other

∙ Example
∙ div {
float: left;
padding: 15px; The display: inline-block Value
} Compared to display: inline, the major difference is that display: inline-block allows to set a
width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are respected, but
.div1 { with display: inline they are not.
background: red; Compared to display: block, the major difference is that display: inline-block does not add a
} line-break after the element, so the element can sit next to other elements.
The following example shows the different behavior of display: inline, display: inline-
block and display: block
.div2 {
background: yellow;
}

.div3 {
background: green;
}
Example of CSS
∙
∙
Example
span.a {
∙ Example
display: inline; /* the default for span */
width: 100px;
height: 100px;
∙ .nav {
padding: 5px; background-color: yellow;
border: 1px solid blue;
background-color: yellow;
list-style-type: none;
} text-align: center;
span.b { padding: 0;
display: inline-block;
width: 100px; margin: 0;
height: 100px;
padding: 5px; }
border: 1px solid blue;
background-color: yellow;
}
.nav li {
span.c {
display: block;
display: inline-block;
width: 100px; font-size: 20px;
height: 100px;
padding: 5px; padding: 20px;
border: 1px solid blue;
background-color: yellow; }
WEB DESIGN PRINCIPLES
∙ . Purpose sets the foundation ∙ White spaces creates balance
∙ Content gives meaning ∙ Authenticity fosters trust
∙ Visuals keep people engaged
∙ Harmony makes a design sing
∙ Typography shapes perception
∙ Organization unifies
∙ Colors set the tone
WEB DEVELOPMENT TOOLS AND
FRAMEWORKS
∙ Web development frameworks are groups of libraries
and tools that make it easier for developers to create
and maintain web applications efficiently. They offer a
framework for creating and managing websites and web
applications, accelerating and simplifying development.
∙ Having a digital presence is now required for every
organization and individual developer. However,
developers might require clarification on which web
development framework to pick when creating their
websites. Web development frameworks are becoming
more and more essential as application requirements
increase. Developers can use the top web development
frameworks to build dynamic, browser-compatible
websites and web apps to provide a seamless digital
experience.
WEB DEVELOPMENT TOOLS AND
FRAMEWORKS
∙ Since many web development frameworks
are available, each with its diverse inventory
often confuses experienced developers. You
must think carefully before selecting one
since your website’s future, and workability
depends on your chosen framework.
∙ As per Statista, Node.js surpassed React.js to
become the most widely used web
development framework among software
developers globally in 2022. Based on the
survey, 47.12 percent reported utilizing
Node.js, whereas 42.62 percent used React.js.
WEB DEVELOPMENT FRAMEWORK
∙ A web development framework is a pre-established collection
of software tools, libraries, and guidelines created to expedite
and streamline the process of web application development. It
offers a consistent framework and regulations for constructing
web applications, simplifying developers’ workloads by
managing routine tasks like routing, database interaction,
session management, and authentication.
∙ Web development frameworks are available for front-end and
back-end development that support a wide range of features
and functions, including UI components, data binding, server-
side processing, and content management. They are accessible
in several programming languages. Developers have a variety
of web development frameworks to choose from depending
on their project’s particular needs. Using a web development
framework can assist in ensuring that the finished product is
scalable, reliable, and maintainable due to the standardized
approach to development it offers.
∙ Benefits of using Web Development Frameworks
∙ Using web development frameworks can bring
many benefits to your development process,
including
• Speed and Efficiency: It allows developers to build
applications faster and with less code.
• Consistency and Modularity: Easy to maintain and
scale applications over time.
• Security: Includes built-in security features that
help to protect against threats.
• Community Support: Supports large communities
of developers who provide support and resources.
BENEFITS OF WEB DEVELOPMENT
FRAMEWORKS
• Community Support: Supports large
communities of developers who provide support
and resources.
• Scalability: Allows scaling of applications as
they grow in size and complexity.
• Testing and Debugging: Offers various tools
and features to make testing and debugging
easier.
∙ Overall, web development frameworks can
significantly improve the final product’s
development process and quality, making them a
valuable tool for any web development project.
∙ Classification of Web Framework Architectures
∙ Web framework architectures provide a standardized
way of building web applications. They define the
structure and organization of the application and how
different components interact with each other. Here are
some of the most common web framework
architectures:
• Model-View-Controller (MVC) Architecture
∙ Model-View-Controller (MVC) architecture is a
popular web development architecture that separates
the application into three main components:
• Model
• View
• Controller
WEB DEVELOPMENT FRAMEWORKS
• Model-View-ViewModel (MVVM) Architecture
∙ Model-View-ViewModel (MVVM) architecture is a
popular web development architecture that is similar to the
Model-View-Controller (MVC) architecture but with some
key differences. The MVVM architecture separates the
application into three main components:
• Model
• View
• ViewModel
∙ The model represents the data, the view represents the user
interface, and the view model manages the communication
between the model and the view. This separation makes the
application easier to develop, maintain, and test. Many web
development frameworks are built using this architecture,
and here are some popular examples: AngularJS, Vue.js,
Knockout.js, and React.
• Three-Tier Architecture
∙ Three-Tier Architecture, also known as Multi-Tier
Architecture, is a popular web development architecture
that separates the application into three main tiers:
• Presentation tier
• Application tier
• Database tier
∙ The presentation tier handles the user interface, the
application tier handles the business logic, and the
database tier handles data storage and retrieval. This
separation makes the application easier to develop,
maintain, and test. Many web development frameworks
are built using this architecture, and here are some
popular examples: CakePHP, Express.js, Ember.js, and
Backbone.js.
Difference between Front end and Backend
Development Frameworks
Trends in Web Development
1. Progressive Web Apps (PWAs)
2. AI Chatbots
3. Accelerated Mobile Pages
4. Single-Page Application
5. Optimized Voice Search
6. WordPress Development
7. Motion UI
8. Serverless Architecture
9. Responsive Site Design
10.Dark Mode Standardization
11.Improved Native Cybersecurity
∙ 1.While progressive web apps (PWAs) aren't new,
their latest iteration will replace web apps for good.
PWAs help websites load in no time and work
offline in apps like Google Maps. Companies
including Starbucks, Uber, Pinterest, and Twitter use
PWAs for an improved user experience — and in
2023, many more organizations will begin to catch
on.
∙ 2. AI Chatbots
∙ In 2023, AI chatbots will become even more
sophisticated to meet users' needs. To achieve this,
bots will more efficiently match user behavior by
leveraging machine learning, natural language
processing, and information retrieval techniques.
Trends in Web Development
∙ 3. Accelerated Mobile Pages
∙ Almost 70% of consumers indicated that page speed
impacts their decision to purchase from an online
seller, according to Unbounce. In other words, you
should not ignore your site's speed. That's where
accelerated mobile pages come into the picture.
∙ First launched by Google in 2015, the accelerated
mobile page (AMP) provides mobile users with
lightning-fast digital experiences. In addition to
offering seamless user experiences and decreasing
bounce rates, Google's AMP> may improve core
business metrics. These metrics could even be as
important as the number of conversions on web
pages.
∙ Optimized Voice Search
∙ First introduced by Google in 2011, voice
search is rapidly rising in popularity.
Intelligent virtual assistants like Alexa and
Siri showed unprecedented market growth in
2019 and are forecasted to continue to grow
rapidly, according to an analysis by Grand
View Research .
∙ According to Google , 27% of individuals use
voice search on mobile devices. A Microsoft
study reveals that 72% of users have used a
digital assistant within the last six months.
 Progressive Web Apps

What is a progressive web app?

An introduction to PWAs, comparing them with traditional websites and with platform-specific apps, and outlining their main features.
Making PWAs installable
One of the defining aspects of a PWA is that it can be installed on the device, and then appears to users as a platform-specific app, a permanent feature of their device which they can
launch directly from the operating system like any other app. In this guide we'll explore what "installable" means, what a PWA needs to provide for it to be installable, and
how you can customize the install experience.
Installing and uninstalling web apps
This guide covers how users can install and uninstall PWAs on their devices.
Offline and background operation
In this guide, we'll introduce a set of technologies that enable a PWA to provide a good user experience even when the device has intermittent network connectivity and to perform
operations in the background, even when the main app is not running.
Caching
An overview of the APIs that enable a PWA to cache resources locally, and some common strategies used by PWAs to implement offline functionality.
Best practices for PWAs
PWAs should adapt to different browsers and devices, be accessible, have good performance, and integrate well with the operating system. This guide provides a list of best
practices to help you make sure your PWA is as good as it can be.
THE END