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

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

ارائه دهنده:  مکتب‌خونه  مکتب‌خونه
مدرس دوره:
 91% (816 رای)
سطح: مقدماتی
 پلاس
  
زمان مورد نیاز برای گذارندن دوره:  48 ساعت
مجموع محتوای آموزشی:  15 ساعت ویدئو - 33 ساعت تمرین و پروژه
 (قابل دانلود می‌باشد)
مهلت دوره:  7 هفته
  
حد نصاب قبولی در دوره:  75 نمره
فارغ‌التحصیل شدن در این دوره نیاز به ارسال تمرین‌ها و پروژه‌های الزامی دارد. 
organization-pic  گواهینامه این دوره توسط مکتب‌خونه ارائه می‌شود.
course-feature   گواهی‌نامه مکتب‌خونه course-feature   خدمات منتورینگ course-feature   پروژه محور course-feature   تمرین و آزمون course-feature   تالار گفتگو course-feature   تسهیل استخدام

پیش‌نیاز‌ها

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

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

فصل اول: آشنایی با مفاهیم FrontEnd Development
  چه چیزهایی در این دوره یاد میگیرید؟
"03:38  
  آشنایی با پروتکل و HTML
"09:46  
  آشنایی با Editorها
"12:40  
  آشنایی با مرورگر‌ها
"08:19  
  آشنایی اولیه با Inspect Element و تفاوت و کارآیی مرورگر‌ها
"13:39  
  چطور این دوره را بگذارنید؟
"06:24  
  کوییز آشنایی با مفاهیم FrontEnd Development
 100%    
"03:00  
فصل دوم: آشنایی با HTML به صورت پایه‌ای
  آشنایی با تگ‌های اولیه html, body, head
"10:55  
  آشنایی با Heading ها و Paragraph
"10:48  
  آشنایی بیشتر با Typography و تگ‌های Strong, i, Strike, Article
"20:04  
  کوییز آشنایی بیشتر با تگ‌ها
 6.7%    
"01:00  
  کار با LiveServer برای تجربه‌ی برنامه‌نویسی بهتر
"06:17  
  کوییز کار با LiveServer برای تجربه‌ی برنامه‌نویسی بهتر
 6.7%    
"01:00  
  آشنایی با Comment ها و List ها در HTML
"08:50  
  کوییز آشنایی با Comment ها و List ها در HTML
 6.7%    
"01:00  
  کار با Table ها در HTML
"09:16  
  چطور از HTML برای Formatting استفاده کنیم؟
"09:17  
  توضیح تمرین فصل دوم: یک مقاله‌ی انگلیسی بنویسید
"01:58  
  تمرین فصل دوم: یک مقاله‌ی انگلیسی بنویسید (الزامی)
 80%    
"60:00  
فصل سوم: آموزش ویژگی‌های پیشرفته‌تر در HTML و آشنایی با attributeها
  کار با نمایش لینک و عکس در HTML
"13:48  
  آشنایی با favicon, charset و URL Encode ها در HTML
"12:39  
  کوییز آشنایی با favicon, charset و URL Encode ها در HTML
 6.7%    
"01:00  
  آشنایی با Form Tag ها
"16:32  
  روش‌های نمایش ویدئو و سایر مدیا‌ها در مرورگر و معرفی iframe
"12:49  
  کوییز نمایش ویدیو
 6.7%    
"01:00  
  آموزش Map کردن روی Image، تگ‌های Map, Area و Picture
"12:25  
  آشنایی با Semantics در HTML
"13:55  
  آموزش Extension‌های Prettier, HTML Boilerplate و Emmet
"13:08  
  کوییز استایل دهی
 6.7%    
"01:00  
  توضیح تمرین فصل سوم: یک صفحه نمایش ویدئو از سایت آپارات یا یوتیوب بسازید
"01:41  
  تمرین فصل سوم: یک صفحه نمایش ویدئو از سایت آپارات یا یوتیوب بسازید (الزامی)
 80%    
"60:00  
فصل چهارم: آموزش Style دادن صفحه و زبان CSS به صورت پایه‌ای
  چطور استایل دهیم و CSS چیست؟
"16:27  
  کار با CSS Selector ها و تغییر ‌Background Color
"19:08  
  آشنایی با border, border-radius و ایجاد card
"15:26  
  کوییز گردکردن دوره عکس
 5.3%    
"01:00  
  آشنایی با Padding و Margin و Outline
