نقشه راه Front-End

زمان مطالعه: 13 دقیقه
۲۸ اسفند ۱۳۹۸

بسیاری از ما هنگامی که می‌خواهیم یک توسعه دهنده در زمینه‌ای خاص شویم، نمی‌دانیم باید از کجا شروع کنیم. یک نقشه راه کمک می‌کند تا آمادگی بهتری نسبت به زمینه‌هایی که قرار هست بیاموزیم و در آنها حرفه‌ای شویم کسب کنیم. در این مقاله سعی کرده‌ایم تا یک نقشه جامع برای افرادی که علاقه به کار در حوزه Front-End هستند ارائه دهیم. این نقشه در واقع یک راهنما است که همه از جمله کارآموزان، مدیران، علاقه‌مندان و غیره می‌توانند برای یادگیری و تمرین از آن استفاده کنند و به طور گسترده به تشریح مسیر Front-End (نحوه یادگیری آن و ابزار مورد استفاده آن) می‌پردازد.

در گام اول به صورت مختصر مروری بر مفاهیم و منابع Front-End خواهیم داشت. در گام دوم و سوم مباحث آموزشی و منابع را بررسی کرده، در گام چهارم و پنجم بر حوزه‌های شغلی و زمان موردنیاز برای شروع کار در این حوزه صحبت خواهیم کرد. در گام آخر نیز حوزه‌های کاربری بعد از مسلط شدن بر Front-End را معرفی خواهیم کرد.

فهرست محتوای این مقاله

گام اول: دانشنامه‌ی Front-End ، پیش‌نیازها و مفاهیم پایه

Front-End و اهمیت آن

فرانت اند یا  Front-End ، به قسمت قابل مشاهده‌ی وب سایت (نرم‌افزار) توسط کاربران می‌گویند. هدف از طراحی سایت این است که اطمینان حاصل شود که وقتی کاربران سایت را باز می‌کنند، اطلاعات را به گونه‌ای مشاهده می‌کنند که به راحتی قابل خواندن و مرتبط هستند. در واقع باید تدبیری اندیشید تا کدهای غیر قابل فهم برای کاربران را در قالب ظاهری گرافیکی و بصری به آن‌ها نمایش داد تا بتوانند به راحتی از بخش‌های مختلف سایت استفاده کنند. بخش فرم‌های ورودی اطلاعات، صداها، تصاویر، ویدیوها و به صورت کلی هر چیز دیگری که برای کاربر قابل درک باشد، جزو این اطلاعات قرار می‌گیرند.

این مسئله با این واقعیت پیچیده‌تر است که کاربران اکنون از دستگاه‌های متنوعی با اندازه و وضوح صفحه نمایش متفاوت استفاده می‌کنند؛ بنابراین طراح مجبور می‌شود هنگام طراحی سایت، این جنبه‌ها را مورد توجه قرار دهد. آنها باید اطمینان حاصل کنند که سایت آنها به درستی در مرورگرهای مختلف (مرورگر متقاطع)، سیستم عامل‌های مختلف و دستگاه‌های مختلف (چندسکویی) ظاهر می‌شود که به برنامه ریزی دقیق از طرف توسعه دهنده احتیاج دارند.

Front-End به دو بخش اصلی طراحی وب و توسعه رابط کاربری تقسیم می‌شود. در بخش طراحی وب، طراحان با نرم افزار‌های گرافیکی مانند فتوشاپ ظاهر سایت را طراحی می‌کنند. اما بخش توسعه رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ، CSS و    Javascript  است. زبان‌های برنامه نویسی که در فرانت به کار می‌روند، سمت کاربر یا Client - side می‌باشند. بنابراین کدهای نوشته شده در فرانت در مرورگر کاربر پردازش و اجرا می‌شوند. این بدین معنی است که کاربر به راحتی به این کدها دسترسی مستقیم دارد و می‌تواند آن‌ها را مشاهده کند. فرانت اند با بخش بک اند (Back-end) در ارتباط مستقیم است و تاثیر بسیاری بر روی تجربه کاربری (UX) دارد.

مرورگرهای وب (Web browsers)

