‫ﻧﻈﺮة ﻋﺎﻣﺔ‬

‫ﻳﻬﺪف ﻫﺬا اﻟﻤﺴﺎر إﻟﻰ ﺗﺰوﻳﺪ اﻟﻤﺘﻌﻠﻤﻴﻦ ﺑﺎﻟﻤﻬﺎرات واﻟﻤﻌﺮﻓﺔ اﻟﻼزﻣﺔ ﻟﻴﺼﺒﺤﻮا ﻣﻄﻮري وﻳﺐ ﻣﺤﺘﺮﻓﻴﻦ ﻗﺎدرﻳﻦ ﻋﻠﻰ ﺗﺼﻤﻴﻢ‬
‫وﺑﻨﺎء ﻣﻮاﻗﻊ وﻳﺐ ﺗﻔﺎﻋﻠﻴﺔ‪ ،‬واﺣﺘﺮاﻓﻴﺔ‪ ،‬وﻋﺎﻟﻴﺔ اﻟﺠﻮدة‪.‬‬

‫أﻫﺪاف اﻟﺘﻌﻠﻢ‬
‫ً‬
‫ﻗﺎدرا ﻋﻠﻰ أن‪:‬‬ ‫ﺳﻴﻜﻮن ﺧﺮﻳﺞ ﻫﺬا اﻟﻤﺴﺎر‬

‫ﻳﻔﻬﻢ أﺳﺎﺳﻴﺎت ‪ ،HTML‬ﻟﻴﻌﺮف ﻛﻴﻔﻴﺔ ﺑﻨﺎء اﻟﻬﻴﻜﻞ اﻷﺳﺎﺳﻲ ﻷي ﻣﻮﻗﻊ ﺑﻄﺮﻳﻘﺔ اﺣﺘﺮاﻓﻴﺔ‪.‬‬

‫ﻳﺘﻌﻠﻢ أﺳﺎﺳﻴﺎت ‪ CSS‬وﻛﻴﻔﻴﺔ ﺗﻨﺴﻴﻖ ﺷﻜﻞ اﻟﻤﻮﻗﻊ ﺑﻄﺮﻳﻘﺔ ﺟﺬاﺑﺔ واﺣﺘﺮاﻓﻴﺔ ﻋﻦ ﻃﺮﻳﻖ إﺿﺎﻓﺔ اﻷﻟﻮان‬

‫وﻋﻨﺎﺻﺮ اﻟﺘﺼﻤﻴﻢ اﻷﺧﺮى‪.‬‬

‫ﻳُ ﻨﺸﺊ ﺗﺨﻄﻴﻄﺎت اﺣﺘﺮاﻓﻴﺔ ﻟﺒﻨﺎء ﻣﻮاﻗﻊ وﻳﺐ ﺳﺮﻳﻌﺔ اﻻﺳﺘﺠﺎﺑﺔ ﺑﺎﺳﺘﺨﺪام ‪ CSS‬و‪ Flexbox‬و‪ CSS Grid‬و‬

‫‪.Float‬‬

‫ﻳُ ﻨﺸﺊ ﻣﻮﻗﻊ وﻳﺐ ﺗﻔﺎﻋﻠﻲ وﺑﺼﻮرة واﺣﺘﺮاﻓﻴﺔ ﻋﻦ ﻃﺮﻳﻖ ﺗﻄﺒﻴﻖ ﻣﻬﺎرات ﻣﺘﻘﺪﻣﺔ ﻓﻲ ‪ CSS‬ﻣﺜﻞ‬

‫‪ Responsive web design‬و‪ SASS‬و‪.CSS Animations‬‬

‫ﻣﺴﺎر ﺑﻨﺎء اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ‬

‫ﺑﺎﺳــــــﺘﺨﺪام ‪ HTML‬و‪CSS‬‬ ‫‪2‬‬
 ‫ﻣﻌﻠﻮﻣﺎت ﻋﻦ اﻟﻤﺴﺎر‬

‫ﻣﺴﺘﻮي اﻟﻤﺴﺎر‬ ‫اﻟﻮﻗﺖ اﻟﻤﺘﻮﻗﻊ ﻹﻧﻬﺎء اﻟﻤﺴﺎر‬

‫اﻟﻤﺒﺘﺪﺋﻴﻦ‬ ‫ﻣﻦ ‪ ٢‬إﻟﻰ ‪ ٣‬ﺷﻬﻮر‬

‫ﺑﻮاﻗﻊ ‪ ١٠-٥‬ﺳﺎﻋﺎت أﺳﺒﻮﻋﻴً ﺎ ﺗﻘﺮﻳﺒً ﺎ‪.‬‬

‫اﻟﻤﺘﻄﻠﺒﺎت واﻟﻤﻌﺮﻓﺔ اﻟﺴﺎﺑﻘﺔ؟‬

‫ﻻ ﻳﻠﺰم وﺟﻮد أي ﺧﺒﺮة ﺳﺎﺑﻘﺔ ﻓﻲ اﻟﺒﺮﻣﺠﺔ ﻟﻠﺘﺴﺠﻴﻞ ﻓﻲ ﻫﺬا اﻟﻤﺴﺎر‪.‬‬

‫ﻣﺎ ﻫﻲ اﻟﺒﺮاﻣﺞ واﻷﺟﻬﺰة اﻟﺘﻲ ﺳﺄﺣﺘﺎﺟﻬﺎ ﻓﻲ ﻫﺬا اﻟﻤﺴﺎر؟‬

‫ﻧﺤﻦ ﻧﺴﺘﺨﺪم أدوات وﺑﺮاﻣﺞ اﻟﺒﺮﻣﺠﺔ اﻟﻤﺠﺎﻧﻴﺔ واﻟﻤﺴﺘﺨﺪﻣﺔ ﻋﻠﻰ ﻧﻄﺎق واﺳﻊ ﻣﺜﻞ ‪ VS Code‬واﻟﺘﻲ ﻳﻤﻜﻦ اﻟﻮﺻﻮل إﻟﻴﻬﺎ‬
‫ﻋﻠﻰ ﻣﻌﻈﻢ اﻷﺟﻬﺰة وأﻧﻈﻤﺔ اﻟﺘﺸﻐﻴﻞ‪ .‬وﺗﻢ ﺗﺼﻤﻴﻢ ﻣﺴﺎرﻧﺎ ﻟﻴﻜﻮن ﺳﻬﻞ اﻟﻮﺻﻮل واﻻﺳﺘﺨﺪام‪ ،‬ﺣﺘﻰ ﻟﻠﻤﺒﺘﺪﺋﻴﻦ‪ .‬ﻛﻞ ﻣﺎ‬
‫ﺗﺤﺘﺎﺟﻪ ﻓﻘﻂ ﺟﻬﺎز ﺣﺎﺳﻮب واﺗﺼﺎل ﺑﺎﻹﻧﺘﺮﻧﺖ‪.‬‬