"14:42  
  کار با font ها در CSS
"21:15  
  کوییز نمایش المنت روی المنت دیگر
 5.3%    
"01:00  
  ویرایش متن با text-transform, text-decoration و کلی property دیگر
"18:10  
  آموزش استایل دادن Link ها، List ها و Tableها
"13:38  
  آموزش Poistion Absolute/Relative/Fixed و Center کردن یک Element
"12:05  
  کوییز فرمت فرانت در وب
 5.3%    
"01:00  
  توضیح تمرین فصل چهارم: یک Card بسازید
"01:11  
  تمرین فصل چهارم: یک Card بسازید (الزامی)
 84.2%    
"120:00  
فصل پنجم: آموزش CSS و مباحث پیشرفته‌تر
  آموزش کار با Z-index و Opacity
"06:40  
  آموزش Combinator ها در CSS
"09:25  
  کوییز تایپوگرافی
 5.3%    
"01:00  
  آموزش کار با Pseudo-classes ها
"11:57  
  آشنایی کار با Pseudo-element ها
"11:47  
  کار با Unit های مختلف و معرفی سایت type-scale.com
"12:12  
  آشنایی با vw, vh و calc و بررسی CSS Attribute Selector ها
"11:55  
  کوییز استفاده از vh
 5.3%    
"01:00  
  کار با Media Queries ها و Max و Min Width و Height
"13:13  
  کوییز Media Queries
 5.3%    
"01:00  
  توضیح تمرین فصل پنجم: پیاده‌سازی سه باکس
"00:55  
  تمرین فصل پنجم: پیاده‌سازی سه باکس (الزامی)
 84.2%    
"180:00  
فصل ششم: آموزش CSS FLEX و پروژه‌ی پیاده‌سازی سایت Envato.com
  آموزش اولیه و شروع پروژه با Flex
"14:38  
  آموزش Justify Content و Align Items و پیاده‌سازی navbar
"18:28  
  کار با Flex Direction، SVG و Transition
"22:27  
  کوییز سیستم Flex
 5%    
"01:00  
  آموزش کار با Flex Wrap و Overflow
"34:58  
  کار با Flex Grow و Flex Shrink و Flex Basis
"25:33  
  کوییز Flex-Grow:1
 15%    
"02:00  
  پیاده‌سازی DropDown
"25:54  
  توضیحات تمرین فصل ششم: پیاده‌سازی سایت Udemy.com
"03:16  
  تمرین فصل ششم: پیاده‌سازی سایت Udemy.com (الزامی)
 80%    
"180:00  
فصل هفتم: آموزش CSS GRID و پیاده‌سازی Myer.com.au
  آموزش مقدماتی CSS Grid و شروع پروژه‌ی Myer
"26:29  
  کوییز CSS Grid
 5.3%    
"01:00  
  کار با Grid Gap و Modular کردن CSS
"14:26  
  آموزش تعریف auto-fit و auto-fill همراه با repeat
"17:45  
  کوییز auto-fill
 5.3%    
"01:00  
  کار با CSS Variable ها
"15:14  
  کار با Gradient، پیاده‌سازی Overlay و کار با :focus
"15:38  
  کوییز المنت‌های موازی
 5.3%    
"01:00  
  توضیح تمرین فصل هفتم: پیاده‌‌سازی سایت Groupon
"02:07  
  تمرین فصل هفتم: پیاده‌‌سازی سایت Groupon (الزامی)
 84.2%    
"240:00  
فصل هشتم: آموزش SASS و پیاده‌سازی صفحه لاگین miro.com
  آموزش اولیه SASS
"09:43  
  معرفی SASS Architecture و Import و Variable ها در SASS
"21:08  
  کوییز SASS
 5.3%    
"01:00  
  تعریف button ها و آموزش BEM - Block - Element - Modifiers
"24:20  
  کوییز روش Bem
 5.3%    
"01:00  
  پیاده‌سازی input ها و کار با Mixins
"22:28  
  کوییز mixins
 5.3%    
"01:00  
  کار با CSS Animation ها و تعریف Keyframes
"19:01  
  توضیح تمرین فصل هشتم: پیاده‌سازی صفحه اصلی سایت miro.com
"01:33  
  تمرین فصل هشتم: پیاده‌سازی صفحه اصلی سایت miro.com (الزامی)
 84.2%    
"240:00  
فصل نهم: آشنایی و کار با Frameworkهای CSS
  آموزش Bootstrap و چرایی استفاده یا عدم استفاده از آن
