Learning Outcomes

After completing this course you should be able to

● Explore the landscape of frontend and backend web technologies

● Design and develop web pages using HTML, CSS, and Javascript

● Integrate web applications using asynchronous messaging

technologies
● Explore different software architectures available for web applications
● Deploy web applications in standalone fashion and in cloud environment
Website Design and Development Involves

Content design

Appearance and Structure design

All the front and backend technologies that make the website
function/work
Information architecture
An Information Architect (also called an Information Designer)
organizes the content logically and for ease of findability
● responsible for search functionality,
● site diagrams, and
● how the content and data are organized on the server
User Experience, Interaction, and User Interface design

User Experience (UX) design

about all aspects of the user’s interaction with the product: how it
is perceived, learned, and used

includes the visual design, the user interface, the quality and
message of the content, and the overall site performance

The user experience must be in line with the organization’s brand

and business goals
Content strategy
A Content Strategist makes sure that every bit of text on a site, from
long explanatory text down to the labels on buttons, supports the brand
identity and marketing goals of the organization
User Experience, Interaction, and User Interface design

Interaction Design (IxD)

make the site as easy, efficient, and delightful to use as possible

User Interface (UI) design

focused on the functional organization of the page as well as

the specific tools (buttons, links, menus, and so on) that users
use to navigate content or accomplish tasks
Outputs of UX, IxD, and UI Design Phase

User research and testing reports

site designs often begin with user research, including interviews

and observations, in order to gain a better understanding of how
the site can solve user problems or how it will be used

The approach of designing around the user’s needs is referred to as

User-Centered Design (UCD)
Outputs of UX, IxD, and UI Design Phase

Wireframe Diagram

shows the structure of a web page using only outlines for each
content type and widget

colors, fonts, and other visual identity elements are deliberately

omitted so as not to distract from the structure of the page
Outputs of UX, IxD, and UI Design Phase

Wireframe Diagram
Outputs of UX, IxD, and UI Design Phase

Site Diagram

indicates the structure of the site as a whole and how individual

pages relate to one another
 Outputs of UX, IxD, and UI Design Phase

Site Diagram

Image source: https://writenowdesign.com/blog/tips/website-analysis-process/2/

Outputs of UX, IxD, and UI Design Phase

Storyboards

A storyboard traces the path through a site or application from the

point of view of a typical user

The storyboard aims to demonstrate the steps it takes to

accomplish tasks, outlines possible options, and also introduces
some standard page types
Storyboard
Outputs of UX, IxD, and UI Design Phase

User Flow Charts

A user flow chart is another method for showing how the parts of
a site or application are connected, but it tends to focus on
technical details rather than telling a story
Outputs of UX, IxD, and UI Design Phase

User Flow Charts

Outputs of UX, IxD, and UI Design Phase

Visual (graphic) design

A graphic designer creates the “look and feel” of the site—logos,

graphics, type, colors, layout, and so on—to ensure that the site
makes a good first impression and is consistent with the brand and
message of the organization it represents

You can present a visual design to clients and stakeholders using

tools such as Photoshop or styletil.es
Web Development
Development falls under two broad categories: frontend development
and backend development
Frontend Development
Frontend refers to any aspect of the design process that appears in or
relates directly to the browser

HTML, CSS, and JavaScript

Front End Development
Authoring/markup (HTML)

is the process of preparing content for delivery on the web, or more

specifically, marking up the content with HTML tags that
describe its content and function such as headings, paragraphs, and
lists

HTML (HyperText Markup Language) is the authoring language

used to create web page documents
Front End Development
Styling (CSS)

Cascading Style Sheets (CSS) describe how that content should

look - presentation

fonts, colors, background images, line spacing, page layout,

and so on, are all controlled with CSS

You can also add special effects and basic animation to your page
Front End Development
JavaScript and DOM scripting (CSS)

JavaScript is a scripting language that adds interactivity and

behaviors to web pages, including
● Checking form entries for valid entries
● Swapping out styles for an element or an entire site
● Loading scrolling feeds with more content automatically
Front End Development
JavaScript and DOM scripting (CSS)

DOM stands for Document Object Model, and it refers to the

standardized list of web page elements that can be accessed and
manipulated using JavaScript
Frontend Development
Frontend SPA Frameworks

