School of Engineering: CSE3150 - Front-End Full Stack Development

CSE3150 – Front-end Full Stack Development
Department of Computer Science Engineering
School of Engineering
17.2.23 – Friday
5th Period
Module I - Syllabus 1.20 pm to 2.10 pm
[Lecture-5Hrs, Practical-4Hrs,Knowledge]
Introduction to Agile Methodology;
Scrum Fundamentals; Scrum Roles, Artifacts and Rituals;
DevOps – Architecture, Lifecycle, Workflow & Principles;
DevOps Tools Overview – Jenkins, Docker, Kubernetes.
Review of GIT source control.
HTML5 – Syntax, Attributes, Events,

Web Forms 2.0, Web Storage, Canvas, Web Sockets;
CSS3 – Colors, Gradients, Text, Transform
CSE3150 – Front-end Full Stack

2
Development
Introduction to Agile Methodology:
• Agile is a method of software development that aims to provide

functional software consistently through short iterations.
• The Agile technique divides a project into many parts and uses
these phases to manage the project.
• Continuous improvement at every stage & ongoing collaboration

with stakeholders are required.
• Teams cycle through a process of planning, carrying out, and

assessing once the job starts.
• Collaboration between team members and project stakeholders

must always be ongoing.

3
Development
Introduction to Agile Methodology:
• Agile is a project management approach that emphasizes

collaboration, flexibility, and customer satisfaction.
• It values delivering a working product incrementally & embracing

change.

4
Development
Manifesto for Agile Software Development
We are uncovering better ways of developing software by doing it and

helping others do it.
Agile software development teams should value:
• Individuals and interactions over processes and tools
• Working software over comprehensive documentation
• Customer collaboration over contract negotiation
• Responding to change over following a plan

5
Development
Principles behind the Agile Manifesto
We follow these principles:

✓ Our highest priority is to satisfy the customer through early and
continuous delivery of valuable software.
✓ Welcome changing requirements, even late in development. Agile

processes harness change for the customer's competitive
advantage.
✓ Deliver working software frequently, from a couple of weeks to a

couple of months, with a preference to the shorter timescale.
✓ Business people & developers must work together daily

throughout the project.

6
Development
✓ Build projects around motivated individuals. Give them the

environment and support they need, and trust them to get the job
done.
✓ The most efficient & effective method of conveying information to

and within a development team is face-to-face conversation.
✓ Working software is the primary measure of progress.
✓ Agile processes promote sustainable development. The sponsors,

developers, and users should be able to maintain a constant pace
indefinitely.

7
Development
✓ Continuous attention to technical excellence & good design enhances

agility.
✓ Simplicity – the art of maximizing the amount of work not done – is

essential.
✓ The best architectures, requirements, & designs emerge from self-

organizing teams.
✓ At regular intervals, the team reflects on how to become more effective,

then tunes & adjusts its behavior accordingly.

8
Development
Pros of Agile Methodology
• Flexibility
• Collaboration
• Customer satisfaction
• Continuous improvement
• Faster delivery

9
Development
Cons of Agile Methodology
• Implementation challenges
• Lack of structure
• Difficulty with longer-term planning
• Requires a dedicated team
• Can lead to scope creep

10
Development
23.2.23 – Thursday
5th Period


11
Development
Scrum
• Scrum is an Agile framework for managing & completing
complex projects.
• It involves a self-organizing & cross-functional team that

.
works to deliver a usable product incrementally.
• "Scrum is an agile process that allows us to focus on delivering

the highest business value in the shortest time."
- Mike Cohn, Mountain Goat Software

12
Development
Scrum Fundamentals
1. Empirical Process Control: Scrum is based on the
principle of empirical process control, which means that
it relies on experience & experimentation to continuously
improve the process.
2. Cross-functional Teams: Scrum teams are cross-

functional, meaning they consist of individuals with a
range of skills and expertise.
Scrum Fundamentals
3. Sprint: A sprint is a time-boxed period, usually
one to four weeks, during which the team works
on completing a set of tasks.
4. Incremental Delivery: Scrum allows for the
delivery of a usable product increment at the end
of each sprint.
5. Transparency: Scrum emphasizes transparency
in all aspects of the process, from the work being
done by the team to the progress being made.
Scrum Methodology
• Scrum is simple light weighted agile project management
methodology that enables product teams to build products
incrementally in an iterative fashion through effective team
collaboration.
• Scrum forms the base for many of the other frameworks and hence
it is important for an agile practitioner to understand this
methodology.
• The Scrum Methodology is defined by:
✓ Scrum Roles
✓ Scrum Events
✓ Scrum Artifacts
Scrum Methodology
Module I - Syllabus


