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
● Develop web applications using NestJs Web framework
● Develop REST APIs using NestJs
● Secure web applications and REST APIs
● Test Web Applications and REST APIs
Learning Outcomes
After completing this course you should be able to

● 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
● Deploy web applications using containers and kubernetes
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
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
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
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

Java/Kotlin Spring, Spring Boot, Quarkus, Micronaut

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
How do you locate a particular page?
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/
Course Outline

Topics

Introduction Frontend Frameworks

HTML for Structure Introduction to NestJS

CSS for Presentation Developing Web Application

Javascript for Behaviour Working With Relational and Non-Relational Data

Web Images Securing Web Applications

Course Content

Topics

Testing Web Application

Working with Configuration Properties

Creating REST Services

Deployment
Assessment and Evaluation
Assessment Percentage

Lab Assignment 20 %

Individual Front-End Project 20 %

Group Front & Backend

25 %
Project

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/