Html :

-----------------
1 - eh el far2 mben tags w elements ?

elements de 7aga 3ama zi {h1 => dah element } de eli bib2a gowaha el tags aslun
zi {<h1>
head </h1>}
###################################################################################
##########

2- eh el far2 ben el tags w attributes ?

attributes de goz2 mn el tags yo3tabr 3onsor msln {<p align="center"> interview

</p> }
###################################################################################
############

3- eh el 3nasir ely malhash close tag ?

<br/> <img/> <hr/>

###################################################################################
##############

4- eh anw3 el listat ely bnst5dmha

<ul> {un order list} => w de ely btb2a mn 8er tarkim 3obara 3n dot abl el
kalma
<ol> {order list} => de btb2a list matrkma 1 aw 2 aw 7rof
<dl> => dah item w bnaktib el t3rif bta3o msln
###################################################################################
###############
5- y3ni eh class?

dah attribute b5ss beha 7aga 3lshan msln a8ir beha lone shakl kda ya3ny

###################################################################################
##############
6- eh el far2 ben class w el id?

el {id} minf3sh a3mil atnen mano n=bnafs el asm

3aks el {class} a3mil kaza class bnafs el asm

###################################################################################
##################

7- azay a7ot video w audio ?

3adi bit7at fe tag el audio aw el video fe html 5

###################################################################################
################

8- eh el 3nasir inline w eh el block

inline => [span] aw [a] aw [img] aw [button] aw [select]

block => [h1] aw [div] aw [header] aw [ul] aw [p]

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&

Css :
--------------------
{cascading style sheets}

Content: Actual Content of the box where the text or image is placed.
Padding: Area surrounding the content (Space between the border and content).
Border: Area surrounding the padding.
Margin: Area surrounding the border
################################################################################
2- eh mazia el css ?

* ani 2a2dr ansk el mo7twa w afsil el content 3n el m3rod

* bsta5dim el css fe ani abni shakl el site w 2a2dr a8iro bili ana 3izo
*

###########################################################################
3- eh 3iob el css

* an momakn ya7sl twafok ben kol site w el tania

############################################################
4- azai 7trbot malf css fe webpage bt3tk ?

* <link rel="stylesheet" type="text/css" href="mystyles.css" />

######################################################################
5- eh different types of Selectors in CSS ?
y3ny amsik el element 3lshan a8ir feh bil css

momkan [Universal Selector {*}]