17
Development
What are Scrum Roles?
The scrum team is made up of 3 roles:
1. A Product Owner
2. A Scrum Master
3. The Development Team.

1. Product Owner:
A Product Owner in a scrum team decides what needs to be
built. Unlike traditional delivery, this person is a part of the team that
delivers the product.
Following are the key responsibilities of the Product Owner:

• Creates the vision
• Represents business, and is responsible for the ROI
• Cascades the vision to the teams
• Owns the backlog of features
• Prioritizes features by market value
• Is empowered to take decisions
• Negotiates with the team & business to deliver the right product
at the right time
2. Scrum Master:
The Scrum Master's major responsibility is to ensure that scrum
is understood & practiced by every team member in the true
spirit.
Following are the key responsibilities of the Scrum Master :

• Is a servant leader
• Helps remove obstacles/impediments
• Facilitates collaboration
• Teaches scrum to the team.
• Protects the teams from external disruptions such as changes to
stories in the current sprint.
• Is a change agent in growing the organization to deliver early &
often, and removing waste.
3. The Development team:
The Development team in scrum is the team that has all the skills
necessary to execute the backlog items.
The following are the special characteristics of the Development

team:
• Self-organizing
• Empowered
• Cross-functional
• Small-sized
• Co-located
• Committed
• Dedicated
Module I - Syllabus


22
Development
What are Scrum Artifacts?
Scrum is an Agile framework for managing software development

projects.
It involves a set of practices and principles designed to help teams

deliver high-quality products in a fast and efficient manner.
The following are the 3 main artifacts in Scrum:
1. Product Backlog
2. Sprint Backlog
3. Increment
Scrum Artifacts
1.Product backlog
A product backlog is a dynamic list of functionalities the product might
include, such that it provides value to users.
These are a few unique characteristics of a product backlog:

• It is dynamic in nature as it evolves based on changing
market needs
• Lists all the features and capabilities that will be taken up
in iteration and delivered as a product increment
• It is refined on a continuous basis.
The Product Owner and Development team
collaborate and update the details, estimate, and prioritize
based on business value and size
Scrum Artifacts
2. Sprint backlog:
Sprint backlog is a subset of the entire product backlog that the scrum
team plans to implement in one iteration or sprint.
Sprint backlog has:

• Subset of product backlog items that the teams commit to
implement in one sprint
• Items broken into smaller pieces of work as tasks
• A focus on 'HOW' the team does the work and delivers the value in
one sprint
• A story or task board that is used by the teams to view backlog and
what the individuals sign up for work after backlog prioritization
• Provision for the Development teams to track the sprint progress
and check their alignment with sprint goals
Scrum Artifacts
3. Increment:
• An increment is the work delivered at the end of every sprint. Typically,
after every iteration there will be a Product Increment (PI) that delivers
value & the final product will be a working software.
• This increment is a sum of all the capabilities that were delivered in

the previous sprints as a part of the PI. At the end of every sprint, the
Product Owner decides whether to release the working product
increment or wait until the next release.
24.2.23 – Friday
5th Period
Scrum 1.20 pm to 2.10 pm
Scrum events and rituals

Events:
Events are time-boxed activities with specific agendas and

outcomes that must be achieved within the time frame.
There are 4 main events in Scrum:
Sprint,
Sprint Planning,
Daily Scrum,
& Sprint Review.

Scrum
Scrum events and rituals

Rituals:
Rituals are repeated activities that are performed regularly to

reinforce the principles and values of Scrum.
Rituals are less formal and less time-boxed than events and do not
have specific agendas or outcomes.
Examples of Scrum rituals include the
product backlog refinement,
sprint retrospectives (Demonstrations),

& product demos.
SRUM Rituals
Scrum rituals are regular activities that help reinforce the principles and
values of Scrum and improve the development process.
Some of the main Scrum rituals:

✓ Sprint Planning: The team meets to plan the upcoming sprint, review
the product backlog, and determine which items can be completed
during the sprint. This is a collaborative effort between the development
team and the product owner.
✓ Daily Scrum: Also known as the "stand-up," this is a daily meeting
where the development team members share updates on their progress
and discuss any obstacles they may be facing. The purpose of the Daily
Scrum is to increase transparency and accountability within the team.
SRUM Rituals
Sprint Review: The team meets to review the work completed during the
sprint and demonstrate the product increments to stakeholders. This is an
opportunity for the team to receive feedback and make improvements for the
next sprint.
Sprint Retrospective: The team meets to reflect on the past sprint and
identify ways to improve the development process for the next sprint. The
Sprint Retrospective is an opportunity for the team to continuously improve
and adapt to changing circumstances.
Product Backlog Refinement: The product backlog is regularly reviewed
and updated to ensure that it accurately reflects the priorities and goals of
the project. This helps to ensure that the team is focused on delivering the
most valuable features and functionality to the customer.
https://www.youtube.com/watch?v=gi4SOP
2ElAw&ab_channel=MarkShead
Module I - Syllabus


