HTML-css - خطة دراسية
HTML-css - خطة دراسية
ﻳﻬﺪف ﻫﺬا اﻟﻤﺴﺎر إﻟﻰ ﺗﺰوﻳﺪ اﻟﻤﺘﻌﻠﻤﻴﻦ ﺑﺎﻟﻤﻬﺎرات واﻟﻤﻌﺮﻓﺔ اﻟﻼزﻣﺔ ﻟﻴﺼﺒﺤﻮا ﻣﻄﻮري وﻳﺐ ﻣﺤﺘﺮﻓﻴﻦ ﻗﺎدرﻳﻦ ﻋﻠﻰ ﺗﺼﻤﻴﻢ
وﺑﻨﺎء ﻣﻮاﻗﻊ وﻳﺐ ﺗﻔﺎﻋﻠﻴﺔ ،واﺣﺘﺮاﻓﻴﺔ ،وﻋﺎﻟﻴﺔ اﻟﺠﻮدة.
أﻫﺪاف اﻟﺘﻌﻠﻢ
ً
ﻗﺎدرا ﻋﻠﻰ أن: ﺳﻴﻜﻮن ﺧﺮﻳﺞ ﻫﺬا اﻟﻤﺴﺎر
ﻳﻔﻬﻢ أﺳﺎﺳﻴﺎت ،HTMLﻟﻴﻌﺮف ﻛﻴﻔﻴﺔ ﺑﻨﺎء اﻟﻬﻴﻜﻞ اﻷﺳﺎﺳﻲ ﻷي ﻣﻮﻗﻊ ﺑﻄﺮﻳﻘﺔ اﺣﺘﺮاﻓﻴﺔ.
ﻳﺘﻌﻠﻢ أﺳﺎﺳﻴﺎت CSSوﻛﻴﻔﻴﺔ ﺗﻨﺴﻴﻖ ﺷﻜﻞ اﻟﻤﻮﻗﻊ ﺑﻄﺮﻳﻘﺔ ﺟﺬاﺑﺔ واﺣﺘﺮاﻓﻴﺔ ﻋﻦ ﻃﺮﻳﻖ إﺿﺎﻓﺔ اﻷﻟﻮان
ﻳُ ﻨﺸﺊ ﺗﺨﻄﻴﻄﺎت اﺣﺘﺮاﻓﻴﺔ ﻟﺒﻨﺎء ﻣﻮاﻗﻊ وﻳﺐ ﺳﺮﻳﻌﺔ اﻻﺳﺘﺠﺎﺑﺔ ﺑﺎﺳﺘﺨﺪام CSSو Flexboxو CSS Gridو
.Float
ﻳُ ﻨﺸﺊ ﻣﻮﻗﻊ وﻳﺐ ﺗﻔﺎﻋﻠﻲ وﺑﺼﻮرة واﺣﺘﺮاﻓﻴﺔ ﻋﻦ ﻃﺮﻳﻖ ﺗﻄﺒﻴﻖ ﻣﻬﺎرات ﻣﺘﻘﺪﻣﺔ ﻓﻲ CSSﻣﺜﻞ
ﻧﺤﻦ ﻧﺴﺘﺨﺪم أدوات وﺑﺮاﻣﺞ اﻟﺒﺮﻣﺠﺔ اﻟﻤﺠﺎﻧﻴﺔ واﻟﻤﺴﺘﺨﺪﻣﺔ ﻋﻠﻰ ﻧﻄﺎق واﺳﻊ ﻣﺜﻞ VS Codeواﻟﺘﻲ ﻳﻤﻜﻦ اﻟﻮﺻﻮل إﻟﻴﻬﺎ
ﻋﻠﻰ ﻣﻌﻈﻢ اﻷﺟﻬﺰة وأﻧﻈﻤﺔ اﻟﺘﺸﻐﻴﻞ .وﺗﻢ ﺗﺼﻤﻴﻢ ﻣﺴﺎرﻧﺎ ﻟﻴﻜﻮن ﺳﻬﻞ اﻟﻮﺻﻮل واﻻﺳﺘﺨﺪام ،ﺣﺘﻰ ﻟﻠﻤﺒﺘﺪﺋﻴﻦ .ﻛﻞ ﻣﺎ
ﺗﺤﺘﺎﺟﻪ ﻓﻘﻂ ﺟﻬﺎز ﺣﺎﺳﻮب واﺗﺼﺎل ﺑﺎﻹﻧﺘﺮﻧﺖ.
ﻣﻠﺤﻮﻇﺔ:
اﻟﻮﻗﺖ اﻟﻤﺘﻮﻗﻊ ﻹﻧﻬﺎء ﻫﺬا اﻟﻤﺴﺎر ﺗﻘﺪﻳﺮي ،وﻫﻮ وإﺟﻤﺎﻟﻲ ﻟﻌﺪد اﻟﺴﺎﻋﺎت اﻟﺘﻲ ﻗﺪ ﺗﺴﺘﻐﺮﻗﻬﺎ ﻹﻛﻤﺎل ﺟﻤﻴﻊ اﻟﺪورات اﻟﻤﻮﺟﻮدة ﻟﻬﺬا اﻟﻤﺴﺎر ﺑﻤﺎ ﻓﻲ
ذﻟﻚ اﻟﻤﺤﺎﺿﺮات واﻟﻔﻴﺪﻳﻮﻫﺎت واﻟﻤﺸﺮوﻋﺎت ،وﻏﻴﺮﻫﻢ ،وﺑﻮاﻗﻊ ١٠-٥ﺳﺎﻋﺎت أﺳﺒﻮﻋﻴً ﺎ ﺗﻘﺮﻳﺒً ﺎ ،وﻟﻜﻦ ﻗﺪ ﺗﺨﺘﻠﻒ اﻟﺴﺎﻋﺎت اﻟﻔﻌﻠﻴﺔ واﻟﻮﻗﺖ اﻹﺟﻤﺎﻟﻲ ﻣﻦ
ﺷﺨﺺ ﻵﺧﺮ.
أﺳﺎﺳﻴﺎت HTML
أﻗﺴﺎم | درس | ﻣﺨﺘﺼﺮ ﻛﺘﺎﺑﻲ | اﺧﺘﺒﺎر
ﺳﺘﻘﻮم ﺑﺒﻨﺎء أول ﻣﺸﺮوع ﻟﻚ ﻋﻦ ﻃﺮﻳﻖ إﻧﺸﺎء وﺗﺼﻤﻴﻢ ﺻﻔﺤﺔ وﻳﺐ ﺑﺴﻴﻄﺔ ﺑﺎﺳﺘﺨﺪام HTMLﺗﺤﺘﻮي
ﻋﻠﻰ ﻧﺼﻮص وﺻﻮر ورواﺑﻂ .أﺛﻨﺎء ﺗﻘﺪﻣﻚ ﻓﻲ ﻫﺬا اﻟﻤﺴﺎر ،ﺳﺘﺘﻌﻠﻢ اﻟﻤﺰﻳﺪ ﻋﻦ ﻛﻴﻔﻴﺔ دﻣﺞ HTMLﻣﻊ CSS
ﻧﻈﺮة ﻋﺎﻣﺔ ﻋﻠﻰ ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ )(A High-Level Overview of Web Development
ﻋﻨﺎﺻﺮ ﺗﺘﻴﺢ ﻟﻴﻚ ﻋﺮض اﻟﻤﺤﺘﻮى اﻟﻜﺘﺎﺑﻲ واﻟﻨﺼﻮص ﻟﺼﻔﺤﺔ اﻟﻮﻳﺐ )(Text Elements
ﻋﻨﺎﺻﺮ ﻧﺼﻮص إﺿﺎﻓﻴﺔ :ﻋﻨﺼﺮ ﻳُ ﺘﻴﺢ ﻟﻚ ﻋﺮض ﻗﺎﺋﻤﺔ ﻣﻦ اﻟﻤﺤﺘﻮى ﻓﻲ ﺻﻔﺤﺔ اﻟﻮﻳﺐ )(More Text Elements: Lists
ﻋﻨﺼﺮ ﻳﺴﺘﺨﺪم ﻹﺿﺎﻓﺔ اﻟﺼﻮر واﻟﺴﻤﺎت ﻟﺼﻔﺤﺔ اﻟﻮﻳﺐ )(Images and Attributes
12ﺳﺆال ﻟﻘﻴﺎس ﻣﺪى ﻓﻬﻤﻚ وﺗﺤﺼﻴﻠﻚ ،واﻟﺘﺄﻛﺪ ﻣﻦ أﻧﻚ اﻛﺘﺴﺒﺖ اﻟﻤﻬﺎرات اﻟﻼزﻣﺔ ﻟﺒﻨﺎء اﻟﻬﻴﻜﻞ اﻷﺳﺎﺳﻲ
ﺑﻌﺪ ﺗﻌﻠﻤﻚ ﻷﺳﺎﺳﻴﺎت CSSﺳﺘﻘﻮم ﺑﺘﻄﺒﻴﻖ ﻣﺎ ﺗﻌﻠﻤﺘﻪ ﻓﻲ ﻫﺬه اﻟﺪورة ﻋﻠﻰ اﻟﻤﺸﺮوع اﻟﺴﺎﺑﻖ ﻣﻦ دورة
HTMLﻟﺘﻀﻴﻒ ﻟﻠﺼﻔﺤﺔ اﻟﺘﻲ أﻧﺸﺄﺗﻬﺎ ﻟﻤﺴﺔ ﺟﻤﺎﻟﻴﺔ وﺷﻜﻞ ﻣﺘﻨﺎﺳﻖ ﻋﻦ ﻃﺮﻳﻖ إﺿﺎﻓﺔ اﻷﻟﻮان وﻋﻨﺎﺻﺮ
اﻟﺘﺼﻤﻴﻢ اﻷﺧﺮى.
ﻛﺘﺎﺑﺔ ﻛﻮد CSSداﺧﻠﻲ واﻟﺨﺎرﺟﻲ واﻟﻤﻀﻤﻦ )(Inline, Internal, and External CSS
ﺷﺮح ﻣﻔﺼﻞ ﻟﻠـ (The CSS Box Model) CSS Box Model
ﻣﻮاﺿﻴﻊ إﺿﺎﻓﻴﺔ
20ﺳﺆال ﻟﻘﻴﺎس ﻣﺪى ﻓﻬﻤﻚ وﺗﺤﺼﻴﻠﻚ ،واﻟﺘﺄﻛﺪ ﻣﻦ أﻧﻚ ﻗﺪ اﻛﺘﺴﺒﺖ اﻟﻤﻬﺎرات اﻟﻼزﻣﺔ ﻟﺘﻨﺴﻴﻖ ﺷﻜﻞ
اﻷن وﻗﺪ ﺗﻌﻠﻤﺖ أﺳﺎﺳﻴﺎت CSSﺳﺘﻘﻮم ﺑﺈﻋﺎدة ﺗﻄﺒﻴﻖ اﻟﻤﺸﺮوع ﻣﻦ اﻟﺪورة اﻟﺴﺎﺑﻘﺔ ﺑﺎﺳﺘﺨﺪام felxboxو
ﻣﺨﺘﺼﺮ ﻛﺘﺎﺑﻲ ﻋﻦ ﺛﻼﺛﺔ ﻃﺮق ﻟﺒﻨﺎء اﻟﺘﺨﻄﻴﻄﺎت The Ways of Building Layouts
إﻧﺸﺎء ﻣﺨﻄﻂ ﺑﺴﻴﻂ ﺑﺎﺳﺘﺨﺪام ﺧﺎﺻﻴﺔ (Building a Simple Float Layout) Float
ﺷﺮح اﻟـ Spacingواﻟـ Aligningﺑﺎﺳﺘﺨﺪام اﻟـ(Spacing and Aligning Flex Items) Flexbox
ﻧﺴﺨﺔ اﻟﻠﻐﺔ اﻟﻌﺮﺑﻴﺔ واﻟﺸﺮح اﻟﻨﻬﺎﺋﻲ ﻟﺨﺎﺻﻴﺔ (Arabic Version – Flexbox Fina) Flexbox
ﺑﻨﺎء ﻣﺨﻄﻂ ﺑﺴﻴﻂ ﻋﻦ ﻃﺮﻳﻖ ﺧﺎﺻﻴﺔ (Building a Simple CSS Grid Layout) CSS Grid
أﺳﺌﻠﺔ ﻟﻘﻴﺎس ﻣﺪى ﻓﻬﻤﻚ وﺗﺤﺼﻴﻠﻚ ،واﻟﺘﺄﻛﺪ ﻣﻦ أﻧﻚ ﻗﺪ اﻛﺘﺴﺒﺖ اﻟﻤﻬﺎرات اﻟﻼزﻣﺔ ﻹﻧﺸﺎء ﺗﺨﻄﻴﻄﺎت
اﺣﺘﺮاﻓﻴﺔ وﺑﻨﺎء ﻣﻮاﻗﻊ وﻳﺐ ﺳﺮﻳﻌﺔ اﻻﺳﺘﺠﺎﺑﺔ ﺑﺎﺳﺘﺨﺪام CSSو Flexboxو CSS Gridو.Float
Advanced CSS
16أﻗﺴﺎم | 50درس | 8اﺧﺘﺒﺎر
ﺑﻨﻬﺎﻳﺔ ﻫﺬه اﻟﺪورة ﺳﺘﺨﺮج ﺑﻤﺸﺮوع ﺗﻄﺒﻴﻘﻲ ﻋﻤﻠﻲ ﻣﺴﺘﺨﺪﻣً ﺎ HTMLو CSSﻟﺒﻨﺎء Portfolioﻗﻮي
ﺗﺴﺘﻄﻴﻊ أن ﺗﻌﺮض ﻓﻴﻪ ﻛﻞ ﻣﺸﺎرﻳﻌﻚ اﻟﺤﺎﻟﻴﺔ واﻟﻘﺎدﻣﺔ ﺑﺼﻮرة ﺟﺬاﺑﺔ واﺣﺘﺮاﻓﻴﺔ ،ﺳﺘﻄﺒﻖ ﻓﻲ ﻫﺬا
اﻟﻤﺸﺮوع ﻣﺎ ﺗﻌﻠﻤﺘﻪ ﻓﻲ اﻟﺪورات اﻟﺴﺎﺑﻘﺔ ﻣﻦ ﺑﻨﺎء اﻟﻬﻴﻜﻞ اﻷﺳﺎﺳﻲ ﻟﻠﻤﻮﻗﻊ ﻋﻦ ﻃﺮﻳﻖ ،HTMLوإﺿﺎﻓﺔ
ﻋﻨﺎﺻﺮ اﻟﺘﻨﺴﻴﻖ اﻟﻤﺨﺘﻠﻔﺔ ﻋﻦ ﻃﺮﻳﻖ ،CSSوﺳﺘﺠﻌﻞ اﻟﻤﻮﻗﻊ أﻛﺜﺮ ﺗﻔﺎﻋﻠﻴﺔ واﺣﺘﺮاﻓﻴﺔ ﻋﻦ ﻃﺮﻳﻖ ﺗﻄﺒﻴﻖ ﻣﺎ
ﺗﻬﻴﺌﺔ ﺗﻨﺴﻴﻖ ﺻﻔﺤﺔ اﻟﻮﻳﺐ ﺣﺘﻰ ﻻ ﺗﺆﺛﺮ ﻋﻠﻰ اﻟﺘﺼﻤﻴﻢ )(Initialization & CSS Reset
اﻟﺘﺨﻄﻴﻂ )(Planning
اﺳﺘﺨﺪام ﺗﻘﻨﻴﺔ اﻟـ BEMﻓﻲ أﺳﻤﺎء اﻟـ classesواﻟـ (Block Element Modifier-BEM) ID
اﻟﺠﺰء اﻟﺨﺎص ﺑـ (CSS Part) CSS اﻟﺠﺰء اﻟﺨﺎص ﺑـ (HTML Part) HTML
اﻟﺠﺰء اﻟﺨﺎص ﺑـ (CSS Part) CSS اﻟﺠﺰء اﻟﺨﺎص ﺑـ (HTML Part) HTML
(Scroll smooth links) Scroll smooth ﺗﻜﻮﻳﺪ ﻣﻴﺰة اﻟـ (Footer Component) ﻛﺘﺎﺑﺔ ﻛﻮد ﻟﻌﻨﺼﺮ ذﻳﻞ اﻟﺼﻔﺤﺔ
(Dark Theme) Dark mode إﺿﺎﻓﺔ ﻣﻴﺰة (Sticky Header) sticky header ﻛﺘﺎﺑﺔ ﻛﻮد ﻟﻠـ
ﺣﺎﻟﻴﺎ
ً ﻣﻬﻨﺪس ﺑﺮﻣﺠﻴﺎت ذو ﺧﺒﺮة أﻛﺜﺮ ﻣﻦ ١٠ﺳﻨﻮات ﻓﻲ ﻛﺒﺮى ﺷﺮﻛﺎت اﻟﺒﺮﻣﺠﻴﺎت ﻓﻲ اﻟﻤﻨﻄﻘﺔ اﻟﻌﺮﺑﻴﺔ وأوروﺑﺎ .ﻳﻌﻤﻞ
ﻛﻜﺒﻴﺮ ﻣﻬﻨﺪﺳﻲ اﻟﺒﺮﻣﺠﻴﺎت ﻓﻲ ﺷﺮﻛﺔ QbDVisionاﻟﺮاﺋﺪة ﻓﻲ ﻣﺠﺎل ﺗﺼﻨﻴﻊ اﻷدوﻳﺔ واﻟﺘﻜﻨﻮﻟﻮﺟﻴﺎ اﻟﺤﻴﻮﻳﺔ .ﻟﺪﻳﻪ
ﺧﺒﺮة ﻛﺒﻴﺮة ﻓﻲ ﺗﻄﻮﻳﺮ اﻟﻮاﺟﻬﺎت اﻷﻣﺎﻣﻴﺔ ،ﺑﺠﺎﻧﺐ ﺧﺒﺮﺗﻪ ﻛﻤﺤﺎﺿﺮ ﻓﻲ اﻟﺠﺎﻣﻌﺎت داﺧﻞ ﻣﺼﺮ.
ً
دﻋﻤﺎ ﻓﺮدﻳً ﺎ ﻣﻦ اﻟﻤﻮﺟﻬﻴﻦ )(Mentors ﺳﺘﺘﻠﻘﻰ ﻃﺒﻖ ﻣﺎ ﺗﺘﻌﻠﻤﻪ ﻓﻲ اﻟﺪورات اﻟﻤﺨﺘﻠﻔﺔ ﻓﻲ إﻧﺸﺎء
ذوي اﻟﺨﺒﺮة ،واﻟﺬﻳﻦ ﻳﺘﻮاﺟﺪون ﺑﺎﺳﺘﻤﺮار ﻟﺘﻘﺪﻳﻢ ﻣﺸﺎرﻳﻊ ُﺗﺤﺎﻛﻲ اﻟﻌﺎﻟﻢ اﻟﻮاﻗﻌﻲ؛ ﻟﺘﻜﺘﺴﺐ ﺧﺒﺮة
ً
ﺗﻘﺪﻳﺮا ﻟﻌﻤﻠﻚ اﻟﺠﺎد وﺗﻔﺎﻧﻴﻚ، ﻣﻦ دورات اﻟﻤﺴﺎر ﻋﻦ ﻃﺮﻳﻖ اﻟﻤﺠﻤﻮﻋﺎت ،واﻟﺪردﺷﺔ ،وﻏﻴﺮﻫﺎ ،ﻟﺘﺤﺼﻞ
ً
وﺗﺸﺠﻴﻌﺎ ﻟﻚ ،ﺑﺎﻹﺿﺎﻓﺔ ﻟﺸﻬﺎدة إﺗﻤﺎم اﻟﻤﺴﺎر ﻋﻠﻰ اﻟﻤﺴﺎﻋﺪة اﻟﺘﻲ ﺗﺤﺘﺎﺟﻬﺎ ،وﺗﻌﺮف اﻹﺟﺎﺑﺎت
ً
ﻛﺎﻣﻼ ﺑﻌﺪ اﻻﻧﺘﻬﺎء ﻣﻨﻪ. اﻟﻤﻮﺛﻮﻗﺔ ﻟﻜﻞ ﺗﺴﺎؤﻻﺗﻚ ،وﺗﺒﻘﻰ ﻋﻠﻰ اﻟﻤﺴﺎر
ً
داﺋﻤﺎ. اﻟﺼﺤﻴﺢ
اﻵنhttps:
اﻟﺘﻌﻠﻢ//almdr
rontendاﺑﺪأasa.com/tracks/f