WebAppDev Document Summary

WebAppDev
https://drive.google.com/file/d/1G6kotTOWr1MSRvFJyDy_6L_3BT4CJu9b/view?
usp=share_link
WWW History
Tim Berners Lee - inventor, used to work at CERN (switzerland)
HYPERTEXT - document containing text that links to another document.
Result of HYPERTEXT:
1. HTML
display pages
2. HTTP (Hypertext Transfer Protocol)
GET INFO from LINKED RESOURCES
3. URI aka "URL" (Uniform Resource Identifier)
unique address to identify resource
1990 - first Web browser, WORLD WIDE WEB
293.6 Billion daily EMAILS
1.14 Billion WEBSITES, 17% active
SPOTIFY (2017)
750,000 tracks are being streamed
UNDERWATER CABLES
500,000,000 MI of CABLE
Optical Fibers
why so many protections? SHORK ATTACK!
WebAppDev 1
SESSION START
|| ACTUAL START ||
HTML (Hypertext Markup Language)
NOT a PL!
creating docs called a WEB PAGE
PURELY VISUAL
CSS (Cascading Style Sheets)

STYLE HTML
TECHNOLOGY USED IN WEB DEVELOPMENT

HTML - Content Display/Structure
CSS - Style & Design
JavaScript - Dynamic FRONT END
PHP, Python, C#, JS - BACK END
MySQL, MongoDB - DATABASE
VISUAL STUDIO CODE - ALL-in-ONE STUDIO
HTML & CSS
Build STATIC WEBSITES
COMMENT - <!-- This is a comment--!>
VIEW SOURCE CODE - CTRL + U
WebAppDev 2
Meta Tags (placed inside <head>)
Most common tags:
a. Charset - character of encoding of the page
b. Viewport (for SMARTPHONES)
i. width=device-width vary depending on device
ii. initial-scale=1.0 ZOOM level
c. Http-equiv has something to do with browser compatibiltiy(?)
Meta Tags and Search Engines

USE <meta name=”robots” content=”NOINDEX, NOFOLLOW”>
if you do not want search engines to recognize your page
Heading, Paragraphs, & Typography

H1 to H6 - SIX ONLY
<p> sentences (BLOCK)

<br> new lines
<strong> bold
<em> italicize
<hr> horizontal line
Link and Images

!! are INLINE ELEMENTS !!
LINKS
<a> link tag
<a href="http://www.google.com> search </a> link another page
<a href="#top"> top </a> link to a section w/in same page
<a href="http://www.google.com target="_blank"> search </a> open new tab
<a href="page2.html"> tae </a>
IMAGES
Local image:
<img src=”/img/sample.jpg” alt=”sample text” width=”400”>
Remote Images:
WebAppDev 3
<img src=” https://source.unsplash.com/400x400/?nature,water ” alt=”Daily Inspiration”>
Block and Inline

Every HTML has a default display value of either BLOCK or INLINE.
The Box Model
SESSION ENDED
. . . . . . . . . . .
SESSION STARTED
Lists
WebAppDev 4
Tables
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Angelo</td>
<td>20</td>
</tr>
<tr>
<td>Angeli</td>
<td>23</td>
</tr>
<tr>
<td>Angela</td>
<td>16</td>
</tr>
</tbody>
</table>
Forms and Input

Action - endpoint
Label
Input
Different types of Inputs
1. Input (Text, Email, Number, Date, Radio, Checkbox)
2. Textarea
3. Select
4. Submit
<form action="">
<input type="email" placeholder="email"> <br>
<input type="tel" placeholder="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"><br>
<input type="password" placeholder="password"><br>
<input type="time" placeholder="time"><br>
<input type="date" placeholder="date"><br>
WebAppDev 5
<input type="url" placeholder="url"><br>
<input type="search" placeholder="search"><br>
<input type="hidden" placeholder="text" value="10"><br>
<input type="file" placeholder="file"><br>
<input type="range" placeholder="range"><br>
<br>
<input type="submit">
</form>
Classes & IDs

. class
# ID
✅ MULTIPLE CLASSES on the same element.
✅ Both have an ID and a Class on the same element.
Semantic Tags
put everything inside DIVs
<header>
<footer>
<nav>
<main>
<section>
<article>
<aside>
(lagay sa toggle ang mga CSS)
CSS (Cascading Style Sheets)
WebAppDev 6
Introduction to: CSS
Cascading Style Sheets
Implementing CSS
Three ways to implement CSS
1. Inline
attached to a particular element
2. Internal CSS
same page (inside the <style> which is inside the <head> )
3. External CSS
separate .css file
CSS Comment
/* COMMENT */
Anatomy of a CSS Selector
a {
background-color: yellow;
WebAppDev 7
}
Linking External CSS