‫ﻣﻠﺤﻮﻇﺔ‪:‬‬

‫اﻟﻮﻗﺖ اﻟﻤﺘﻮﻗﻊ ﻹﻧﻬﺎء ﻫﺬا اﻟﻤﺴﺎر ﺗﻘﺪﻳﺮي‪ ،‬وﻫﻮ وإﺟﻤﺎﻟﻲ ﻟﻌﺪد اﻟﺴﺎﻋﺎت اﻟﺘﻲ ﻗﺪ ﺗﺴﺘﻐﺮﻗﻬﺎ ﻹﻛﻤﺎل ﺟﻤﻴﻊ اﻟﺪورات اﻟﻤﻮﺟﻮدة ﻟﻬﺬا اﻟﻤﺴﺎر ﺑﻤﺎ ﻓﻲ‬
‫ذﻟﻚ اﻟﻤﺤﺎﺿﺮات واﻟﻔﻴﺪﻳﻮﻫﺎت واﻟﻤﺸﺮوﻋﺎت‪ ،‬وﻏﻴﺮﻫﻢ‪ ،‬وﺑﻮاﻗﻊ ‪ ١٠-٥‬ﺳﺎﻋﺎت أﺳﺒﻮﻋﻴً ﺎ ﺗﻘﺮﻳﺒً ﺎ‪ ،‬وﻟﻜﻦ ﻗﺪ ﺗﺨﺘﻠﻒ اﻟﺴﺎﻋﺎت اﻟﻔﻌﻠﻴﺔ واﻟﻮﻗﺖ اﻹﺟﻤﺎﻟﻲ ﻣﻦ‬
‫ﺷﺨﺺ ﻵﺧﺮ‪.‬‬

‫ﻣﺴﺎر ﺑﻨﺎء اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ‬

‫ﺑﺎﺳــــــﺘﺨﺪام ‪ HTML‬و‪CSS‬‬ ‫‪3‬‬
 ‫دورة ‬

‫أﺳﺎﺳﻴﺎت ‪HTML‬‬
‫ أﻗﺴﺎم |   درس |   ﻣﺨﺘﺼﺮ ﻛﺘﺎﺑﻲ |   اﺧﺘﺒﺎر‬

‫ﻣﺸﺮوع ﻣﺪوﻧﺔ ﺷﺨﺼﻴﺔ‬

‫ﺳﺘﻘﻮم ﺑﺒﻨﺎء أول ﻣﺸﺮوع ﻟﻚ ﻋﻦ ﻃﺮﻳﻖ إﻧﺸﺎء وﺗﺼﻤﻴﻢ ﺻﻔﺤﺔ وﻳﺐ ﺑﺴﻴﻄﺔ ﺑﺎﺳﺘﺨﺪام ‪ HTML‬ﺗﺤﺘﻮي‬

‫ﻋﻠﻰ ﻧﺼﻮص وﺻﻮر ورواﺑﻂ‪ .‬أﺛﻨﺎء ﺗﻘﺪﻣﻚ ﻓﻲ ﻫﺬا اﻟﻤﺴﺎر‪ ،‬ﺳﺘﺘﻌﻠﻢ اﻟﻤﺰﻳﺪ ﻋﻦ ﻛﻴﻔﻴﺔ دﻣﺞ ‪ HTML‬ﻣﻊ ‪CSS‬‬

‫ﻹﻧﺸﺎء ﺻﻔﺤﺎت وﻳﺐ أﻛﺜﺮ ﺗﻔﺎﻋﻠﻴﺔ‪.‬‬

‫اﻟﺘﺮﺣﻴﺐ واﻟﺨﻄﻮات اﻷوﻟﻰ‬