یک مرورگر وب نرم‌افزاری است که برای بازیابی، ارائه و اطلاعات جغرافیایی در اینترنت استفاده می‌شود. به طور معمول، مرورگرهای وب روی کامپیوتر دسکتاپ یا لپ‌تاپ، تبلت، یا تلفن اجرا می‌شوند، اما با پیشرفت فناوری، امروزه یک مرورگر ممکن است در مورد هر چیزی (مانند وسایل خانه از جمله یخچال، تلویزیون و ... ) یافت شود. معمول‌ترین مرورگرهای وب که به ترتیب اغلب مورد استفاده قرار می‌گیرند:

  • کروم (chrome)
  • سافاری (Safari)
  • اینترنت اکسپلورر (Internet Explore)
  • فایرفاکس (Firefox)
  • لبه (Edge)

تجربه‌ی کاربری (User Experience)

UX  یکی از مسائل مهم و ضروری است که در موفقیت وب سایت / اپلیکیشن یا سایر محصولات بسیار تاثیرگذار است. در گذشته طراح با فتوشاپ یا هر برنامه طراحی دیگر و با سلیقه خود و با فکر اینکه خروجی یک طرح با ظاهر زیبا باشد، اقدام به طراحی سایت یا اپلیکیشن می‌نمود. اما حالا چنین راهی نه تنها درست نیست بلکه احتمال شکست را در هدفی که داریم قوت می‌بخشد. تصور کنید سایت سفارش غذایی را طراحی کردید که ظاهری بسیار زیبا دارد. اما کاربر نمی‌تواند تمامی مراحل را به درستی طی کند و غذای خود را سفارش دهد. اگر وب سایت شما برای کاربر تجربه ای خوبی را رقم نزند در این بازار رقابتی وب و اپ، کاربر به سمت وب سایت یا اپلیکیشن رقیب شما خواهد رفت چرا که با استفاده آن تجربه بهتری نسبت به اپ یا وب سایت شما داشته است. آموزش تجربه کاربری فقط طراحی رابط نیست و موارد گسترده‌تری را شامل می‌شود. عده ای به اشتباه طراحی رابط کاربری (UI) را با تجربه کاربری یکی می‌دانند که این یک برداشت اشتباه است. تجربه کاربری یک موضوع گسترده‌تر می‌باشد که موارد بسیار مهمی را شامل می‌شود. مواردی که بایستی در طراحی محصول، سایت، اپ یا ... در نظر گرفته شود.

بک اند (Backend)

Back-end به بخشی از یک وب سایت یا نرم افزار می‌گویند که برای کاربران قابل مشاهده نیست. به عبارتی دیگر هسته و مغز یک سایت است که وظیفه‌ی کنترل منطق آن را بر عهده دارد. سایت‌های دینامیک به برنامه نویس Backend نیاز دارند تا منطق سایت را به وسیله زبان‌های برنامه نویسی پیاده‌سازی کنند. کاربران به کدهای نوشته‌شده در بک اند دسترسی ندارند و نمی‌ توانند آن‌ها را مشاهده کنند. این بخش از سایت مانند قسمتی از کوه یخ است که در زیر سطح آب قرار گرفته است. سمت سرور با بخش سمت کاربر ارتباط مستقیم دارد و به اجزایی که در رابط کاربری طراحی شده‌اند جان می‌بخشد. برنامه نویس Back-end باید اطلاعات را متناسب با اهداف مختلف از پایگاه‌داده دریافت کند و در صورت نیاز پس از پردازش به کاربر نمایش دهد. بنابراین Back-end از دو بخش منطق سایت و پایگاه داده تشکیل شده است.

گام دوم: معرفی همه مباحث آموزشی و ابزارها، تا آخرین تکنولوژی‌های روز

front end skills