React: A JavaScript library for building user interfaces

Angular: The modern web developer's platform

Vue.js: The Progressive JavaScript Framework

They are used for creating Single Page Applications

Frontend Development
Frontend CSS Frameworks

Bootstrap (https://getbootstrap.com/)

Tailwind CSS (https://tailwindcss.com/)

BULMA (https://bulma.io/)

Materialize (https://materializecss.com/)
Backend development
Backend development focus on the server, including the applications
and databases that run on it
Backend development
Technologies used for backend development

Programming Language Web Frameworks

PHP Laravel,Laminas Project,Slim

Javascript Express.js, Nestjs, Node.js

Python Django, Flask, Tornado

.NET ASP.NET, ASP.NET Core

Golang Gin, Beego

Backend development
Technologies used for backend data management

MySQL, Oracle, PostgreSQL, Microsoft SQL, MongoDB

Web Production Software
Coding tools

Sublime Text, VS Code, Atom, Bracket, Adobe Dreamweaver

User interface and layout tools

Affinity Designer, Adobe XD, Figma, UXPin

Web graphic creation tools

Adobe Photoshop, Adobe Illustrator, GIMP, Corel PaintShop Pro,

Corel Draw, SumoPaint (sumopaint.com), Pixlr (pixlr.com)
Web Production Software
A variety of browsers

Chrome, Firefox, MS Edge, Internet Explorer 9–11, Safari, Opera

File management and transfer tools

Filezilla, Cyberduck, WinSCP, Transmit

How the web works
What is the difference between Web and Internet?
How the web works
The internet is an international network of connected computers

The purpose of connecting computers together is to share information

A standardized methods for transferring data or documents over a

network are known as protocols

Mention some of the ways that you can share information over the
internet
How the web works
There are many ways information can be passed between computers,
including

email (POP3/IMAP/SMTP),

file transfer (FTP),

secure shell (SSH)

How the web works
The web (originally called the World Wide Web, thus the “www” in site
addresses) is just one of the ways information can be shared over the
internet

it allows documents to be linked to one another via hypertext

links—thus forming a huge “web” of connected information

The web uses a protocol called HTTP (HyperText Transfer

Protocol)
How the web works
Web Client

The role of client software is to make/initiate web requests and

receive replies from the web server
How the web works
Web Servers

The role of server software is to wait for a request for

information, and then retrieve and send that information
back
How the web works
In order for a computer to be part of the web, it must be running special
web software that allows it to handle HyperText Transfer Protocol
transactions

Web Client Software

Browsers - Chrome, Firefox

Curl, Postman

Web Server Software

Apache Web Server, NGINX, IIS

How the web works
IP Address and Domain Name

Address that you can use to access computers

DNS Server

Maps a domain names to one or more IP addresses

How do you access Google's web server using its IP address?

How the web works
Web Page Addresses (URLS)

Every page and resource on the web has its own special address
called a URL, which stands for Uniform Resource Locator
How the web works
The Parts of a URL

http://

let the server know to use HyperText Transfer Protocol

What is the difference between http and https?

How the web works
The Parts of a URL

www.example.com

identifies the website by its domain name

the domain name is example.com

The www part is the particular hostname at that domain

Exercise
Write the steps and the components involved when you make the a web
request using the following url

http://www.example.com/page1.html

Consider at least components such as Client (Browser or other

command line tools such as curl), Web Server, DNS Server
Assignment
Go through the following tutorial

https://developer.chrome.com/docs/devtools/network/

https://developer.chrome.com/docs/devtools/network/reference/

https://developer.chrome.com/docs/devtools/resources/
Assessment and Evaluation
Percenta
Assessment
ge

Lab Assignment 20 %

Individual Front-End Project 20 %

Group Front & Backend Project 25 %

Final Exam 35 %

All these assessments are required to pass the course

Missing any of them results in NG grade which eventually turns

to F if you do not present valid evidence for missing any of them
Primary References
Frontend

● Learning Web Design - A Beginners Guide to HTML, CSS, Javascript

and Web Graphics, 5th edition

● https://learn.shayhowe.com/html-css/
● HTML & CSS: Design and Build Websites, 1st edition
Backend

● NestJs
○ https://docs.nestjs.com/