<link rel=”stylesheet” href=”style.css”>
Basic Selectors
. class = ."className"
# ID = #"idName"
✅ Create general names:

primary-heading instead of green-heading .
Chrome Dev Tools

The ‘Inspect Element’ Technique
Extensively use these tools
Select a specific HTML element
See the SPECIFIC CSS properties
See the computed size(?)
LIVE DEBUGGING! (edit on the browser and see effect immediately) local to our
machine only
Fonts in CSS
Web safe fonts
preloaded on all major browsers
font-family: Arial, Helvitica, sans-serif
Serif EDGES (she thicc, char HAHAH)

Sans-serif FLAT
DEFAULT FONTs
Times New Roman and Sans-Serif
WebAppDev 8
Adding new fonts
fonts.google.com
Font Size
Default is 16px
font-size: __px
line-height: 1.6em
Text Alignment
The properties are left , right , center , and justify .
✅ This is only used for TEXT.
Divs & Spans

div = block
span = inline (highlight a piece of text inside a paragraph)
Color Types
h1 {
color: red;
}
h1 {
color: rgb(255, 0, 0);
}
h1 {
color:#ff0000; // or #fff
}
WebAppDev 9
✅ Useful Websites for color-color
www.color-hex.com
https://htmlcolorcodes.com
https://flatuicolors.com/
Borders
Shorthand
border: “border-width” “border-style” (required) “border-color”
Area
border-top , border-right , border-bottom , border-left
Rounded Corners
border-radius: top-left, top-right, bottom-right, bottom-left CLOCKWISE*
Backgrounds
The background property is a shorthand property for:
background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
Background Images with color
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
WebAppDev 10
.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-repeat: no-repeat; /* Do not repeat the image */
background-position: center top; /* Center the image. Can also use numbers - 100px 100px */
background-size: cover; /* Resize the background image to cover the entire container */
}
SHORTHAND
.hero-image {
background: url("photographer.jpg") no-repeat center center/cover
}
Fixed Background Image
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
Box Model
The CSS box model is a container.
including borders, margin, padding, and the content itself
WebAppDev 11
Margin
margin: "top", "right", "bottom", "left"
or
margin-top: , margin-right: , margin-bottom: , margin-left:
Padding
padding: "top", "right", "bottom", "left"
or
padding-top: , padding-right: , padding-bottom: , padding-left:
Size Calculation
2 * Border + 2 * Padding + Content = Total BOX SIZE
Box Sizing
The box-sizing property defines how the width and height of an element are
calculated.
box-sizing: border-box
Margin Collapse
topand bottom margins are combine (collapsed) into a single margin ng MAS MALAKI
sa kanila (or same margin lang kung equal.)
✅❌ Only top and bottom margins

left & right
Removing the default margin and padding
* {
margin: 0;
padding: 0;
}
Positioning
WebAppDev 12
position: static, relative, absolute, fixed, or sticky
static - default
absolute - relative to its PARENT
fixed - relative to BROWSER WINDOW
relative - relative to its NORMAL/ORIGINAL Position
sticky - based on the user’s SCROLL Position
Floating
used to position and align images and text
Clearing the Float
.div2 {
border: 1px solid red;
clear: both;
}
Floating Elements
The float property takes the element out of the document flow
Absolutely positioned elements ignore the float property
✅ Floating a content will make the parent unable to see, and it will collapse the
height
✅ Use max-width instead of width for responsive purposes
✅ Pay attention to the

“box” larger
border-box property since padding and borders makes the
✅ Other floated elements needs to be cleared.
WebAppDev 13
Link Style and Button Style
Different states:
Link
Visited
Hover
Active
Button Making
Navigation Menu Styling

usually made using unordered lists
<ul class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
CSS
.navbar {
list-style: none;
margin: 0;
padding: 0;
background-color: #4c6ca0;
border-radius: 5px;
overflow: auto; /* This resolves the collapsing content because of float */
}
WebAppDev 14
Navigation Styling (Sidemenu)
Inline, Block, & Inline-Block