اگر می‌خواهید به یک توسعه دهنده Front-End تبدیل شوید، در مرحله اول باید بتوانید به صورت حرفه ای کد HTML ، CSS و JavaScript بنویسید. در این بخش نقشه‌ی راه برای کسب مهارت‌های مورد نیاز بروز آورده شده است. نکات مورد توجه این نقشه عبارتند از:

  • نحوه‌ی کار بستر وب را بیاموزید. مطمئن شوید که "چه زمان" و "کجا" از چه فناوری‌ها و زبان‌هایی استفاده می‌شود. همچنین بهتر است در مورد دامنه‌ها ، DNS ، URL‌ها ، HTTP ، مرورگرها و سرورها و سایر مفاهیم وب اطلاعات پایه‌ای کسب کنید. البته توجه داشته باشید که در این مرحله لازم نیست در این موارد غرق شوید، فقط هدف خود را درک کنید که هر قسمت چیست و چگونه کنار سایر قسمتها قرار می‌گیرند. با ساختن صفحات وب ساده شروع کنید.
  • یادگیری مفاهیم پایه‌ای شامل HTML, CSS, JavaScript
  • اصول طراحی واسط کاربری (یعنی الگوهای UI ، طراحی تعامل ، طراحی تجربه کاربر و قابلیت استفاده) را بیاموزید.
  • یادگیری عمیق‌تر مفاهیم: در HTML: فونت‌ها، آیکون‌ها، رنگ‌ها و نمودارها، در جاوا اسکریپت: HTML DOM
  • برای کار با درخواست‌های سمت سرور XML, AJAX و JSON را یاد بگیرید.
  • هدف سایت خود را پیدا کرده و جعبه ابزار مرتبط با کارکرد آن را پیاده سازی کنید.
  • یکی از فریم‌ ورک‌های مرتبط در CSS  را بیاموزید: بوت استرپ، متریال دیزاین .
  • یکی از فریم ورک‌های مرتبط در جاوا اسکریپت  را بیاموزید:  /JQuery, React.js , Angular.js , Vue.js, W3.JS
  • CLI و خطوط فرمان را بیاموزید.
  • تمرین مهندسی نرم افزار (به عنوان مثال ، طراحی و معماری برنامه، قالب ها، Git، آزمایش، نظارت، خودکارسازی، کیفیت کد، روش‌های توسعه) را بیاموزید.
  • Nodejs را یاد بگیرید.
  • یک توصیه مفید: در مرحله اول ، فناوری‌های اساسی و واقعی را بیاموزید. jQuery را یاد نگیرید ، DOM را یاد بگیرید. SASS را یاد نگیرید، CSS را یاد بگیرید. JSX را یاد نگیرید ، HTML را یاد بگیرید. TypeScript را یاد نگیرید، جاوا اسکریپت را یاد بگیرید. فقط از Bootstrap استفاده نکنید ، الگوهای UI را بیاموزید. یادگیری اصول ابتدایی باعث فهم بهتر و سرعت بیشتر شما خواهد شد و بعدها خواهید دید سایر فناوری‌های این زمینه فرزندان همین اصول پایه‌ای هستند.

نقشه‌ی راه را بصورت گرافیکی می‌توانید از اینجا مشاهده کنید. توجه داشته باشید که در هر زمینه‌ای باید در مورد اتفاقات و پیشرفت‌های آن به روز بود چرا که بر روی عملکرد و سرعت یادگیری ما بسیار تاثیر خواهد داشت. به عنوان مثال نمی‌توان منکر افزایش تعداد زیاد کاربران typescript در سال جاری (۲۰۲۰) شد. و یا با گذشت سالها، امروزه VScode، به عنوان ویرایشگر متن نسبت به سایرین جایگاه برتری دارد.

گام سوم: معرفی منابع و روش برای مطالعه پیش‌نیازها

استفاده از مدارس و کمپهای کدنویسی Front-End یکی از رایج‌ترین راه‌های کسب دانش در این زمینه است. اما به خاطر داشته باشید، بهترین و جامع‌ترین منبع آموزشی در مورد فناوری‌های وب، خود وب است! همه‌ی چیزهایی که شما باید یاد بگیرید در وب به صورت رایگان با هزینه‌های ناچیزی وجود دارد. اولین و بهترین منبع خودآموز رایگان برای یادگیری سایت https://www.w3schools.com/ است، جایی که می‌توانید کدهای خود را به صورت مستقیم اجرا کرده و نتیجه را ببینید. از سایر منابع (شامل ویدیوها و کتاب‌ها) می‌توان به گزینه‌های زیر اشاره کرد:

گام چهارم: حوزه‌های شغلی مرتبط

front end jobs

