Web development

Html + CSS + Javascript => Browser - Complete web Developer (ZTM Udemy)

JQuery - outdated - library used as compatibility layer between browser
LAMP stack - somewhat outdated as well - Linux Apache MySQL PHP

HTML

HTML5 introduce semantic element : need ref

<!DOCTYPE html>
<html>
  <head>
      <title>website</title>
  </head>
  <body>
    Hello World
  </body>
</html>

<head> - is required to be loaded before displaying page
<body> - can trigger javascript load while rendering (non blocking display)

tag and element are the same

<h1> .. <h6> header
<p> paragraph
<b> (bold) and <i> (italic) - outdated and remplaced by <strong> and <em> (emphasize)
<ul> start a list, can be nested
- <li> list element
<a href="url>text</a>" - anchor tag = link
<div> divide content allowing to add style with CSS
<span> span, same as div, but to inline style inside a div element
<script type="text/javascript"> inline scripting
<script type="text/javascript" src="url"> external script, to put at the end of the body to avoid delaying display

Self closing tags

<br> breakdown (“\n”)
<img src="url" alt="text for reader" width="11" height="12">

Head tags

<link>
<meta>

Form

<form> start a form with default method=”GET” , data are passed on url send to server (query string), password are in clear text => ?firname=joe&lastname=biz&password=123
- <input type="text" name="tag1" placeholder="enter input"> self closing input text + tag to identify input
- <input type="email" required> required input + email validation
- <input type="password" min="5> password field, with minimum size
- <input type="date"> date input (calendar ui)
- <input type="radio" name="group1" value="bt1"> - 2 radio button grouped together with group1
- <input type="radio" name="group1" value="bt2">
- <input type="checkbox"> mutliple checkbox
- <input type="color"> color picker
- <select> dropdown options - <option value="A"> - <option value="B">
- <select multiple> dropdown options with multi selection
- <input type="submit" value="ok"> submit button
- <input type="reset"> reset form

CSS - Cascading Style Sheet

CSS 3 - introduced transition / animation

/* comment 
Selector {
	Property: value;
}

ex: 
body

*/
html {
	background: url(header.jpg) no-repeat center center fixed;
    background-size: cover;
}

h2 {
	color: red;
}

p { /* first p */
	color: pink;
}

p { /* second p */
	color: green;
}

As to be incorporated into html doc

...
<head>
  <link rel="stylesheet" type="text/css" href="url://style.css">
  <link rel="stylesheet" type="text/css" href="style2.css"> <!-- css style be combined-->
</head>
...

Can also be specified inline

...
<header style="color: red">
</header>
... or
<header>
  <style>
    h2 {
		color: red;
    }
  </style>
</header>

Properties - CSS Tricks

color: red;
border : 5px solid purple;
background-image: url(backgroundimage.jpg);
- background-size: cover;
cursor: pointer;
display: inline-block;

Text

text-align: center;
text-decoration:
text-transform:
line-height: 20px;
font-style: italic;
font-weight: bold;
font-size: 80%;
font-family: "Times new Roman", Georgia;
- custom font can be specifieds, see also google.font - make websiste slower

Image

float: left; - force image on left and allow text to fill on the right.
clear: both - remove float propertie for selected selector
background: linear-gradient( to right, red, yellow);

Selectors

Multiple class attribute can be added to html tags. They are referenced by .class in CCS file. Element can also uniquely identified by id (#id in css)

<p class="webtext active">
<p id="p1">

* { /* apply to all elements */
}

h2, p { /* combined style for h2 and p*/
	Property: value;
}
  
h2 p { /* only p inside h2 */
	Property: value;
}
  
h2 > p { /* all p that are parents of h2 */
	Property: value;
}
  
h2 + p { /* all p elements exactly after h2 */
	Property: value;
}
  
.webtext {
  border: ...
}
  
.active {
  color: ...
}

#p1 { /* using id */
  color: ... !important; /* !important overide cascading and force value*/
}

Selector :hover - changed style on over
Selector :firstchild
Selector :lastchild

Box Model

border
display
padding
margin
width / height

Dimension

px - size in pixel
80%
3em - 3x the current element size
3rem - 3x the root element size

FlexBox

Mainly one dimenssional Grid

flexbox froggy - a game to learn flexbox

.container { 
  display: flex;
  flex-wrap: wrap;
}

CSS Grid

complement Flexbox 2 Dimensional Grid

Both should be able to replace Bootstrap container.

Bootstrap

Reuse somebody else’s CSS + Javascript for component

Note

Responsive UI - web jargon that tell that the page resize itself properly whatever the size of the display is.

#4577