31
Development
What is DevOps?
• The DevOps is a combination of two words,

one is software Development,
and second is Operations.
• This allows a single team to handle the entire

application lifecycle, from development
to testing, deployment, and operations.

32
Development
What is DevOps?
• DevOps helps you to reduce the disconnection between
software developers,
quality assurance (QA) engineers
and system administrators.

33
Development
What is DevOps?
• Various DevOps tools
– Git,
– Ansible,
– Docker,
– Puppet,
– Jenkins,
– Chef,
– Nagios,
– Kubernetes.

34
Development
DevOps Architecture
• The operation consists of the administrative processes, services, and
support for the software.
• When both the development & operations are combined with
collaborating, then the DevOps architecture is the solution to fix the
gap between deployment and operation terms; therefore, delivery
can be faster.

35
Development
DevOps Architecture
The various components that are used in the DevOps architecture:

36
Development
DevOps Architecture
The various components that are used in the DevOps architecture:
• Build: Cloud and shared resources are used to control resource
usage.
• Code: Good practices like Git make code use, tracking, and
reusability easier.
• Test: Automated testing saves time and prepares the app for
production.
• Plan: Agile methodology helps plan development and improve
productivity.
• Monitor: Continuous monitoring reduces risk of failure and tracks
app health.
• Deploy: Automated deployment captures insights and optimizes
performance.
• Operate: DevOps collaborates throughout the service lifecycle.
• Release: Deployment to production is done manually to minimize
impact.

37
Development
DevOps Lifecycle
• DevOps defines an agile relationship between operations and
Development.
• It is a process that is practiced by the development team and
operational engineers together from beginning to the final stage of
the product

38
Development
DevOps Lifecycle
• The DevOps lifecycle consists of 7 phases:

– Continuous Development,
– Continuous Integration,
– Continuous Testing,
– Continuous Monitoring,
– Continuous Feedback,
– Continuous Deployment,
– Continuous Operations.
• Each phase plays a crucial role in the software development process

and contributes to the overall efficiency and effectiveness of the
DevOps approach.

39
Development
DevOps Lifecycle
• Continuous Development involves planning and coding the

software, where the vision of the project is decided and the
developers begin coding the application.
• Continuous Integration is the heart of the DevOps lifecycle

and involves committing changes to the source code
frequently and building the code, including unit testing,
integration testing, code review, and packaging.
• Continuous Testing involves constantly testing the

developed software for bugs using automation testing tools
such as TestNG, JUnit, and Selenium.

40
Development
DevOps Lifecycle contd..
• Continuous Monitoring involves monitoring the operational

factors of the DevOps process and recording important
information about the use of the software.
• Continuous Feedback involves analyzing the results from

the operations of the software to continuously improve the
application development.

41
Development
DevOps Lifecycle contd..
• Continuous Deployment involves deploying the code to the

production servers and ensuring that the code is correctly
used on all servers. Configuration management tools play a
crucial role in executing tasks frequently and quickly in this
phase.
• Continuous Operations are based on continuity with

complete automation of the release process and allow
organizations to accelerate the overall time to market.
With DevOps, the software product becomes more efficient and

increases the overall count of interested customers.

42
Development
DevOps Workflow
• DevOps workflow provides a visual overview of the sequence
in which input is provided. Also, it tells about which one
action is performed, and output is generated for an
operations process
• DevOps workflow allows the ability to separate and arrange
the jobs which are top requested by the users. Also, it gives
the ability to mirror their ideal process in the configuration
jobs.

43
Development
DevOps Principles
• The main principles of DevOps are Continuous delivery,

automation, and fast reaction to the feedback.
– End to End Responsibility
– Continuous Improvement
– Automate Everything
– Custom Centric Action
– Monitor and test everything
– Work as one tea
https://www.youtube.com/watch?v=Xrgk02
3l4lI&ab_channel=Simplilearn

44
Development
Module I - Syllabus