شکاف بزرگی که برای چندین سال در فضای توسعه دهنده Front-End وجود دارد بین دو نوع بسیار متفاوت توسعه دهندگان این حوزه است. گروه اول برنامه نویسان متمرکز هستند که JavaScript را به عنوان زبان برنامه نویسی در نظر می‌گیرند و از HTML و CSS به عنوان یک انتزاع  و در قالب زبانهایی مثل JSX و CSS در JS  استفاده می‌کنند. گروه دوم توسعه دهندگان علوم غیر رایانه ای هستند که به HTML ، CSS و JavaScript توجه می‌کنند، زیرا به طور خاص به UI مربوط می‌شوند. رفته رفته اصطلاح توسعه دهنده front-end بدون بیان کلمات برای پرداختن به اینکه در مورد چه نوع توسعه دهنده Front-End ای مورد بحث قرار گرفته است، در آستانه بی معنی بودن است.

در زیر لیست و توضیحات عناوین مختلف شغلی این زمینه آورده شده است. توجه داشته باشید که هر شغل که شامل کلمه "front-end" ، "سمت مشتری" ، "UI وب" ، "HTML" ، "CSS" یا "JavaScript" باشد به طور معمول خواستار افرادی هستند که دارای HTML، CSS، DOM  و متخصص JavaScript می‌باشند.  درآمد یک توسعه دهنده  Front-End در جهان بین 65 هزار دلار تا 110 هزار دلار است و در کشور ما از سه میلیون تومان شروع می‌شود و بسته به عنوان شغل تا بالای ده میلیون تومان نیز می‌رسد.

  • Front-End Developer: عنوان شغلی عمومی است که یک توسعه دهنده را توصیف می‌کند که تا حدی در HTML ، CSS ، DOM و JavaScript مهارت دارد و این فناوری‌ها را روی بستر وب پیاده سازی می‌کند.
  • Front-End Engineer (با نام مستعار JavaScript Developer یا Full Stack JavaScript Developer): عنوان شغلی است که به یک توسعه دهنده داده می‌شود که از علوم کامپیوتر و مهندسی پیش زمینه دارد و از این مهارت‌ها برای همکاری با فناوری‌های Front end استفاده می‌کند. این نقش به طور معمول نیاز به دانش علوم کامپیوتر و سال‌ها تجربه‌ی توسعه نرم افزار دارد. هنگامی که کلمه "برنامه‌نویس JavaScript" در عنوان شغل گنجانده شده است ، نشان می‌دهد که توسعه دهنده باید یک توسعه دهنده‌ی پیشرفته جاوا اسکریپت باشد که دارای دانش برنامه نویسی پیشرفته ، توسعه نرم افزار و مهارت‌های توسعه برنامه (یعنی دارای سالها تجربه در ساخت برنامه‌های نرم‌افزاری پیشرفته) باشد. .
  • CSS / HTML Developer: عنوان شغلی که یک توسعه دهنده را توصیف می‌کند که در HTML و CSS ماهر است (شامل JavaScript و سایرین نمی‌شود)
  • Front-End Designer Web: هنگامی که کلمه "طراح" در عنوان شغلی گنجانده شده است ، این نشان می‌دهد که طراح نه تنها دارای مهارت‌های Front end (یعنی HTML و CSS) بلکه دارای مهارت‌های طراحی حرفه ای (طراحی ویژوال و طراحی تعامل) خواهد بود.
  • توسعه دهنده / مهندس UI (User Interface): هنگامی که کلمه "رابط" یا "UI" در عنوان شغلی درج شده باشد ، این بدان معنی است که توسعه دهنده می‌تواند علاوه بر مهارت‌های توسعه دهنده جلویی یا مهندسی جلو ، از مهارت‌های طراحی تعامل نیز برخوردار باشد.
  • Mobile / Tablet Front-End Developer: هنگامی که کلمه "Mobile" یا "Tablet" در عنوان کار گنجانده شده است ، این نشان می‌دهد که توسعه دهنده باید دارای تجربه توسعه Front-End ای باشد که در دستگاه‌های تلفن همراه یا تبلت‌ها قرار می‌گیرد.
  • Front-End Expert SEO: هنگامی که کلمه "SEO" در عنوان شغلی درج شده است ، این نشان می‌دهد که توسعه دهنده تجربه گسترده‌ای در زمینه تهیه‌ی فناوری‌های Front-End به سمت یک استراتژی سئو دارد.
  • Front-End Accessibility Expert: هنگامی که کلمه "قابلیت دستیابی" در عنوان شغلی درج شده است ، این نشان می‌دهد که توسعه دهنده تجربه‌ی گسترده ای در زمینه‌ی تهیه فناوری‌های Front-End ای را دارد که از الزامات و استانداردهای دستیابی پشتیبانی می‌کند.
  • Front-End DevOps : هنگامی که کلمه "DevOps" در عنوان شغل موجود است ، این نشان می‌دهد که توسعه دهنده باید تجربه‌ی گسترده‌ای با شیوه‌های توسعه نرم افزار مربوط به همکاری ، ادغام ، استقرار ، اتوماسیون و کیفیت داشته باشد.
  • Test-End Testing / QA: هنگامی که کلمه "Testing" یا "QA" در عنوان شغلی درج شده است ، این بدان معنی خواهد بود که توسعه‌دهنده دارای تجربه گسترده ای برای تست و مدیریت نرم افزار است که شامل تست واحد، آزمایش عملکردی و آزمایش کاربر می‌باشد.

