قراره تو این دوره چی یاد بگیرم؟

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

سرفصل های دوره

۲ فصل
۵۳ جلسه
۲۴ ساعت
۱

آموزش رایگان

۸ قسمت
۰۳:۲۸:۱۸
1

بخش اول - مقدمه و معرفی دوره، ترسیم یک نقشه ی راه

رایگان
۰۱:۰۳:۲۱
2

بخش دوم - نحوه ی راه اندازی محیط توسعه و آشنایی با محیط و نحوه ی ساخت پروژه

رایگان
۲۳:۰۵
3

بخش سوم - معرفی زبان های HTML, CSS, JS به طور کامل

رایگان
۲۰:۰۴
4

بخش چهارم - قسمت اول - آغاز HTML و آشنایی با Tag نویسی و مبحث Text پارت اول

رایگان
۱۶:۴۳
5

بخش چهارم - قسمت دوم - آغاز HTML و آشنایی با Tag نویسی و مبحث Text

رایگان
۱۹:۱۹
۲

دوره جامع برنامه نویسی فرانت اند ( HTML و CSS و ‌Bootstrap )

۴۵ قسمت
۲۰:۰۸:۵۹

در آموزش برنامه نویسی فرانت اند (HTML CSS Bootstrap) چه می گذرد؟

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

رسالت و هدف اصلی مجموعه آموزشی دانشجویار همواره ایجاد پلی مستقیم بین دانشجو و بازار کار بوده و هست و ما نیز در دوره آموزش برنامه نویسی فرانت اند با پیروی از همین اصل اساسی و رعایت استانداردهای آموزشی چه در مباحث تئوری و چه در پروژه ها سعی بر انتقال صحیح محتوا به شما دانشجویان گرامی داریم .
بنابراین با توجه به نکات مذکور اجازه دهید تا بررسی فنی دوره فرانت اند را با چند پرسش اساسی و مهم آغاز کنیم 

طراحی وب چیست؟

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

  • بنابراین کار یک طراح وب در واقع مربوط به سمت کاربر یک وب سایت میشود که اصطلاحا با نام Front-End شناخته می شود.

Front-End چیست؟ توسعه دهنده ی Front-End کیست؟

اساسا یک وب سایت از نظر فنی قابل تقسیم به دو بخش اصلی Frontend و Backend است که در واقع frontend بخش هایی از یک سایت است که کاربر به طور مستقیم با آن ها در ارتباط است شامل منو ها، عکس ها، متن ها، فرم های ثبت اطلاعات، لینک های ارجاع و … .
به همین ترتیب backend شامل بخش هایی از سایت است که کاربر به طور مستقیم آن ها را نمیبیند یا ارتباط با آن ها را درک نمیکند شامل پایگاه های داده ای، تغییر و انتقال در اطلاعات ذخیره شده، دریافت و ثبت اطلاعات از ورودی ها و … است.
پس همانطور که گفته شد در ساختار وب سایت ها یک تقسیم بندی اصلی وجود دارد که همین موضوع منجر به تقسیم زبان های توسعه وب به دو دسته زبان های توسعه سمت کاربر و زبان های توسعه سمت سرور و به تبع آن تقسیم برنامه نویسان این حوزه به دو دسته برنامه نویسان سمت کاربر (Frontend Developer ) و برنامه نویسان سمت سرور (Backend Developer ) می شود.

برای توسعه یک وب سایت چه زبان ها و ابزاری مورد استفاده قرار میگیرد؟

پاسخ این پرسش وابسته به حوزه مد نظر شما در توسعه وب است اما به طور معمول برای توسعه و برنامه نویسی در سمت کاربر از زبان های HTML , CSS , JAVASCRIPT استفاده می شود و در برنامه نویسی سمت سرور معمولا یکی از زبان های PHP یا Python مورد استفاده قرار میگیرد که در ویدئو های این دوره مفصل به شرح مقدمه ای بر کاربرد و تفاوت زبان های مختلف مورد استفاده در توسعه وب نیز می پردازیم.

یادگیری طراحی و توسعه وب را با کدام زبان آغاز و با چه ترتیبی ادامه دهیم؟

هر برنامه نویس و توسعه دهنده وبی چه در سمت کاربر و چه در سمت سرور باید در درجه اول به زبان های HTML و CSS مسلط باشد و در ادامه با توجه به علاقه خود یکی از زبان های مربوط به Backend یا Frontend را انتخاب کند پس در این دوره گام های اولیه برای تبدیل شدن به یک برنامه نویس وب حرفه ای را با قدرت هرچه بیشتر برمیداریم و در انتها برای ادامه راه یک مسیر را انتخاب میکنیم.

 وب سایت واکنشگرا (Responsive) چیست ؟ چگونه وب سایتی واکنشگرا را توسعه دهیم؟

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

 بازار کار طراحی و توسعه وب به چه صورت است؟ آموزش برنامه نویسی فرانت اند به چه افرادی پیشنهاد میشود؟

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

مخاطبین آموزش برنامه نویسی فرانت اند

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

سرفصل های آموزش برنامه نویسی فرانت اند:

قدم اول: مقدمه

  • مقدمه
  • آشنایی با نرم افزار
  • نصب نرم افزار

قدم دوم:‌ آشنایی با ساختار وب و مفهوم واکنشگرایی

  • قسمت های مختلف یک وب سایت
  • آشنایی با مفهوم واکنشگرایی
  • آشنایی با وظایف هر زبان
  • آشنایی با عناصر ضروری در اکثر صفحات

قدم سوم: HTML

  • معرفی ساختار زبان و شروع برنامه نویسی
  • Headings & Paragraphs, Bold, Strong, Italic, Mark, Del, Ins, Sub, Sup, Quotation
  • Images, Image Map
  • Table , List
  • Links , Iframes
  • Forms , Inputs, Buttons
  • Pictures, Videos , Audios
  • Canvas OR SVG
  • Meta
  • Events
  • HTTP Messages
  • Div and Blocks
  • Inline, Internal, External Styles
  • ID , Class , Element, inheritance styling
  • Comments
  • جمع بندی

قدم چهارم: CSS

  • معرفی ساختار CSS
  • Background color , Background Image, Border Image
  • Border , Margin , Padding
  • Height , Width , Units
  • Text Styling and fonts
  • Link styling and Icons
  • Lists , Tables
  • Display , Position , Overflow
  • Align , Float
  • Forms , Inputs , Buttons
  • Styling Images
  • Gradients, Shadows
  • Multiple columns, Media Queries
  • Flex Box
  • Transform , Animation
  • Transition

قدم پنجم: Bootstrap

  • معرفی framework و آشنایی با کاربرد آن
  • Bootstrap Grid System
  • Bootstrap Useful Classes

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