×
ribbon

آموزش طراحی وب سایت (Front-End)

برای ورود به دنیای فرانت اند ((front end)) نیاز به گذراندن آموزش و یادگیری یک سری مفاهیم برنامه نویسی هستید. دوره آموزش front end مکتب خونه برای این هدف توسط تیمی متخصص و مجرب تهیه ... ادامه

ارائه دهنده:  مکتب‌خونه  مکتب‌خونه
مدرس دوره:
 59% (3,217 رای)
سطح: مقدماتی
 پلاس
  
زمان مورد نیاز برای گذارندن دوره:  66 ساعت
مجموع محتوای آموزشی:  11 ساعت ویدئو - 55 ساعت تمرین و پروژه
 (قابل دانلود می‌باشد)
مهلت دوره:  10 هفته
  
حد نصاب قبولی در دوره:  75 نمره
فارغ‌التحصیل شدن در این دوره نیاز به ارسال تمرین‌ها و پروژه‌های الزامی دارد. 
organization-pic  گواهینامه این دوره توسط مکتب‌خونه ارائه می‌شود.
course-feature   گواهی‌نامه مکتب‌خونه course-feature   خدمات منتورینگ course-feature   پروژه محور course-feature   تمرین و آزمون course-feature   تالار گفتگو course-feature   تسهیل استخدام

آنچه در این دوره می‌آموزیم:

 آموزش فرانت اند توسعه وب

 آموزش HTML

 آموزش CSS

 آموزش جاوا اسکریپت

پیش‌نیاز‌ها

این دوره برای تمامی علاقه­مندان به برنامه نویسی وب، کاربردی و مفید است و پیش­نیاز خاصی ندارد.

سرفصل‌های دوره آموزش طراحی وب سایت (Front-End)

فصل اول - HTML

در این بخش با ساختار کلی فایل های html  آشنا می شوید. در مورد تگ ها در html  توضیح داده می شود و نوشتن attribute  برای تگ های html آموزش داده می شود.

در پایان این بخش، یک پروژه ی میان مدت را شروع می کنیم که تا پایان بخش css  آن را تکمیل خواهیم کرد.

  آشنایی با دوره وب
"08:33  
  آشنایی با وب
"05:17  
  web, html and front-end
"13:29  
  HTML and front-end
 14.8%    
"02:00  
  html requests
"07:48  
  Requests
 11.1%    
"01:00  
  نصب نرم افزارها
"06:49  
  ساختار یک صفحه html
"11:05  
  تگ ها
"06:55  
  تگ head
"06:37  
  تگ body
"07:36  
  attributes, div and span
"11:54  
  لینک با تگ "a"
"07:27  
  تگ ها
 22.2%    
"02:00  
  لیست های مرتب
"06:35  
  لیست های نامرتب
"06:43  
  lists
 22.2%    
"02:00  
  فرم ها
"18:03  
  فرم ها
 14.8%    
"02:00  
  عکس ها
"13:53  
  عکس ها
 7.4%    
"02:00  
  ویدئو
"07:50  
  ویدئو
 7.4%    
"02:00  
فصل دوم - CSS

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

  آشنایی با CSS
"12:47  
  مفاهیم اولیه CSS
"01:00  
  CSS Syntax
"08:39  
  Color
"13:33  
  Color
 3.6%    
"02:00  
  Selectors
"09:23  
  pseudo classes
"12:35  
  pseudo elements
"11:06  
  CSS and class and id
"12:31  
  انتخاب المان
 8%    
"03:00  
  specifity
"10:26  
  border
"05:14  
  margin
"08:45  
  padding
"06:09  
  css outline
"08:14  
  Css width and height
"07:58  
  text
"07:51  
  font
"08:33  
  links
"05:35  
  ویژگی المان ها و لینک
 11.6%    
"04:00  
  maxwidth
"05:18  
  position
"17:54  
  float
"08:58  
  المان ها و فونت
 5.4%    
"04:00  
  display and opacity
"18:32  
  CSS3 border corners and multiple images
"06:00  
  CSS3 gradient and shadow
"10:12  
  color and position
 9.8%    
"05:00  
  CSS3 transition
"22:10  
  CSS3 animation
"09:28  
  انیمیشن
 8%    