توجه: اگر اصطلاحات "Full Stack" یا اصطلاحات عمومی "Web Developer" در عناوین شغلی را پیدا کردید، ممکن است این کلمات توسط یک کارفرما برای توصیف نقشی به‌کار رود که مسئولیت کلیه جنبه‌های توسعه‌ی وب / برنامه‌ها را دربرمی‌گیرد، یعنی هر دو بخشBackend  و Front-End.

گام پنجم: مدت زمان لازم برای پیمودن مسیر

درمورد نقشه راه صحبت کردیم اما چه مدت طول می‌کشد تا توسعه وب را یاد بگیرند؟ بعد از چند وقت فرد به یک توسعه دهنده Front-End میشود و از آن پول بدست می‌آورد؟
  • اصول اولیه وب: حداقل یک هفته
  • HTML, CSS, JavaScript: حداقل یک ماه
  • تسلط بر ابزارهای مرتبط با توسعه وب (مانند فتوشاپ و ...): 15 روز
  • ساخت یک وب‌ سایت اولیه: حداقل یک ماه
توجه کنید: تصمیم بگیرید و به آن وفادار بمانید. نگران یادگیری مفهومی و با سرعت کم در ابتدای کار نباشید، با تمرین رفته رفته سرعت بالا خواهد رفت، اما اگر ندانید مفاهیم اولیه چیست به مشکل خواهید خورد.

گام ششم: حوزه‌های پیشنهادی بعد از تسلط بر Front-End

در سال‌های اخیر، چارچوب مبتنی بر وب در یک جریان بی‌انتها در حال ظهور است، مانند React, Vue, AngulaJS و ... . شرکت‌های بزرگ زیادی توجه بیشتری به Front-End می‌کنند که باعث می‌شود توسعه دهنده وب، یکی از پرخواستارترین مشاغل در دنیا باشد. بسیاری از مردم، به خصوص جوانان مشتاق رسیدن به این صنعت هستند. بعد از تسلط بر موارد موجود در این مقاله و تبدیل شدن به یک توسعه‌ دهنده Front-End می‌توانید سایر مباحث مربوط به وب مانند Backend را شروع کنید و در نهایت به یک Full Stack Developer تبدیل شوید. توصیه ما به شما این است که حتما در یک زمینه مهارت کامل و بالا کسب کرده و سپس به سراغ مبحث بعدی بروید و نسبت به مسائل نگاه سطحی نداشته باشید. اگر درمورد این نقشه راه نیاز به مشورت و راهنمایی دارید حتما با ما در میان بگذارید.

چه امتیازی به این مقاله می دید؟
نویسنده نازنین کریمی مقدم
رویاهاتون رو دنبال کنید ... :)
ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 

نظرات کاربران

فرخ

