<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
    <channel>
        <title>نوشته های arshia</title>
        <link>https://virgool.io/feed/@arshia.mokhles</link>
        <description>من یک برنامه نویس مبتدی هستم که درتلاشم تا به سطح حرفه ای برسم و توی این راه میخوام به شما کارها و مشکلات روزمره ام رو بگم</description>
        <language>fa</language>
        <pubDate>2026-06-18 10:53:20</pubDate>
        <image>
            <url>https://files.virgool.io/upload/users/1184360/avatar/avatar.png?height=120&amp;width=120</url>
            <title>arshia</title>
            <link>https://virgool.io/@arshia.mokhles</link>
        </image>

                    <item>
                <title>فونت آیکون (icon font) چیست ؟</title>
                <link>https://virgool.io/@arshia.mokhles/%D9%81%D9%88%D9%86%D8%AA-%D8%A2%DB%8C%DA%A9%D9%88%D9%86-icon-font-%DA%86%DB%8C%D8%B3%D8%AA-d67gi2x244uv</link>
                <description>تا حالا شده توی طراحی وبسایتتون با مشکلاتی برای بارگذاری یک نماد برای یک کار به مشکل خورده باشید ؟ مثلا همین نماد دانلود آیکون دانلوداگه بخوایم به صورت عکس و با فرمت های png ,jpg و ... ازش استفاده کنیم خیلی دستمون تنگ میشه و به خیلی از مشکلات میخوریم . به عنوان مثال :عکس حجم زیادی داره که باعث کندتر شدن سرعت سایت میشه زمانی که عکس را بزرگتر میکنیم کیفیت آن کاهش میابد اگه بخواهیم تغیراتی توی عکس بدیم خیلی کارمون سخت میشه و نیاز به نرم افزار های سنگین مثل فوتوشاپ داره اما این معایب در فونت آیکون ها نیست ، چرا ؟ چون فونت آیکون ها نوعی فونت هستند یعنی با آنها نه به صورت عکس بلکه به صورت مجموعی از بردار ها(vectorها) هستندفونت ها به صورت مجموعی از بردار ها پس یعنی :چون فونت هستند با بزگتر شدنشون در صفحه کاهش کیفیت پیدا نمیکنند چون به صورت چند تا عدد (اعدادی که بردار رو تشکیل میدن ) ساخته شدن پس حجم سنگینی ندارن وسرعت سایت رو بهبود میدهند چون در زبان css ساخته میشوند پس به راحتی میتوان آنها را در css تغییر داد (مثلا میتوان به آنها رنگ داد یا شکلشون رو تغییر داد )با فونت ها میشود سمبل های بیشتری در یک سایت گذاشت زیرا سبب کند شدن سایت نمیشود و سمبل های بیشتر در سایت یعنی افزایش سرعت کاربران در درک مطالب و استفاده بیشتر آنها از امکانات سایت اما با اینکه فونت ایکون خیلی از انتظارات ما را عملی کرده معایبی نیز دارد که بزرگترینشان عدم توانایی خلق  تصاویر پیچیده توسط فونت آیکون است به عنوان مثال در فونت آیکون هیچگاه نمیتوان عکسی مانند عکس زیر خلق کرد اما حالا چگونه از فونت آیکون استفاده کنیم؟ما دو روش برای استفاده از آنها داریم :1- استفاده از cdn : در این روش طبق کد های پایین از فایل css ای که توسط توسعه دهنده های فونت آیکون ایجاد و بر روی بستر وب گذاشته شده استفاده میکنیم .&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link rel=&amp;quotstylesheet&amp;quot href=&amp;quothttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&amp;quot&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;i class=&amp;quotfa fa-car&amp;quot&gt;&lt;/i&gt;
&lt;i class=&amp;quotfa fa-car&amp;quot style=&amp;quotfont-size:48px;&amp;quot&gt;&lt;/i&gt;
&lt;i class=&amp;quotfa fa-car&amp;quot style=&amp;quotfont-size:60px;color:red;&amp;quot&gt;&lt;/i&gt;