"05:00  
  مهارت سرچ کردن در برنامه نویسی
"06:31  
  توضیح مکمل پروژه اول
"05:42  
  شرح پروژه بخش HTML
"12:07  
  شرح پروژه بخش HTML و CSS (بخش اول - navbar)
"10:51  
  شرح پروژه بخش HTML و CSS (بخش دوم - modal)
"11:51  
  شرح پروژه بخش HTML و CSS (بخش سوم - up and down jump buttons)
"11:32  
  پروژه بخش HTML و CSS
 53.6%    
"600:00  
فصل سوم - JavaScript

در این بخش به آموزش جاوااسکریپت پرداخته می شود. جاوااسکریپت در کنار html و CSS یکی از سه تکنولوژی اصلی طراحی وب است.

  آشنایی با جاوا اسکریپت
"08:08  
  خروجی جاوا اسکریپت در لاگ کنسول
"06:26  
  if و for در جاوااسکریپت
"14:33  
  آشنایی با JavaScript html DOM
"14:13  
  javascript dom style
"08:38  
  jsdom style
 100%    
"05:00  
فصل چهارم - jQuery

دراین بخش با یکی از کتابخانه های مفید جاوااسکریپت با نام jQuery  آشنا می شویم.

در پایان این بخش پروژه ی میان مدت دوم، پروژه ی javascript/jQuery  را انجام خواهید داد که نسخه ی بهبود یافته ی پروژه ی اول است.

 

  آشنایی با jQuery
"07:23  
  when document is ready
"16:31  
  jquery : events and selectors
"10:49  
  event selector
 9.9%    
"03:00  
  jquery hide, show and fade effects
"13:11  
  slide, animation and stop animation effects
"19:23  
  animation
 5.6%    
"02:00  
  پروژه بخش jQuery
 84.5%    
"360:00  
فصل پنجم - طراحی واکنش گرا

در این بخش با طراحی واکنش گرا صفحات وب آشنا می شوید تا بتوانید صفحاتی را طراحی نمایید که بر روی نمایشگرهای مختلف ظاهر مناسبی داشته باشند.

  آشنایی با طراحی واکنش گرا
"09:01  
  gridview
"12:27  
  media queries
"07:27  
  media queries
 11%    
"05:00  
  dual breakpoints
"15:14  
  عکس و ویدئو
"07:14  
  عکس و ویدئو
 4.9%    
"04:00  
  پروژه نهایی طراحی صفحه وب واکنش گرا
"19:01  
  آشنایی با bootstrap
"10:55  
  bootstrap buttons, glyphicon and images
"13:27  
  بوت استرپ
 11%    
"05:00  
  پروژه بخش طراحی واکنش گرا
 73.2%    
"480:00  
پروژه نهایی

ویژگی‌های دوره

گواهی‌نامه مکتب‌خونه
گواهی‌نامه مکتب‌خونه

در صورت قبولی در دوره، گواهی نامه رسمی پایان دوره توسط مکتب‌خونه به اسم شما صادر شده و در اختیار شما قرار می گیرد.

مشاهده نمونه گواهینامه

ویژگی‌های دوره

خدمات منتورینگ
خدمات منتورینگ

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

ویژگی‌های دوره

پروژه محور
پروژه محور

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

ویژگی‌های دوره

تمرین و آزمون
تمرین و آزمون

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

ویژگی‌های دوره

تالار گفتگو
تالار گفتگو

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

ویژگی‌های دوره

تسهیل استخدام
تسهیل استخدام

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

بررسی فرصت‌های شغلی

درباره دوره

برای ورود به دنیای فرانت اند ((front end)) نیاز به گذراندن آموزش و یادگیری یک سری مفاهیم برنامه نویسی هستید. دوره آموزش front end مکتب خونه برای این هدف توسط تیمی متخصص و مجرب تهیه و تدوین شده است.

این دوره در ٦٦ ساعت آموزشی در قالب پنج فصل ارائه شده که هر فصل خود حاوی سرفصل‌های مختلفی است. در این دوره مباحث CSS، HTML و javaScript پوشش داده شده خواهند شد.

دوره آموزش front end برای چه کسانی مناسب است؟