momkan [Element Type Selector {ul}]
momkan [ID Selector]
momkan [Class Selector]
momkan [Descendant Combinator{#container .box}]
######################################################################
6- What is the difference between inline, inline-block, and block?

Block Element: hia element ely b tstart new line ya3ny afltha 7tbd2 new line
{zi [div] [p] [h1]}

{w 3adi momken a5li 3nasir el block l inline b display : inline}

Inline Elements : hina b2a msh ma7taga anha tstart new line w tkamil 3la nafs
el satr ely hia feh zi {[a] / [span]}

{w 3adi momken a5li 3nasir el inline l block b display : block}

Inline Block Elements: hia btb2a inline 3ady bs hia momkan ykon liha padding
aw margin aw height
###################################################################################
#########################################
7- What are Pseudo elements and Pseudo classes?
 Pseudo-elements : ::before
::after
::first-letter
::first-line
::selection

Pseudo-classes : :link
:visited
:hover
:active
:focus

###############################################################################\
8- EH EL WA7DAT ELY BNSTA5DMHA fe el css ?

1 = percentage (%)
2 = px(Pixel)
3 = Em {lil font size}

#####################################################################
9- eh el flexbox ? {tb3an ay 7aga 7it7tlha reverse 7ta3kis maknhaha lw shmal yb2a
ymen}

* flex-wrap:hina msln lw 3ndna boxs gamb b3d kol lma tsa8r el site msh 7ts8r
m3aia el boxs la 7nazilha lta7t bir7lha ya3ny

* flex-direction : hina 7i7sl raping bs 3la 7sab b2a ana m5tar eh lw row yb2a
bil 3rd
lw column tb2a btol kda

* flex-flow: hina el t7rok 7yb2a maren b2a

* justify-content:
center: 7at7ot el container fe el nos

flex-start: 7at7ot el container fe el fe el awl el flex w de [el

defulte bt3aha]

flex-end: 7at7ot el container fe el ymen fe el nahia

space-between: 7at7ot el container fe msafat mabinhom

space-around : hina b2a fe msa7a ablo w b3do

* align-items:
hia shbah el justify-content bs el 3aks anha msh7t8ir bil 3ard la tol
we de [dfulte bt3aha strach]

* align-content:

hia lw 3ndi items mawgoda 3la kaza line btzbtha zi m anta 3ize
###################################################################################
####
10 - ashra7li CSS position property?

Static: dah el defulte bt3ha 7ifdal zi mhowa mafish ta8ir

 Relative: dah b2a 7it7rk mn makno howa bit7rak bna2n 3n el item nafso
ya3ny lw oltlo left :10px yb2a 7it7rak left el 10 dowl

Absolute: Hia parent w btat7akim fe el child w el child de absolute da5il atar

el parent dah

Fixed: dah 7ifdal fe mkan ely anta ma7dado lma t3mil scrole hiba fixed 7inzil
wyatl3 l7ad mkano w yo2af

Sticky: howa dah shabah el fixed fe 7aga anoh fe el scrole binzil w yatl3 m3ak
bs bil masfa ely anta m7dadhalo
###################################################################################
######
11- Different Box Sizing Property?

Content-box:

Padding-box:

Border-box:

###################################################################################
##########
12- eh hia 3nasir el display ?

display :
{block} => el 3nasir 7tb2a inline bmograd afl el element 5las block

{inline} => el 3nasir 7tb2a block bmograd afl el element 5las 7tb2a inline

{none} => dah el defulte bt3aha ya3ny momkan a5fi beha el span msln 3lshan
a5liha 3onsr block

{flex} => hia magmo3a mn el attributes btdina ta7kom fe layout y3ny badl lma
el 3nasir ma7tota
lkol wa7da fehom line lwa7daha howa 7thom kolhom fe satr wa7d

###################################################################################
###############
13- eh el overflow ?

feh manha [visable] => dah defulte w el item ely zahr zyada yb2a zahr 3adi
[hidden] => 3akso y5fi el zahir zayda
[scrole] => bi3mlk scrole 3leha

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&

JavaScript :
---------------------------------

1- Funtion {‫= }يعني اية‬

hia 3obara an block of codes btnfiz task mo3in w tnadiha 3lshan tnafiz
ely hia [Don't repeat your self] 3aiz ab3t lmowazfen 3ndi fe
el sherka w homa 3 ash5as 3aiz ab3tlhom sho8l anhrda ya5lsoh
bs lkol wa7ed fehom
####################################################################
2 - Map {‫= }يعني اية‬
 map de bta5od Function mo3in mnk msln 3ndi array feha arkam w anta
3izo ya5od rkam rkam ydrbo fe x5 7t3mil w 7trga3li el array de kolha
b3d mtab2it ely ana 3izo
###################################################################3##
3 - loop {‫= }يعني اية‬
hia m3naha tkrar el 7aga ely ana 3izha ya3ny ana 3ndi array feha arkam
w asmaa el nas ely 3andy fe el sherka 3aiz y3radli el asmaa w el arkam
bta3thom b3milha b loop badl m a3mil kol wa7d code loop btl5sli el mawdo3 dah

let myFriends = [1, 2, "Osama", "Ahmed", 3, 4, "Sayed", 6, "Ali"];

let onlyNames = [];

for (let i = 0; i < myFriends.length; i++) {

if (typeof myFriends[i] === "string") {
onlyNames.push(myFriends[i]);
}
}

##############################################################################
4- varible {‫= }يعني اية‬

de data container lil bianat b5znha fe el mimories w howa mot8ir 2a2dr a8iro fe
ay wa2t

################################################################################
5- eh hia el data typs

[string] [number] [object] [boolean] [Undefined] [Null] [typeof]

###################################################################################
########
6- Difference between equals “ == “ and identical “ === “ operators.

el double equals bt compare el values

ama
el triple equals bt compare el values and types

#################################################################################
7- eh far2 ben var w let w const?

let : hia m3naha variable w mt2drsh t3mlo redeclare l2n howa oready m3mlo
declare abl kda t2der t8ir el value gowa el scope

var : hia m3naha variable w t2der t8ir el value fe ay wa2t

const : hia m3naha constants w mat2drsh t8ir el value feha b3d kda

###################################################################################
###
8- ya3ny eh concatenation ?

de dah btosta5dam 3lshan arbot el string bba3do

###################################################################################
#####
9- lw 3ndi string gowah number w 3aiz agm3o 3la number ?
let a = "100";
let b = 20;

console.log(+a + b);
###################################################################################
##

10- ya3ny eh if condtion ?

hia adah bt72a2 shart mn el sharten

###################################################################################
###
11- What Is DOM And Select Elements ?

1` [getElementById]

2`[getElementsByTagName]

3` [getElementsByClassName]

4` [querySelector]

5` [querySelectorAll]
###################################################################################
####
12- add event listener ?

b attch event lil item bt3ti

myP.onclick = one;
myP.onclick = two;

function one() {
console.log("Message From OnClick 1");
}
function two() {
console.log("Message From OnClick 2");
}
myP.addEventListener("click", one);
myP.addEventListener("click", two);