نمیدونم سوالم به این پست مربوط هست یا نه ولی یجورایی به نقشه راه مرتبط میشه.
من الان 33سال سن دارم و لیسانس مکانیک و 10سال تو این زمینه کار کردم. از همون نوجوانی به برنامه نویسی علاقه داشتم و چند پروژه وب هم با asp بالا آوردم.
الان دوباره دارم خودمو آپدیت میکنم و دوست دارم با کمک دانش برنامه نویسی مهاجرت کنم ولی مشکلی که هست اینه که اکثر موقعیت ها به مدرک دانشگاهی برنامه نویسی هم نیاز دارن.
برای این مساله ایده ای یا تجربه ای به ذهنتون میرسه؟

نازنین کریمی مقدم

درود
بله مدرک دانشگاهی یکی از موارد مهم در پذیرفتن افراد هست و حتی پیش اومده فردی باتجربه بیشتر در شاخه دیگه ای از همون اول به دلیل رشته نامرتبط حذف شده اما دیگری با سواد پایینتر فقط به دلیل اینکه کامپیوتر خونده شانس مصاحبه داشته. البته من حق رو به شرکتها میدم، چون برنامه نویسی بی نهایت اشباع شده و از طرفی واقعا به یسری از سرفصلهای تحصیلی در کار نیاز هست.

بهترین راهکار برای شما این هست که به صورت پاره وقت، برای مثال آخرهفته ها خودتون رو آپدیت کنید و پروژه های کوچک و متنوع رو به عنوان نمونه کار ایجاد کنید. (حتی میتونید پروژه های فریلنسینگ کوچک و کم پول رو قبول کنید که روزمه کاری داشته باشید)
حتما در رقابتهای سایت کوئرا با موضوعات وب شرکت کنید. افراد برتر این رقابتها به شرکتهای متقاضی معرفی میشن و دیگه نیاز نیست که نگران مدرک و سابقه کاری باشید.
اگر به سطح خوبی از دانش رسیدید و مطمئن هستید که میتونید از مکانیک به کامپیوتر کوچ کنید، در روزمه خودتون در بخش مدرک فقط عنوان مهندسی رو بیارید تا شانس مصاحبه داشته باشید. روزمه رو به موقعیتهای شغلی در سایتهای کاریابی مثل جاب ویژن، جابینجا و… بفرستید. در مصاحبه اگر سواد خوبی داشته باشید به مدرک نامرتبط توجه زیادی نخواهند داشت.

سجاد

سلام .
بنده لیسانس عمران دارم و تازه با برنامه نویسی و بازار کاری که داره در حد ابتدایی اشنا شدم و قصد دارم که شروع به یادگیری توی فرانت اند کنم. بنظر شما من چطور باید اموزش ببینم از چه طریقی میتونم پیشرفت کنم.با توجه به اینکه هیج پیش زمینه ای از این رشته ندارم .

نازنین کریمی مقدم

سلام
چون چهارسال در حوزه عمران تحصیل کردید و مدرک تحصیلی دارید، اول مشخص کنید که هدف تون از یادگیری برنامه نویسی، کار پاره وقت هست و یا اینکه میخواید کامل تغییر حوزه بدید؟
براساس جوابی که به سوال بالا میدید، برای خودتون برنامه ریزی کنید و زمانهای مشخصی رو برای یادگیری و تمرین در نظر بگیرید (بسته به هدف روزی 2 تا 6 ساعت)
توجه داشته باشید که شما باید براساس علاقه تون مسیر رو مشخص کنید. ممکن است بعد از کمی کارکردن در یک حوزه مثل طراحی سایت، متوجه شوید که به یک حوزه‌ی کاملا متفاوت مثل طراحی بازی علاقه دارید و مسیر خود را تغییر دهید. هرچند که این تغییر مسیر به دلیل تازه کار بودن طبیعی هست، اما توصیه میکنم همین ابتدای کار به یک تصمیم قاطع و مشخص برسید تا بتونید بهترین نتیجه رو بگیرید.
درمورد نقشه راه: در شروع کار در زمینه طراحی سایت حتما باید به مفاهیم اولیه سایت و بعد به برنامه نویسی html و css مسلط باشید. این مقاله را هم بخوانید: شروع یادگیری طراحی سایت نقشه راه رو طبق همین مقاله در پیش بگیرید.
همین الان که این نظر رو میخونید، به سایت w3schools سر بزنید و بخش html و css رو نگاه کنید. همه موارد پایه مرحله به مرحله و با دمو آموزش داده شده و منبع اصلی شما برای یادگیری هست. با این حال چون پیش زمینه ای ندارید، پیشنهاد میکنم قبل از مراحل بالا در دوره طراحی وبسایت ما شرکت کنید. این دوره کم هزینه و به زبان فارسی هست و سرعت شما را زیاد خواهد کرد (دوره های حضوری زیادی هستند که نامعتبر، بسیار زمانبر و گران هستند)، در این دوره نقشه راه مناسبی انتخاب شده و بعد از آشنایی با مفاهیم میتوانید مسیر خود را در دنیای طراحی وب پیدا کنید.

