ÅÐÇ ßäÊ ããä ãØæÑí ÇáæÇÌåÇÊ ÇáÃãÇãíÉ (Frontend developer) æÊÚãá ßËíÑÇ ÈáÛÉ Çá CSS ÝÃäÊ ãØÇáÈ ÈÇÎÊíÇÑ ØÑíÞÉ Úãá ÊÖãä áß ÇáÓÑÚÉ æÞæÉ ÇáÃÏÇÁ ÎÇÕÉ ÅÐÇ ßäÊ ÊÚØí ááæÞÊ ÃåãíÉ ÞÕæì.
æáÚá Ãæá ÔíÁ íÊÈÇÏÑ Åáì ÇáÐåä ÚäÏ ÇáÍÏíË Úä ØÑíÞÉ ÇáÚãá åæ ÇÎÊíÇÑ ÇáãÍÑÑ (Editor)¡ ÝÇáãÍÑÑ ÇáÐí íÏÚã ÇáÅßãÇá ÇáÊáÞÇÆí (Autocomplete) ãËáÇ ÃÝÖá ããä íÌÈÑß Úáì ßÊÇÈÉ ÇáßæÏ ßáå¡ æÇáãÍÑÑ ÇáÐí áå ÅÖÇÝÇÊ ßËíÑÉ æãÊäæÚÉ ÃÝÖá ãä ÇáãÍÑÑ ÇáÐí íÌÚáß ÊÚÇäí ÇáÃãÑíä ÚäÏãÇ ÊÑíÏ ÅÖÇÝÉ ãíÒÉ ÌÏíÏÉ Åáíå… ÅáÎ
ÇáÍá åæ ãÍÑÑ ÇáãÊÕÝÍ äÝÓå
ÔÎÕíÇ¡ ÚäÏãÇ ÃäÊåí ãä ßÊÇÈÉ Çá HTML ÃäÊÞá Åáì CSS æåäÇ ÃÛíÑ ÇáãÍÑÑ ÇáÐí ÃÚãá Èå ÚÇÏÉ æ åæ Sublime Text¡ ÚäÏ ßÊÇÈÉ ÃßæÇÏ Çá CSS ÃÝÖá ÍáÇ ÂÎÑ ÃÑÇå ÚãáíÇ ÃßËÑ æåæ ãÊæÝÑ áÏì ÇáÌãíÚ ÊÞÑíÈÇ ÈãÌÑÏ ÊäÕíÈ ÃÍÏ ÇáãÊÕÝÍÇÊ ÇáßÈíÑÉ ãËá ÛæÛá ßÑæã æÝÇíÑÝæßÓ¡ Åäå ãÍÑÑ ÇáãÊÕÝÍ.
åÐÇ ÇáÍá ÃÌÏå ãËÇáíÇ æÚãáíÇ Åáì ÍÏ ÈÚíÏ ÎÇÕÉ ÅÐÇ ßäÊ Êãáß ÔÇÔÊíä ÃãÇãß¡ Ýßá ãÇ Úáíß ÝÚáå åæ ÝÊÍ ãÊÕÝÍß Ýí ÔÇÔÉ Ëã ÊÝÊÍ ãÍÑÑ ÇáãÊÕÝÍ æÊÌÑå Åáì ÇáÔÇÔÉ ÇáËÇäíÉ æåßÐÇ ßá ãÇ ßÊÈÊ ßæÏÇð ãÚíäÇ ÊÑì äÊíÌÊå Úáì ÇáÝæÑ Ýí ÇáÔÇÔÉ ÇáÃæáì æÈãÌÑÏ ÇáÖÛØ Úáì (Ctrl+s) ÓíÊã ÍÝÙ Úãáß Ýí ÇáãáÝ ÇáÃÕáí.
*áÇÊäÓì Úãá Save As… Ýí ÇáãÑÉ ÇáÃæáì ÍÊì íÚÑÝ ÇáãÊÕÝÍ Ãíä ÓíÊã ÍÝÙ ÇáãáÝ ÚäÏ ÇáÖÛØ Úáì Ctrl+s.
ØÑíÞÉ ÝÊÍ ÇáãÍÑÑ Ýí ÛæÛá ßÑæã :
- ÇÝÊÍ Chrome Dev Tools.
- ÃäÞÑ Úáì ÇáäÇÝÐÉ Source Ëã ÇÎÊÑ ÇáãáÝ ÇáÐí ÊÑíÏ ÝÊÍå Úáì ÇáíÓÇÑ.
ÃäÊ ÇáÂä Ýí ãÍÑÑ Google Chrome¡ ÝÚÇá æÚãáí¡ ÍÊì Ýí ÍÇá ÞÑÑÊ ÇáÚãá È Sass ãËáÇ Ýáä ÊÌÏ Ãí ãÔßá¡ ÝÈÖÈØ ÈÚÏ ÇáÅÚÏÇÏÇÊ Ýí Chrome ÓÊÌÚá åÐÇ ÇáÃÎíÑ íÏÚã Sass ßÐáß.
ÃãÇ ÅÐÇ ßäÊ ãä ÚÔÇÞ ÝÇíÑÝæßÓ ÝáÇÊÞáÞ¡ åÐÇ ÇáãÊÕÝÍ ÇáÚãáÇÞ íãÊáß ßÐáß ãÍÑÑÇ ÑÇÆÚÇ æÈäÝÓ ãíÒÇÊ ßÑæã Ãæ ÑÈãÇ ÃÝÖá Ýí ÈÚÖ ÇáÌæÇäÈ¡ æÈÇáÊÇáí áÇÊäÓì ÇáÅÓÊÝÇÏÉ ãä åÐå ÇáÊÞäíÇÊ æÇáããíÒÇÊ ÇáÊí íÞæã ßÈÇÑ ÇáãåäÏÓíä Ýí åÐå ÇáÔÑßÇÊ ÈÏãÌåÇ Ýí ãÊÕÝÍÇÊåã ßá íæã.






ÑÏ ãÚ ÇÞÊÈÇÓ
ÇáãÝÖáÇÊ