45
Development
DevOps Tools - Docker
• Docker is a high-end DevOps tool that allows building, ship, and
run distributed applications on multiple systems. It also helps to
assemble the apps quickly from the components, and it is
typically suitable for container management.
• Features
– It configures the system more comfortable and faster.
– It increases productivity.
– It provides containers that are used to run the application
in an isolated environment.
– It routes the incoming request for published ports on
available nodes to an active container. This feature
enables the connection even if there is no task running on
the node.
– It allows saving secrets into the swarm itself.
https://www.youtube.com/watch?v=zfclTRt
KOSM&t=52s&ab_channel=KnowledgeHutup
Grad
Development
46
DevOps Tools - Jenkins
• Jenkins is a DevOps tool for monitoring the execution of
repeated tasks. Jenkins is a software that allows continuous
integration. Jenkins will be installed on a server where the
central build will take place. It helps to integrate project changes
more efficiently by finding the issues quickly
• Features
– Jenkins increases the scale of automation.
– It can easily set up and configure via a web interface.
– It can distribute the tasks across multiple machines, thereby
increasing concurrency.
– It supports continuous integration and continuous delivery.
– It offers 400 plugins to support the building and testing any
project virtually.
– It requires little maintenance and has a built-in GUI tool for
easy updates.
https://www.youtube.com/watch?v=F8IWx
FjLhLs&ab_channel=GKTCSINNOVATIONS

47
Development
DevOps Tools - Kubernetes
• Kubernetes is a powerful and feature-rich platform for
managing containerized applications
• Features
– Container orchestration: Kubernetes provides a platform for
deploying, scaling, and managing containers, making it easier to
manage and scale applications.
– Self-healing: Kubernetes has built-in mechanisms for automatically
replacing failed containers, ensuring that applications remain
available and running even in the face of failures.
– Automatic scaling: Kubernetes can automatically scale the number
of containers running based on demand, providing a way to ensure
that applications can handle increased traffic and load.
– Load balancing: Kubernetes provides built-in load balancing
capabilities, making it easy to distribute incoming traffic across
multiple containers.

48
Development
DevOps Tools
• Features contd..
– Configuration management: Kubernetes provides a way to
manage the configuration of containers, making it easier to
deploy and manage applications at scale.
– Secret and configuration management: Kubernetes
provides a secure way to manage secrets and configuration
data, helping to ensure that sensitive information is kept
secure.
– Resource management: Kubernetes provides a way to
manage the resources required by containers, including
CPU, memory, and storage. This helps to ensure that
applications get the resources they need to run effectively.

49
Development
DevOps Tools
• Features contd..
– Rollouts and rollbacks: Kubernetes provides a way to easily
perform rolling updates and rollbacks of applications, making
it easier to manage the deployment of updates.
– Batch processing: Kubernetes provides a platform for
running batch processing jobs, making it a great choice for
organizations that need to process large amounts of data.
– Service discovery: Kubernetes provides a way to discover
and access services running within the cluster, making it
easier to build distributed applications.

50
Development
2.3.23 – Thursday
5th Period


51
Development
What is Source Control?
• Source control, also known as version control, is a system

for managing changes to a codebase or other collection of
files over time.
• It provides a way to track the history of changes made to the
code, making it easier to manage and collaborate on software
development projects.
• These 2 terms are used interchangeably.

• However, source control is specific to source code.
• Version control also covers large binary files and digital
assets.
Source Control Features
Features
▪ Versioning
▪ Branching and Merging
▪ Collaboration
▪ Conflict resolution
▪ Continuous integration and delivery
▪ Auditing
▪ Security

53
Development
What Is Source Control Management?
• Source control management (SCM) refers to tools that help

you keep track of your code with a complete history of
changes.
Source control tools include:
– Git :- Git is a popular open-source version control system
that allows multiple users to collaborate and manage
changes to software projects efficiently.
– It enables teams to track changes and work together in
real-time, making it a crucial tool for DevOps.
– Other Source Control Management Tools : Helix Core,
Subversion, ClearCase, Team Foundation Server,
Mercurial

54
Development
Review of GIT source control
• Speed: Git is designed to be fast, even when working with
large projects or repositories. It uses a unique data structure
called a "packfile" to efficiently store and retrieve version
control data.
• Easy Collaboration: Git allows multiple developers to work
on the same project simultaneously.
• Security: Git provides robust security features, including
cryptographic hashing and digital signatures to secure
version control data.
• Large Community: Git has a large and active community of
developers who contribute to the project and provide support.

55
Development
Review of GIT source control
• Git is a widely used open-source distributed

version control system that helps track changes
made to software source code.
• It was created by Linus Torvalds in 2005 and has
since become one of the most popular version
control systems in use today.
• Git offers a number of benefits over other version
control systems, including:
1. Distributed Architecture.
2. Branching and Merging.

56
Development
Why a Source Control Management (SCM) Tool is
Important?
• Source control is important for maintaining a single source of

truth for development teams.
• Using it helps facilitate collaboration and accelerates release
velocity.
• Benefits
✓ It allows multiple developers to work on the same
codebase.
✓ Developers can commit and merge code without conflicts.
✓ Developers can edit shared code without unknowingly
overwriting each other’s work.