دوره آموزش front end برای تمامی افراد اعم از افراد مبتدی و حرفه‌ای مناسب است. این دوره با هدف یادگیری پروژه محور توسعه فرانت اند تدوین شده و تمام مفاهیم مهم و مقدماتی توسعه فرانت اند از صفر تا صد در آن پوشش داده شده است.

پیش‌نیازهای دوره آموزش front end چیست؟

هیچ پیش‌نیاز خاصی برای دوره آموزش front-end وجود ندارد. همه افراد چه مبتدی و چه حرفه‌ای می‌توانند در این دوره آموزش فرانت اند شرکت کنند. تنها پیش‌نیاز اصلی این دوره توانایی کار با کامپیوتر و سواد کامپیوتری و قدرت جستجوی بالا است.

پس از یادگیری دوره چه مهارت‌هایی کسب می‌کنیم؟

پس از پایان دوره و در کنار تلاش و کوشش مناسب و شایسته، دانشجویان دوره توانایی ایجاد و پیاده‌سازی بخش فرانت اند یک وب‌سایت یا یک پلتفرم را خواهند داشت. این دوره آموزش فرانت اند برای ورود به بازار کار بسیار حائز اهمیت است زیرا در کنار حرفه‌ای بودن و به روز بودن، پروژه محور است.

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

چرا یادگیری فرانت اند مهم است؟

امروزه بیشتر کسب‌وکارها به متخصصین فرانت اند نیازمند هستند، بنابراین یادگیری مفاهیم و مباحث مربوط به این ترند در برنامه نویسی فرصت خوبی برای ورود به بازار کار است.

درباره استاد

maktabkhooneh-teacher امیرحسین ناظم

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

مشاهده پروفایل و دوره‌‌های استاد

نظرات کاربران  ( نظر)

