UNIT - VI

Introduction to Full Stack Web Development and

UI/UX
 Syllabus

• Introduction to Web Development,

• User Interface Design, frontend, backend, databases,
• CRUD applications,
• Languages such as HTML, CSS, PHP, Java Scripts, and frameworks, by
using VS code tool,
• Single page applications (SPA),
• Responsive web design, mobile-first development,
• Job-roles and skillset for full stack and UI/UX
 Introduction to 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 is the creation of an application that works over the internet i.e. websites.
• The word Web Development is made up of two words, that is:
• Web: It refers to 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
• FullStack Development

• Let us discuss them in detail.

 UI Design
• UI stands for user interface.
• User interface (UI) design is likely the first thing you encounter when
you use an application or visit a website.
• Anything you interact with as a user is part of the user interface.
• User interface design is responsible for a product's appearance,
interactivity, usability, behaviour, and overall feel.
• UI design can determine whether a user has a positive experience
with a product, so it's essential for companies and creators to
familiarise themselves with UI design best practices.
 3 Types of User Interface Design
• Many different types of UI design exist. The chart below compiles a
few of the most popular and well-known.
 UI Design
• Additional types of UI design include touchscreen user interface and form-based user interface.
• Touchscreen user interfaces are GUIs that use touchscreen technology to let you swipe or click
rather than needing to use a mouse or stylus.
• Form-based user interfaces use text boxes, checkboxes, and other informational components.
• They enable users to fill out electronic forms.

• Key principles of UI design

• An easy way to recall the fundamental principles of UI design is to learn the four c’s:
• Control: The users should be in control of the interface.
• Consistency: Use common elements to make your UI predictable and easy to navigate, even for
novice users.
• Comfortability: Interacting with a product should be an effortless, comfortable experience.
• Cognitive load: It’s critical to be mindful of bombarding users with content. Be as clear and concise
as possible.
 UI Design Tools

• It is essential to have the right tools and technology to support your

UI design efforts.
• Various UI design tools and its features are listed below :
 UX Design
• UX means User Experience
• User experience (UX) focuses on having a deep understanding of users,
what they need, what they value, their abilities, and also their
limitations.
• It also takes into account the business goals and objectives of the group
managing the project.
• UX best practices promote improving the quality of the user’s interaction
with and perceptions of your product and any related services.
• User experience (UX) design is the process design teams use to create
products that provide meaningful and relevant experiences to users.
• UX design involves the design of the entire process of acquiring and
integrating the product, including aspects of branding, design, usability
and function.
UX vs UI: What’s the Difference?
 Frontend Development
• The part of a website where the user interacts directly is termed as front end.
• It is the visible part of website or web application which is responsible for user experience. It is
also referred to as the ‘client side’ of the application.
• Front-end developers use HTML, CSS, JavaScript, and their relevant frameworks to ensure that
content is presented effectively and that users have an excellent experience.
• Popular Frontend Technologies
• HTML: HTML stands for HyperText Markup Language. It is used to design the front end portion of
web pages using markup language. It acts as a skeleton for a website since it is used to make the
structure of a website.
• CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language intended to
simplify the process of making web pages presentable. It is used to style our website.
• JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to our website.
Front End Development
 Back End Development
• Backend is the server side of a website.
• It refers to the server-side development of web application or website with a primary focus on how the website
works.
• It is part of the website that users cannot see and interact with. It is the portion of software that does not come
in direct contact with the users.
• It is used to store and arrange data.
• The back end stores and serves program data to ensure that the front end has what it needs.
• This process can become very complicated when a website has millions of users.
• Back-end developers use programming languages like Java, Python, Ruby, and JavaScript to work with data.

• 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.
BACK End Development
 Full Stack Web Development
• Full Stack Development refers to the development of both front
end(client side) and back end(server side) portions of web
application.
• Full-stack developers are comfortable working with both the front and
back ends.
• Full stack web developers have the ability to design complete web
application and websites.
• They work on the frontend, backend,database and debugging of web
application or websites
 Database
• A database is an organized collection of structured information, or
data, typically stored electronically in a computer system.
• A database is usually controlled by a database management system
(DBMS).
• Database is the collection of interrelated data which helps to inserting
and deleting the data from database and organizes the data in the form
of tables,views,schemas,reports etc.
• EG of database:
 Oracle
 MogoDB
 Sql
 Crud Application
• CRUD is an acronym that comes from the world of computer
programming and refers to the four functions that are considered
necessary to implement a persistent storage application:
• create
• read
• update
• delete.
 Crud Application

• In such apps, users must be able to create data, have access to the data in the UI by
reading the data, update or edit the data, and delete the data.

• In full-fledged applications, CRUD apps consist of 3 parts: an API (or server), a

database, and a user interface (UI).

• The API (Application Programming Interface)contains the code and methods, the
database stores and helps the user retrieve the information, while the user interface
helps users interact with the app.

• You can make a CRUD app with any of the programming languages out there. And
the app doesn’t have to be full stack – you can make a CRUD app with client-side
JavaScript.
 Tools Used for Coding