Inline - width ❌ control
Block - width ✅ control, but ❌ 🤝 (together)
Inline-block - still Inline but with width ✅ control,
✅ We can turn a block level element into an inline and vice-versa.
✅ to center an image it NEEDS to be block and margin:auto
WebAppDev 15
Introduction to Responsive Design
RESPONSIVE LAYOUT
>It is a necessity to build responsive layouts
>Layouts should render on any form factor
MEDIA QUERIES
Each device has a different size and resolution.
@media media type and (condition: breakpoint) {

// CSS rules
}
Common Device Breakpoints
Extra Small devices (phones, 600px and down)

@media only screen and (max-width: 600px) {...}
Small devices (portrait tablets and large phones, 600px and up)
@media only screen and (min-width: 600px) {...}
Medium devices (landscape tablets, 768px and up )
Large devices (laptops/desktops, 992px and up )
Extra large devices (large laptops/desktops, 1200px and up )
LINKs can also have media attribute
<link rel=”stylesheet” media=”screen and (max-width: 768px)” ref=”mobile.css”>
EM & REM UNITS

Em & Rem - similar to pixels
WebAppDev 16
Rem ( root em )
, a unit of measurement that represents the font size of the root element.
Using rem can help ensure consistency of font size and spacing throughout your UI.
Em
relative to the font size of their parent element, not the root element
Vh & Vw Units
Viewport - the whole area inside the browser
Width and Height is always 100%
You can set the content to take up width and height relative to the current viewport.
div {
background: #333;
color: #fff;
height: 100vh;
}
landing-page {
background: url(https://source.unsplash.com/daily) no-repeat center center/cover;
height: 100vh;
}
MORE HTML TAGS
<q> - surround w/ quotes

<s> - strikethrough
<del> & <in> - indicate the content was updated and show the last content
<mark> - apply a bright yellow background on the content
<details> - specify additional details users can view/hide
<abbr> - displays full meaning of abbreviated keyword
<ruby> & <rt> - renders small annotations rendered above/below
<datalist> - create dropdown with search
MORE HTML INPUTS
<input type=”email”>
<input type=”tel”>
<input type=”password”>
<input type=”time”>
<input type=”url”>
<input type=”search”>
<input type=”hidden”>
WebAppDev 17
<input type=”file”>
<input type=”range”>
-MOOOOOOREEEEE CSS AGOI-
TARGETED SELECTORS
div p - it will select all paragraph under a div.
New Selectors
direct child selector: div > p

direct after (sibling) selector: div + p
USING ATTRIBUTES AS SELECTORS

attributes on the tags can be used as selectors
Example:
<a href=”#”>page 1</a>
<a href=”#” target=”__blank”>page 1</a>
We can use the following as selector - a[target] {}
FORM INPUT ATTRIBUTES

Attributes as selectors are used commonly on forms
For example:
input[type=”text”]
input[type=”email”]
input[type=”submit”]
It can be any attribute.

For example:
<div data=”test”>
for more information
https://www.w3schools.com/css/css_attribute_selectors.asphttps://css-
tricks.com/attribute-selectors/
:nth-child selectors
In case of tables or lists - we commonly use the nth-child selector
1. Direct number
/* Selects the second element of div siblings */
div:nth-child(2) {
WebAppDev 18
background : red;
}
2. Odd or Even
p:nth-child(odd) {
background : red;
}
3. Cycle. I.e. Every 3rd occurrence

p:nth-child(3n+0) { /* + or - is ok */
background : red;
}
3 is the cycle
B is the offset
See different between nth-child(3) vs (3n)
https://www.w3schools.com/cssref/sel_nth-child.asp
::before & ::after selectors
We can actually place content before and after selected tags

.required::before {
content: "Read this: ";
}
The added content can then have its own style
.required::before {
content: "Read this -";
background-color: yellow;
color: red;
font-weight: bold;
}
https://www.w3schools.com/cssref/sel_before.asphttps://css-tricks.com/7-practical-uses-
for-the-before-and-after-pseudo-elements-in-css/
The Faded Background Image
Syntax:
.container::before{
content: '';
background: url(image file);
position:absolute;
top:0px;
left:0px;
opacity: 0.9; // Make the image transparent. Optional but nice effect
Z-index: -1 // push the image behind
}
Lets get use the following image to test
https://source.unsplash.com/1600x900/?nature,water
WebAppDev 19
z-index
We can push an element forward or backward.

-For example we have two divs that sits on top of one another.
.box1 {
positon: relative;
top: 10px;
left: 10px;
}
.box2 {
Z-index: 100; // this is any number
}
GRADIENTS
-css element of the image data type that show a transition between two or more
colors
THREE TYPES OF GRADIENTS
Linear Gradients (goes down/up/left/right/diagonally)

Radial Gradients (defined by their center)
Conic Gradients (rotated around a center point)
It uses the background-image command

#grad {
background-image: linear-gradient(red, yellow);
}
GRADIENTS BUTTONS
An example of a button using gradient:

.btn-grad {
background-image: linear-gradient(to right, #2b5876 0%, #4e4376 51%, #2b5876
100%);
margin: 10px;
padding: 15px 45px;
text-align: center;
border-radius: 10px;
display: block;
}
.btn-grad:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
WebAppDev 20
text-decoration: none;
}
BOX SHADOW
We can add shadows on our elements. There’s a bunch of options

but we mostly use the
offset-x, offset-y, blur, and color.
box-shadow: 10px 10px 20px color;
TEXT SHADOWS
Basic syntax:
h1 {
text-shadow: 2px 2px #ff0000;
}
CSS VARIABLES
The steps to define and use variables are:

a. Define a scope
b. Syntax is
--variable-name: value
c. Using it is via the var command. I.e. background: var(--variable-
name)
To make the variable available to the entire page use the :root scope
KEYFRAME ANIMATION
Animation:
lets an element gradually change from one style to another.

you can change as many CSS properties you want, as many times
as you want.
To use CSS animation:
you must first specify some keyframes for the animation.
Keyframes - hold what styles element will have at certain times
The @keyframes Rule:
When you specify CSS styles inside the @keyframes rule, the animation will gradually
change from the current style to the new style at certain times.
To get an animation to work, you must bind the animation to an element.
WebAppDev 21
Example:
/* The animation code /
@keyframes example {
from {width: 100px}
to { width: 600px;}
}
/ The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
WebAppDev 22

WebAppDev Document Summary

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WebAppDev Document Summary

Uploaded by

Copyright:

Available Formats

WebAppDev

2. HTTP (Hypertext Transfer Protocol)

GET INFO from LINKED RESOURCES

3. URI aka "URL" (Uniform Resource Identifier)

unique address to identify resource

1990 - first Web browser, WORLD WIDE WEB

293.6 Billion daily EMAILS

1.14 Billion WEBSITES, 17% active

750,000 tracks are being streamed

why so many protections? SHORK ATTACK!

creating docs called a WEB PAGE

CSS (Cascading Style Sheets)

TECHNOLOGY USED IN WEB DEVELOPMENT

CSS - Style & Design

JavaScript - Dynamic FRONT END

PHP, Python, C#, JS - BACK END

MySQL, MongoDB - DATABASE

VISUAL STUDIO CODE - ALL-in-ONE STUDIO

HTML & CSS

Build STATIC WEBSITES

COMMENT - <!-- This is a comment--!>

VIEW SOURCE CODE - CTRL + U

a. Charset - character of encoding of the page

b. Viewport (for SMARTPHONES)

i. width=device-width vary depending on device

ii. initial-scale=1.0 ZOOM level

c. Http-equiv has something to do with browser compatibiltiy(?)

Meta Tags and Search Engines

if you do not want search engines to recognize your page

Heading, Paragraphs, & Typography

<p> sentences (BLOCK)

Link and Images

Block and Inline

The Box Model

Forms and Input

1. Input (Text, Email, Number, Date, Radio, Checkbox)

<input type="tel" placeholder="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"><br>

<input type="password" placeholder="password"><br>

<input type="time" placeholder="time"><br>

<input type="date" placeholder="date"><br>

<input type="search" placeholder="search"><br>

<input type="hidden" placeholder="text" value="10"><br>

<input type="file" placeholder="file"><br>

<input type="range" placeholder="range"><br>

Classes & IDs

✅ MULTIPLE CLASSES on the same element.

✅ Both have an ID and a Class on the same element.

(lagay sa toggle ang mga CSS)

CSS (Cascading Style Sheets)

attached to a particular element

same page (inside the <style> which is inside the <head> )

separate .css file

Anatomy of a CSS Selector

Linking External CSS

✅ Create general names:

Chrome Dev Tools

Extensively use these tools

Select a specific HTML element

See the SPECIFIC CSS properties

See the computed size(?)

Serif EDGES (she thicc, char HAHAH)

✅ This is only used for TEXT.

Divs & Spans