Front-End Development Course

About Course

ما هو الـ Front-End؟
الـ Front-End هو الواجهة اللي المستخدم بيشوفها ويتعامل معاها في أي موقع أو تطبيق.
بمعنى أوضح: كل الأزرار، القوائم، الألوان، الخطوط، الصور، والصفحات اللي بتظهر قدامك على أي موقع… ده كله شغل الـ Front-End.
والمطور اللي بيشتغل في المجال ده اسمه Front-End Developer، وده من أهم التخصصات في سوق العمل.

ليه تاخد الكورس؟
لأنك هتتعلم المهارات اللي تأهلك تشتغل في مجال مطلوب جدًا محليًا وعالميًا.
أي شركة ناشئة أو مؤسسة كبيرة محتاجة مطور Front-End عشان يظهر موقعها أو تطبيقها بشكل جذاب وسهل الاستخدام.
وده معناه فرص شغل كتيرة سواء Freelance أو شغل ثابت.

HTML5: هتفهم إزاي تبني هيكل أي موقع من الصفر.
CSS3: هتتعلم إزاي تخلي الموقع شكله أنيق ومتجاوب مع كل الأجهزة.
JavaScript: هتضيف التفاعل والحركة للموقع (زي القوائم المنسدلة، السلايدر، والأنيميشن).
Responsive Design: إزاي الموقع يشتغل بكفاءة على الموبايل والتابلت والكمبيوتر.
Frameworks: زي Bootstrap لتسريع شغلك في التصميم.
مقدمة في React.js عشان تبدأ تدخل عالم التطبيقات الحديثة.
مشروع تطبيقي كامل: هتبني موقع ويب احترافي بنفسك وتعرضه في البورتفوليو بتاعك.

Course Content

Chapter 1 – HTML5

1- Introduction and History

04:57
2- Tags and Elements

06:51
3- Heading

04:44
4- Container vs non Container

02:22
5- Attributes

03:07
6- Images

04:02
7- Links

03:53
8- Nesting

02:26
9- Lists

04:52
10- Tables

05:05
11- Formatting

06:59
12- Video

05:34
13- Audio

02:55
14- iframe

03:04
15- Forms

09:31
16- HTML Structure

06:35

Chapter 2 – CSS Essentials

1- introduction to CSS

01:38
2- History

05:53
3- Ways to Write CSS

11:46
4- Colors and background

04:55
5- Text

04:41
6- Fonts

02:24
7- Google Fonts

05:18
8- remix icons

05:05
9- id vs class

04:13
10- div vs span

06:09
11- Pseudo Class

04:36
12- Pseudo Elements

04:49
13- ٍSelectors

07:19

Chapter 3 – CSS Layout

1- Box Model

03:08
2- Border

06:29
3- Padding

02:25
4- Margin

02:47
5- position ( static – absolute – relative ) and Practical

08:39
6- Position ( Fixed ) and Practical

02:20
7- position ( Sticky )

01:52
8- z-index and Practical

04:41
9-introduction to FlexBox

04:01
10- container(display – direction – wrap – flow )

10:29
11- Container ( justify – align items – align content – gap )

13:52
12- Items ( order – grow – shrink – basis – align self)

11:52
13- introduction to Grid System

03:09
14- display – columns – rows – gap

05:27
15- grid column – grid row

04:33
16- grid template areas – grid area

11:04

Chapter 4 – CSS Advanced

Chapter 5 – Project 1

Chapter 6 – Bootstrap 5

Chapter 7 – Project 2

Chapter 8 – JavaScript 101

1- Introduction to JS

11:17
2- Create JS File

01:36
3- alert prompt

03:01
4- Variables and Constants

05:55
5- console and output

05:26
6- Operators

08:17
7- if Condition

03:17
8- if condition Practical

04:14
9- Switch

05:24
10- ternary Operator

03:31
11- for loop

04:48
12- for Practical

03:15
13- function Syntax

03:08
14- function ( return )

02:14
15- Function ( Parameters and Arguements)

04:09
16- Function Practical

03:50
17- Types of Functions

03:42
18- Array and Syntax

01:47
19- Array ( Length Access )

03:12
20- Arrays ( Add and Remove )

03:23
21- Search and Concatenation

02:54
22- For of

05:26
23- Deal with Object

02:33
24- for in

02:51

Chapter 9 – JavaScript 102

1- Strings

06:12
2- String Methods

08:07
3- Math

10:19
4- DOM Part 1

08:36
5- DOM Part 2

04:56
6- DOM Part 3

03:59
7- Events

03:58
8- DOM Practical

05:40
9- Map

04:56
10- filter

05:32
11-LocalStorage

05:46

Chapter 10 – JavaScript 103

Chapter 11 – Project 3
Create a Calculator

Chapter 12 – Project 4
CRUD Project

Chapter 13 – Project 5
Information Countries

Chapter 14 – React JS Part 1

Chapter 15 – Project 6

Chapter 16 – React JS Part 2 and Project 7

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

Chapter 1 – HTML5

1- Introduction and History

2- Tags and Elements

3- Heading

4- Container vs non Container

5- Attributes

6- Images

7- Links

8- Nesting

9- Lists

10- Tables

11- Formatting

12- Video

13- Audio

14- iframe

15- Forms

16- HTML Structure

Chapter 2 – CSS Essentials

1- introduction to CSS

2- History

3- Ways to Write CSS

4- Colors and background

5- Text

6- Fonts

7- Google Fonts

8- remix icons

9- id vs class

10- div vs span

11- Pseudo Class

12- Pseudo Elements

13- ٍSelectors

Chapter 3 – CSS Layout

1- Box Model

2- Border

3- Padding

4- Margin

5- position ( static – absolute – relative ) and Practical

6- Position ( Fixed ) and Practical

7- position ( Sticky )

8- z-index and Practical

9-introduction to FlexBox

10- container(display – direction – wrap – flow )

11- Container ( justify – align items – align content – gap )

12- Items ( order – grow – shrink – basis – align self)

13- introduction to Grid System

14- display – columns – rows – gap

15- grid column – grid row

16- grid template areas – grid area

Chapter 4 – CSS Advanced

1- shadows

2- opacity and Cursor

3- Filters

4- transforms

5- gradient

Chapter 5 – Project 1

1- navbar + Header

2- cards + Mid section

3- cards + Last section

4- Footer

Chapter 6 – Bootstrap 5

1- Introduction to Bootstrap5

2- Components and install

3- Navbar

4- Carousel

5- Cards and other Components

Chapter 7 – Project 2

1- Navbar

2- Hero

3- about

4-skills

5- Projects

Chapter 8 – JavaScript 101

1- Introduction to JS

2- Create JS File

3- alert prompt

4- Variables and Constants

5- console and output

Chapter 11 – Project 3
Create a Calculator

Chapter 12 – Project 4
CRUD Project

Chapter 13 – Project 5
Information Countries