"21:37  
  بررسی JavaScript در Bootstrap و آشنایی با Modal
"07:17  
  کوییز چرا bootstrap
 3.3%    
"02:00  
  بررسی و معرفی Material Framework
"06:06  
  بررسی و معرفی Ant Design، Foundation و Pure.css
"04:54  
  بررسی و معرفی جزئی تر از Tailwind
"30:54  
  کوییز Tailwind
 10%    
"02:00  
  توضیح تمرین فصل نهم: پیاده‌سازی سایت eventbrite.com با یک CSS Framework
"02:49  
  تمرین فصل نهم: پیاده‌سازی سایت eventbrite.com با یک CSS Framework (الزامی)
 86.7%    
"300:00  
فصل دهم: نکات بیشتر
  آموزش اولیه JavaScript و معرفی دوره‌
"08:49  
  آموزش اولیه JQuery و چرایی استفاده یا عدم استفاده از آن
"07:07  
  آموزش مقدماتی با Node و Node-modules و Bower و Gulp و غیره
"05:34  
  بعد از آموزش HTML و CSS و کمی JavaScript چه کنیم؟
"02:58  
  توضیح تمرین فصل دهم: پیاده‌سازی Uxcel.com
"03:37  
  تمرین فصل دهم: پیاده‌سازی Uxcel.com (الزامی)
 100%    
"600:00  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

درباره دوره

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

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

 

دوره طراحی وب‌سایت (Front-End) چیست؟

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

  • آشنایی با مفاهیم فرانت اند و FrontEnd Development
  • آشنایی با HTML
  • آشنایی با  Css
  • آموزش صفحه بندی وب‌سایت و استایل دادن به صفحات مختلف
  • آموزش CSS FLEX و پروژه‌ی پیاده‌سازی سایت Envato.com
  • آشنایی با مفهوم SASS
  • آشنایی و کار با  Frameworkهای CSS

علاوه بر این موارد در این دوره با مباحث گسترده‌تری پیرامون موضوع برنامه‌نویسی فرانت اند آشنا خواهید شد.

 

هدف از برگزاری دوره طراحی وب‌سایت (Front-End) چیست؟

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

 

دوره طراحی وب‌سایت (Front-End) برای چه کسانی مناسب است؟

مباحثی که برای آموزش در این دوره در نظر گرفته شده است به نحوی است که همه کاربران و علاقه‌مندان می‌توانند در این دوره شرکت کنند و مباحث ارائه شده را یاد بگیرند. این دوره ی بسیار کاربردی برای همه افرادی است که به فعالیت در حوزه طراحی وب علاقه دارند. همه دانشجویان رشته‌های مربوط به کامپیوتر و آی تی و هرکسی که به‌نوعی به برنامه نویسی علاقه داشته باشد؛ می‌توانند در این دوره شرکت کنند.

درباره استاد

maktabkhooneh-teacher احسان گازار

احسان گازار برنامه‌نویسی را از ۱۷ سالگی با QBasic شروع کرد و سپس زبان C و C++ را آموخت. از همان ابتدا علاقه‌ی زیادی به برنامه‌نویسی وب داشت. از همین رو چندین سایت برای سرگرمی با HTML، CSS و JavaScript طراحی کرد.

احسان گازار فارغ‌التحصیل مهندسی کامپیوتر، گرایش سخت‌افزار از دانشگاه خواجه‌نصیر است اما به دلیل علاقه زیاد او به برنامه‌نویسی وب، برنامه‌نویسی JavaScript را ادامه داد و تبدیل به Full Stack JavaScript Developer شد.

وی از سال 90 در ایران در شرکت‌های معتبری مانند نت برگ به‌عنوان Back End Developer فعالیت داشته و از سال 95 تا سال 98 در سیدنی استرالیا به‌عنوان Full Stack JavaScript Developer مشغول به کار بود و از سال 98 در ملبورن استرالیا به‌عنوان مهندس نرم‌افزار مشغول به کار است و درحال حاضر به عنوان مدیر تیم برنامه نویسی فعالیت می‌کند. ایشان همیشه به آموزش علاقه‌‌مند بوده و دوره‌های مختلفی در زمینه Front End و سایر موضوعات برنامه‌نویسی تدریس کرده است.

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

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