صفحه 1 از
فرنوش بشرزاد صدیق 1402-11-11
دانشجوی دوره
واقعا افتضاحه اگه قبل از پرداخت نظربقیه رومیخوندم قطعا دوره رو نمیگرفتم فن بیان ضعیفی داره استاد و نمیتونه مطلب رو به درستی به مخاطب برسونه انگار دارن روخوانی میکنن اصلا طبق موضوع پیش نمیرن مثلا از یه تگ استفاده میکنن میگن جلوتر راجبش توضیح میدم و مخاطب گیح میشه در کل اصلا دوره خوبی برای اموزش نیست!
عاطفه پورقربان 1402-07-27
دانشجوی دوره
با عرض سلام و وقت بخیر دوره فرانت اند عالی است فقط مشکلی که دارد مدت دوره می باشد چون من شاغل هستم فرصت نکردم در مدت منظور ، فیلم ها رو تموم کنم اگرمدت را بیشتر کنید یا بردارید عالی می شود با تشکر
سید علی دلیل 1402-07-24
دانشجوی دوره
شاید مدرس مهارت فنی خوبی داشته باشه که به نظرم اگر از ضعیف تا عالی بخوام درجه ای رو به ایشون نمره بدم مهارتشون رو متوسط عناون می کنم. اما نحوه ی تدریس، همگرایی تدریس ایشون و دقت ایشون برای هایلایت کردن مطالبی که مهم تلقی میشن خیلی خیلی ضعیف هست. البته که من دوره رو کامل نکردم و تقریبا 70% فصل اول دوره رو دیدم و حتما تا انتها دوره رو می بینم. ولی واقعا حیفه که ایشون با وجود این که دانش فنی متوسط و خوبی دارن در انتقال مطلب این قدر ضعیف هستن کاش موقع ضبط این دوره QC می شد.
سپیده نصراللهی 1402-05-17
دانشجوی دوره
با سلام و تشکر - بنظر من دوره خیلی خوبی بود . نکات کلیدی و مطالبی که قابل استفاده بود با مثال توضیح داده می شد .
بهراد محمدی راد 1402-03-29
دانشجوی دوره
اصلا خوب نیست. هم صدا خوب نیست هم انتقال مطالب مدرس بد بود
فاطمه قاسمی 1402-02-09
دانشجوی دوره
افتضاح ترین دوره مکتب خونه این دوره هست کاش مدرس محترم یه ارزشی برای وقت و هزینه مخاطب قائل بودن . تو این دوره فقط وقتم رو هدر دادم و متاسفانه انقدر مدرس تسلط و قدرت بیان پایینی دارند که انگیزه ای برای ادامه دوره باقی نمونه
محمدرضا موسوی 1402-01-04
دانشجوی دوره
کیفیت دوره واقعا تفاوت فاحشی با دوره های دیگر سایت داره. هم صدا بی کیفیته هم مدرس فن بیان خوبی نداره هم روش تدریس غیر اصولیه هم مباحث گفته شده به هم ریخته هستن. آزمون ها هم اصلا خوب و کاربردی نیستن
جواد فلاح وادقانی 1401-12-20
دانشجوی دوره
به هیچ عنوان پیشنهاد نمیکنم هم مشکل اطلاعات هست که ۱- ناقصه ۲- روش های که آموزش داده میشن غیر اصولین ۳-طبقه بندی نشده درست مشکلات مدرس هم که عدم تسلط به مباحث انتقال ضعیف به دلیل عدم طبقه بندی کامل و نداشتن آمادگی حتی کد هارو قبل ظبط دوره امتحان نمیکنن و اما بزرگترین مسايل من با این دوره: اگر محتوای پوچ دوره (آرمون و خطای بیهوده و توضیح اضافه) رو حذف کنی عملا یه دوره یک ساعته ازش بمونه نهایتا و از همه بدتر تو این دوره پروژه های فوق گنگ(عدم شفافیت درخواست) محدود ( نه میتونید خلافیتی به خرج بدید نه میتونید از ابزارایی که کارای بیهوده رو کم میکنن استفاده کنید) و پروژه هاشم اینجوریه که میخواد هر مطلبی گخ درس داده و نداده رو به زور بچپونه توش نخرید خلاصه پول دور ریخته منم مجبور نبودم ادامه نمیدادم (متاسفانه مکتب خونه گشته این دوره رو کرده پیش نیاز تخصص بک اند) مکتب خوه لطفا یه تجدید نظری بکن
مکتب‌خونه
همراه عزیز؛ از اینکه نظر خود را با ما در میان گذاشتید صمیمانه سپاسگزاریم. موارد مطرح شده جهت بررسی بیشتر به بخش مربوطه ارسال شد. در صورت نیاز به پیگیری بیشتر با شما در ارتباط خواهیم بود.
فرزانه عاملی نژاد 1401-12-05
دانشجوی دوره
سلام من برای این دوره هزینه پرداختم و دوره را شرکت کردم اما متاسفانه توانایی انتقال مطالب توسط استاد بسیار ضعیف بود 😔🥲. که محبور شدم همین سرفصل ها را در یوتیوب دنبال کنم و آموزش را در این سایت ادامه نخواهم داد. با تشکر
1401-11-28
دانشجوی دوره
سطح کیفیت خود دوره و همچنین توانایی استاد در توضیح درست و انتقال دقیق و بهتر دوره بسیار پایینه!
سید محمد میرفارسی 1401-10-15
دانشجوی دوره
خیلی خیلی سطح این دوره پایین می باشد. بشدت توانایی استاد این دوره در انتقال مفاهیم پایین است. استاد این دوره انگار از روی جزوه درسی در حال خواندن است. بار ها بدلیل عدم تسلط بر موضوع ویدیو را پاز می کند. از این دوره اصلا راضی نبودم.
آروشا رضايي 1401-06-07
دانشجوی دوره
واقعا دوره ی عالی و بی نقصی هست تا جاییکه میتونم بگم بخاطر پروژه هاییکه داره میتونید برای پروژه های کوچک دانشجوییتون ازش استفاده کنید
امیر حمیدی 1401-02-21
دانشجوی دوره
سلام و وقت بخیر. این دوره پایین ترین سطح آموزشی بین دوره های آموزشی من تو سایت مکتب خونه رو داشت . استاد گرامی اطلاعات خوبی درمورد فرانت اند داشتن ولی اصلا توانایی انتقال اطلاعات رو نداشتن. به هیچ وجه روی روند آموزشی تسلط نداشتن. پیشنهاد نمیکنم ک این دوره رو دنبال کنید. جون فقط وقتتون رو از دست میدید..
مکتب‌خونه
همراه عزیز؛ از اینکه نظر خود را با ما در میان گذاشتید صمیمانه سپاسگزاریم. موارد مطرح شده جهت بررسی به بخش مربوطه ارسال شد. در صورت نیاز به پیگیری بیشتر با شما در ارتباط خواهیم بود.
کیومرث عطائی 1401-01-01
دانشجوی دوره
تا اینجا که پیش رفتم خیلی مجبوری بوده چون به مدرک تخصص نیاز دارم. ولی مدرس اصلا مسلط نیست. خیلی هم آروم درس میده شاید کل مطالبی که گفته میشه رو میشد تو نصف این زمان جمع کرد.
عبدالحمید ذاکر 1400-12-05
دانشجوی دوره
من دوره را کامل نگذراندم ولی به نظرم اگر کسی واقعا دوست داشته باشه یاد بگیره و از یادگیری این جور مباحث لذت ببره دیگه براش اینکه خیلی جذاب نیست و از این جور حرف ها مهم نیست و اصلا به چشمش نمیاد و از یادگیری لذت می بره من به شخصه خیلی از یادگیری لذت می برم و از شما معلم عزیز بسیار سپاس گذارم .
1
2
3
... 6

