راهنمایی قدم به قدم

از کجا شروع کنم؟ چه زبانی یادبگیرم؟ یادگیری کدوم رو اول شروع کنم؟ ترتیب یادگیری ویدئو های آموزشی موجود توی وب پروگ چیه؟ چطور ادامه بدم؟

جواب تمام سوالاتتو توی این بخش پیدا میکنی !!

هدف چیه ؟

در این بخش مسیر یادگیری و تبدیل شدن به وب دولوپر را به صورت قدم به قدم بیان کرده ایم تا بتوانید از میان تکنولوژی ها و مسیرهای مختلف, بهترین مسیر را انتخاب کنید.

  • این بخش بصورت مداوم آپدیت خواهد شد و سعی کنید دائما آن را چک کنید
  • استفاده از این بخش رایگانه و اگر بعد از مطالعه هنوز مسیر یادگیریت مشخص نشد, با هامون تماس بگیر

انتخاب کن و طبق برنامه قدم هاتو بردار

طبق برنامه روی دوره ها کلیک کن و یادگیری رو شروع کن.

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

  • قدم صفر :‌ آشنایی با مقدمات و اصطلاح های دنیای وب
  • قدم یکم :‌ آشنایی با HTML و CSS

    آموزش رایگان html و css (اچ تی ام ال و سی اس اس) پروژه محور

    HTML برگرفته از حروف اول عبارت HyperTextMarkupLanguage می باشد و به عنوان یک زبان نشانه گذاری متن ( زبان استاندارد صفحات وب ) می باشد. معمولا در یک صفحه ی موجود بر روی وب مجموعه ای از متن ها، عکس ها، بخش بندی های مختلف وجود دارد، به کمک تگ ها و کدهایی که HTML در اختیارتان قرار می دهد، می توانید یک ساختار مشخص از اطلاعات را در این قسمت ها به وجود آورید و در معرض نمایش بازدیدکنندگان قرار بدهید.
    Css کوتاه شده یا مخفف عبارت Cascading Style Sheets می باشد که قابلیت صفحه آرایی؛ استایل دهی و زیبا سازی صفحات وب را برای طراحان سایت فراهم می سازد. در واقع ساختار یک صفحه با استفاده از HTML تعیین می شود و سپس با به کار بردن کدهایی دیگر به این ساختار و چیدمان استایل داده می شود. تمامی رنگ ها، ابعاد و اندازه ها، حاشیه ها، مکان قرارگیری، فونت ها و سایر خصوصیات اجزای یک صفحه ی وب، با استفاده از CSS تعیین خواهند شد این قدم پایه و اساس طراحی وب هست

    آموزش رایگان html و css (اچ تی ام ال و سی اس اس) پروژه محور

  • قدم فرعی :‌ آشنایی با Emmet

    دوره رایگان آموزش Emmet

    Emmet یک ابزار برای توسعه‌دهندگان وب است که می‌تواند سرعت نوشتن کد‌های HTML و CSS را تا حد بسیار زیادی افزایش دهد. این ابزار بصورت یک پلاگین در ویرایشگر‌های کد مختلف نصب می‌شود.در این دوره قصد داریم با Emmet و اختصارات آن آشنا بشیم.

    دوره رایگان آموزش Emmet

  • قدم سوم : آموزش انیمیشن در سی اس اس (css animation) پروژه محور

    آموزش انیمیشن در سی اس اس (css animation) پروژه محور

    در این دوره فوق العاده کاربردی قرار هست در مورد Transition , Transform و Animation در CSS با هم دیگه صحبت کنیم و در قالب مینی پروژه آنها رو با هم دیگه بهتر یاد بگیریم.این دوره برای کسانی که میخواهند یک قدم به دنیای حرفه ای Front-End نزدیک بشن هست.توی این دوره مبحث های پیشرفته از CSS را قرار هست باهم دیگه کار کنیم پس نیاز هست که شما با CSS آشنایی خوبی داشته باشید. که توی قدم یکم و دوم آشنا شده اید

    آموزش انیمیشن در سی اس اس (css animation) پروژه محور

  • قدم چهارم : آشنایی با FlexBox در CSS

    آموزش رایگان flexbox (فلکس باکس) پروژه محور

    Flexbox ها کدهای جدید در CSS می باشند که توسط W۳C برای رفع مشکلات استفاده از کد های float و طراحی زیبا و دقیق تر سایت ها بخصوص سایت های ریسپانسیو ارائه شده است. توی این قدم بسیار مهم هست که شما با مبحث FlexBox آشنا شوید.چون توی قدم های دیگه خیلی کارش داری.

    آموزش رایگان flexbox (فلکس باکس) پروژه محور

  • قدم پنجم : آشنایی با Grid Layout در CSS

    آموزش رایگان css grid (سی اس اس گرید) پروژه محور

    ما همیشه صفحه آرایی را بواسطه عناصر و ویژگی هایی که هدف آنها بوجود آوردن صفحه آرایی نبوده است انجام می دادیم. اول از همه عناصر جدول در HTML و بعد از آن ویژگی float بودند که صفحه آرایی را از طریق آنها انجام می دادیم اما این روش ها دارای مشکلاتی بودند چرا که هدف این عناصر و ویژگی ها کار دیگری بود. توی این قدم شما میتوانید چارچوب و صفحه آرایی سایت خود را ایجاد کنید

    آموزش رایگان css grid (سی اس اس گرید) پروژه محور

  • قدم ششم : آشنایی با SASS

    آموزش رایگان sass (ساس) پروژه محور

    اگر به تازگی وارد دنیای طراحی وب شده‌اید مطمئنا نام Sass یا پیش‌پردازنده‌ها را شنیده‌اید. اگر مطمئن نیستید که Sass چیست و نمی‌دانید که باید از آن استفاده کنید یا خیر، ما امروز قصد داریم به شما کمک کنیم.
    SASS مخفف Syntactically Awesome Style Sheets و یک زبان پیش‌پردازنده برای تولید کد Css است. این زبان به هیچ عنوان جایگزین Css محسوب نمی‌شود و می‌توان آن را روشی برای توسعه و مدیریت کدهای Cssدانست.
    SASS امکان استفاده از متغیرها (Variables)، دستورات تودرتو (Nesting)، وارد کردن قطعه کدها (Partial Imports)، گروه‌بندی کدها (Mixins)و وراثت (Inheritance) را در کدهای Css را فراهم می‌کند. کدهای SASS در نهایت کامپایل و به Css تبدیل می‌شوند.
    برای بهتر فهمیدن Sass حتما ویدو معرفی دوره را مشاهده کنید

    آموزش رایگان sass (ساس) پروژه محور

  • قدم هفتم : آشنایی با Bootstrap

    آموزش بوت استرپ ۵ (Bootstrap) پروژه محور

    Bootstrap مجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML، CSS و توابع جاوا اسکریپت جهت تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و سایر المان های مورد نیاز طراحی وب می باشد. بزرگترین مشکل طراحان وب و کدنویسان قدیمی، ایجاد ظاهری زیبا و مناسب است! بله دقیقا مشکل اساسی اینجاست. اصول کدنویسی و ایجاد زیربنا و ساختار مناسب برای یک سایت بسیار مهم و پیچیده است ولی نمایش صحیح خروجی کار و ایجاد یک فضای کاربرپسند نیز اهمیت بسیار بالایی خواهد داشت. Bootstrap قصد دارد که خلاء میان طراحی و کدنویسی را از میان برداشته و کدنویسان را ترغیب به استفاده از طراحی های پیش فرض و استاندارد نماید. به همین منظور دستورات CSS و توابع javascript مورد نیاز را برای شما فراهم کرده است تا شما بتوانید با استفاده از دستورات پیش فرض و رعایت اصول متناسب با طراحی Bootstrap زمان راه اندازی یک پروژه را تا حد زیادی کاهش داده و خروجی آن را متناسب با استانداردهای روز دنیا پیش ببرید. در این دوره قصد دارم شما را از مبتدی تا پیشرفته با بوت استرپ آشنا کنم و با ایجاد یک پروژه اونو به شما بصورت کامل آموزش بدم.

    آموزش بوت استرپ ۵ (Bootstrap) پروژه محور

  • قدم هشتم : Bootstrap در دنیای واقعی

    آموزش بوت استرپ ۵ (Bootstrap) در دنیای واقعی

    بعد از مشاهده دوره Bootstrap ۵ نیاز هست که شما دوستان عزیز ‌Bootstrap ۵ را در دنیای واقعی مشاهده کنید. به این معنی که شما در قالب ۴ پروژه (landing page,langing page with sass, coming soon, admin panel) بخش های مختلف قالب ها را یادبگیرید تا هر سایتی که مد نظرتون هست را بتونید به راحتی با Bootstrap ایجاد کنید. بخش های مانند : نمایش هدر با اسکرول، layout بوت استرپ، ایجاد انیمیشن در اسکرول، شخصی سازی بوت استرپ با sass، تغییر اسلایدر بوت استرپ، حالت darkmode، شمارنده، افزودن map و chart به پروژه، deploy (آپلود پروژه در سرور) و .... هدف از این دوره یادگیری بخش های مختلف در قالب های مختلف هست. حتما ویدیو معرفی دوره را مشاهده کنید تا با پروژه های که توی این دوره ایجاد میشه آشنا بشید.

    آموزش بوت استرپ ۵ (Bootstrap) در دنیای واقعی

  • قدم فرعی : آشنایی با Materialize css

    آموزش Materialize پروژه محور

    آموزش Materialize به همراه ۳ پروژه.
    Materialize مجموعه ای از رابط های کاربری ساخته شده با CSS و HTML و Javascript هست و یک فریمورک فرانت اند همانند Bootstrap اما با طراحی متریال که در قسمت اول به توضیح آن پرداخته ایم. با استفاده از این ابزار میتونین به سادگی و با جذابیت هر چه تمامتر به طراحی و کدنویسی بپردازید، که از قواعد و اصول استاندارد در زمینه وب برخوردار هست و پشتیبانی خوبی بر روی مرورگرهای بروز و مدرن داره. این ابزار به شما کمک میکنه که سایتهایی متریال و زیبا، سریع و واکنشگرا بسازید. این ابزار از Google Material Design ایده گرفته و از روی قواعد مربوط به اون ساخته شده است.
    این مجموعه برای کسانی تهیه شده است که قصد دارند با طراحی متریال آشنا بشن و کار کنند و همه موارد مرتبط با Materialize در اختیار شما قرار خواهد گرفت و میتونین از اون بهره مند بشید.
    حتما حتما معرفی دوره را مشاهده کنید.

    آموزش Materialize پروژه محور

  • قدم نهم : آموزش Javascript

    آموزش رایگان javascript (جاوا اسکریپت) پروژه محور

    جاوا اسکریپت زبان برنامه‌نویسی سطح بالا است که برای ایجاد تعامل با صفحات وب به کار می‌رود. جایی که HTML و CSS ساختار اولیه و ظاهر صفحات وب را تعیین می‌کنند، جاوا اسکریپت نحوه عملکرد صفحات وب را کنترل می‌کند.
    جاوا اسکریپت، تجربه کاربر را از صفحه وب با تبدیل آن از یک صفحه استاتیک به یک صفحه تعاملی بهبود می‌بخشد. بطور خلاصه، جاوا اسکریپت به صفحات وب رفتار می‌بخشد. در این چند سال اخیر بشدت محبوب و قدرتمند شده. فریمورک و کتابخانه های مدرنی از جاوا اسکریپت قدرت میگیرن مانند Vue.js , React.js و ....
    وبرای یادگیری این فریمورک و کتابخانه ها نیاز است شما با جاوا اسکریپت به خوبی آشنا باشید. یادگیری جاوا اسکریپت از الزامات دنیای وب هست.
    یادگیری جاوا اسکریپت از الزامات دنیای وب و بخش جدای ناپذیر از فرانت اند هست.
    حتما حتما معرفی دوره را مشاهده کنید.

    آموزش رایگان javascript (جاوا اسکریپت) پروژه محور

  • قدم فرعی : آموزش Javascript OOP

    آموزش Javascript OOP پروژه محور

    این دوره برای کسانی هست که قصد دارند یک قدم به دنیای حرفه ای جاوا اسکریپت نزدیک بشن.
    OOP برگرفته از Object-Oriented Programming به معنی برنامه‌نویسی شی‌گرا میباشد. که یک الگو یا روش برنامه نویسی می باشد که اساس این الگو بر پایه اشیاء می باشد.
    مفهوم OOP در اکثر زبان های برنامه نویسی وجود دارد اما در این دوره قصد داریم این مفهموم را در دنیای جاوا اسکریپت بررسی کنیم.
    جاوا اسکریپت زبان برنامه‌نویسی سطح بالا است که برای ایجاد تعامل با صفحات وب به کار می‌رود. جایی که HTML و CSS ساختار اولیه و ظاهر صفحات وب را تعیین می‌کنند، جاوا اسکریپت نحوه عملکرد صفحات وب را کنترل می‌کند.

    آموزش Javascript OOP پروژه محور

  • قدم فرعی : آموزش Asynchronous Javascript

    آموزش Asynchronous Javascript پروژه محور

    این دوره برای کسانی هست که قصد دارند یک قدم به دنیای حرفه ای جاوا اسکریپت نزدیک تر بشن.
    در این دوره با برنامه نویسی Asynchronous (ناهمگام) و Synchronous (همگام) و نحوه کارکرد آنها در دنیای جاوااسکریپت صحبت میکنیم.بحث فوق العاده مهم در جاوااسکریپت که به دوستان علاقه مند به جاوااسکریپت اکیدا توصیه میشه!!!
    در این دوره در مورد Callback, Promise, Async/Await صجبت میکنیم, در مورد API و AJAX در جاوااسکریپت و همچنین استاندارد جدید Fetch API که جایگزین AJAX هست. در نهایت پروژه وضع آب و هوا از طریق API و مباحثی که یاد گرفتیم ایجاد میکنیم.

    آموزش Asynchronous Javascript پروژه محور

  • قدم فرعی : آموزش آلپاین (alpine.js) پروژه محور

    آموزش آلپاین (alpine.js) پروژه محور

    بعد از مشاهده قدم نهم اکنون میتوانید با کتابخانه و فریمورک های جاوا اسکریپت آشنا بشین
    آموزش آلپاین (alpine.js) پروژه محور
    alpine.js یک فریمورک جاوااسکریپت است که میتواند جایگزین بسیار مناسب برای جی کوئری باشد.
    alpine.js به صورت رسمی برای فریمورک livewire که مربوط به لاراول است ساخته شد و به منظور نوشتن کدهای نشانه گذاری (markup-driven) سمت کاربر (client side) با استفاده از زبان برنامه نویسی جاوااسکریپت، طراحی و تولید شده است. alpine.js سینتکس مشابهی به vue.js دارد و یادگیری و کار کردن با آن بشدت ساده هست.
    حتما ویدیو معرفی دوره را مشاهده کنید. برای آشنایی بیشتر با alpine.js و همچنین مشاهده مینی پروژه های که توی این دوره پیاده سازی میشود، حتما ویدیو معرفی که در پایین قرار گرفته را مشاهده کنید.

    آموزش آلپاین (alpine.js) پروژه محور

  • قدم دهم : آموزش PHP و MySQL

    آموزش رایگان php (پی اچ پی) و mysql (مای اس کیو ال) پروژه محور

    بعد از مشاهده قدم نهم شما باید تاکنون با برنامه نویسی سمت کلاینت به خوبی آشنا شده باشید اکنون میتوانید با زبان های سمت سرور و دیتابیس آشنا بشین
    آموزش PHP و MySQL به همراه پروژه وبلاگ
    PHP یک زبان برنامه نویسی است که میتوانیم با استفاده از آن اقدام به ساخت صفحات وب داینامیک (Dynamic) کنیم.MySQL یک سیستم مدیریت دیتابیس است که با استفاده از آن‌، میتوانیم یک دیتابیس بسازیم و آن‌را مدیریت کنیم. که در انلگیسی به آن Database Management System یا به اختصار DBMS نیز میگویند.در این دوره قصد داریم با PHP و MySQL آشنا بشیم و این آموزش ها را در قالب یک پروژه وبلاگ پیاده سازی کنیم
    حتما حتما معرفی دوره را مشاهده کنید.

    آموزش رایگان php (پی اچ پی) و mysql (مای اس کیو ال) پروژه محور

  • قدم فرعی : آموزش PHP-OOP-MVC پروژه محور

    آموزش PHP-OOP-MVC پروژه محور

    آموزش PHP-OOP-MVC به همراه پروژه ساخت فریمورک MVC
    OOP برگرفته از Object-Oriented Programming به معنی برنامه‌نویسی شی‌گرا میباشد. که یک الگو یا روش برنامه نویسی می باشد که اساس این الگو بر پایه اشیاء می باشد.
    MVC مخفف کلمات Model-View-Controller هست. در واقع MVC یک الگوی طراحی (design pattern) جهت جداسازی قسمت های مختلف برنامه است.
    در این دوره فوق العاده کاربردی شی گرایی و MVC را در PHP یاد میگیریم و با کمک آنها یک فریمورک MVC ایجاد میکنیم. و با کمک این فریمورک پروژه ای را ایجاد میکنیم که در آن بحث User Athentication یا احراز هویت کاربر و همچنین چهار عمل اصلی دیتابیس یعنی ایجاد کردن, خواندن, ویرایش و حذف را در قالب Article یا مقاله پیاده سازی میکنیم. هدف این دوره آشنایی شما با شی گرایی و MVC در PHP هست به این دلیل که اکثر فریمورک های PHP بر پایه شی گرایی و MVC می باشند و این دوره به شما کمک می کند که یادگیری فریمورک ها PHP برای شما آسان شود و شما به خوبی نحوه کار فریمورک ها را درک کنید

    آموزش PHP-OOP-MVC پروژه محور

  • قدم فرعی : آموزش Composer

    آموزش Composer

    کامپوزر ابزاری برای مدیریت وابستگی(dependency management) در پروژه‌های PHP است. ابزار فوق به شما این امکان را می‌دهد که به راحتی وابستگی‌های پروژه خود را نصب و به روز رسانی کنید.
    در واقع Dependencyها یا همان وابستگی‌ها، پکیج‌ها و یا کتابخانه‌هایی هستند که قبلا توسط توسعه دهندگان ایجاد شده و دیگر نیاز به نوشتن مجدد آن‌ها نیست. برای سهولت و کاهش زمان کدنویسی، سایر توسعه دهندگان می‌توانند از این وابستگی‌ها به صورت رایگان استفاده کنند.
    برای دوستانی که قصد دارند با فریمورک های بزرگ PHP مانند لاراول کار کنند و یادبگیرند نیاز هست با کامپوزر آشنا باشند. برای آشنایی بیشتر ویدیو معرفی دوره را حتما ببینید.

    آموزش Composer

  • قدم یازدهم : آموزش Laravel

    آموزش Laravel

    لاراول یکی از بهترین و محبوب ترین فریمورک های زبان php است که برای توسعه نرم افزارهای تحت وب و بر پایه ای معماری MVC ساخته شده.
    راحتی کار با لاراول و سادگی در یادگرفتن آن در عین پر قدرت بودن و حرفه ای بودن این فریمورک موجب شده تا افراد بسیاری به سوی این فریمورک حرکت کنند و از قدرت آن در پروژه های خود استفاده کنند.لاراول به علت داشتن امنیت بالا، امکانات به روز، توسعه پذیری بالا، استفاده از کدهای با کیفیت و جدیدترین روش‌ها به عنوان یک فریم ورک قوی و پیشرفته شناخته می شود.با وب پروگ همراه باشید تا با این فریمورک دوست داشتنی آشنا بشیم.

    آموزش Laravel

  • قدم دوازدهم : آموزش ساخت فروشگاه اینترنتی با Laravel

    آموزش ساخت فروشگاه اینترنتی با Laravel

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

    آموزش ساخت فروشگاه اینترنتی با Laravel