&lt;/body&gt;
&lt;/html&gt; همانطور که در شکل میبینیم فایل فونت آیکون های روی وب رو به فایل html مون وصل میکنیم حالا برای استفاده از آیکون ها باید از تگ &lt;i&gt;&lt;/i&gt; استفاده کنیم و برای مشخص کردن فونت آیکون مورد نظرمون باید کلاس اون آیکون رو در تگ &lt;i&gt; مشخص کنیم  که در اینجا یک ماشین به عنوان آیکون ما انتخاب شده است پس کلاس fa fa-car برای اون تگ گذاشته میشه . و اگه خواستید سایز و رنگ آیکون رو تغییر بدید مانند بالا از font-size و color استفاده کنیم .2- استفاده از فایل فونت آیکون روی سرور : گاهی اوقات امکان عوض شدن آدرس های فایل آیکون ها بر روی وب وجود دارد بنابراین بعضی از توسعه دهندگان وب تصمیم میگیرند به جای استفاده از cdn فایل خود فونت آیکون ها را دانلود کنند و از آنها استفاده کنند .استفاده  از فایل سرور با cdn هیچ فرقی در نحوه ی استفاده آیکون ها ایجاد نمیکند فقط باید به جای آدرس فونت آیکون در وب در href  آدرس خود فایل آیکون ها را روی سرور خود سایت بدهد .نکته : فونت آیکون های ساخته شده دارای منابعی هستند که ما در کد بالایی از منبع font awsome 4 استفاده کردیممنابع استفاده از فونت آیکون ها : منبع fontawesome 5 : این منبع شامل حدود 7800 آیکون در نسخه پولی خود دارد و حدود 1500 آیکون در نسخه رایگان خود دارد منبع font awesome 5 : این منبع شامل حدود 7800 آیکون در نسخه پولی خود دارد و حدود 1500 آیکون در نسخه رایگان خود دارد منبع bootstrap 3 منبع google icons نکته : در بین منابع بالا font awesome 4 و google icons  نیازی به دانلود فایل ندارند و میتوان برای استفاده از آنها از cdn استفاده کرد ولی بقیه نیاز به دانلود دارند اگه اطلاعات بیشتری درباره ی شیوه ی استفاده از منبع فونت آیکون ها و یا رفرنس های آیکون ها میخواهید بهتون پیشنهاد میدم مقاله ی زیر رو بخونید https://www.w3schools.com/icons/default.asp در آخر اگه ما بتونیم وسایل و ابزار توسعه داده شده رو پیدا کنیم میتونیم خیلی راحت تر و کاربردی تر کارمون رو انجام بدیم پس هیچوقت دست از آموزش بر ندارید .ارشیا مخلص </description>
                <category>arshia</category>
                <author>arshia</author>
                <pubDate>Fri, 01 Oct 2021 13:09:45 +0330</pubDate>
            </item>
                    <item>
                <title>واحد های اندازه گیری در css</title>
                <link>https://virgool.io/@arshia.mokhles/%D9%88%D8%A7%D8%AD%D8%AF-%D9%87%D8%A7%DB%8C-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87-%DA%AF%DB%8C%D8%B1%DB%8C-%D8%AF%D8%B1-css-rrgw6x3gmgfw</link>
                <description>خوب این هم یه مقاله برای رفع سردرگمی همه درباره ی واحد های اندازه گیری .اصلا واحد های اندازه گیری برای چی اند که اینقد برای ما مشکل بوجود آوردند ؟واحد ها به چند دسته تقسیم میشن ؟اصلا تک تک واحد ها چجوری کار میکنن ؟اینها سوالاتی هستند که ما در این مقاله به آنها جواب میدهیم.- اصلا واحد های اندازه گیری برای چی اند که اینقد برای ما مشکل بوجود آوردند ؟زمانی که میخواهیم اندازه یک div یا اندازه فونت ها را مشخص کنیم از واحد های اندازه گیری بهره میبریم چون برای هر div یا فونت ما به یک اندازه بسنده نمیکنیم و باید اندازه آنها را متفاوت طراحی بکنیم  تا به افزایش بهره وری در صفحات سایت برسیم .در هر مکان ما به اندازه های متفاوت برای هر div یا فونت نیاز داریم-واحد ها به چند دسته تقسیم میشن ؟واحد ها در css به دو دسته تقسیم میشوند :1- واحد های Absolute ( مطلق ) :همیشه ثابت اند و با تغییر اندازه صفحه مرورگر نیز ثابت میمانند2- واحد های Relative ( نسبی ) : نسبت به المانی در صفحه متغیر اند و اکثرا با تغییر اندازه ی صفحه مرورگر تغییر میکنند . واحد های relative و absolute-اصلا تک تک واحد ها چجوری کار میکنن ؟خب طرز کار واحد های absolute که مشخصه اینها چون همیشه ثابت هستند پس فقط ما باید واحدی که میخواهیم بر اساس اون اندازه ها را مشخص کنیم انتخاب کنیم و برای ابزارمون اندازه مشخص کنیم .واحد های absolute :طبق عکس بالا واحد های px , in , cm , mm , pt , pc جزو واحد های absolute هستند و  در این واحد ها اندازه ها با یک میزان واحد مقایسه میشوند و با تغییر عرض ثابت اند .واحد pixels (px) : 96 پیکسل =  1 اینچ واحد inches (in) :1 اینچ = 2.56 سانتی متر واحد  centimeter (cm) :1متر = 100سانتی مترواحد millimeter (mm) :1سانتی متر = 10 میلی مترواحد points (pt) : 1 اینچ = 72 پوینواحد picas (pc) :1پیکاس =  12 پوینت نکته : از واحد های مطلق در طراحی صفحه نباید استفاده شود یا اگر استفاده میشود باید به حداقل برسند زیرا برای هماهنگ شدن در دستگاه های مختلف با رزولوشن های مختلف به مشکل خواهیم خورد.واحد های Relative : واحد های % , em ,rem,  ex ,ch ,vw, vh , vmax , vmin نسبی یا relative هستند و نسبت به متغیری در صفحه تغییر میکنند واحد درصد (%) : فرض کنید برای عرض یک div کد زیر را بنویسیم width : 70 % ;در این صورت عرض div ما در هرصورت 70 درصد میماند حتی اگر با موس عرض مرورگر را کم و زیاد کنیم این div فقط 70% عرض موجود عنصر پدر خودش را استفاده میکند نکته:هرگز بین عدد و واحد اندازه گیری فاصله نندازید زیرا باعث خطای سینتکسی میشود و به جای نوشتن 20 px بنویسید 20px .واحد های  em , rem (font-size) : این واحد ها تغییرات خودشون رو برحسب font-size یکی از اعضای والدشون انتخاب میکنند که در rem تگ ریشه یعنی تگ html  انتخاب میشود و در em نزدیکترین تگ پدر انتخاب میشود و مانند زیر استفاده میشوندdiv{
 font-size: 10px ;
}
div span{
width: 2em;  /* 1em = 10 px  =&gt;  2em = 20px */
}پس در این فرم اگر تگ span داخل div باشد عرض آن 20px میشود نکته : برای طراحی وبسایت های ریسپانسیو بهترین واحد های اندازه گیری em , rem هستند واحد viewport Height (vh) , viewport Width (vw) : به مقدار قابل مشاهده روی صفحه ی پنجره viewport میگویند در این واحد ما اندازه ها را برحسب viewport محاسبه میکنیم و اینگونه از آنها استفاده میکنیم.div{width: 60 vw;}در کد بالا ما یک div با عرض 60% از عرض viewport را اندازه دهی میکنیم و در واقع اگر عرض viewport کم شود عرض کد ما هم با آن کم میشود نکته : واحد های em ,  px , rem  پر استفاده ترین واحد های اندازه گیری هستند .واحد های vmin , vmax (viewport min/max):اینها نیز مانند vw , vh هستند و نسبت به viewport تعیین میشوند ولی vmin میشود درصدی از کوچکترین بعد(عرض یا ارتفاع )  و vmax نیز درصدی از بیشترین بعد در viewport است . به عنوان مثال عرض viewport برابر با 1000px و ارتفاع viewport برابر با 3000px میباشد پس  5vmin برابر است با 5% از کمترین بعد viewport که در اینجا میشود 5درصد از 1000px که میشود50px و 5vmax نیز میشود 150px نکته : واحدهای vw ، vh ، vmin و vmax در طراحی سایت های مقیاس پذیر یا واکنشگرا موثر خواهد بود.واحد های ch , ex :واحدهای ex و ch همانند دو واحد em و rem به فونت و اندازهٔ فونت سایت وابسته‌اند اما بر خلاف em و rem، این دو همچنین به font-family نیز وابسته‌اند چرا که اندازه‌های آن‌ها برای هر فونت خاصی متفاوت خواهد بود (واحد اندازه‌گیری ch برگرفته از کلمهٔ Character است.)به بیانی ساده‌تر، اگر از فونت‌های مُونواِسپیس استفاده کنید و کد width: 40ch را به باکس یا اِلِمنت خود بدهید، آن اِلِمنت تنها می‌تواند 40 کاراکتر از آن فونت به خصوص را درون خود جای دهد (Monospace به فونت‌هایی گفته می‌شود که همگی حروف آن دارای عرض یکسان هستند.) همچنین x-height یک فونت برابر با ارتفاع حرف کوچک x در آن فونت است که در بسیاری از اوقات به اندازهٔ محور مرکزی فونت خواهد بود.کاربردهای بی‌شماری برای این واحد وجود دارد که بیشتر آن‌ها برای تنظیمات و اصلاحات کوچک تایپوگرافی سایت است. برای نمونه، می‌توانید توان‌ها و عباراتی که باید کمی بالاتر از خط اصلی نوشته شوند را به کمک position: relative و bottom: 1ex به راحتی جایگذاری کنید و به همین ترتیب می‌توان عبارات پایین خطی را با به کار بردن کد bottom: -1ex به راحتی طراحی نمود که بدین ترتیب کنترل شما بر روی فونت بسیار بیشتر از گذشته خواهد بود و می‌توانید در هر زمان، قسمت‌های مختلف را به راحتی ادیت و اصلاح کنید.به صورت کلی اگه ما توانایی هایه ابزار موجود در css را بشناسیم میتوانیم بهترین بهره وری از آن را داشته باشیم پس بهتره همین الان این موارد رو یاد بگیریم تا در آینده به مشکلی نخوریمارشیا مخلص</description>
                <category>arshia</category>
                <author>arshia</author>
                <pubDate>Thu, 30 Sep 2021 12:43:23 +0330</pubDate>
            </item>
                    <item>
                <title>قالب بندی(flexbox) چیست ؟</title>
                <link>https://virgool.io/@arshia.mokhles/%D9%82%D8%A7%D9%84%D8%A8-%D8%A8%D9%86%D8%AF%DB%8Cflexbox-%DA%86%DB%8C%D8%B3%D8%AA-n2w4a2ymtpcz</link>
                <description>در فرانت اند وقتی میخواهید چند تا div رو کنار همدیگه بذارید باید از ابزار های پیچیده ای مثل float استفاده کنید ولی کار با این ابزار خیلی سخته و مشکلات جانبی خودش رو داره پس css میاد و یک ماژول جدید طراحی میکنه تا کار ما برای قرار دادن div ها کنار هم به شکل های مختلف رو آسون تر و استاندارد تر میکنه و به شکل عجیبی حجم کد های ما رو کاهش میده . البته flexbox در ریسپانسیو سازی سایت هم کار آمده و هم استاندارد تر و باز هم حجم کد های مارو کاهش میده .&quot;اگه درمورد سایت ریسپانسیو یا واکنش گرا اطلاعات ندارید مقاله ی زیر را بخوانید&quot; https://adminesite.com/whatis-responsive/ قبل از شروع کار با ابزار flexbox میخواهیم به شما مبانی کار رو نشون بدیم و حداقل طرحی که برای آن به قالب بندی flexbox متوسل میشویم رو بهتون نشون میدیم :چند item درون یک containerشروع کار با flexbox:اول از همه باید قالب div اصلی یا نگهدارنده(container) رو تبدیل به flex کنیم که برای این کار فقط لازم هست که دستور زیر را برای  div اصلی انجام بدیم:.container {
 display: flex; /* or inline-flex */
 }خب حالا میخوایم ابزار کار با flexbox رو برای شما معرفی کنیم :ابزار flex-direction:با استفاده از flex-direction میتوانید نحوه ی قرار دهی قالب خودتون رو مشخص کنید که با یکی از دستور های زیر قابل اجرا میباشد :.container {
 flex-direction: row | row-reverse | column | column-reverse; 
}مقدار row :  همونطور که در عکس مشاهده میکنید item ها رو در یک ردیف و در جهت  اون container قرار میده ، اگه جهت rtl (right to left) باشه item ها از راست به چپ و اگه ltr (left to right) باشه آیتم ها از چپ به راست به ترتیب قرار میگیرند مقدار row-reverse : دقیقا همون کار row رو میکنه ولی آیتم ها رو برعکس میچینهمقدار column  : هم همون کار item ها رو از بالا به پایین و در یک ستون به ترتیب میچینه مقدار column-reverse : هم item ها رو از پایین به بالا و دریک ستون مرتب میکنه ابزار flex-wrap :به صورت پیش فرض item ها در یک خط قرار میگیرند ولی میتوانید کاری کنید که با کوچکتر شدن container  آیتم ها به مکانی دیگر (مثل پایین item های دیگر ) سـُر بخورند که با کد زیر میتوان به این قابلیت دست یافتcontainer { 
flex-wrap: nowrap | wrap | wrap-reverse; /* default value : nowrap*/ 
}مقدار nowrap : مانند شکل اگر container ما کوچکتر از عرض item ها شود item ها از container بیرون میریزند مقدار wrap : اگر عرض container از item ها کمتر شود item های سرریزشده در جهت container که به صورت (rtl / ltr ) است به زیر item های دیگر میرود مقدار wrap-reverse : دقیقا کار wrap را انجام میدهد ولی جهت جای گذاری item سر ریز شده در آن برععکس مقدار wrap هست .ابزار flex-flow :این ابزار خلاصه شده ی ابزار flex-direction و flex-wrap میباشد و به صورت زیر از آن استفاده میشود .container {
 flex-flow: column wrap , row wrap , ... ;
 }ابزار justify-content :این ابزار تنظیم جهت و نحوه ی قرار گیری item ها را برای ما ممکن میسازد و نحوه ی استفاده از فضای آزاد بین item ها را برای ما ممکن میسازد و به صورت زیر از آن استفاده میشود :.container { 
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; 
}این ابزار مقدار های زیادی دارد ولی ما فقط 6 تایه پر استفاده را برای شما شرح میدهیممقدار flex-start : اینجا item ها بدون فضای بازی به از سمت جهت container که به صورت ( rtl /ltr ) است به ترتیب چیده میشوندمقدار flex-end : دقیقا کار flex-start را میکند ولی ترتیب را برعکس میکندمقدار center : اینجا item ها بدون فضای خالیه بین خودشان در وسط container قرار میگیرند مقدار  space-between : در این مقدار دو آیتم سمت چپ و راست به اول و آخر container میچسبند ولی فضاهای خالی میان بقیه item ها به صورت مساوی پخش میشودمقدار space-around : به اندازه ی یک واحد بین اول و آخر containter با item ها فاصله است ولی به اندازه ی دو واحد بین item ها فاصله است مقدار space-evenly : به اندازه یک واحد بین همه ی item ها و اول و آخر container فاصله استهنوز flexbox ابزار های بسیار بیشتری دارد که میتوانید درباره ی آنها در مقاله ی زیر بیشتر تحقیق کنید و همچنین میتوانید حقه های استفاده flexbox را هم پیدا کنید https://css-tricks.com/snippets/css/a-guide-to-flexbox/ و همچنین برای کار بیشتر با flexbox میتوانید دوره ی زیر را ببینید  https://toplearn.com/c/rWE نویسنده : ارشیا مخلص </description>
                <category>arshia</category>
                <author>arshia</author>
                <pubDate>Thu, 23 Sep 2021 13:27:10 +0330</pubDate>
            </item>
                    <item>
                <title>مرورگر ها چگونه کار میکنند؟</title>
                <link>https://virgool.io/@arshia.mokhles/%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1-%D9%87%D8%A7-%DA%86%DA%AF%D9%88%D9%86%D9%87-%DA%A9%D8%A7%D8%B1-%D9%85%DB%8C%DA%A9%D9%86%D9%86%D8%AF-nlbewa68xmo0</link>
                <description>سال هاست با مرورگر ها داریم کار میکنیم ولی هیچ وقت از خودمون نپرسیدم معنی http یا www. چیه ، یا حتی مهمتر از خودمون نپرسیدیم که یک مرورگر چجوری کار میکنه خوب اول باید بگم چجور یک وبسایت بالا میاد :در واقع وقتی کد هایی که یک وبسایت رو تشکیل میدهند رو مینویسید باید اینها را در یک مکان نگهداری کنید تا مشتری یا client بتواند که با وبسایت شما ارتباط برقرار کند که ما به این مکان میگویم سرور یا هاست ، و هاست در واقع یک کامپیوتر است که سرعت و حجم حافظه ی بالایی دارد تا بتواند کارکرد سایت ما را به حداکثر برساند ولی یه سوال پیش میاد که چطوری مرورگر میفهمه ما کدوم سایت رو میخواهیم ؟؟اول باید بگم که هر کامپیوتر یک شماره شناسایی به نام آی پی دارد که به مرورگر ها کمک میکند تا بتوانند هاست مورد نظر را با آن شماره ها پیدا کنند و موتور های DNS اون دامنه هایی که در صفحه ی مرورگر جستجو میکنیم را به صورت شماره ی آی پی به موتور های مرورگر میدهند و سپس مرورگر دستگاه ما هاست مخاطب پیدا میکند   ساختار کلی دامنه ها :  (http://www.example.com )و حالا زمان برقراری ارتباط و ایجاد اتصال بین سرور و ما است اطلاعات سایت به صورت کد هایی برای ما ارسال میشوند که ارسال این کد ها از یک پروتوکل پیروی میکند که ما به آن Hyper Text Transfer Protocol یا http میگویم پس زمانی که در دامنه مینویسیم http:// .... منظور آن هست که کد های این سایت از پروتوکل http منتقل میشود و زمانی که کد ها منتقل بشوند به مرورگر ما از طریق موتور های خواندن(reading engines)  کد ها تبدیل تفسیر شده و ظاهر سایت را میسازند و سپس هر عملی که انجام میدهیم به عنوان درخواست (request) به سرور فرستاده میشود و سپس عکس العمل (response) سرور به مرورگر ما بر میگرددبه این شیوه ، مرورگر و سرور با هم ارتباط برقرار میکنند و ما میتوانیم از امکانات سایت استفاده کنیم البته همه ی عمل های ما لازم نیست به سرور فرستاده بشوند و فقط زمانی که ما به اطلاعات سرور احتیاج داریم مرورگر request میفرستدارشیا مخلص اطلاعات بیشتر در: https://roocket.ir/articles/what-happens-when-you-hit-url-in-your-browser </description>
                <category>arshia</category>
                <author>arshia</author>
                <pubDate>Thu, 16 Sep 2021 19:50:38 +0430</pubDate>
            </item>
                    <item>
                <title>فرانت اند چیست ؟</title>
                <link>https://virgool.io/@arshia.mokhles/%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%DA%86%DB%8C%D8%B3%D8%AA-di0hgve06rpg</link>
                <description>خوب توی پست قبلی درمورد چرایی وب صحبت کردیم و گفتیم که یک وبسایت از چه اجزایی تشکیل شده حالا میخواهیم ریز تر شیم و درباره ی اجزای وبسایت صحبت کنیم فرانت اند به قسمت ظاهری سایت میگویند یعنی هر آنچه که مشتری وبسایت (یا همون client)  میبیند. و کار فرانت اند دولوپر این است که با نوشتن کد های فرانت اند اون صفحه ی کاربری ای رو خلق بکنه که بهش سفارش شدهخب حالا سوال پیش میاد که منظور از کد های فرانت اند چیه ؟؟باید بگم که فرانت اند دولوپر ها برای ساخت یک وبسایت به سه زبان احتیاج دارند ، HTML ،CSS و JavaScriptزبان های اصلی و مورد نیاز هر فرانت اند دلوپر اگر بخواهیم ظاهر وب سایت را با  یک انسان مقایسه کنیم باید بگویم که زبان html اسکلت انسان رو میسازد و زبان css پوست و لباس انسان را میسازد و JavaScript به انسان جان میببخشد و باعث حرکته انسان میشود لازم به ذکر هست که بگویم زبان های html , css زبان ها نشانه گذاری اند و نه زبان برنامه نویسی ، ولی با java script  میتوان برنامه نویسی هم کرد پس زبان برنامه نویسی است حالا سوال بعدی ای که پیش میاد اینه که کاره برنامه نویس فرانت اند  فقط کد زدن html ,css ,jsهست یا باید طراحی وبسایت را نیز انجام دهد؟در واقع بین علما اختلاف است و هر شرکتی تعریف خودش را از برنامه نویس فرانت اند دارد و در زمان استخدام به شما میگویند که طراحی با شما است یا  با طراحه سایت است ولی عمومی تر و همچنین پیشرفته تر  آن هست که طراح سایت ، سایت را طراحی کند و برنامه نویس فرانت اند فقط کد های آن را بزند و در آخر برای شما وظایف اصلی یه فرانت اند دولوپر را شرح میدهم :-یادگیری زبان‌های برنامه نویسی HTML ،CSS و جاوا اسکریپت-آشنایی با کتابخانه‌ها و فریمورک‌های فرانت اند Javascriptبه دلیل استانداردهای زبان برنامه نویسی جاوا اسکریپت، می‌توان با آن پیاده سازی‌های متنوعی را انجام داد. به همین دلیل هرازگاهی یک فریمورک‌ جدید و سفارشی به مجموعه فریمورک‌های جاوا اسکریپت اضافه می‌شود. فریمورک‌های جاوا اسکریپت امکانات بسیار زیاد و پیشرفته‌ای را در اختیار طراحان فرانت اند قرار می‌دهند. از جمله این فریمورک‌ها می‌توان به Vu.js، Angular و... اشاره کرد.-آشنایی با اصول طراحی واکنش‌گرایک وبسایت خوب وبسایتی است که پلتفرم صفحه های وبسایت در دستگاه ها با سایز صفحه های مختلف مانند گوشی و تپلت و لپتاپ و ... فرق کند و در هر دستگاه بیشترین بازدهی خود را داشته باشدمثالی از وبسایت واکنشگرا (responsive)-مبانی طراحی وبسایت شما باید اصول طراحی را که شامل طراحی UI :(User interface) { طراحی زیبا و چشم نواز ظاهر سایت }و طراحی UX :(User experience) { توانایی برقراری ارتباط خوبه مشتری با سایت } که یعنی کاربر مطالبی که میخواهد را به راحتی میتواند پیدا کند و نیاز ندارد دنبال مطالب مورد نظر خود در سایت بگردد-یادگیری نرم افزارهای گرافیکی مانند فیگماتصور کنید می‌خواهید یک صفحه‌ی وب را پیاده سازی کنید که پیچیدگی المان‌های آن بالا است. در این حالت بهتر است که قبل از شروع کدنویسی طرح آن را با فتوشاپ ترسیم کرده و بعد از موافقت اعضای تیم آن را پیاده سازی کنید. نرم افزارهای گرافیکی مانند Adobe xd، Figma و... در بیشتر مراحل طراحی وبسایت توسط طراحان فرانت مورد استفاده قرار می‌گیرند. پس یادگیری حداقل یکی از آن‌ها برای برنامه نویس فرانت اند الزامی است.ارشیا مخلص  25 شهریور 1400 </description>
                <category>arshia</category>
                <author>arshia</author>
                <pubDate>Thu, 16 Sep 2021 16:00:24 +0430</pubDate>
            </item>
                    <item>
                <title>چرا وب ؟</title>
                <link>https://virgool.io/@arshia.mokhles/%DA%86%D8%B1%D8%A7-%D9%88%D8%A8-ctrqpht8nx6w</link>
                <description>دیدن که خیلیا وقتی وارد دانشگاه میشن همش فکر میکنن باید طبق چارت های درسی پیش برن و یه جورایی از اینکه خودشون برای یادگیری زبان ها اقدام کنن میترسن ؟!  اینا در واقع همونایی اند که وقتی از دانشگاه بیرون میان میگن کار نیست و یا اینکه ما رزومه نداریم ، پس جایی استخداممون نمیکنن و ...خوب حالا سوال پیش میاد که چیکار کنیم تا موقع خروج از دانشگاه علاوه بر مدرک چیز هایه دیگه ای هم داشته باشیم ؟ جواب سادس ، باید ارزشی پیدا کنید تا بخواهید براش ریسک کنید و از منطقه ی امنتون بیاید بیرون و یه حرکتی برای رزومه ی کاریتون بزنید .خوب حالا من چیکار کردم ؟من اومدم و تلاش کردم تا از ساده ترین شاخه ها مهندسی کامپیوتر شروع به کار کنم تا بتونم ذهنمو برای برنامه نویسی پروژه محور پرورش بدم ؛ حالا اگه گفتید سمت چی رفتم ؟؟ درسته سمت وب رفتم من وب رو برای اولین بار وقتی شروع کردم که وارد یکی از گروه های تلگرامی دانشگاه شدم قبلش اصلا نمیدونستم که وب ساده تره و برای شروع بهتره یا ... و وقتی شروع کردم به اصطلاحات جالبی خوردم مثله فول استک و فرانت اند و بک اند و ...  حالا میپرسید فول استک چیه ؟؟ خب فول استک کار به کسی میگن که میتونه یه سایتو به تنهایی بسازه و حالا سوال نهاییه این پست ؛ چجوری یک سایتو بسازیم؟؟ما برای ساخت یک وبسایت باید یه پایگاه داده داشته باشیم که توش اطلاعات رو ذخیره کنیم که و یک ظاهر و طراحی سایت تا مشتری بتونه به صورت گرافیکی توانایی هایه سایته ما رو ببینه و از اونها استفاده کنه توی پست های بعد درباره ی تک تک توانایی ها (یا همون اسکیل ها ) صحبت خواهم کرد ارشیا مخلص   22شهریور 1400 &lt; خودمونیم  واسه برنامه نویس بیرون رفتن عذابیه ها    （￣д￣；）   &gt;</description>
                <category>arshia</category>
                <author>arshia</author>
                <pubDate>Mon, 13 Sep 2021 18:58:58 +0430</pubDate>
            </item>
                    <item>
                <title>شروع برنامه نویسی</title>
                <link>https://virgool.io/@arshia.mokhles/%D8%B4%D8%B1%D9%88%D8%B9-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-lqpbqy0rcrb6</link>
                <description>این تیتری که نوشتم خیلی قشنگه مگه نه ؟ حتما الان همه فکر میکنن میشه یه ماهه برنامه نویس شد و به در آمد رسید, ولی من از الان به فکر درآمد نیستم;  و فقط میخوام از کاری که میکنم لذت ببرماولین انگیزه ی اصلی ای که در من بوجود اومد زمانی بود که تونستم یه پروژه ی بانک رو توی ترم 2 دانشگاه بنویسم ؛ اگرچه که مجازی بود و درس خوندن اصلا حال نمیداد ولی واسه پاس شدن این درس حتما باید این پروژه رو می نوشتم اوایل فقط برنامه مینوشتم و فک میکردم وظیفمو دارم انجام میدم ولی وقتی به مرحله ی شروع برنامه یا اصطلاحا &lt;ران کردن پروژه&gt; رسیدیم احساس ارزشمندی بهم دست داد و فهمیدم که می تونم خیلی از مشکلاتی که قبلا میدیدم و فقط حرص میخوردم که چرا کسی حلشون نمیکنه رو میتونم خودم با همین دستای خودم حلشون کنم ; در واقع حس کردم کل 12 سال مدرسه خیلی قشنگ میشد اگه ما از علمی که بدست آورده بودیم استفاده میکردیمبعد از اون رفتم دنبال نوشتن برنامه های موبایل و وب ولی الان فهمیدم که به همین آسونیا هم نیست باید واسه ی این مسایل تلاش بیشتری کرد ولی خوب فعلا دارم از این راه لذت میبرم  و میخوام که همه ی مطالب برنامه نویسی رو و همه ی زبان های برنامه نویسی رو , و همه ی ابزار های طراحی رو یاد بگیرم توی این مسیر همه ی مطالب هیجان انگیز رو براتون میذارم ارشیا مخلص    22 شهریور     [   هفته بعد دانشگاه ها باز میشه :(    ]</description>
                <category>arshia</category>
                <author>arshia</author>
                <pubDate>Mon, 13 Sep 2021 14:09:18 +0430</pubDate>
            </item>
            </channel>
</rss>