210304603 FULL STACK
DEVELOPMENT
BCA SEM VI
Prof. Nirav Suthar
Module - 1
1
Introduction to Frontend Designing
●
Front-end web UI frameworks fundamentals
●
Basics of HTML5 & CSS3
●
Responsive web design
●
Overview of Bootstrap4
●
Containers
●
Grid system
●
Bootstrap4 CSS
●
Bootstrap4 Layout components
●
Themes
●
Simple web application design
2
Full Stack Developer
3
Popular Stack
●
LAMP stack: JavaScript - Linux - Apache -
MySQL - PHP
●
LEMP stack: JavaScript - Linux - Nginx -
MySQL - PHP
●
MEAN stack: JavaScript - MongoDB - Express -
AngularJS - Node.js
●
Django stack: JavaScript - Python - Django -
MySQL
●
Ruby on Rails: JavaScript - Ruby - SQLite -
Rails
4
Front-end web UI frameworks fundamentals
●
In a nutshell, front-end web development, also called client-side
development
●
Refers to writing Hyper Text Markup Language (HTML), Cascading Style
Sheets (CSS) and JavaScript code for a website or web application so
that users can see and interact directly with them
●
A front end developer works on the parts / aspects of an app or
website that users get to see and interact with.
●
Whereas a back-end developer handles the behind-the-scenes aspects
of the said app or website, say the infrastructure and databases.
●
On the other hand, a full-stack developer does both, so it’s someone
who deals with the whole design process from start to finish.
5
Goals and challenges in front-end
development
●
Accessibility: This is where they ensure that everyone -
irrespective of their mobile device (think smartphones
and tablets) - can easily access the said website or app.
●
Performance: Performance here is measured in terms of
the render time. So front-end developers work on the
code to make sure that the site / app opens up quickly.
●
Speedy Development: This is about a quick and smooth
development process that is also high on efficiency.
6
Tools used for front-end development
●
A front-end developer develops websites and
applications using HTML, CSS, JavaScript and DOM.
DOM or the Document Object Model is a
programming API (Application Programming
Interface) for HTML and Extensible Markup Language
(XML) documents.
●
So DOM defines the logical structure of documents
and the way a document is accessed and
manipulated.
7
HTML
●
The backbone of any website development process, web pages can not
exist without Hyper Text Markup Language (HTML).
●
Hypertext means that the text has links, called hyperlinks, embedded
in it.
●
So when a user clicks on a word or a phrase that has a hyperlink, it
leads him/ her to another web-page.
●
A markup language also means that the text can be converted into
images, tables, links and other representations.
●
The overall framework of how the site will look is written in HTML code.
●
Developed by Tim Berners-Lee, HTML’s latest version is called HTML5
which was published back in 2014.
8
CSS
●
A cornerstone technology of the World Wide Web (along
with HTML and JavaScript), Cascading Style Sheets (CSS)
is a style sheet language used for describing the
presentation of a document written in a markup language
such as HTML.
●
So it deals with the presentation aspect of the site and
gives your site its own unique look.
●
This is done by maintaining style sheets which sit on top
of other style rules and are activated on the basis of
other inputs like device screen size and resolution.
9
JavaScript
●
A multi-paradigm language, JavaScript supports event-driven,
functional, and imperative programming styles.
●
It is used to transform a static HTML page into a dynamic interface.
●
JavaScript code can use the DOM to manipulate a web page in
response to events, such as user input.
●
In fact, JavaScript code can also actively retrieve content from the
web as well react to server-side events using a technique called
AJAX.
●
An essential part of web applications, most websites use it for
client-side page behavior and all major web browsers have a
dedicated JavaScript engine to execute it.
●
10
Roles and responsibilities of front-end
developers
●
Work on the web page design and structure
●
Come up with features to enhance the users’
experience
●
Come up with features to enhance the users’
experience
●
Optimize webpages for speed and scalability
11
Leading Front End Development Frameworks
Today
●
Angular - commonly known as Angular 2+ or Angular
v2 and above - is a JavaScript framework that offers a
completely client-side solution.
●
It is a TypeScript-based open-source front-end web
application framework led by the Angular Team at
Google and by a community of individuals and
corporations and it is known for providing dependency
injection, declarative templates, end-to-end tooling
and integrated best practices to solve common
development challenges on the client side
12
●
jQuery
●
An an open-source Javascript framework introduced in the year
2006, jQuery is aimed at simplifying HTML and CSS and thus
making front-end development easier.
●
With jQuery, one can design creative apps with ease. Not only is
it easy to learn, but also jQuery is compatible with almost every
browser and it has many plugins.
●
it has good community support. Other advantages include ease
of use, built-in UI and effects libraries, ease of adding Ajax
functionality to an app, faster programming and great API
documentation.
13
●
Ember.js
●
Released in 2011, Ember.js (https://emberjs.com/) is a highly
trusted, mature and open-source Javascript web development
framework that has seen rapid growth over the years.
●
Its popular features include its strict organization, advanced version
management system, and ability to support both modern standards
and older technologies at the same time. With Ember.js, developers
can make scalable single-page web applications by incorporating
common idioms and best practices into the framework.
●
This web application development framework is great for producing
complex web apps.
14
●
React.js
●
React.js is an extremely popular web development
framework developed and maintained by Facebook,
Instagram, and a community of individual developers
and corporations. It lets web developers build large
web-applications that can change over time without
reloading the page.
15
●
Vue.js
●
A relatively young web development framework, the demand for
Vue.js has shot up in a rather short period of time.
●
Small in size, it offers Reactive two-way data binding like Angular,
in addition to supporting Virtual DOM and Event Sourcing like
React.
●
Boasting a simple structure, it’s also easy to solve issues with this
open-source JavaScript framework that also comes with good
documentation.
●
Thus, Vue is a good choice for frontend app developers. For more
details, visit: https://vuejs.org/.
16
What exactly are CSS3 and HTML5?
●
HTML and CSS are the core language components
that are used for the construction of web pages.
●
HTML describes the structure of the pages, primarily
in regards to tables, text, headings, and images or
graphics. It’s the standard programming language
for the overall appearance of web pages.
●
CSS, on the other hand, is the language used for
describing the presentation of each page, and
primarily in regards to the layout, fonts, and colors.
17
HTML5
●
HTML5 is a revision of the HTML standard. It’s a massive
improvement over HTML4 because HTML4 did not allow web
developers to add features to their sites that were not HTML-
supported. To do so required the use of proprietary technologies
and the installation of browser plugins.
●
Subsequently, if web users did not have a device that supported
the use of those proprietary technologies or plugins either, then
they could not access the content. An example is how Safari on
mobile Apple devices does not support the use of Adobe Flash.
●
The main purpose behind HTML5 was to remove the need for
proprietary technologies and plugins.
18
HTML 5 Structure
19
CSS3
●
Web designers and developers use CSS3 and HTML to
build and modify content on a web page. CSS lets you
choose from different typographies, images, colors,
tables, and much more to stylize a web page in a way
that’s intuitive for users and aesthetically pleasing.
●
Without CSS, we wouldn’t have any way to position
different elements on a web page — CSS lets you use
values like ‘fixed’ and ‘absolute’ to position a web
page’s visual components.
20
●
Allowing third-party videos to be viewed without the
installation of third-party plugins
●
Making it easier to install graphics on a web page
●
Allowing the presentation of content in multiple
columns
●
Enabling a precise positioning of all navigable
elements in a web page
●
Adjusting the white space of a document
21
●
<article>: It defines the independent or self-contained content of a
webpage.
●
<aside>: It defines the content which provide information about the
main content.
●
<bdi>: It is used to isolate the part of text which might be formatted
in another direction.
●
<details>: It defines additional information which only visible as per
user demand.
●
<dialog>: It represents a dialog box or other interactive
components.
●
<figcaption>:It defines caption for the <figure> element.
22
●
<figure>: It defines a self-contained content, and
referenced as a single unit.
●
<footer>: It represents the footer section of the webpage.
●
<header>: It defines the introductory or navigational
content of the webpage.
●
<main>: It specifies the main content of the HTML
document.
●
<mark>: It represent the text which is highlighted or
marked for reference or notation purposes.
23
What Is 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.
●
The practice consists of a mix of flexible grids and
layouts, images and an intelligent use of CSS media
queries.
●
As the user switches from their laptop to iPad, the
website should automatically switch to accommodate for
resolution, image size and scripting abilities.
24
25
26
What is Bootstrap 4?
●
Bootstrap 4 is the newest version of Bootstrap.
Bootstrap can be defined as a free and open-source
framework that can be used to create responsive,
mobile-first, front-end web pages.
●
27
Advantages of Bootstrap:
●
it is very easy to use and implement. If a person has some basic
knowledge of HTML and CSS, that user can easily use Bootstrap.
●
The fact that Bootstrap can adapt to the size of any phone,
tablet, desktop and so on is also very interesting feature.
●
Bootstrap 4 is also useful because it is compatible with all
modern browsers which include Google Chrome, Firefox, Internet
Explorer 10+, Edge, Safari, and Opera.
●
It also produces less cross-browser bugs.
●
It is light weighted and consequently it can be widely used as a
framework for creating responsive sites.
28
Why should one use Bootstrap?
●
It is a way more fast and simpler way to develop
websites.
●
It can create platform-independent web pages.
●
It can also create responsive web pages.
●
The web pages created by using Bootstrap 4 can be
easily made responsive.
29
What are some key usages of Bootstrap 4 in
today's world?
●
Supported by various Browsers: It can be supported by every
browser.
●
Simple to start and implement: It is very easy to start and
implement when the user has a fair amount of knowledge about HTML
and CSS. In addition to that, the documentation is readily available on
the official site.
●
Responsive design and looks: The web pages that are created by
using the Bootstrap framework are responsive and it can adapt to any
screen size like mobile, desktop, etc.
●
Easily Customized: It also provides some built-in components and
functionalities that can be used for the purpose of easily customizing
the web pages.
30
Container
●
Containers are required for default grid system (Grid system
uses a series of containers, rows and columns to align content).
●
Containers are used to contain, pad, and center the content
within them.
●
Containers can also be nested, though most layouts don't
require a nested container.
●
.container (sets responsive max-widths).
●
.container-{breakpoint} (width: 100% until specified
breakpoint).
●
.container-fluid (width: 100% at all breakpoints).
31
32
Bootstrap Grid System
●
Bootstrap's grid system allows up to 12 columns
across the page.
●
If you do not want to use all 12 column individually,
you can group the columns together to create wider
columns:
33
●
Bootstrap's grid system is responsive, and the
columns will re-arrange depending on the screen
size:
●
On a big screen it might look better with the content
organized in three columns, but on a small screen it
would be better if the content items were stacked on
top of each other.
34
Grid Classes
●
xs (for phones - screens less than 768px wide)
●
sm (for tablets - screens equal to or greater than
768px wide)
●
md (for small laptops - screens equal to or greater
than 992px wide)
●
lg (for laptops and desktops - screens equal to or
greater than 1200px wide)
35
Grid System Rules
●
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width)
for proper alignment and padding
●
Use rows to create horizontal groups of columns
●
Content should be placed within columns, and only columns may be immediate
children of rows
●
Predefined classes like .row and .col-sm-4 are available for quickly making grid
layouts
●
Columns create gutters (gaps between column content) via padding. That padding
is offset in rows for the first and last column via negative margin on .rows
●
Grid columns are created by specifying the number of 12 available columns you
wish to span. For example, three equal columns would use three .col-sm-4
●
Column widths are in percentage, so they are always fluid and sized relative to
their parent element
36
37
The main layout components in Bootstrap
are:
●
Container: The most basic layout element, which wraps the
grid and provides a base structure. Containers can be fixed-
width or fluid-width.
●
Row: Defines a horizontal group of columns.
●
Column: Represents an individual column within the row.
●
Margin utilities: Add structure to forms by grouping labels,
controls, and other elements.
●
Base-modifier class approach: Most components are built with
this approach, where the base class contains the bulk of the
styling, and modifier classes contain style variations.
38