57
Development
Local Version Control Systems

58
Development
Centralized Version Control Systems
(CVS, Subversion, and Perforce)

59
Development
Distributed Version Control Systems
(Git, Mercurial, Bazaar or Darcs)

60
Development
Tips for SCM
• Having a system is one thing. Managing it effectively is
another.
• Here are five tips to keep in mind:

1. Choose the right system. (Helix Core is a great one.)
2. Store your code in the system.
3. Pull the latest version of the code.
4. Commit code often (and make notes).
5. Use branches to work in parallel.
https://www.youtube.com/watch?v=DqtZUv
mPmo4&ab_channel=AutomationStepbyStep

61
Development
Module I - Syllabus


62
Development
Web Forms 2.0
• A FORM is a container of various other controls
like text boxes, buttons, radio buttons, etc. which
contains certain kinds of information and this
information is carried to the concerned destination
when a submit button is clicked.
• FORMS 2.0 is a successor of Forms available in

HTML 4. But Forms 2.0 comes with some
additional features.

63
Development
Web Forms 2.0
• HTML 5 contains various new types for the forms
which are datetime-local, date, time, week, month,
year, email, range, number, and many more.
• Web form 2.0 is not a specific technology or

standard, but rather a concept that refers to the
use of modern web development practices and
technologies to create forms that are more user-
friendly, accessible, and secure.

64
Development
Web Forms 2.0
• Here are some characteristics that could be
associated with a "Web form 2.0":
– Responsive design: The form should be designed to work
well on different screen sizes and devices, such as
desktops, laptops, tablets, and smartphones.
– Progressive enhancement: The form should be built to
work even if some of the advanced features are not
supported by the user's browser or device. For example, if
the browser doesn't support JavaScript, the form should
still be functional and usable.
– Accessibility: The form should be designed to be
accessible to users with disabilities, such as those who
use screen readers or have mobility impairments.

65
Development
Web Forms 2.0
– Valid and secure data handling: The form should
validate user input and handle data securely to prevent
errors and protect sensitive information.
– User-friendly: The form should be designed to be easy to
use and understand, with clear instructions and intuitive
user interface elements.

66
Development
Web Forms 2.0
– Conditional logic: The form should be able to change
dynamically based on user input. For example, showing or
hiding certain fields or sections of the form based on the
user's selections.
– Error handling: The form should be designed to handle
errors gracefully, providing clear feedback to the user
about what went wrong and how to correct it.

67
Development
Web Forms 2.0
• A "Web form 2.0" would be a form that leverages modern web
technologies and best practices to provide a more seamless
and enjoyable user experience, while also ensuring security
and accessibility.
• Web 2.0 form controls are designed to be more dynamic,
interactive, and user-friendly than traditional HTML form
controls.
• They often include features such as auto-completion,
validation, and real-time feedback to help users enter data
more accurately and efficiently.

68
Development
Web Forms 2.0
• In HTML4, we had a variety of types for input tag
– Text:-The text types provide a single-line textbox on the
webpage. This field allows the user to add various inputs
within the webpage.
– Textarea:-The text area is very much similar to a textbox
but the only difference is that it can be understood as a
multi-line textbox whereas the text type provides a single-
line text box. An important point to note is that <textarea>
is a tag with attributes ‘rows’ and ‘cols’ which requires
values to be provided to it.
– Password:-This type is used to provide sensitive
information like passwords as input within the textbox. As
a result of which, the characters of the password are
hidden and displayed as asterisks (*).

69
Development
Web Forms 2.0
– Checkbox:-Checkbox is used when we have to select
options from a number of options provided on the form.
The user needs to tick the relevant options on the form.
– Radio:-Radio refers to the radio button. The radio button
is quite similar to the checkbox. But the former enables
the user to select only a single option and latter allows the
selection of multiple options. If we want to allow the user
to choose multiple options then we need to provide exactly
the same names to the type ‘radio’ while writing the code
for the varying options.

70
Development
Web Forms 2.0
– Button:-The type button is used to add a button on the
webpage. The functionality of the button can be controlled
by Javascript.
– Submit:-The type submit is used to add a submit button
on the webpage. For example, submitting current form
data.
– Reset:-The type reset is used to add a reset button on the
webpage for resetting the form data.

71
Development
Web Forms 2.0
• In HTML5, various new types for <input> tag are as follows
– Datetime-local:-It is a value for the input attribute. This
type allows us to select the date (including day, month,
and year) from a calendar and time from the control
appearing on the form.
– Date:-It is a date picker that allows the user to choose the
date in dd—mm—yyyy format.
– Month:-The month type allows the user to choose month
and year from the box appearing on the webpage.
– Time:-The time type allows the user to choose a time in
hours: minutes format.
– Week:-The week type allows the user to choose the week
number and year