احمد شجاعی

برای کارآموزی باید حداقل نصف بیشتر HTML و CSS و JAVASCRIPT رو بدونم و من اصلا از جاوا اسکریپت اطلاعی ندارم

نازنین کریمی مقدم

برای کارآموزی لزوما نیاز نیست که همه مفاهیم رو بلد باشید. هرچند هرچقدر آشنایی بیشتری داشته باشید، راحتتر هستید، اما بسیاری از شرکتها ترجیح میدهند که نیروی کارشون رو از پایه آموزش بدهنذ تا بتوانند سالها از آن نیرو استفاده کنند.
با همه تفاصیل، اگر شیوه خودآموز رو درپیش میگیرید، توصیه میکنم که اول بخش html و css رو مسلط بشید و در کنارش کم کم جاوا اسکریپت رو شروع کنید. به عنوان نقشه راه، میتونید ابتدا آموزشهای سایت w3schools و بعد آموزشهای سون لرن رو دنبال کنید، بعد از سایتی که در کامنت قبلی معرفی کردم برای تمرین استفاده کنید. سعی کنید با فریمورکهای انگولار، ری اکت و … آشنا بشید (در حد اینکه چی هستند و چه پیشنیازهایی دارند) و بعد بسته به نیاز در جاوا اسکریپت عمیق بشید.
اگر این راه را طی کنید، به شما قول میدم که ظرف نهایتا دوماه پیشرفت خودتون رو به چشم خواهید دید 🙂

احمد شجاعی

بنده تا حدودی با html و css آشنایی دارم.ولی نمیتونم حتی یک سایت معمولی رو طراحی کنم.به نظرم تا تمرین نباشه،نمیشه به جایی رسید.و وقتی شروع میکنم به طراحی،قسمتهایی که به مشکل میخوره،نمیدونم چجوری باید رفع کرد،و به همین دلیل دلسرد میشم.حقیقت نمیدونم چه کاری باید انجام بدم؟میشه بنده رو راهنمایی کنید

نازنین کریمی مقدم

درود. همه کسانی که برنامه نویسی میکنند در ابتدای راه با این مشکل روبه رو می‌شوند. شما سه راه دارید:
1. با نمونه های آماده موجود در اینترنت تمرینات رو شروع کنید. سایت free-css نمونه‌های جالبی داره. حتما بررسی کنید.
2. حدود یک تا دوماه (بستگی به سطح آشنایی که دارید) به عنوان کارآموز کار کنید و هرجا به مشکل خوردید، با سرپرست خود مطرح کنید.
3. در یک دوره جامع طراحی سایت ثبت نام کرده و اینطوری علاوه بر تکمیل دانش کدنویسی میتونید سوالاتتون رو از مدرس دوره بپرسید.

یه راهکار طلایی هم پیشنهاد میکنم: حتما حتما زبان انگلیسی خودتون رو قوی کنید. شما اولین نفری نیستید که در تلاش هست تا کدنویسی فرانت رو یاد بگیره. جواب هر مشکلی که بهش برمیخورید، در اینترنت هست و یادگیری زبان انگلیسی کمک میکنه که جواب سوالات خودتون رو پیدا کنید.

کیمیا چراغی

