UNIT 10

WEB DEVELOPMENT LO2

AZLAN KHAN
Table of Contents
2 Front End Technology ....................................................................................... 2
2.1 HTML .......................................................................................................... 2
2.2 CSS ............................................................................................................. 3
2.3 JavaScript ....................................................................................................... 3
3 Front End Frameworks ..................................................................................... 3
3.1 Angular JS ................................................................................................... 3
3.2 React JS ..................................................................................................... 3
4 Back End-Technology....................................................................................... 4
4.1 Back End-Languages ................................................................................... 4
4.1.1 PHP: ..................................................................................................... 4
4.1.2 C ++: .................................................................................................... 4
4.1.3 Java: .................................................................................................... 4
4.1.4 Python: ................................................................................................ 4
4.1.5 JavaScript: ............................................................................................. 5
5 Difference Between Front-End and Back-End Developments: .......................... 5
6 Custom Built Websites ...................................................................................... 5
6.1 Advantages and Disadvantages of Custom-Built websites .......................... 7
7 Online Built Websites ........................................................................................ 6
7.1 Advantages and disadvantages of Online Built Websites ........................... 6
8 User Experience Design .................................................................................... 7
9 User Interface Design ........................................................................................ 7
10 Tools to Build Websites Using Responsive Design ........................................... 7
10.1 Adobe Dreamweaver................................................................................ 8
10.2 Wink Site .................................................................................................. 8
11 Bibliography .................................................................................................... 8
2 Front End Technology
The front-end is built using a combination of technologies such as Hypertext
Markup Language (HTML), JavaScript and Cascading Style Sheets (CSS).
Previous developers design and create user experience features on a web page or
in the app including buttons, menus, pages, links, graphics and more.
Responsiveness and performance are two main objectives of the Front End. The
developer must ensure that the site is responsive i.e., it appears correctly on
devices of all sizes no part of the website should behave abnormally irrespective
of the size of the screen.

2.1 HTML
Hypertext Markup Language is the basis of a website, which provides all the
structure and functionality. Hypertext defines the link between the web pages.
The markup language is used to define the text documentation within the tag
which defines the structure of web pages.

2.2 CSS
Cascading style sheets give developers a flexible, precise way to create attractive,
interactive website designs.

2.3 JavaScript
This event-based language is helpful in building dynamic content on static HTML
pages.
Allows developers to access items separated by the main HTML page, and to
respond to server-side events.
3 Front End Frameworks
Also called “CSS frameworks,” these packages contain pre-written code,
embedded in files and folders. They give you a foundation on which to build while
allowing flexibility for the final design. Following are the types.

3.1 Angular JS
Angular Js is an Open-source JavaScript framework that is commonly used to
improve web page applications (SPAs). It is a constantly growing and growing
platform that provides better ways to improve web applications. Converts static
HTML into dynamic HTML.

3.2 React JS
React is an open-source library, based on the front section that only deals with
the application layer. Saved by Facebook. By: (Mark Holder,Nov 23 2016)

4 Back End-Technology
The back end, also called the server side, contains a server that provides the
request information, the application it uses, and the data that organizes the
information.
For example, when a customer glances at the shoes on a website, he encounters a
predecessor.
After selecting the Item, they want, they put it in the shopping cart, and authorize
the purchase, the data being stored within a database that resides on the server.

4.1 Back End-Languages

The back End is built using the other languages discussed below:
4.1.1 PHP:
PHP is a server-side scripting language specifically designed for web development.
Since the PHP code is generated on the server side, so it is called in the server side
of the server.

4.1.2 C ++:
The language of planning objective that is common and widely used these days in
competitive programs. It is also used as a background language.

4.1.3 Java:
Java is one of the most widely used languages and programs. It's very scalable. Java
elements are readily available.
4.1.4 Python:
Python is a programming language that allows you to work faster and integrate
systems more efficiently.

4.1.5 JavaScript:
JavaScript can be used as both programming languages (front end and back end).
(Palaksinghal)

5 Difference Between Front-End and Back-End Developments:

The front and Back-End Development are very different from each other, but still,
they are two aspects of the same situation. The frontend is what users see and
interact with and the backend is how it all works.

 Frontend is a section of website users that can view and interact with it as a
graphical user interface (GUI) and command line including layouts,
  navigation menus, texts, images, videos, etc. part of the website users who
can see and interact with.
 Visual features of the website that can be seen and met by users
beforehand. On the other hand, everything that happens in the background
can be caused by the back.
 The languages used for the front end are HTML, CSS, JavaScript while those
used for backlinks include Java, Ruby, Python, Net. By:(Marcelo Pastorino)

6 Custom Built Websites

Custom-designed websites include a group behind your business. It starts with the
process of creating an understanding of who your target audience is, who you
want to reach, how you want / need a website to work and what you want to look
like online.

SEO plays a big role in the success of any website. There are rules that must be
followed when building a site and not all themes can comply with these rules. This
is why custom-designed websites are so advanced, the developer is able to add a
site during the creation to allow google and other search engines to read each
page to give the end user a more relevant search result thus, giving custom-
designed sites the best quality in the system. This goes beyond keyword research.

7 Online Built Websites

A common way to launch a website would be to set up a WordPress site and use a
template purchased from Team Forest, Monster Template, or Elegant themes.
These websites offer a wide range of different types of website templates
available for purchase. Not all themes / templates out there respond 100%.

There are also services like WIX or Squarespace that offer content and allow you
to customize within the website framework. This can help you to find a website
that is faster and easier. However, there are limitations to the available options
for complex features such as forms or e-commerce functions.

One thing to keep in mind is that templates and themes often come with built-in
features so that the user can customize multiple but this ultimately saves the
website depending on the loading speed and SEO performance. It is more likely
that you will tolerate features, textures, and functions that do not fit your product
or business. (Kristen Bachmeier)

7.1 Advantages and disadvantages of Online Built Websites

 Many other businesses may use the same template, which means your site
will not be as prominent.
 You are limited in how much you can customize the site. What you see is
what you get.
 May 100% not work on all devices
 Some templates are not designed to have a search engine. They need to be
customized to fit your business.
 Any additional practice or technology cannot be installed as templates
running on a structured system
 Online Websites are perfect for a low budget. There are cheaper advance
costs.
 Online Websites have a short development time.
 Online sites will probably not have a support system such as a custom site.

8 User Experience Design

The user experience (abbreviated as UX) is how a person feels when they
encounter a program. An application may be a website, web application or
desktop software and, in modern cases, is usually a form of computer-assisted
interaction (HCI). By:(Jacob Gube)
9 User Interface Design
The UI design represents a "User interface." User interface is graphical editing of
the application. Contains buttons that users click, text they are reading, images,
slides, text input fields, and all other user interactions. This includes screen
design, trading, display animation and every single little touch. Any visual,
meticulous, or animated object must be created.

10 Tools to Build Websites Using Responsive Design

As the use of smartphone and tablet continues to grow, it becomes increasingly
important for your business website to look good on a small screen. These will
help you build a fully functional mobile phone, tablet and traditional desktop
devices. (Nathan Segal)

10.1 Adobe Dreamweaver

Adobe Dreamweaver CS6 has the ability to build fluid structures. This allows you
to create three layouts - Web, tablets and mobile devices - all at once. Include
media queries in these liquid formats and you can easily control the visibility of
your pages.

10.2 Wink Site

Wink Site is a free mobile service that helps you monetize your site with Google
AdSense and determine the best place to place ads. You can also create in-house
ads for your sponsors. Wink site is free for up to five sites. Wink site users can
build a community and invite others to join. You can also create a four or a guest
book and submit surveys.
11 Bibliography
Jacob Gube, https://www.smashingmagazine.com/
palaksinghal9903
Marcelo Pastorino, https://www.pluralsight.com/blog
Segal, B. N : https://www.cio.com/article/2387279/
Kristen Bachmeier :https://www.atilus.com/templates-vs-custom-built-web