72
Development
Web Forms 2.0
– Email:-The email type allows the user to enter the email id
in the textbox. If the email id is not entered incorrect form
then a message is popped.
– Range:-The range type allows us to add a slider on the
webpage. We need to provide a maximum and minimum
numerical value in the max and mix attributes to indicate
the corresponding position of the slider.

73
Development
Web Forms 2.0
– Number:-This type allows us to add a single numerical
value within the box. We need to provide a maximum and
minimum numerical value in the max and min attributes
to indicate shuffle over the various range of values within
a limit. It is a type of spinner to spin between numbers.
– Color:-This attribute allows us to add a color picker on
the web page without writing the complex Javascript code.
This way we can choose from a variety of colors and give
them as input.

74
Development
Web Form 2.0 Attributes
• Placeholder:- Placeholder is an attribute introduced in HTML5
which could be used with <input> tag. It reserves a space inside a
box for some characters. A text appears inside the box which is
hidden as soon as we enter even a single character into the box. The
value of the placeholder attribute specifies the types of expected
input to be entered into the box.
• Autocomplete attribute:- Autocomplete attribute of <input> tag
show suggestions based on the history of the browser and previously
mentioned inputs by the user. This attribute takes the same
‘autocomplete’ as value
• Autofocus attributes:- Autofocus attribute of <input> tag
automatically blinks the cursor on the webpage to a specific location
shown on the webpage. This way the focus occurs on a particular
control. The value of the attribute is provided as ‘on’ or ‘off’
depending upon the situation to on or off the autofocus feature.

75
Development
9.3.23 – Thursday
5th Period


76
Development
Web Storage
• The Web Storage is one of the great features of HTML 5.
• With the Web Storage feature, web applications can locally
store data within the browser on the client side.
• It stores data in the form of key/value pair on the browser.
• Web Storage sometimes also known as DOM storage.
• Storing data with the help of web storage is similar to

cookies, but it is better and faster than cookies storage.
• Cookies are smaller and send server information back with
every HTTP request, while LocalStorage is larger and can
hold information on the client side.

77
Development
Web storage has the following
advantages over cookies:
• Web Storage can use storage space upto 5MB per domain.
(The browser software may prompt the user if the space limit
is reached).
• It will not send data to the server side, hence it is faster than
cookies storage.
• The data stored by local Storage never expires, but cookies
data expires after some time or session.
• Web Storage is more secure than cookies.

78
Development
Types of Web Storage
• There are 2 types of web storage with different scope and
lifetime.
1. Local Storage
2. Session Storage

79
Development
1. Local Storage
❑ The localStorage object stores data locally within
the browser.
❑ The data stored by localStroage object does not
have any expiration date.
❑ Hence the stored data will not be deleted if the
browser is closed or reopened.
❑ Each piece of data is stored in simple key-value
pairs.
❑ The key/values are always stored as String, and
can be accessed with
❖ localStorage.getItem()
❖ localStorage.setItem() methods.

80
Development
2. Session Storage
❑ The sessionStorage object is same as the
localStorage object, but the difference is that it
stores data only for one session.
❑ If you close the browser, then data will be lost or
deleted.

81
Development
Remove Web Storage
❖ As we have seen the session storage data will
automatically be deleted, when you close the browser
but the data saved by local storage will remain in the
browser even if you close it.
❖ Hence to delete the local storage data, you need to call
2 methods:
1. localStorage.removeItem('key'): If you want to
delete the value on a particular key, then you can
use the "key," and that value will be deleted.
2. localStorage.clear(): If you want to delete or clear
all settings with key/value pair, then you can call
this method.

82
Development
Module I - Syllabus


83
Development
Module I - Syllabus


84
Development
Canvas
• The HTML canvas element provides HTML a bitmapped
surface to work with. It is used to draw graphics on the
web page.
• HTML canvas is an HTML element that provides a
drawing surface for creating graphics and animations
with JavaScript.
• The HTML 5 <canvas> tag is used to draw graphics
using scripting language like JavaScript.
• Canvas elements have attributes such as width &
height that define the size of the drawing area.

85
Development
Canvas
• The <canvas> element is only a container for graphics,
you must need a scripting language to draw the
graphics.
• The <canvas> element allows for dynamic and
scriptable rendering of 2D shapes and bitmap images.
• It is a low level, procedural model that updates a
bitmap and does not have a built-in scene.
• There are several methods in canvas to draw paths,
boxes, circles, text and add images.

86
Development
Canvas
• The Canvas API provides a set of methods & properties for
drawing shapes, text, and images on the canvas, as well as
manipulating colors, gradients, and patterns.
• Canvas can be used to create a wide range of visual content,

