Learning Notes
b
- bold text
p
- paragraph
h1...h2
- heading. h1 using only onse on the page. Add structure to the page
can be only one head and one body
ol/ul
- order list un order lists. Can be nested list
li
- elements in the lists
a
- anchor element. Should be at the end of the element. Can be links to your doc
img
- not have closing tags src and alt are important. Can be store as in internet or on disk.
<!-- -->
- comments :-)
hr
- line break
br
- line break element
sup
- superscript
sub
- subscript chemical formulas
<
- this is reserved HTML. Should used entitycodes name or number
main
header
section
nav
footer
- behaves like div. Using for crawels.
Using for screen readers. More readable for developers.
main
- main content of the page
nav
- navigation link
section
- stadelone section. mb for different paragraphs.
article
- block articles. Reusable. Should be heading in it.
aside
- color boxes. Bonus content.
time
- machine readable time code
figure
- ilustrations
table
- table of the content
td
- single cell of the table that contains data.
tr
- table row to group data in rows.
th
- define a header of the column.
rowspan
- fill the number of cells in the table.
colspan
- create two columns
thead
- multiple rows can be in the the headers can be wrap.
tbody
- body of the table.
tfooter
- for overall calculations can be used
form
- when submitting the form http request will be send.
input
- no closing tags. A lot of different types.
placeholder
- placeholder text for input fields.
button
- better to specify in a form.
name
- for forms is crusual if you want to send the parameters in http requests.
value
- need for radio buttons to submit correct data.
select
work together with option
required
- attribute for validations.
A lot of different properties. CSS is cascade language. So the order valeus. Read from top to down
Specificity: more specific selectors wins! ID > Class > element
color
- represet the color of the text
h2
takes all the space for the background
;
- end of line
text-align
- where the text will be placed. Alight against the size of the box
font-weight
- 400 - normal font, 700 - usually bold
text-decoration
- controls appearance of decorative lines on text underline
,
dotted
...
line-height
- controls the line height
letter-spacing
- control the spacing between the letters
font-size
- relative em rem vh vw %
absolute px pt cm in mm
%
- 50% = half of the size. Half of the with of the parent
em
- 2em = 2 * font size of the parrent element. If using with elements (like margin) it's takeing the size of the element itself. Note: not use in nested elements.
rem
- get element size from the root element. Get size from html
element.
*
- select everything
button
- select every button
adjacent selector - select after another h2 button
direct chind - h2 > button
one level down
attribute selector - inside attribute
:hover
- differnet representation on hover
:active
- click on buttons
:checked
- checked checkbox
nth-of-type()
- 3 only the third one element. 3n each 3d element
::first-letter
- set the first letter of the element
::first-line
- select the line
::selection
- can be done on the text. Select backgound color
::after
- add after element the value
::before
- add after element value if use content
or you can adjust some values
Not used inline styles and important
color can be inherited.
Everething in css is a box.
Top | Right | Bottom | Left
margin
- add outside spacing on the border of the box.
padding
- space between the content and the border element. Green stuff in dev tools. You can set padding
border
- width, color, style. Box-sizing can be the same size as the box border-box
border
- width | style | color
border-radius
- make borders rounded
inline
- get not all the width of the entire line. Example is span
block
- get the width of the entire line. Example is h1
inline-block
- behaves like inline element except Width and height are respected
none
- hide element
opacity
- make the element not visible. Transparent
alpha channel
- work only on one property. Other elements are not affected.
Property sets how an element is positioned in a document. Top, right, bottom, left
static
- element position with respect to position. Can't influence position
relative
- position the element relative to another elements
absolute
- element is removed from normal document flow. No space is created for the element in the page layout. Position can be taken from parent
fixed
- the element will stay at the same place. Like absolute positioning but doesn't affects by parent
sticky
- position element. Element will go down along with container.
transition
- looks fun. Transition properties in defined order. You can specify property name, duration, timing function, delay
transition-timing-function
- easy-in
Flexbox - distribute content in a container. flexible elements
In flex bos there is two axis main and cross.
flex-direction
- default axess diraction is row. From left to right.
justify-content
- move elements in container (start,end,center, space-between, around)
flex-wrap
- elements can align on multiple lines if set value to wrap
align-items
- working with y horizonal
transform
- rotate. You can rotate elements. transform-origin
from where to start transform
A lot of stuff for transformation. Scale
can be scale on x and y
translate
- move thing around the page. Can be influence only X or Y
Transformation apply for all content elements\
Can be inner functions and scopes are in the block
function bob() {
let hello = "Hello world";
function print() {
console.log(hello);
}
}
Function expression
const add = function (x, y) {
return x y;
};
Mechanism to check what was called. Used data structure stack. Adding always on the top of the stack. When get the value is returned deleted from the stack.