Front-end Development

Overview

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 1

Table of Contents

1. Front-end Web Development

2. Internet
3. Web browsers
4. Domain Name System (DNS)
5. HTTP/Networks
6. Web Hosting
7. User Interface/Interaction Design
12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 2
Section 1
Front-end Web Development

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 3

FED

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 4

FED
A Front-end Developer...
A front-end developer architects and develops websites and web
applications using web technologies (i.e., HTML, CSS, and JavaScript),
which typically runs on the Open Web Platform or acts as compilation input
for non-web platform environments (i.e., React Native).

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 5

FED
Required knowledge

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 6

Section 2
Internet

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 7

Internet

What is Internet?

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 8

Internet

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 9

Internet

Ø To simplify, Internet is:

q A global wide area network that connects computer
systems across the world.
q In which users at any one computer can, if they have
permission, get information from any other computer

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 10

Internet
Client-server is a software architecture model consisting of two
parts, client systems and server systems, both communicating over
a computer network or on the same computer.

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 11

Internet
Ø Clients:
§ Always initiates requests to servers.
§ Waits for replies from servers.
§ Receives replies from servers.
§ Usually connects to a small number of servers at one time.
§ Usually interacts directly with end-users using any user
interface such as graphical user interface.

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 12

Internet
Ø Servers:
§ Always wait for a request from one of the clients.
§ Serves clients' requests then replies to the clients with the
requested data.
§ A server may communicate with other servers in order to
serve a client request.
§ A server may communicate with other servers in order to
serve a client request.
§ End users typically do not interact directly with a server, but
use a client.
12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 13
Internet
Ø IP (Internet Protocol) is a protocol, or set of rules, for routing
and addressing packets of data so that they can travel across
networks and arrive at the correct destination.

Ø Data traversing the Internet is divided into smaller pieces, called

Packets. IP information is attached to each packet, and this
information helps routers to send packets to the right place.

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 14

Section 3
Web Browsers

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 15

Web Browser
Ø The most commonly used browsers (on desktop and mobile):
1. Chrome (engine: Blink + V8)
2. Firefox (engine: Gecko + SpiderMonkey)
3. Internet Explorer (engine: Trident + Chakra)
4. Safari (engine: Webkit + SquirrelFish)

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 16

Web Browser

Ø Evolution of browsers and Web technologies:

To see more: http://www.evolutionoftheweb.com/

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 17

Web Browser

Ø Headless browser: A web browser without a graphical user

interface, controlled programmatically. Used for automation,
testing, and other purposes.

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 18

Web Browser

Ø The most commonly used headless browser:

1. Headless Chromium (engine: Blink + V8)
2. SlimerJS (engine: Gecko + SpiderMonkey)

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 19

Web Browser
Ø How browser work?

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 20

Web Browser

Rendering Engine

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 21

Section 4
Domain Name System (DNS)

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 22

Domain Name System (DNS)

Ø Structure of domain names: Every domain consists of at least

two parts: the actual domain name and the TLD or Top Level
Domain

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 23

Domain Name System (DNS)

Ø DNS Request: A demand for information sent from a user's

computer (DNS client) to a DNS server. In most cases a DNS
request is sent, to ask for the IP address associated with a
domain name.
Actually a DNS client querying the DNS servers to get the IP address,
related to that domain.

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 24

Section 5
HTTP/Networks

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 25

HTTP

What is HTTP?

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 26

HTTP

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 27

HTTP

Ø HTTP Specifications
§ HTTP/1.1 (1997)
§ HTTP/2 (2015)
§ HTTP/3 (2019)

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 28

HTTP
Ø HTTP Status codes
§ 1xx informational response – the request was received,
continuing process
§ 2xx successful – the request was successfully received,
understood, and accepted
§ 3xx redirection – further action needs to be taken in order to
complete the request
§ 4xx client error – the request contains bad syntax or cannot be
fulfilled
§ 5xx server error – the server failed to fulfil an apparently valid
request
12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 29
HTTP
Ø What is CORS?

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 30

HTTP
Ø Use cases scenario CORS
§ Invocations of the XMLHttpRequest or Fetch APIs.
§ Web Fonts (for cross-domain font usage in @font-face within
CSS).
§ WebGL textures.
§ Images/video frames drawn to a canvas using drawImage().
§ CSS Shapes from images.

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 31

HTTP
Ø What is WebSockets?

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 32

HTTP
Ø Use case scenario of WebSocket
§ Fast Reaction Time
§ Ongoing Updates
§ Ad-hoc Messaging
§ High-Frequency Messaging with Small Payloads

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 33

Section 6
Web Hosting

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 34

Web hosting

What is web hosting?

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 35

Web hosting

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 36

Web hosting
Ø Type of web hosting
§ Shared hosting
§ VPS hosting
§ Dedicated hosting
§ Cloud hosting
§ Reseller hosting

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 37

Section 7
User Interface/Interaction Design Principles

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 38

User Interface/Interaction Design
Ø UX is focused on optimization of a product for effective and
enjoyable use
Ø UI design is concerned with the look and feel, the
presentation and interactivity of a product
Ø Usability is concerned with the ease of use with which a
user can interact with your site
Ø Design with tactics, not talent

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 39

Layout and Spacing

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 40

Layout and Spacing

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 41

Layout and Spacing

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 42

Layout and Spacing

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 43

Layout and Spacing

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 44

Layout and Spacing

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 45

Layout and Spacing

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 46

Layout and Spacing

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 47

Layout and Spacing

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 48

 Layout and Spacing
§ It’s not just vertical spacing that you have to worry about:

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 49

Layout and Spacing
§ Rule of thumb: Whenever you’re relying on spacing to
connect a group of elements, always make sure there’s
more space around the group than there is within it — UI
that are hard to understand always look worse.

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 50

Typography
§ Lines that are too long, making text harder to read

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 51

Typography
§ For the best reading experience, make your paragraphs
wide enough to fit between 45 and 75 characters per line

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 52

Typography
§ Line-height and paragraph width should be proportional

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 53

Creating Depth
§ Have you ever noticed how
some elements in an interface
feel like they’re raised off of
the page, while others feel like
they are inset into the
background?

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 54

Creating Depth
§ Light comes from above

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 55

 Creating Depth
• Notice how the top edge of the panel is lighter? That’s because it’s
angled towards the sky and receives more light. Similarly, the bottom
edge is darker because it’s angled away from the sky, receiving less
light.

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 56

 Creating Depth
§ Now take a look at the panelling on this cabinet:

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 57

 Creating Depth
In this case it’s clear that the panels are inset because there’s a shadow
at the top indicating that the lip above is blocking the light, and the
bottom edge is lighter, indicating that it’s angled upward.

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 58

Creating Depth

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 59

Creating Depth

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 60

Working with Images

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 61

Working with Images

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 62

Working with Images

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 63

Working with Images
Add an overlay

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 64

Working with Images
Add text shadow

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 65

Others
§ Highlight user navigation

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 66

Summary
1. Front-end web development is the practice of producing
HTML, CSS and JavaScript for a website
2. A site is must be easy to read and relevant to users
3. A web site also must support multiple devices and
resolutions
4. Front-end relies greatly on HTTP protocols. A good
understading of HTTP protocols will help Front-end
developer a lot
5. Main UI/UX Design Principles is to always “Put yourself in
other's shoes”

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 67

 Thank you

12/23/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 68