محتوى الدورة
Elements And Naming
0/5
01 – Introduction And What I Need To Learn
08:22
02 – Your First Project And Syntax
08:41
03 – Element Styling
06:25
04 – Name Conventions And Rules
08:02
حلول تكليفات CSS الدروس من 01 إلى 04
14:03
Background, Margin, Padding
0/5
05 – Background – Color, Image, Repeat
07:55
06 – Background – Attachment, Position, Size
08:09
07 – Padding
09:02
08 – Margin
08:16
حلول تكليفات CSS الدروس من 05 إلى 08
13:14
Border, Outline, Display
0/5
09 – Border
05:57
10 – Outline
06:39
11 – Display – Block, Inline Block, Inline
11:54
12 – Element Visibility And Use Cases
05:14
حلول تكليفات CSS الدروس من 09 إلى 12
09:33
Nesting, Dimensions, Overflow
0/5
13 – Grouping Multiple Selectors
05:56
14 – Nesting
05:18
15 – Dimensions – Width And Height
08:13
16 – Overflow – Overflow-X And Overflow-Y
04:52
حلول تكليفات CSS الدروس من 13 إلى 16
07:37
Text Formatting
0/6
17 – Text – Color And Shadow
03:52
Lesson18 – Text – Alignment
04:47
19 – Text – Decoration And Transform
04:05
20 – Text – Spacing
10:04
21 – Text – Overflow And Use Cases
04:08
حلول تكليفات CSS الدروس من 17 إلى 21
14:44
Inheritance, Typography
0/6
22 – Inheritance in css
05:35
23 – Typography – Font Family
10:47
24 – Typography – Font Size And CSS Units
09:13
25 – Typography – Font Style And Variant And Weight
04:46
26 – Mouse Cursor
04:15
حلول تكليفات CSS الدروس من 22 إلى 26
09:38
Float, Opacity
0/4
27 – Float And Clear
09:03
28 – Mastering The CSS Calculation
08:54
29 – Opacity
03:12
حلول تكليفات CSS الدروس من 27 إلى 29
12:37
Position, List, Table
0/5
30 – Position
11:07
31 – Z-Index
06:50
32 – Lists Styling
07:14
33 – Table Styling
07:35
حلول تكليفات CSS الدروس من 30 إلى 33
28:35
Pseudo Classes, Pseudo Elements
0/5
34 – Pseudo Classes
11:28
35 – Pseudo Elements – First Letter, First Line, Selection
06:49
36 – Pseudo Elements – Before, After, Content
11:07
37 – Pseudo Elements – Content And Trainings
09:18
حلول تكليفات CSS الدروس من 34 إلى 37
15:11
Border Radius, Box Shadow
0/5
38 – Vendor Prefixes
09:09
39 – Border Radius
06:11
40 – Box Shadow And Examples
07:14
41 – The Box Model And Box Sizing
07:20
حلول تكليفات CSS الدروس من 38 إلى 41
21:44
Transitions, Variables
0/5
42 – Transition
13:28
43 – !Important Declaration And Use Cases
05:23
44 – The Margin Collapse
07:50
45 – CSS Variables And Trainings
08:34
حلول تكليفات CSS الدروس من 42 إلى 45
14:08
Flex Box
0/9
46 – Flex Box Parent – Direction, Wrap, Flow
09:22
47 – Flex Box Parent – Justify Content
10:37
48 – Flex Box Parent – Align Items
04:56
49 – Flex Box Parent – Align Content
05:33
50 – Flex Box Child – Grow, Shrink, Order
06:56
51 – Flex Box Child – Flex Basis, Flex Shorthand
08:58
52 – Flex Box Child – Align Self, Games, Task
03:23
53 – Finish Flex Froggy Game
11:35
حلول تكليفات CSS الدروس من 46 إلى 53
31:18
Filters, Gradient
0/4
54 – Filters
03:56
55 – Gradients
12:22
56 – Pointer Events And Caret Color
04:40
حلول تكليفات CSS الدروس من 54 إلى 56
11:54
Grid
0/10
57 – Grid – Parent – Template Columns
11:33
58 – Grid – Parent – Template Rows And Gap
07:54
59 – Grid – Parent – Justify Content And Align Content
04:39
60 – Grid – Parent – Complete Layout With Template Areas
11:52
61 – Grid – Child – Grid Column And Grid Row
07:24
62 – Grid – Child – Grid Area And Trainings
06:36
63 – Grid – Min, Max And Auto Fill
07:48
64 – Finish The Grid Garden Game
17:41
حلول تكليفات CSS الدروس من 57 إلى 64 الجزء الأول
30:22
حلول تكليفات CSS الدروس من 57 إلى 64 الجزء الثاني
18:18
Scale, Rotate, Translate
0/4
65 – 2D Transform – Scale
04:55
66 – 2D Transform – Rotate
07:11
67 – 2D Transform – Translate
05:18
حلول تكليفات CSS الدروس من 65 إلى 67
13:59
Skew, Matrix, 3D Transform
0/7
68 – 2D Transform – Skew
05:01
69 – 2D Transform – Matrix
07:16
70 – Transform – Origin
08:29
71 – 3D Transform – Rotate
06:12
72 – 3D Transform – Translate, Perspective, Perspective Origin
04:48
73 – 3D Transform – Backface Visibility And Flip Product
09:17
حلول تكليفات CSS الدروس من 68 إلى 73
26:14
Animation
0/6
74 – Animation – KeyFrames, Name, Duration
06:56
75 – Animation – Iteration Count, Timing Function, Spinner Loading
04:28
76 – Animation – Direction, Fill Mode, Play State, Delay
11:04
77 – Up And Down Loading Animation Training
06:02
حلول تكليفات CSS الدروس من 74 إلى 77 الجزء الأول
21:54
حلول تكليفات CSS الدروس من 74 إلى 77 الجزء الثاني
29:49
Selectors
0/6
78 – CSS Selectors Reference Part 1
09:28
79 – CSS Selectors Reference Part 2
09:17
80 – CSS Selectors Reference Part 3
10:13
81 – CSS Selectors Reference Part 4
09:14
82 – CSS Selectors Reference Part 5
07:57
حلول تكليفات CSS الدروس من 78 إلى 82
23:23
Media Queries
0/4
83 – Media Queries And Responsive Designs Intro
09:02
84 – Media Queries And Responsive Designs Standards
11:31
85 – Media Queries And Responsive Designs Practice
11:44
حلول تكليفات CSS الدروس من 83 إلى 85
19:41
Global Values
0/4
86 – Create Your Framework
10:00
87 – CSS Global Values
10:43
88 – The End And How To Master HTML And CSS
06:46
حلول تكليفات CSS الدروس من 86 إلى 88
15:26
ملخصات للدورة وأكواد لحلول التكليفات
0/2
ملخصات دورة CSS للزيرو ويب سكول
أكواد حلول تكليفات CSS للزيرو ويب سكول – Elzero web School
Learn CSS In Arabic 2021
وصف الدرس

ال Code الموجود في الدرس

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS</title>
    <link rel="stylesheet" href="css/master.css" />
  </head>
  <body>
    <div class="container">
      <div class="box">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
      </div>
    </div>
  </body>
</html>
* {
  box-sizing: border-box;
  margin: 0;
}
.container {
  margin: 40px auto;
  width: 200px;
  perspective: 600px;
}
.box {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 1s;
  transform-origin: right center;
}
.box:hover {
  transform: translateX(-100%) rotateY(-180deg);
}
.box .face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 30px;
  color: white;
  backface-visibility: hidden;
}
.box .front {
  background-color: red;
}
.box .back {
  background-color: green;
  transform: rotateY(180deg);
}
السابق
التالى

دورات

موقع يقدّم محتوىً تعليميًا شاملًا ومتنوّعًا في مختلف المجالات، يمكنك من خلاله تنمية مهاراتك ومعرفتك في مجالاتٍ متعددة، والوصول إلى فرص جديدة في حياتك المهنية والأكاديمية.