دوره‌های پیشنهادی

سوالات پرتکرار

آموزش طراحی وب سایت شامل چه مباحثی می باشد؟
برای طراحی یک ظاهر وبسایت لازم است زبانهای markup شامل html و css را فرا بگیرید. همچنین یادگیری زبان برنامه نویسی java script برای پیاده سازی تعاملات بین کاربر و وبسایت لازم است. برای طراحی منطق سایت و جمع آوری داده ها لازم است که به مفاهیم پایگاه داده آشنا بوده و به یکی از زبانهای برنامه نویسیbackend مثل php ، python و فریمورک جنگو، java script و nodejs یا ruby مسلط باشید.

سوالات پرتکرار

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

سوالات پرتکرار

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

سوالات پرتکرار

آیا در صورت خرید دوره، گواهی نامه آن به من تعلق می گیرد؟
خیر؛ شما با خرید دوره می توانید در آن دوره شرکت کنید و به محتوای آن دسترسی خواهید داشت. در صورتی که در زمان تعیین شده دوره را با نمره قبولی بگذرانید، گواهی نامه دوره به نام شما صادر خواهد شد.

سوالات پرتکرار

آیا گواهی‌نامه‌های دانشگاهی به صورت رسمی و توسط دانشگاه مربوطه صادر می‌شود؟
بله؛ گواهی نامه ها توسط دانشگاه مربوطه و با امضای رئیس دانشگاه یا مسئول مربوطه که حق امضای گواهی نامه ها را دارد صادر می شود و گواهی نامه معتبر دانشگاه است که به اسم هر فرد صادر می شود.

سوالات پرتکرار

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

سوالات پرتکرار

در صورت قبولی در دوره، آیا امکان دریافت نسخه فیزیکی گواهی نامه دوره را دارم؟
خیر، به دلیل مسائل زیست محیطی و کاهش قطع درختان، فقط نسخه الکترونیکی گواهی‌نامه در اختیار شما قرار می‌گیرد

سوالات پرتکرار

پس از سپری شدن زمان دوره، به محتوای دوره دسترسی خواهم داشت؟
بله؛ پس از سپری شدن مدت زمان دوره شما به محتوای دوره دسترسی خواهید داشت و می توانید از ویدئوها، تمارین، پروژه و دیگر محتوای دوره در صورت وجود استفاده کنید ولی امکان تصحیح تمارین توسط پشتیبان و دریافت گواهی نامه برای شما وجود نخواهد داشت.

فرانت اند چیست؟

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

اجزای فرانت اند

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

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

کارهای معمولی front-end چیست؟

توسعه وب فرانت‌اند می‌تواند شامل وظایف مختلفی باشد. نحوه پیاده‌سازی این وظایف در دوره آموزش front end مکتب خونه آموزش داده خواهند شد و این شامل وظایف زیر است:

  • به‌روزرسانی صفحات وب موجود یا ایجاد صفحات جدید
  • ساخت ایمیل‌های HTML برای کمپین‌های ایمیل
  • واکنشگرا کردن وب‌سایت‌ها
  • بهبود عملکرد وب‌سایت با تمیز کردن و تقسیم کد
  • افزودن و بهبود ویژگی‌های دسترسی
  • و سایر موارد

