×
ribbon
پیش‌نیاز‌ها سرفصل‌های دوره ویژگی‌های دوره درباره دوره نظرات کاربران
برنامه‌نویسی طراحی سایت برنامه‌نویسی فرانت اند

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

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

ارائه دهنده:  مکتب‌خونه  مکتب‌خونه
مدرس دوره:
امیرحسین ناظم امیرحسین ناظم
 59% (3086 رای)
سطح: مقدماتی
 پلاس
  
زمان مورد نیاز برای گذارندن دوره:  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-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
دانشجوی دوره
من دوره را کامل نگذراندم ولی به نظرم اگر کسی واقعا دوست داشته باشه یاد بگیره و از یادگیری این جور مباحث لذت ببره دیگه براش اینکه خیلی جذاب نیست و از این جور حرف ها مهم نیست و اصلا به چشمش نمیاد و از یادگیری لذت می بره من به شخصه خیلی از یادگیری لذت می برم و از شما معلم عزیز بسیار سپاس گذارم .
امیر رستگار امیری 1400-11-18
دانشجوی دوره
برای HTML و CSS قابل قبول بود اما برای مباحث جاوا اسکریپت و مخصوصا jQuery استاد اصلا بر مطالب مسلط نیستن
محمد شفیعی نیا 1400-11-05
دانشجوی دوره
این تنها دوره‌ای بود که به خوبی مفاهیم Front End را به من آموزش داد. برای این که واقعاً یاد بگیرید باید برای پروژه‌ها وقت بگذارید و پس از اینکه کاملا یاد گرفتید برید سراغ یادگیری فریم ورک بوت استرپ که تقریباً تمام سایت‌ها دارند از بوت استرپ استفاده می‌کنند.
واهه گریگوریان 1400-08-04
دانشجوی دوره
هنوز دوره رو تموم نکردم ولی تا جایی که یاد گرفتم خوب بود ولی حیف که یکم کند و حوسله سر بر تدریس میشه ولی درکل تا جایی که من گذروندم کامل تدریس شده.
زینب سادات مرسلی 1400-07-11
دانشجوی دوره
واقعا مدرس خوبی نیستن و من برای Css html دوست داشتم دوره خانم شهاب ببینم اما چون پک پایتون این دوره بود مجبورم ادامه بدم،واقعا مسلط نیستن،دوره رایگان html و Css ازسایت با مدرس های دیگه دیدم بشدت کاملتر و مسلط تر بودن،و مباحث قابل فهم تر بیان شدن،واقعا این دوره بخصوص با بیان ضعیف ایشون غیر قابل تحمل بود
رامین خانبگی 1400-06-28
دانشجوی دوره
ای کاش چیزی مثل جزوه یا خلاصه ی جلسات وجود داشت ( حتی خیلی جزئی). برای من سخت ترین کار موقع یادگیری آنلاین جزوه برداری هست چون اگر با دست و توی دفتر و کاغذ بنویسم قابلیت سرچ نداره..اگر بخوایم تایپ کنم و چیزی مثل جزوه داخل کامپیوتر برای خودم درست کنم خیلی وقت گیر هست. خلاصه که همونموقع که دارم تمرین هارو انجام میدم کاملا اوکیه اما کمی بعد ممکنه به کلی فراموش کنم یک دستور چه کاری انجام میده یا برای انجام یک کار از چه دستوری باید استفاده کنم. جزوه برای اول کار که آدم خیلی مبتدیه و حتی یادش نمیمونه که بخواد سرچ بکنه خیلی مفیده.
1
2
3
... 5

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

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

آیا در صورت خرید دوره، گواهی نامه آن به من تعلق می گیرد؟
خیر؛ شما با خرید دوره می توانید در آن دوره شرکت کنید و به محتوای آن دسترسی خواهید داشت. در صورتی که در زمان تعیین شده دوره را با نمره قبولی بگذرانید، گواهی نامه دوره به نام شما صادر خواهد شد.
آیا گواهی‌نامه‌های دانشگاهی به صورت رسمی و توسط دانشگاه مربوطه صادر می‌شود؟
بله؛ گواهی نامه ها توسط دانشگاه مربوطه و با امضای رئیس دانشگاه یا مسئول مربوطه که حق امضای گواهی نامه ها را دارد صادر می شود و گواهی نامه معتبر دانشگاه است که به اسم هر فرد صادر می شود.
حداقل و حداکثر زمانی که می توانم یک دوره را بگذرانم چقدر است؟
برای گذراندن دوره حداقل زمانی وجود ندارد و شما می توانید در هر زمانی که مایل هستید فعالیت های مربوطه را انجام دهید. برای هر دوره یک حداکثر زمان تعیین شده است که در صفحه معرفی دوره می توانید مشاهده کنید که از زمان خرید دوره توسط شما تنها در آن مدت شما از ویژگی های تصحیح پروژه ها توسط پشتیبان و دریافت گواهی نامه بهره مند خواهید بود.
در صورت قبولی در دوره، آیا امکان دریافت نسخه فیزیکی گواهی نامه دوره را دارم؟
خیر، به دلیل مسائل زیست محیطی و کاهش قطع درختان، فقط نسخه الکترونیکی گواهی‌نامه در اختیار شما قرار می‌گیرد
پس از سپری شدن زمان دوره، به محتوای دوره دسترسی خواهم داشت؟
بله؛ پس از سپری شدن مدت زمان دوره شما به محتوای دوره دسترسی خواهید داشت و می توانید از ویدئوها، تمارین، پروژه و دیگر محتوای دوره در صورت وجود استفاده کنید ولی امکان تصحیح تمارین توسط پشتیبان و دریافت گواهی نامه برای شما وجود نخواهد داشت.
صدور گواهی‌نامه از سوی دانشگاه شریف چقدر زمان می‌برد؟
صدور گواهی‌نامه‌ی رسمی از سوی دانشگاه شریف با توجه به پروسه‌های اداری، دورکاری پرسنل دانشگاه و زمانبر بودن فرآیند امضا توسط اساتید دانشگاه حداقل 4 ماه زمان خواهد برد. مکتب‌خونه به محض صدور گواهی‌نامه از سوی دانشگاه، آن را برای شما ارسال خواهد کرد. در صورت نیاز فوری، می‌توانید گواهی موقت پایان دوره را با ارسال درخواست به ایمیل info@maktabkhooneh.org دریافت نمایید.

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

فرانت اند در مورد بخشی از وب‌سایت است که شما به‌عنوان کاربر می‌توانید آن را ببینید و با آن تعامل داشته باشید. قسمت فرانت اند شامل همه‌چیز از طراحی، ساختار و طرح‌بندی وب‌سایت گرفته تا محتوا را شامل خواهد شد. هنگامی‌که یک بازدیدکننده جدید روی یک وب‌سایت یا برنامه کلیک می‌کند، قسمت فرانت اند اولین برداشت از یک شرکت یا نام تجاری بوده بنابراین طراحی ظاهری کاربرپسند (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 است.