such as charts, graphs, diagrams, animations, games, and
more.
• Canvas is highly customizable with CSS styles that control

the appearance of the canvas element and its contents.

87
Development
Canvas
• Canvas supports interactivity and animation, allowing you to create
dynamic, user-driven content that responds to user input.
• Canvas can be integrated with other web technologies, such as HTML,

CSS, and JavaScript, to create sophisticated web applications.
• Canvas is supported by most modern web browsers, including Chrome,

Firefox, Safari, and Edge.
• Canvas requires some programming knowledge, as you need to write

JavaScript code to create and manipulate graphics on the canvas.
• There are also many libraries and frameworks available that can help
you create more complex and advanced canvas projects, such as
Three.js, D3.js, and p5.js.

88
Development
Example
<!DOCTYPE html>
<html>
<body>
<canvas
id="myCanvas"
width="300"
height="150"
style="border: 1px solid #d3d3d3">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);
</script>
</body>
</html>
89
Module I - Syllabus


90
Development
WebSockets
• WebSockets is a next-generation bidirectional

communication technology for web applications which
operates over a single socket and is exposed via a
JavaScript interface in HTML 5 compliant browsers.
• Once you get a Web Socket connection with the web

server, you can send data from browser to server by
calling a send() method, and receive data from server to
browser by an onmessage event handler.
91
WebSockets
Following is the API which creates a new WebSocket

object.
var Socket = new WebSocket(url, [protocol] );
Here
url → specifies the URL to which to connect.
protocol → optional, and if present, specifies a sub-protocol
that the server must support for the connection to be
successful.
92
Module I - Syllabus


93
Development
CSS3 – Colors
• CSS supports
• 140+ color names,
• HEX values,
• RGB values,
• RGBA values,
• HSL values,
• HSLA values,
• opacity.
94
RGBA Colors
• RGBA color values are an extension of RGB color values

with an alpha channel - which specifies the opacity for a
color.
• An RGBA color value is specified with: rgba(red, green,

blue, alpha).
• The alpha parameter is a number between 0.0 (fully

transparent) & 1.0 (fully opaque).
95
RGBA Colors
<!DOCTYPE html>
<html> <body>
<head> <h1>Define Colors With RGBA Values</h1>
<style>
#p1 { <p id="p1">Red</p>
background-color: rgba(255, 0, 0, 0.3); <p id="p2">Green</p>
} <p id="p3">Blue</p>
#p2 { <p id="p4">Grey</p>
background-color: rgba(0, 255, 0, 0.3); <p id="p5">Yellow</p>
} <p id="p6">Cerise</p>
#p3 { </body>
background-color: rgba(0, 0, 255, 0.3); </html>
}
#p4 {
background-color: rgba(192, 192, 192, 0.3);
}
#p5 {
}
#p6 {
}
</style>
</head>
96
The translate() Method
The translate() method moves an element from its current position:
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: translate(50px, 100px);
}
</style>
</head>
<body>
<h1>The translate() Method</h1>
<p>The translate() method moves an element from its current position:</p>
<div>
This div element is moved 50 pixels to the right, and 100 pixels down from
its current position.
</div>
</body>
</html>
97
CSS Gradients
• CSS gradients let you display smooth transitions between two
or more specified colors.
• CSS defines 3 types of gradients:

– 1. Linear Gradients
• (goes down/up/left/right/diagonally)
– 2. Radial Gradients
• (defined by their center)
– 3. Conic Gradients
• (rotated around a center point)

98
Development
1. Linear Gradients
• To create a linear gradient you must define at least
two color stops.
• Color stops are the colors you want to render
smooth transitions among.
• You can also set a starting point and a direction (or
an angle) along with the gradient effect.
• Syntax
background-image: linear-gradient (direction, color
stop1, color-stop2, ...);

99
Development
Direction - Top to Bottom (this is default)
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>
This linear gradient starts red at the top, transitioning to yellow at the
bottom:
</p>
<div id="grad1"></div>
</body>
</html>

100
Development
2. Radial Gradients
• A radial gradient is defined by its center.
• To create a radial gradient you must also define at
least two color stops.
• Syntax
background-image: radial-gradient(shape size at
position, start-color, ..., last-color);
• By default, shape is ellipse, size is farthest-corner,
and position is center.

101
Development
Radial Gradient - Evenly Spaced Color
Stops (this is default)
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h1>Radial Gradient - Evenly Spaced Color Stops</h1>
</body>
</html>