صفحه 1 از
سیدمحمدامین مصطفوی نیا 1402-06-11
دانشجوی دوره
سلام و درود... ابتدا یک خسته نباشید خدمت مهندس گازار بخاطر این دوره عالی و زحماتی که کشیدن. منتهی کسانی که میخواهند دوره رو خریداری و شروع به گذراندن دوره کنند چند تا نکته رو رعایت کنن که دوره رو بهتر بگذرانند. ۱.سعی کنید فصل اول تا پنجم رو در کمترین زمان ممکن نسبت به توانایی های خودتون بگذرونید (دیدن محتوا و انجام پروژه ها) که از فصل ششم به بعد آموزش ها کمی با سرعت بیشتری دنبال میشه و مطالب هم کمی پیچیده تر خواهد شد. ۲.حتما توی دیسکورد عضو بشید و سوالاتتون رو بپرسید. ۳.برخی از سایت هایی که استاد معرفی برای انجام پروژه ها و... معرفی میکنند ، فیلتر هستند. برای حل این مشکل از پلتفرم ضد تحریم شکن استفاده کنید. و سخن آخر... دوره بسیار کــــامل و جامع هست اگر به وب علاقه دارید حتماً شروع کنید و لذتش رو ببرید.
میلاد زنگنه 1402-05-06
دانشجوی دوره
ضمن خسته نباشید خدمت آقای گازار و مکتب خونه دوره توانایی رقابت و کیفیت دوره های انگلیسی زبان رو نداره تا فصل 6 خوب و کار راه انداز هستش ولی از فصل ۶ به بعد هم آموزش بسیار سریع تر میشه و کیفیت افت میکنه
مهدی بابائی 1402-01-06
دانشجوی دوره
خسته نباشید میگم به مهندس گازار تشکر از سایت مکتب خونه دوره بسیار خوبی هستش استاد تسلط خوبی در مباحث دارن و همه مطالب رو از پایه تدریس کردن. به شخصه مطالب زیادی یاد گرفتم البته دوره فشرده ای هستش و گاهی وقتا باید بیش از یکبار روی هر ویدئو وقت گذاشت.
امیرمهیار ملک پور 1401-10-19
دانشجوی دوره
دوره خوب و مفیدی هست.تسلط استاد بسیار مناسب و اطلاعات جامع.تنها نکته ای که در خصوص دوره میتونم بگم از فصل 6 مطالب تخصصی تر میشه و سرعت تدریس بالاتر میره و یه مقدار برا یادگیری باید ویدیو ها رو چند بار دید.ولی درکل دوره بسیار خوبی. ممنون
حامد بواشه دستنائی 1401-09-20
دانشجوی دوره
دوره بسیار مفیدی هستش ولی تنها عیبی که میشه سختگیرانه به این دوره اورد از فصل 6 به بعد یکم پیچیده شدن موضوع و تندتر شدن تدریس که لازم است ویدیو ها رو چند بار دید تا متوجه بشید. و مشکل دیگه این دوره معرفی کردن سایت های خارجی هست که توی کشور ما فیلتر هستن و باید با vpn بازش کنید که پیدا کردن vpn یکم دشوار بود برای من... در کل استاد بسیار مقتدر و عالی هستن و حرفه ای
سیدمهدی یزدی نژاد 1401-08-24
دانشجوی دوره
واقعا استاد خوبی هستند و مطالب مفیدی ارائه دادند فقط از فصل ششم به بعد یک مقدار روند تدریس سریع میشه ونیاز یک ویدیو رو بیشتر از یک بار دید ولی در کل خوب بود پیشنهاد می کنم خریداری کنید
poster
تالار گفتگو
  
برگزار کننده:  مکتب‌خونه
  
زمان مورد نیاز برای گذارندن دوره:  48 ساعت
مجموع محتوای آموزشی:  15 ساعت ویدئو - 33 ساعت تمرین و پروژه
 (قابل دانلود می‌باشد)
مهلت دوره:  7 هفته
  
امتیاز شما:  0 %
  
حد نصاب قبولی در دوره:  75 نمره
فارغ‌التحصیل شدن در این دوره نیاز به ارسال تمرین‌ها و پروژه‌های الزامی دارد. 
organization-pic  گواهینامه این دوره توسط مکتب‌خونه ارائه می‌شود.
course-feature   گواهی‌نامه مکتب‌خونه course-feature   خدمات منتورینگ course-feature   پروژه محور course-feature   تمرین و آزمون course-feature   تالار گفتگو course-feature   تسهیل استخدام