API – Application Program Interface ; How applications communicate with each other

Protocol, Medium, Topic/data

JDBC IS AN API EXAMPLE ENABLING COMMUNICATION JAVA AND DATABASE

Merchant software and bank software communication using API

Case study:

Creating an app like amazon

1.Website divided to frontend(search for product) and back end(List of products)

Frontend(HTML CSS OR JS or a framework like Angular)

Backend(Springboot or Django)

Lets say having a Backend API to enable one to search products from a Frontend that are stored in a
database.

API enables simple data transfer between applications. The data can be in formats of XML,JSON

JAVA SPRINGBOOT FOR BEGINNERS

Sw requirements include(Java,IDEie Eclipse or Intellij , Postman and a Browser)

Outcomes(REST API development and Back end development)

WEB DEVELOPMENT

Web has 3 modules( Back end , Front end and Database)

Node.js is the runtime environment, and Express.js is a framework that simplifies web application
development using JavaScript on the server side.

Language Framework
Python Django
Javascript Express Js as framework
React as Front end

If ever needed database MongoDB

Dunning Kruger effect : What I have actually experienced.

HTML -STRUCTURE

CSS-STYLE

JAVASCRIPT-FUNCTIONALITY

USE REPLIT.COM FOR IDE

FRONT END DEVELOPMENT

HTML

This is a web scripting language used to define the structure of webpages. HTML has tags
html,head,title,body,paragraph and other attributes

Attributes are used to give more information about the element or the tag. There are many ie href for
links and img tag for images ie <a href=”link address”> Click this link</a> and style

<p> tag creates a new paragraph but all the content is displayed in line unless defined by a <br> tag. An
alternative for this is <pre> tag that displays all the content as it has been typed in the tag.

Use <hr> tag to print a horizontal line between content

Text in the body can be formatted using tags e.g <b>-bold <strong>-also bold <em>-emphasized text
<i>-italic text <mark>-highlight <del>-strikethrough <ins>-underline <small>-smaller text <sub>-
subscript <sup>-superscript

<!-- --> is for comments . Formatting colours involves invoking the style attribute <h1
style=”color=blue ; font-family=verdana ; font-size=100%;text-align=center;>my Heading </h1>

Links <a href="https://google.com" target="_blank">Go to site</a>

To put the page title you must start with the head tag that defines properties if the page labeling. The
favicon is the icon next to the title and can be initialized by : <link rel=”icon” href=”image link”></link>

For table initialize <table> then define <tr> and for the first you should have <th> and for the next rows
have <td>

<ul> are initialized with bullets whereas <ol> are numbered.Each item initialized by <li>. For a <dl> after
putting the first element in <dt> put the description in <dd> ie <dt>Name1</dt> <dd> *This contains the
first name </dd>

Block elements ie <div> tag wraps elements in it and when called it takes up the next space in a block
format. Formats applied to the div tag are unique to the blocked div tag

Inline elements don’t take up new space but just get the required one ie the <b> tag

Iframes are used to display webpages in another webpage and can be formatted ie width height and
border preferences use<iframe> tag. <iframe src="https://www.google.com" width="300" height="300">
You can add symbols to html by initializing a paragraph and codimg them in this format &#symbol
name/code;. <p>This is an undo sign &#8630;</p>

CSS-STYLING(CASCADING STYLE SHEET)

Css syntax is :

Selector{

Declaration; /*comments*/

There are various selectors 1. Selects an individual element ie body 2.Selects element based on their id
ie #welcome 3.Select elements based on their class ie .heading 4.We can also strictly specify a class tied
to a particular element ie h1.heading 5.We also have a universal selector for the entire page * and then
we have the group selector ie same styling applied to particular elements ie h1,p

Backgrounds: background-color:red; background-image: url(“image url”); background-position:top-

Margins can be: margin-top:50px or margin:50px(for all) or you can inherit margins ie margin:inherit;

Borders: border: 10px solid purple border-radius:10px (dashed dotted) border-style border-
width.

Padding is used to create space in bordered text: padding: 40px;

Height and width around the element: height:50px; width:100%;

Outline wraps the element ie outline-style:solid; outline-offset:10px; /*creates space between border
and outline */

Text alignment: text-align: center/left/right/justify Text decoration: text-decoration: overline purple

text transformation: text-transform:uppercase/lowercase/capitalized text-indent:10px;

letter-spacing:30px;

font-family: fontname; font-style:italic/oblique/normal; font-weight:bold; font-size:50px/50em;