102
Development
3. Conic Gradients
• A conic gradient is a gradient with color transitions
rotated around a center point.
• To create a conic gradient you must define at least
two colors.
• Syntax
background-image: conic-gradient([from angle] [at
position,] color [degree], color [degree], ...);
• By default, angle is 0deg and position is center.
• If no degree is specified, the colors will be spread
equally around the center point.

103
Development
Conic Gradient: Three Colors
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-image: conic-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h1>Conic Gradient - Three Colors</h1>
</body>
</html>

104
Development
CSS Text
• CSS has a lot of properties for formatting text.

• Text Color and Background Color
• Text Alignment and Text Direction
• Text Decoration
• Text Transformation
• Text Spacing
• Text Shadow
105
Conic Gradient: Three Colors
<!DOCTYPE html>
<html> <body>
<head> <div>
<style> <h1>text formatting</h1>
div {
border: 1px solid gray; <p>
padding: 8px; This text is styled with some of the text formatting properties. The
} heading uses the text-align, text-transform, and color properties. The
h1 {
paragraph is indented, aligned, and the space between characters is
text-align: center; specified. The underline is removed from this colored
text-transform: uppercase; <a target="_blank" href="tryit.asp?filename=trycss_text"
color: #4caf50;
>"Try it Yourself"</a
}
>
p{ link.
text-indent: 50px;
</p>
text-align: justify;
letter-spacing: 3px; </div>
} </body>
</html>
a{
text-decoration: none;
color: #008cba;
}
</style>
</head>

106
Development
Transform Property
• The transform property applies a 2D or 3D

transformation to an element.
• Some common transform functions that can be used

with the transform property include:
• rotate: Rotates the element by a specified angle.
• scale: Scales the element by a specified factor.
• skew: Skews the element by a specified angle.
• translate: Moves the element by a specified distance.
107
Module I - Syllabus


108
Development
109
Development

School of Engineering: CSE3150 - Front-End Full Stack Development

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

School of Engineering: CSE3150 - Front-End Full Stack Development

Uploaded by

Copyright:

Available Formats

CSE3150 – Front-end Full Stack Development

Department of Computer Science Engineering

Review of GIT source control.

HTML5 – Syntax, Attributes, Events,

CSS3 – Colors, Gradients, Text, Transform

CSE3150 – Front-end Full Stack

• Agile is a method of software development that aims to provide

• Continuous improvement at every stage & ongoing collaboration

• Teams cycle through a process of planning, carrying out, and

• Collaboration between team members and project stakeholders

CSE3150 – Front-end Full Stack

• Agile is a project management approach that emphasizes

• It values delivering a working product incrementally & embracing

CSE3150 – Front-end Full Stack

We are uncovering better ways of developing software by doing it and

Agile software development teams should value:

• Individuals and interactions over processes and tools

• Working software over comprehensive documentation

• Customer collaboration over contract negotiation

• Responding to change over following a plan

CSE3150 – Front-end Full Stack

We follow these principles:

✓ Welcome changing requirements, even late in development. Agile

✓ Deliver working software frequently, from a couple of weeks to a

✓ Business people & developers must work together daily

CSE3150 – Front-end Full Stack

✓ Build projects around motivated individuals. Give them the

✓ The most efficient & effective method of conveying information to

✓ Working software is the primary measure of progress.

✓ Agile processes promote sustainable development. The sponsors,

CSE3150 – Front-end Full Stack

✓ Continuous attention to technical excellence & good design enhances

✓ Simplicity – the art of maximizing the amount of work not done – is

✓ The best architectures, requirements, & designs emerge from self-

✓ At regular intervals, the team reflects on how to become more effective,

CSE3150 – Front-end Full Stack

CSE3150 – Front-end Full Stack

• Difficulty with longer-term planning

• Requires a dedicated team

• Can lead to scope creep

CSE3150 – Front-end Full Stack

Review of GIT source control.

HTML5 – Syntax, Attributes, Events,

CSS3 – Colors, Gradients, Text, Transform

CSE3150 – Front-end Full Stack

• It involves a self-organizing & cross-functional team that

• "Scrum is an agile process that allows us to focus on delivering

CSE3150 – Front-end Full Stack

2. Cross-functional Teams: Scrum teams are cross-

Review of GIT source control.

HTML5 – Syntax, Attributes, Events,

CSS3 – Colors, Gradients, Text, Transform

CSE3150 – Front-end Full Stack

3. The Development Team.

Following are the key responsibilities of the Product Owner:

Following are the key responsibilities of the Scrum Master :

The following are the special characteristics of the Development

Review of GIT source control.

HTML5 – Syntax, Attributes, Events,

CSS3 – Colors, Gradients, Text, Transform

CSE3150 – Front-end Full Stack

Scrum is an Agile framework for managing software development

It involves a set of practices and principles designed to help teams