فن‌آوری‌های مورد استفاده در فرانت اند

برنامه نویسان فرانت اند از سه فناوری اصلی در توسعه front-end استفاده خواهند کرد.

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

توسعه‌دهندگان Front-End از ابزارهای دیگری نیز استفاده می‌کنند، از سیستم‌های مدیریت محتوا (CMS) مانند WordPress و Drupal گرفته تا کتابخانه‌ها و چارچوب‌هایی مانند React، Angular و Vue. کتابخانه‌ها و فریمورکها به شما این امکان را می‌دهند که از یک طرح اولیه برای ایجاد عناصر وب مانند دکمه‌ها استفاده کرده تا اینکه هر بار یک عنصر جدید ایجاد کنید. در دوره آموزش front end ابزارها و عناصر لازم برای توسعه فرانت اند به کاربران معرفی خواهند شد.

وظایف متداول یک توسعه دهنده Front End

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

  • بهینه‌سازی تجربه کاربری
  • استفاده از HTML، جاوا اسکریپت و CSS برای پویا کردن مفاهیم صفحات
  • توسعه و حفظ رابط کاربری
  • پیاده‌سازی وب‌سایت‌های واکنشگرت
  • ایجاد ابزارهایی که تعامل سایت را بدون توجه به مرورگر بهبود می‌بخشد
  • مدیریت گردش کار نرم‌افزار
  • پیروی از بهترین شیوه‌های سئو
  • رفع اشکالات و تست قابلیت استفاده

در دوره آموزش front end نقش توسعه‌دهندگان فرانت اند به خوبی توضیح داده شده است. اکثر توسعه‌دهندگان و مهندسان Front-End با گروه‌های تجربه کاربری (UX) هماهنگ می‌شوند. این افراد جمعیت‌شناسی هدف وب‌سایت و نحوه تعامل کاربران با آن را تعیین می‌کنند. طراحی گرافیکی یکی دیگر از بخش‌های مهم بخش فرانت اند است. این شامل فونت‌ها و رنگ‌ها بوده و تضمین می‌کند که طراحی وب ‌سایت با شرکت و محصولی که برنامه وب برای آن است مطابقت دارد.

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

اهمیت توسعه فرانت اند

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

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

یکی از گزینه‌های تبدیل شدن به یک مهندس فرانت اند یا توسعه دهنده فرانت اند، گرفتن مدرک است. اگرچه این برای برخی از افراد قابل‌دسترس است ولی گرفتن مدرک برای همه افراد عملی نیست. خوشبختانه، شما می‌توانید بدون مدرک یک مهندس فرانت اند شوید.

برای انجام این کار، باید با گذراندن دوره‌های مرتبط شروع کنید. می‌توانید با زبان‌های برنامه نویسی مانند HTML، CSS و جاوا اسکریپت شروع کرده و یا می‌توانید مسیر شغلی مهندس Front-End را در اینترنت بررسی کنید. دوره آموزش front end مکتب خونه نقطه شروع خوبی برای انجام این کار است. مسیر شغلی مهندس Front-End شامل زبان‌های ذکر شده در بالا به همراه کتابخانه‌هایی مانند React و Redux است.

صفحات پربازدید
poster
  
برگزار کننده:  مکتب‌خونه
  
زمان مورد نیاز برای گذارندن دوره:  66 ساعت
مجموع محتوای آموزشی:  11 ساعت ویدئو - 55 ساعت تمرین و پروژه
 (قابل دانلود می‌باشد)
مهلت دوره:  10 هفته
  
حد نصاب قبولی در دوره:  75 نمره
فارغ‌التحصیل شدن در این دوره نیاز به ارسال تمرین‌ها و پروژه‌های الزامی دارد. 
organization-pic  گواهینامه این دوره توسط مکتب‌خونه ارائه می‌شود.
course-feature   گواهی‌نامه مکتب‌خونه course-feature   خدمات منتورینگ course-feature   پروژه محور course-feature   تمرین و آزمون course-feature   تالار گفتگو course-feature   تسهیل استخدام