سلام.من دانش اموز رشته تجربی هستم.ولی فهمیم که به رشته کامپیوتر به ویزه مبحث طراحی سایت علاقه دارم.میخوام رشته کامپیتر رو با برنامه نویسی شروع کنم و کم کم چیزایه دیگه رو یاد بگیرم.ایا کارم درسته؟و اینکه لطفا بگید اگه بخوام از این طریق شروع به یادگیری کنم نقشه راهم چیه؟ واینکه بگید لطفا چجوری باید این مطالب روبه صورت عملی یاد بگیرم؟

نازنین کریمی مقدم

سلام.
در مورد سوال اول: بله، اما توجه داشته باشید که شما باید براساس علاقه تون مسیر رو مشخص کنید. مثلا در حوزه طراحی وبسایت، ما دو بخش فرانت اند و بک اند داریم که در این مقاله نقشه فرانت اند رو توضیح دادیم. ممکن است بعد از کمی کارکردن در یک حوزه مثل طراحی سایت، متوجه شوید که به یک حوزه‌ی کاملا متفاوت مثل طراحی بازی علاقه دارید و مسیر خود را تغییر دهید. توجه داشته باشید که این تغییر مسیر به دلیل تازه کار بودن طبیعی هست، اما توصیه میکنیم یک مبحث را تا حد خوبی یاد گرفته و بعد سراغ بحث بعدی بروید.
درمورد نقشه راه: در شروع کار در زمینه طراحی سایت حتما باید به html و css مسلط باشید. این مقاله را هم بخوانید: شروع یادگیری طراحی سایت نقشه راه را طبق همین مقاله در پیش بگیرید.
درمورد عملی یاد گرفتن: در لینکی که پاراگراف قبلی برای شروع یادگیری دادم، چند ویرایشگر آنلاین معرفی شده که بهترینش سایت w3schools هست. میتوانید مباحث را به صورت عملی در ویرایشگر همین سایت تمرین کنید.

نکته مهم: چون دانش آموز تجربی هستید و پیش زمینه ای ندارید، پیشنهاد میکنم قبل از مراحل بالا در دوره طراحی وبسایت ما شرکت کنید. این دوره کم هزینه و به زبان فارسی هست و سرعت شما را زیاد خواهد کرد (دوره های حضوری زیادی هستند که نامعتبر، بسیار زمانبر و گران هستند)، در این دوره نقشه راه مناسبی انتخاب شده و بعد از آشنایی با مفاهیم میتوانید مسیر خود را در دنیای طراحی وب پیدا کنید.

سعید

اقا بهترینی واقعا برای اولین بار تو زندگیم یه مطلبی تو اینترنت شاید مسیر زندگیمو مشخص کرد خییییییییییییلیییییییییی ممنونتم واقعا مرسی از وقتی برای ادمای امثال من گذاشتین و تجربیتتونو با ما شیر کردین
بازمم سپاس

نازنین کریمی مقدم

سلام. سپاس از همراهیتون. خوشحالیم که این مقاله براتون مفید بوده 🙂

Ali Habibi

بنده با تجریه سه ساله تو حوزه فرانت به این رسیدم که برای عموم جامعه و افراد علاقه مند تاکید میکنم علاقه مند 6 ماه زمان نیازه اونم با تمرین مستمر

نازنین کریمی مقدم

سلام. از اشتراک گذاری تجربه‌تون با ما متشکریم 🙂

Ghanbarian

عالی عالی فقط اون لینک نقشه راه که فرستادین از بک اند بود نه فرانت اند

نازنین کریمی مقدم

سلام. خوشحالیم که این مقاله براتون مفید بوده 🙂
لینک درون مقاله اصلاح شد، اما شما برای دیدن نقشه جامع توسعه‌دهنده وب می‌توانید به این لینک مراجعه کنید: نقشه جامع توسعه‌دهنده وب

رضا پروین

یادگیری html css javascript یک ماه!!!!!!!!!!

نازنین کریمی مقدم

سلام. ممنون بابت همراهیتون 🙂
زمان توصیه شده ما برای یادگیری مفاهیم پایه و توسعه یک وبسایت ابتدایی هست و از انجمنهای معتبری مانند کوئرا بدست آمده و درج شده؛ به همین دلیل کلمه حداقل رو اضافه کردیم. همچنین باید توجه کنید که میزان زمان یادگیری، برای هر فردی نسبی می‌باشد و ممکن است کمتر یا بیشتر باشد.