• Visual Studio
• Notepad++
• Sublime Text.
• UltraEdit.
• Atom.
 HTML
• HTML stands for Hyper Text Markup Language.
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
 CSS
• CSS stands for Cascading Style Sheets.
• CSS is the language we use to style an HTML document.
• CSS describes how HTML elements should be displayed.
• CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML elements.
• Internal - by using a <style> element in the <head> section.
• External - by using a <link> element to link to an external CSS file.
 JavaScript
• JavaScript was initially created to “make web pages alive”.
• The programs in this language are called scripts. They can be written right in
a web page’s HTML and run automatically as the page loads.
• Scripts are provided and executed as plain text. They don’t need special
preparation or compilation to run.
• In this aspect, JavaScript is very different from another language called Java.
• Today, JavaScript can execute not only in the browser, but also on the
server, or actually on any device that has a special program called the
JavaScript engine.
• The browser has an embedded engine sometimes called a “JavaScript virtual
machine”.
 Framework

• A framework is like a platform used to develop software applications

• A framenwork can have pre defined classes and functions that can be
reused to add several functionalities, which otherwise we would have
to write on our own. eg http requests .
 PHP
• PHP is an acronym for "PHP: Hypertext Preprocessor"
• PHP is a widely-used, open source scripting language
• PHP files can contain text, HTML, CSS, JavaScript, and PHP code
• PHP code is executed on the server, and the result is returned to the browser as plain HTML
• PHP files have extension ".php"
• PHP can generate dynamic page content and PHP scripts are executed on the server
• PHP can create, open, read, write, delete, and close files on the server and can collect form data
• PHP can send and receive cookies & can add, delete, modify data in your database , control user-
access ,encrypt data
• PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
• PHP is compatible with almost all servers used today (Apache, IIS, etc.)
• PHP supports a wide range of databases
• PHP is free. Download it from the official PHP resource: www.php.net
• PHP is easy to learn and runs efficiently on the server side
 Single Page Application(SPA)

• A single page application is a website or web application that dynamically

rewrites a current web page with new data from the web server, instead of the
default method of a web browser loading entire new pages.
• You'll easily recognize some popular examples of single page applications like
Gmail, Google Maps, Airbnb, Netflix, Pinterest, Paypal, and many more.
Companies all over the internet are using SPAs to build a fluid, scalable
experience.
• There is only one html page that is loaded in the browser , when we navigate
around the application , the contect changes and not the page .
• This therefore allows users to use websites without loading whole new pages
from the server, which can result in performance gains and a more dynamic
experience
• Popular SPA Frameworks: React ,Angular etc.
 Responsive Web Design
• Responsive Web design is the approach that suggests that design and development should
respond to the user’s behavior and environment based on screen size, platform and
orientation.

• Elements of responsive web design:

• Media queries that alter web designs based on a user’s device
• Flexible images are sometimes called adaptive images because they have no fixed display size
limitations. This versatility makes it easier to resize images neatly.
• Fluid grids/fluid layouts that automatically rearrange columns of content to fit different
screens or browser windows
• Code for flexible layouts that resize page elements to fit different screens or browser windows
• HTML (hypertext markup language) is a programming language that determines the content
and structure of a webpage,
• CSS (cascading style sheets) is a programming language that determines the design and
display of HTML elements.
Responsive vs. Adaptive design
 Mobile First Development
• Mobile-first design or Mobile-first approach enables web designers to start
product design for mobile devices first. This can be done by sketching or
prototyping the web app’s design for the smallest screen first and gradually
working up to larger screen sizes.

• Prioritizing design for mobiles makes sense as there are space limitations in
devices with smaller screen sizes, and teams need to ensure that the key
elements of the website are prominently displayed for anyone using those
screens.

• Designing and developing for small screens compels designers to remove

anything that isn’t necessary for seamless website rendering and navigation.
 Mobile First Development

• With a well-functioning mobile product, you’ve already prioritized

features and capabilities and identified the essential elements of your
platform.
• Progressively enhancing the mobile platform to fit the requirements
for desktop becomes a series of decisions on how to add rather than
cut elements of your platform, which gives you another opportunity
to be creative about how to engage users.
 Job-Roles and Skillset for full stack

• A Full Stack Developer is a professional who is capable of working on both the front-end and
back-end of web applications.
• Full-stack technology refers to the entire depth of a computer system application, and full stack
web developers are those who are capable of developing both the front end and the back end of
web development.
All of the features that are visible to the client, or the viewer of the site, are included in
the front end.
• Programming a browser (By using JavaScript, jQuery, Angular, or Vue)
• Programming a server (By using PHP, ASP, Python, or Node)
 Job-Roles and Skillset for UI/UX
• A UI UX designer is a professional who identifies new opportunities to create better user
experiences.
• Aesthetically pleasing branding strategies help them effectively reach more customers. They also
ensure that the end-to-end journey with their products or services meets desired outcomes.
• UI/UX Designer responsibilities include:
• Gathering and evaluating user requirements, in collaboration with product managers and
engineers
• Illustrating design ideas using storyboards, process flows and sitemaps
• Designing graphic user interface elements, like menus, tabs and widgets