‫ﻧﻈﺮة ﻋﺎﻣﺔ ﻋﻠﻰ ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ )‪(A High-Level Overview of Web Development‬‬

‫إﻋﺪاد ﻣﺤﺮر اﻟﻜﻮد اﻟﺨﺎص ﺑﻨﺎ )‪(Setting Up Our Code Edito‬‬

‫ﺻﻔﺤﺔ اﻟﻮﻳﺐ اﻷوﻟﻰ اﻟﺨﺎﺻﺔ ﺑﻚ )‪(Your Very First Webpage‬‬

‫ﺗﻨﺰﻳﻞ ﻣﻮاد اﻟﺪورة )‪(Downloading Course Material‬‬

‫ﻣﻘﺪﻣﺔ ﻓﻲ ‪(Introduction to HTML) HTML‬‬

‫ﻣﺨﺘﺼﺮ ﻛﺘﺎﺑﻲ ﻋﻦ ﻣﻘﺪﻣﺔ ﻓﻲ ‪HTML‬‬

‫ﻣﺴﺎر ﺑﻨﺎء اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ‬

‫ﺑﺎﺳــــــﺘﺨﺪام ‪ HTML‬و‪CSS‬‬ ‫‪4‬‬
 ‫أﺳﺎﺳﻴﺎت ‪(HTML Fundamentals) HTML‬‬

‫ﻫﻴﻜﻞ ﻣﺴﺘﻨﺪ ‪(HTML Document Structure) HTML‬‬

‫ﻋﻨﺎﺻﺮ ﺗﺘﻴﺢ ﻟﻴﻚ ﻋﺮض اﻟﻤﺤﺘﻮى اﻟﻜﺘﺎﺑﻲ واﻟﻨﺼﻮص ﻟﺼﻔﺤﺔ اﻟﻮﻳﺐ )‪(Text Elements‬‬

‫ﻋﻨﺎﺻﺮ ﻧﺼﻮص إﺿﺎﻓﻴﺔ‪ :‬ﻋﻨﺼﺮ ﻳُ ﺘﻴﺢ ﻟﻚ ﻋﺮض ﻗﺎﺋﻤﺔ ﻣﻦ اﻟﻤﺤﺘﻮى ﻓﻲ ﺻﻔﺤﺔ اﻟﻮﻳﺐ )‪(More Text Elements: Lists‬‬

‫ﻋﻨﺼﺮ ﻳﺴﺘﺨﺪم ﻹﺿﺎﻓﺔ اﻟﺼﻮر واﻟﺴﻤﺎت ﻟﺼﻔﺤﺔ اﻟﻮﻳﺐ )‪(Images and Attributes‬‬

‫ﻋﻨﺼﺮ ﻳُ ﻤﻜﻨﻚ ﻣﻦ إﺿﺎﻓﺔ رواﺑﻂ ﻧﺼﻴﺔ ﻓﻲ ﺻﻔﺤﺔ اﻟﻮﻳﺐ )‪( Hyperlinks‬‬

‫ﺗﻨﻈﻴﻢ ﺻﻔﺤﺘﻨﺎ )‪(Structuring our Page‬‬

‫ﻣﻼﺣﻈﺔ ﺣﻮل ‪(A Note on Semantic HTML) Semantic HTML‬‬

‫ﺗﺜﺒﻴﺖ ﻣﻠﺤﻘﺎت إﺿﺎﻓﻴﺔ إﻟﻰ ‪(Installing Additional VS Code Extensions) VS Code‬‬

‫إﻧﺸﺎء اﻟﻨﺴﺨﺔ اﻟﻌﺮﺑﻴﺔ ‪(Create Arabic version ) RTL‬‬

‫ﺗﺤﺪي ‪ 1‬ﻷﺳﺎﺳﻴﺎت ‪(HTML Fundamentals Challenge 1 HTML‬‬

‫ﺗﺤﺪي ‪ 2‬ﻷﺳﺎﺳﻴﺎت ‪(HTML Fundamentals Challenge 2 HTML‬‬

‫اﻻﺧﺘﺒﺎر اﻟﻨﻬﺎﺋﻲ ﻟﺪورة أﺳﺎﺳﻴﺎت ‪HTML‬‬

‫‪ 12‬ﺳﺆال ﻟﻘﻴﺎس ﻣﺪى ﻓﻬﻤﻚ وﺗﺤﺼﻴﻠﻚ‪ ،‬واﻟﺘﺄﻛﺪ ﻣﻦ أﻧﻚ اﻛﺘﺴﺒﺖ اﻟﻤﻬﺎرات اﻟﻼزﻣﺔ ﻟﺒﻨﺎء اﻟﻬﻴﻜﻞ اﻷﺳﺎﺳﻲ‬

‫ﻷي ﻣﻮﻗﻊ ﺑﻄﺮﻳﻘﺔ اﺣﺘﺮاﻓﻴﺔ‪.‬‬

‫ﻣﺴﺎر ﺑﻨﺎء اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ‬

‫ﺑﺎﺳــــــﺘﺨﺪام ‪ HTML‬و‪CSS‬‬ ‫‪5‬‬
 ‫دورة ‬

‫ﺗﻌﻠﻢ أﺳﺎﺳﻴﺎت ‪CSS‬‬

‫‪ 5‬أﻗﺴﺎم | ‪ 39‬درس | ‪ 25‬ﻣﺨﺘﺼﺮ ﻛﺘﺎﺑﻲ | ‪ 17‬اﺧﺘﺒﺎر‬

‫ﻣﺸﺮوع ﺗﻨﺴﻴﻖ اﻟﻤﺪوﻧﺔ اﻟﺸﺨﺼﻴﺔ‬

‫ﺑﻌﺪ ﺗﻌﻠﻤﻚ ﻷﺳﺎﺳﻴﺎت ‪ CSS‬ﺳﺘﻘﻮم ﺑﺘﻄﺒﻴﻖ ﻣﺎ ﺗﻌﻠﻤﺘﻪ ﻓﻲ ﻫﺬه اﻟﺪورة ﻋﻠﻰ اﻟﻤﺸﺮوع اﻟﺴﺎﺑﻖ ﻣﻦ دورة‬

‫‪ HTML‬ﻟﺘﻀﻴﻒ ﻟﻠﺼﻔﺤﺔ اﻟﺘﻲ أﻧﺸﺄﺗﻬﺎ ﻟﻤﺴﺔ ﺟﻤﺎﻟﻴﺔ وﺷﻜﻞ ﻣﺘﻨﺎﺳﻖ ﻋﻦ ﻃﺮﻳﻖ إﺿﺎﻓﺔ اﻷﻟﻮان وﻋﻨﺎﺻﺮ‬

‫اﻟﺘﺼﻤﻴﻢ اﻷﺧﺮى‪.‬‬

‫أﺳﺎﺳﻴﺎت ‪(CSS Fundamentals) CSS‬‬

‫ﻣﻘﺪﻣﺔ ﻋﻦ ‪(Introduction to CSS) CSS‬‬

‫ﻛﺘﺎﺑﺔ ﻛﻮد ‪ CSS‬داﺧﻠﻲ واﻟﺨﺎرﺟﻲ واﻟﻤﻀﻤﻦ )‪(Inline, Internal, and External CSS‬‬

‫ﺗﻨﺴﻴﻖ اﻟﻨﺺ )‪(Styling Text‬‬

‫ﺷﺮح ﻛﻴﻔﻴﺔ اﺳﺘﺪﻋﺎء اﻟﻤﺤﺪدات ﺑﺎﺳﺘﺨﺪام ‪(Combining Selectors) css‬‬

‫ﺷﺮح وﻋﺮض ﻣﻤﻴﺰات ﻣﺤﺪد ‪ ID‬وﻣﺤﺪد ‪(Class and ID Selectors) Class‬‬

‫اﻟﻌﻤﻞ ﻣﻊ اﻷﻟﻮان )‪(Working with Colors‬‬

‫ﺷﺮح ‪ Pseudo-Classes‬واﺳﺘﺨﺪاﻣﺎﺗﻬﺎ )‪(Pseudo-Classes‬‬

‫ﺗﻨﺴﻴﻖ اﻟﺮواﺑﻂ )‪(Styling Hyperlinks‬‬

‫اﺳﺘﺨﺪام أدوات ﺗﻄﻮﻳﺮ ‪(Using Chrome Devtools) Chrome‬‬

‫اﻟﺘﻌﺎرض ﺑﻴﻦ اﻟﻤﺤﺪدات )‪(Conflicts Between Selectors‬‬

‫اﻟﺘﻮرﻳﺚ واﻟﻤﺤﺪد اﻟﻌﺎﻟﻤﻲ )‪(Inheritance and the Universal Selector‬‬

‫ﻣﺴﺎر ﺑﻨﺎء اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ‬

‫ﺑﺎﺳــــــﺘﺨﺪام ‪ HTML‬و‪CSS‬‬ ‫‪6‬‬
 ‫اﻟﺘﺒﺎﻋﺪ واﻟﻤﺴﺎﻓﺎت ﻓﻲ ‪(Spacing in CSS) CSS‬‬

‫ﺷﺮح ﻣﻔﺼﻞ ﻟﻠـ ‪(The CSS Box Model) CSS Box Model‬‬

‫ﺷﺮح ﻛﻴﻔﻴﺔ اﺳﺘﻌﻤﺎل ﺧﺎﺻﻴﺔ ‪ margins‬و‪(Using Margins and Paddings) padding‬‬

‫إﺿﺎﻓﺔ اﻷﺑﻌﺎد )‪(Adding Dimensions‬‬

‫ﺗﻮﺳﻴﻂ ﺻﻔﺤﺘﻨﺎ )‪(Centering our Page‬‬

‫ﻣﻮاﺿﻴﻊ إﺿﺎﻓﻴﺔ‬

‫أﻧﻮاع اﻟﺼﻨﺎدﻳﻖ )‪(Types of Boxes‬‬

‫ﻣﻮﺿﻮع ﻋﻦ اﻟـ ‪(Absolute Positioning) Absolute Positioning‬‬

‫ﻣﻮﺿﻮع ﻋﻦ ‪(Pseudo-elements) Pseudo-elements‬‬

‫اﻟﻨﺴﺨﺔ اﻟﻌﺮﺑﻴﺔ )‪(Arabic Version‬‬

‫أﻓﻀﻞ اﻟﻤﻤﺎرﺳﺎت واﻟﺤﻴﻞ ﻻﺳﺘﺨﺪام ‪(Best Practices and Tricks) CSS‬‬

‫اﻻﺧﺘﺒﺎر اﻟﻨﻬﺎﺋﻲ ﻟﺪورة أﺳﺎﺳﻴﺎت ‪CSS‬‬

‫‪ 20‬ﺳﺆال ﻟﻘﻴﺎس ﻣﺪى ﻓﻬﻤﻚ وﺗﺤﺼﻴﻠﻚ‪ ،‬واﻟﺘﺄﻛﺪ ﻣﻦ أﻧﻚ ﻗﺪ اﻛﺘﺴﺒﺖ اﻟﻤﻬﺎرات اﻟﻼزﻣﺔ ﻟﺘﻨﺴﻴﻖ ﺷﻜﻞ ‬

‫اﻟﻤﻮﻗﻊ ﺑﻄﺮﻳﻘﺔ ﺟﺬاﺑﺔ واﺣﺘﺮاﻓﻴﺔ‬

‫ﻣﺴﺎر ﺑﻨﺎء اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ‬

‫ﺑﺎﺳــــــﺘﺨﺪام ‪ HTML‬و‪CSS‬‬ ‫‪7‬‬
 ‫دورة ‬

‫ﺗﻌﻠﻢ ‪CSS Layouts‬‬

‫ أﻗﺴﺎم |   درس |   ﻣﺨﺘﺼﺮ ﻛﺘﺎﺑﻲ |  اﺧﺘﺒﺎر‬

‫إﻋﺎدة ﺑﻨﺎء اﻟﻤﺪوﻧﺔ اﻟﺸﺨﺼﻴﺔ ب ‪ flexbox‬و‪grid‬‬

‫اﻷن وﻗﺪ ﺗﻌﻠﻤﺖ أﺳﺎﺳﻴﺎت ‪ CSS‬ﺳﺘﻘﻮم ﺑﺈﻋﺎدة ﺗﻄﺒﻴﻖ اﻟﻤﺸﺮوع ﻣﻦ اﻟﺪورة اﻟﺴﺎﺑﻘﺔ ﺑﺎﺳﺘﺨﺪام ‪ felxbox‬و‬

‫‪ grid‬ﻟﺘﻌﻠﻢ ﻣﺪى ﺳﻬﻮﻟﺔ اﻟﺘﺼﻤﻴﻢ ﺑﺎﺳﺘﺨﺪام ﻫﺬه اﻷدوات‪.‬‬

‫ﺛﻼﺛﺔ ﻃﺮق ﻟﺒﻨﺎء اﻟﻤﺨﻄﻄﺎت )‪(The  Ways of Building Layouts‬‬

‫ﻣﺨﺘﺼﺮ ﻛﺘﺎﺑﻲ ﻋﻦ ﺛﻼﺛﺔ ﻃﺮق ﻟﺒﻨﺎء اﻟﺘﺨﻄﻴﻄﺎت ‪The  Ways of Building Layouts‬‬

‫اﻟﺘﻨﺴﻴﻖ ﺑﺎﺳﺘﺨﺪام ﺧﺎﺻﻴﺔ )‪(Floats‬‬

‫اﺳﺘﺨﺪام ﺧﺎﺻﻴﺔ ‪(Using Floats) Float‬‬

‫ﺷﺮح ﺧﺎﺻﻴﺔ ‪(Clearing Floats) Clear‬‬

‫إﻧﺸﺎء ﻣﺨﻄﻂ ﺑﺴﻴﻂ ﺑﺎﺳﺘﺨﺪام ﺧﺎﺻﻴﺔ ‪(Building a Simple Float Layout) Float‬‬

‫ﺷﺮح ﺧﺎﺻﻴﺔ ‪ box-sizing‬وﺧﺎﺻﻴﺔ ‪(box-sizing – border-box) border-box‬‬

‫اﻟﻨﺴﺨﺔ اﻟﻌﺮﺑﻴﺔ )‪(Arabic Version‬‬

‫ﺗﺤﺪي رﻗﻢ ‪1‬‬

‫ﻣﺴﺎر ﺑﻨﺎء اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ‬

‫ﺑﺎﺳــــــﺘﺨﺪام ‪ HTML‬و‪CSS‬‬ ‫‪8‬‬
 ‫اﻟﺘﻨﺴﻴﻖ ﺑﺎﺳﺘﺨﺪام ﺗﻘﻨﻴﺔ )‪(Flexbox‬‬

‫ﻣﻘﺪﻣﺔ ﻋﻦ ﺗﻘﻨﻴﺔ ‪(Introduction to Flexbox) Flexbox‬‬

‫ﻧﻈﺮة ﻋﺎﻣﺔ ﻋﻠﻰ ﺧﺎﺻﻴﺔ ‪(A Flexbox Overview) Flexbox‬‬

‫ﺷﺮح اﻟـ ‪ Spacing‬واﻟـ ‪ Aligning‬ﺑﺎﺳﺘﺨﺪام اﻟـ‪(Spacing and Aligning Flex Items) Flexbox‬‬

‫ﺷﺮح ﺧﺎﺻﻴﺔ ‪(The flex Property) Flex‬‬

‫ﺑﻨﺎء ‪ Component‬ﺑﺎﺳﺘﺨﺪام ﺗﻨﺴﻴﻖ اﻟـ ‪(Building a Component Flexbox Layout) Flexbox‬‬

‫ﺑﻨﺎء ﻣﺨﻄﻂ ﻟﺼﻔﺤﺔ ﻋﻦ ﻃﺮﻳﻖ ‪(Building a Page Flexbox Layout) Flexbox‬‬

‫ﻧﺴﺨﺔ اﻟﻠﻐﺔ اﻟﻌﺮﺑﻴﺔ واﻟﺸﺮح اﻟﻨﻬﺎﺋﻲ ﻟﺨﺎﺻﻴﺔ ‪(Arabic Version – Flexbox Fina) Flexbox‬‬

‫ﺗﺤﺪي رﻗﻢ ‪2‬‬

‫ﺧﺎﺻﻴﺔ )‪(CSS Grid‬‬

‫ﻣﻘﺪﻣﺔ إﻟﻰ ﺧﺎﺻﻴﺔ ‪(Introduction to CSS Grid) CSS Grid‬‬

‫ﻧﻈﺮة ﻋﺎﻣﺔ ﻋﻠﻰ ﺧﺎﺻﻴﺔ ‪(CSS Grid Overview) CSS Grid‬‬

‫ﺗﺤﺪﻳﺪ ﺣﺠﻢ اﻷﻋﻤﺪة واﻟﺼﻔﻮف )‪(Sizing Grid Columns and Rows‬‬

‫وﺿﻊ وﺗﻤﺘﺪ ﻋﻨﺎﺻﺮ اﻟﺸﺒﻜﺔ )‪(Placing and Spanning Grid Items‬‬

‫ﻣﺤﺎذاة ﻋﻨﺎﺻﺮ اﻟﺸﺒﻜﺔ واﻟﻤﺴﺎرات )‪(Aligning Grid Items and Tracks‬‬

‫ﺑﻨﺎء ﻣﺨﻄﻂ ﺑﺴﻴﻂ ﻋﻦ ﻃﺮﻳﻖ ﺧﺎﺻﻴﺔ ‪(Building a Simple CSS Grid Layout) CSS Grid‬‬

‫ﺗﺤﺪي رﻗﻢ ‪3‬‬

‫اﻻﺧﺘﺒﺎر اﻟﻨﻬﺎﺋﻲ ﻟﺪورة ‪CSS Layouts‬‬

‫أﺳﺌﻠﺔ ﻟﻘﻴﺎس ﻣﺪى ﻓﻬﻤﻚ وﺗﺤﺼﻴﻠﻚ‪ ،‬واﻟﺘﺄﻛﺪ ﻣﻦ أﻧﻚ ﻗﺪ اﻛﺘﺴﺒﺖ اﻟﻤﻬﺎرات اﻟﻼزﻣﺔ ﻹﻧﺸﺎء ﺗﺨﻄﻴﻄﺎت‬

‫اﺣﺘﺮاﻓﻴﺔ وﺑﻨﺎء ﻣﻮاﻗﻊ وﻳﺐ ﺳﺮﻳﻌﺔ اﻻﺳﺘﺠﺎﺑﺔ ﺑﺎﺳﺘﺨﺪام ‪ CSS‬و‪ Flexbox‬و‪ CSS Grid‬و‪.Float‬‬

‫ﻣﺴﺎر ﺑﻨﺎء اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ‬

‫ﺑﺎﺳــــــﺘﺨﺪام ‪ HTML‬و‪CSS‬‬ ‫‪9‬‬
 ‫دورة ‬

‫‪Advanced CSS‬‬
‫‪ 16‬أﻗﺴﺎم | ‪ 50‬درس | ‪ 8‬اﺧﺘﺒﺎر‬

‫ﻣﺸﺮوع ﺑﻨﺎء ﻣﻠﻒ ﺷﺨﺼﻲ‬

‫ﺑﻨﻬﺎﻳﺔ ﻫﺬه اﻟﺪورة ﺳﺘﺨﺮج ﺑﻤﺸﺮوع ﺗﻄﺒﻴﻘﻲ ﻋﻤﻠﻲ ﻣﺴﺘﺨﺪﻣً ﺎ ‪ HTML‬و‪ CSS‬ﻟﺒﻨﺎء ‪ Portfolio‬ﻗﻮي‬

‫ﺗﺴﺘﻄﻴﻊ أن ﺗﻌﺮض ﻓﻴﻪ ﻛﻞ ﻣﺸﺎرﻳﻌﻚ اﻟﺤﺎﻟﻴﺔ واﻟﻘﺎدﻣﺔ ﺑﺼﻮرة ﺟﺬاﺑﺔ واﺣﺘﺮاﻓﻴﺔ‪ ،‬ﺳﺘﻄﺒﻖ ﻓﻲ ﻫﺬا‬

‫اﻟﻤﺸﺮوع ﻣﺎ ﺗﻌﻠﻤﺘﻪ ﻓﻲ اﻟﺪورات اﻟﺴﺎﺑﻘﺔ ﻣﻦ ﺑﻨﺎء اﻟﻬﻴﻜﻞ اﻷﺳﺎﺳﻲ ﻟﻠﻤﻮﻗﻊ ﻋﻦ ﻃﺮﻳﻖ ‪ ،HTML‬وإﺿﺎﻓﺔ‬

‫ﻋﻨﺎﺻﺮ اﻟﺘﻨﺴﻴﻖ اﻟﻤﺨﺘﻠﻔﺔ ﻋﻦ ﻃﺮﻳﻖ ‪ ،CSS‬وﺳﺘﺠﻌﻞ اﻟﻤﻮﻗﻊ أﻛﺜﺮ ﺗﻔﺎﻋﻠﻴﺔ واﺣﺘﺮاﻓﻴﺔ ﻋﻦ ﻃﺮﻳﻖ ﺗﻄﺒﻴﻖ ﻣﺎ‬

‫ﺗﻌﻠﻤﺘﻪ ﻓﻲ دورة ‪ Advanced CSS‬ﻣﻦ ‪ Responsive web design‬و‪ Animations‬وﻏﻴﺮﻫﻢ‪.‬‬

‫إﻋﺪاد اﻟﻤﺸﺮوع )‪(Setting up the project‬‬

‫إﻋﺪاد اﻟﻤﺸﺮوع )‪(Setting up the project‬‬

‫ﻧﻈﺮة ﻋﺎﻣﺔ ﻋﻠﻰ اﻟﻤﺸﺮوع )‪(Project Overview‬‬

‫ﺗﻬﻴﺌﺔ ﺗﻨﺴﻴﻖ ﺻﻔﺤﺔ اﻟﻮﻳﺐ ﺣﺘﻰ ﻻ ﺗﺆﺛﺮ ﻋﻠﻰ اﻟﺘﺼﻤﻴﻢ )‪(Initialization & CSS Reset‬‬

‫وﺣﺪات ‪(CSS Units) CSS‬‬

‫ﻣﺘﻐﻴﺮات ‪(CSS Variables) CSS‬‬

‫ﻋﻨﺼﺮ رأس اﻟﺼﻔﺤﺔ )‪(Header Component‬‬

‫اﻟﺘﺨﻄﻴﻂ )‪(Planning‬‬

‫ﻛﺘﺎﺑﻪ ﻋﻨﺎﺻﺮ اﻟـ ‪(Navigation Links) Navigation Links‬‬

‫ﻛﺘﺎﺑﻪ ﻛﻮد اﻟـ ‪(Toggle Input) Toggle Input‬‬

‫ﻣﺴﺎر ﺑﻨﺎء اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ‬

‫ﺑﺎﺳــــــﺘﺨﺪام ‪ HTML‬و‪CSS‬‬ ‫‪10‬‬
 ‫ﻋﻨﺼﺮ اﻟﻤﻌﻠﻮﻣﺎت اﻟﺸﺨﺼﻴﺔ )‪(Bio Component‬‬

‫اﺳﺘﺨﺪام ﺗﻘﻨﻴﺔ اﻟـ ‪ BEM‬ﻓﻲ أﺳﻤﺎء اﻟـ ‪ classes‬واﻟـ ‪(Block Element Modifier-BEM) ID‬‬

‫إدﺧﺎل اﻟﺒﻴﺎﻧﺎت اﻟﺨﺎﺻﺔ ﺑﺎﻟﻤﻮﻗﻊ )‪(Data Part‬‬

‫ﻛﺘﺎﺑﺔ ﻛﻮد ﻟﻌﻤﻞ ‪ Animation‬ﻟﻠﺴﻬﻢ )‪(Arrow Animation‬‬

‫ﻛﺘﺎﺑﺔ ﻋﻨﺼﺮ ﻟﺘﻨﺴﻴﻖ اﻟﺼﻮرة اﻟﺸﺨﺼﻴﺔ )‪(Personal Image‬‬

‫ﻋﻨﺼﺮ اﻟﻤﻬﺎرات )‪(Skills Component‬‬

‫ﺗﺤﺪي‪ ،‬واﻟﺠﺰء اﻟﺨﺎص ﺑـ ‪(Challenge and HTML part) HTML‬‬

‫اﻟﺠﺰء اﻟﺨﺎص ﺑـ ‪(CSS Part) CSS‬‬

‫ﻋﻨﺼﺮ اﻟﻤﺤﺘﻮى اﻟﻤﺮﺋﻲ )‪(Media Component‬‬

‫اﻟﻔﻴﺪﻳﻮ ﻛﺨﻠﻔﻴﺔ )‪(Video as background‬‬ ‫اﻟﻔﻴﺪﻳﻮ ﻛﻮﺳﻴﻠﺔ إﻋﻼﻣﻴﺔ )‪(Video as media‬‬

‫ﻋﻨﺼﺮ اﻟﻤﺸﺎرﻳﻊ )‪(Projects Component‬‬

‫اﻟﺠﺰء اﻟﺨﺎص ﺑـ ‪(CSS Part) CSS‬‬ ‫اﻟﺠﺰء اﻟﺨﺎص ﺑـ ‪(HTML Part) HTML‬‬

‫ﻋﻨﺼﺮ اﻟﻌﻤﻼء )‪(Clients Component‬‬

‫اﻟﺠﺰء اﻟﺨﺎص ﺑـ ‪(CSS Part) CSS‬‬ ‫اﻟﺠﺰء اﻟﺨﺎص ﺑـ ‪(HTML Part) HTML‬‬

‫ﻋﻨﺼﺮ ﺟﻬﺎت اﻻﺗﺼﺎل )‪(Contact Component‬‬

‫اﻟﺒﺮﻳﺪ اﻹﻟﻜﺘﺮوﻧﻲ ورواﺑﻂ اﻟﺘﻮاﺻﻞ اﻻﺟﺘﻤﺎﻋﻲ )‪(Email and Social Links‬‬

‫اﻟﻨﻤﻮذج واﻟﻤﺪﺧﻼت )‪(Form and Inputs‬‬

‫ﻣﺴﺎر ﺑﻨﺎء اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ‬

‫ﺑﺎﺳــــــﺘﺨﺪام ‪ HTML‬و‪CSS‬‬ ‫‪11‬‬
 (More Features and tweaks) ‫اﻟﻤﺰﻳﺪ ﻣﻦ اﻟﻤﻤﻴﺰات‬

(Scroll smooth links) Scroll smooth ‫ﺗﻜﻮﻳﺪ ﻣﻴﺰة اﻟـ‬ (Footer Component) ‫ﻛﺘﺎﺑﺔ ﻛﻮد ﻟﻌﻨﺼﺮ ذﻳﻞ اﻟﺼﻔﺤﺔ‬

(Dark Theme) Dark mode ‫إﺿﺎﻓﺔ ﻣﻴﺰة‬ (Sticky Header) sticky header ‫ﻛﺘﺎﺑﺔ ﻛﻮد ﻟﻠـ‬

(Media Component) ‫ﻋﻨﺼﺮ اﻟﻤﺤﺘﻮى اﻟﻤﺮﺋﻲ‬

(Video as background) ‫اﻟﻔﻴﺪﻳﻮ ﻛﺨﻠﻔﻴﺔ‬ (Video as media) ‫اﻟﻔﻴﺪﻳﻮ ﻛﻮﺳﻴﻠﺔ إﻋﻼﻣﻴﺔ‬

(Responsive Design) ‫اﻟﺘﺼﻤﻴﻢ اﻟﺘﻔﺎﻋﻠﻲ‬

(Overview of responsive design) ‫ﻧﻈﺮة ﻋﺎﻣﺔ ﻋﻠﻰ اﻟﺘﺼﻤﻴﻢ اﻟﺘﻔﺎﻋﻠﻲ‬

(Learn by Example) ‫ﺗﻌﻠﻢ ﻋﻦ ﻃﺮﻳﻖ اﻷﻣﺜﻠﺔ‬

(Make it responsive) ‫اﺟﻌﻞ ﺗﺼﻤﻴﻤﻚ ﺗﻔﺎﻋﻠﻲ‬

(Burger Menu) ‫ ﻓﻲ ﻧﺴﺨﺔ ﻣﻮﻗﻌﻨﺎ اﻟﺘﻔﺎﻋﻠﻲ‬Burger Menu ‫ﻛﺘﺎﺑﺔ ﻛﻮد ﻹﺿﺎﻓﺔ‬

(Syntactically Awesome Style Sheets-SASS) ‫ﻟﻐﺔ ﺗﻨﺴﻴﻖ ﺻﻔﺤﺎت اﻟﻮﻳﺐ‬

(Overview of SASS) SASS ‫ﻧﻈﺮة ﻋﺎﻣﺔ ﻋﻠﻰ‬

(Using SASS in the project) ‫ ﻓﻲ اﻟﻤﺸﺮوع‬SASS ‫اﺳﺘﺨﺪام‬

(Compress CSS) CSS ‫ﺿﻐﻂ‬

(Make it Live) ‫إﻃﻼق ﻣﻮﻗﻌﻚ اﻟﺸﺨﺼﻲ ﻋﺎﻹﻧﺘﺮﻧﺖ‬

(Upload project to the GitHub) Github ‫ﺗﺤﻤﻴﻞ اﻟﻤﺸﺮوع ﻋﻠﻰ‬

(Show your work) ‫اﻋﺮض ﻋﻤﻠﻚ‬

‫ﻣﺴﺎر ﺑﻨﺎء اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ‬

CSS‫ و‬HTML ‫ﺑﺎﺳــــــﺘﺨﺪام‬ 12
 ‫ﻣﻌﻠﻢ اﻟﻤﺴﺎر‬

‫م‪ .‬ﻣﺤﻤﺪ أﺑﻮ ﺳﺮﻳﻊ‬

‫‪Chief Media Officer & Co-Founder of Almdrasa‬‬

‫ﺣﺎﻟﻴﺎ‬
‫ً‬ ‫ﻣﻬﻨﺪس ﺑﺮﻣﺠﻴﺎت ذو ﺧﺒﺮة أﻛﺜﺮ ﻣﻦ ‪ ١٠‬ﺳﻨﻮات ﻓﻲ ﻛﺒﺮى ﺷﺮﻛﺎت اﻟﺒﺮﻣﺠﻴﺎت ﻓﻲ اﻟﻤﻨﻄﻘﺔ اﻟﻌﺮﺑﻴﺔ وأوروﺑﺎ‪ .‬ﻳﻌﻤﻞ‬

‫ﻛﻜﺒﻴﺮ ﻣﻬﻨﺪﺳﻲ اﻟﺒﺮﻣﺠﻴﺎت ﻓﻲ ﺷﺮﻛﺔ ‪ QbDVision‬اﻟﺮاﺋﺪة ﻓﻲ ﻣﺠﺎل ﺗﺼﻨﻴﻊ اﻷدوﻳﺔ واﻟﺘﻜﻨﻮﻟﻮﺟﻴﺎ اﻟﺤﻴﻮﻳﺔ‪ .‬ﻟﺪﻳﻪ‬

‫ﺧﺒﺮة ﻛﺒﻴﺮة ﻓﻲ ﺗﻄﻮﻳﺮ اﻟﻮاﺟﻬﺎت اﻷﻣﺎﻣﻴﺔ‪ ،‬ﺑﺠﺎﻧﺐ ﺧﺒﺮﺗﻪ ﻛﻤﺤﺎﺿﺮ ﻓﻲ اﻟﺠﺎﻣﻌﺎت داﺧﻞ ﻣﺼﺮ‪.‬‬

‫ﻣﺴﺎر ﺑﻨﺎء اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ‬

‫ﺑﺎﺳــــــﺘﺨﺪام ‪ HTML‬و‪CSS‬‬ ‫‪13‬‬
 ‫ﻟﻤﺎذا اﻟﻤﺪرﺳﺔ ؟‬
‫ﺗﺠﺮﺑﺔ ﺗﻌﻠﻢ ﻛﺎﻣﻠﺔ ُﺗﻜﺴﺒﻚ اﻟﻤﻬﺎرات اﻟﺘﻲ ﺗﺤﺘﺎﺟﻬﺎ ﻟﻠﺤﺼﻮل ﻋﻠﻰ اﻟﻮﻇﻴﻔﺔ اﻟﺘﻲ ﺗﺤﻠﻢ ﺑﻬﺎ‪.‬‬

‫ﺗﺸﻤﻞ ﺟﻤﻴﻊ ﻣﺴﺎراﺗﻨﺎ‬

‫اﻟﺘﻮﺟﻴﻪ واﻟﺪﻋﻢ اﻷﻛﺎدﻳﻤﻲ‬ ‫ﺗﻄﺒﻴﻖ ﻋﻤﻠﻲ ﻋﻠﻰ ﻣﺸﺎرﻳﻊ‬

‫واﻟﺘﻘﻨﻲ‬ ‫ﺣﻘﻴﻘﻴﺔ‬

‫ً‬
‫دﻋﻤﺎ ﻓﺮدﻳً ﺎ ﻣﻦ اﻟﻤﻮﺟﻬﻴﻦ )‪(Mentors‬‬ ‫ﺳﺘﺘﻠﻘﻰ‬ ‫ﻃﺒﻖ ﻣﺎ ﺗﺘﻌﻠﻤﻪ ﻓﻲ اﻟﺪورات اﻟﻤﺨﺘﻠﻔﺔ ﻓﻲ إﻧﺸﺎء‬

‫ذوي اﻟﺨﺒﺮة‪ ،‬واﻟﺬﻳﻦ ﻳﺘﻮاﺟﺪون ﺑﺎﺳﺘﻤﺮار ﻟﺘﻘﺪﻳﻢ‬ ‫ﻣﺸﺎرﻳﻊ ُﺗﺤﺎﻛﻲ اﻟﻌﺎﻟﻢ اﻟﻮاﻗﻌﻲ؛ ﻟﺘﻜﺘﺴﺐ ﺧﺒﺮة‬

‫اﻟﺘﻮﺟﻴﻪ واﻟﺪﻋﻢ‪ ،‬وﺗﺤﻔﻴﺰك‪ ،‬واﻹﺟﺎﺑﺔ ﻋﻠﻰ أﺳﺌﻠﺘﻚ‪.‬‬ ‫ﻗﻴﻤﺔ ُﺗﻤﻴﺰك ﻋﻦ اﻵﺧﺮﻳﻦ‪.‬‬

‫ﺷﻬﺎدة إﺗﻤﺎم‬ ‫اﻻﺗﺼﺎل اﻟﻤﺒﺎﺷﺮ ﻣﻊ اﻟﻤﺤﺎﺿﺮ‬

‫ﺳﺘﺤﺼﻞ ﻋﻠﻰ ﺷﻬﺎدة إﺗﻤﺎم ﻓﻲ ﻧﻬﺎﻳﺔ ﻛﻞ دورة‬ ‫ً‬

‫ﻣﺒﺎﺷﺮة‬ ‫ﺗﻮاﺻﻞ ﻣﻊ اﻟﻤﺤﺎﺿﺮ وﻣﺸﺮﻓﻲ اﻟﺪورات‬

‫ً‬
‫ﺗﻘﺪﻳﺮا ﻟﻌﻤﻠﻚ اﻟﺠﺎد وﺗﻔﺎﻧﻴﻚ‪،‬‬ ‫ﻣﻦ دورات اﻟﻤﺴﺎر‬ ‫ﻋﻦ ﻃﺮﻳﻖ اﻟﻤﺠﻤﻮﻋﺎت‪ ،‬واﻟﺪردﺷﺔ ‪،‬وﻏﻴﺮﻫﺎ‪ ،‬ﻟﺘﺤﺼﻞ‬

‫ً‬
‫وﺗﺸﺠﻴﻌﺎ ﻟﻚ‪ ،‬ﺑﺎﻹﺿﺎﻓﺔ ﻟﺸﻬﺎدة إﺗﻤﺎم اﻟﻤﺴﺎر‬ ‫ﻋﻠﻰ اﻟﻤﺴﺎﻋﺪة اﻟﺘﻲ ﺗﺤﺘﺎﺟﻬﺎ‪ ،‬وﺗﻌﺮف اﻹﺟﺎﺑﺎت‬

‫ً‬
‫ﻛﺎﻣﻼ ﺑﻌﺪ اﻻﻧﺘﻬﺎء ﻣﻨﻪ‪.‬‬ ‫اﻟﻤﻮﺛﻮﻗﺔ ﻟﻜﻞ ﺗﺴﺎؤﻻﺗﻚ‪ ،‬وﺗﺒﻘﻰ ﻋﻠﻰ اﻟﻤﺴﺎر‬

‫ً‬
‫داﺋﻤﺎ‪.‬‬ ‫اﻟﺼﺤﻴﺢ‬

‫ﻣﺴﺎر ﺑﻨﺎء اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ‬

‫ﺑﺎﺳــــــﺘﺨﺪام ‪ HTML‬و‪CSS‬‬ ‫‪14‬‬
 ‫ﻣﺎ اﻟﺬي ﻳﻤﻴﺰ ﻫﺬا اﻟﻤﺴﺎر؟‬

‫ﻣﺤﺎﺿﺮون وﺧﺒﺮاء ﻳﻌﻠﻤﻮن ﺑﺎﻟﻌﺮﺑﻴﺔ‬

‫ﺗﻌﻠﻢ ﻋﻠﻰ ﻳﺪ ﻣﺤﺎﺿﺮون ﻳﺘﺤﺪﺛﻮن ﻟﻐﺘﻚ اﻟﻌﺮﺑﻴﺔ‬

‫ﻟﺪﻳﻬﻢ ﺷﻐﻒ ﺑﺎﻟﺘﺪرﻳﺲ وﺛﺮوة ﻣﻦ اﻟﻤﻌﺮﻓﺔ‬
‫ﺧﺒﺮاء ﻳﻌﻤﻠﻮن ﻓﻲ ﺷﺮﻛﺎت ﻛﺒﺮى ﻛﺠﻮﺟﻞ‬

‫ﻣﺮاﺟﻌﺔ ﻣﺨﺼﺼﺔ ﻟﻤﺸﺎرﻳﻌﻚ‬

‫راﺟﻊ ﻣﺸﺎرﻳﻌﻚ أﻛﺜﺮ ﻣﻦ ﻣﺮة‬

‫ﻣﺮاﺟﻌﺎت ﻣﺨﺼﺼﺔ ﻣﻦ ﻣﺮاﺟﻌﻴﻦ ذوي ﺧﺒﺮة‬
‫ﻣﺼﺎدر إﺿﺎﻓﻴﺔ ﻣﻘﺘﺮﺣﺔ ﻟﺘﺤﺴﻴﻦ ﻣﻬﺎراﺗﻚ وﻣﺸﺮوﻋﻚ‬
‫ﻣﺸﺎرﻳﻊ ﺗﺴﺘﻄﻴﻊ ﻣﺸﺎرﻛﺘﻬﺎ ﻋﻠﻰ ‪ portfolio‬اﻟﺨﺎص ﺑﻚ‬

‫ﻟﻘﺎءات أوﻧﻼﻳﻦ ﻣﻊ ﻣﺸﺮﻓﻲ اﻟﺪورات‬

‫ﺗﻮاﺻﻞ ﻣﺒﺎﺷﺮ ﻣﻊ اﻟﻤﺸﺮﻓﻴﻦ ﻋﺒﺮ ﺗﻄﺒﻴﻖ زووم‬

‫ﻣﻨﺎﻗﺸﺔ ﻷﻫﻢ اﻟﻨﻘﺎط اﻟﺘﻲ ﺗﻤﺖ دراﺳﺘﻬﺎ ﻓﻲ اﻟﺪورات‬
‫اﻟﺮد ﻋﻠﻰ ﺗﺴﺎؤﻻﺗﻚ وﻣﺴﺎﻋﺪﺗﻚ ﻓﻲ إﻧﺠﺎز ﻣﺸﺎرﻳﻌﻚ‬
‫ﺗﻮﺻﻴﺎت وﻧﺼﺎﺋﺢ ﻋﻤﻠﻴﺔ وأﻓﻀﻞ اﻟﻤﻤﺎرﺳﺎت ﻟﺘﺤﺴﻴﻦ ﻣﻬﺎراﺗﻚ‬

‫ﻣﺴﺎر ﺑﻨﺎء اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ‬

‫ﺑﺎﺳــــــﺘﺨﺪام ‪ HTML‬و‪CSS‬‬ ‫‪15‬‬
 ‫اﻟﺘﻌﻠﻴﻢ اﻟﺘﺮﻓﻴﻬﻲ‬

‫ﺗﻌﻠﻢ ﺑﻄﺮﻳﻘﺔ ﻣﻤﺘﻌﺔ وﺗﺸﻮﻳﻘﻴﺔ )‪ (Edutainment‬وﻏﻴﺮ‬

‫ﺗﻘﻠﻴﺪﻳﺔ‬
‫ﺗﺴﺘﻄﻴﻊ ﺗﺬﻛﺮ ﻣﺎ ﺗﺘﻌﻠﻤﻪ ﻣﻦ دروس ﻟﻔﺘﺮة زﻣﻨﻴﺔ ﻃﻮﻳﻠﺔ‬

‫اﺧﺘﺒﺎرات ﺗﻔﺎﻋﻠﻴﺔ وﺗﺤﺪﻳﺎت‬

‫اﺧﺘﺒﺎرات ﺗﻔﺎﻋﻠﻴﺔ ﻟﻘﻴﺎس ﻣﺪى ﻓﻬﻤﻚ وﺗﺤﺼﻴﻠﻚ ﻟﻠﺪورة‬

‫ﺗﺤﺪﻳﺎت ﻟﺘﻘﻮﻳﺔ وﺗﺮﺳﻴﺦ ﻣﺎ ﺗﻌﻠﻤﺘﻪ ﻟﻜﻞ ﻗﺴﻢ ﻓﻲ اﻟﺪورة‬
‫ﻗﻴﺎس ﻣﺴﺘﻮى اﻟﺘﻘﺪم واﻻﻧﺠﺎز ﻋﺒﺮ اﻟﺪورة‬

‫اﻵن‪https:‬‬
‫اﻟﺘﻌﻠﻢ‪//almdr‬‬
‫‪rontend‬اﺑﺪأ‪asa.com/tracks/f‬‬

‫ﻣﺴﺎر ﺑﻨﺎء اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ‬

‫ﺑﺎﺳــــــﺘﺨﺪام ‪ HTML‬و‪CSS‬‬ ‫‪16‬‬
‫ﺗﻌﻠﻢ اﻟﺒﺮﻣﺠﺔ ﺑﺎﻟﻌﺮﺑﻴﺔ‬