×
ribbon

تا پایان تخفیف

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

مدرس:

احسان گازار

دنیای اینترنت و وب امروزه به عضوی جدائی ناپذیر از دنیای فیزیکی تبدیل شده به طوری بیشتر فعالیت... بیشتر
گواهی‌نامه
دسترسی: کامل
اطلاعات بیشتر
4.2 (120)
43 دیدگاه
3,427دانشجو
48ساعت
سرفصل‌ها
مقدماتی سطح دوره

اشتراک مکتب‌پلاس

خرید اشتراک

با خرید اشتراک مکتب‌پلاس، علاوه بر این دوره، به بیش از ۴،۰۰۰ دوره دیگر دسترسی خواهید داشت.

دسترسی به تمام دوره‌هابیش از ۴،۰۰۰ دوره
محتوای دوره
سرفصل‌ها
پیش‌نیاز‌ها
توضیحات دوره
دیدگاه کاربران
درباره مدرس

این دوره شامل:

15 ساعت ویدئو

9 تمرین و پروژه

27 سؤال سنجش و یادگیری

دسترسی به تالار گفتگو

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

دسترسی مادام‌العمر به محتوای دوره

7 هفته مهلت ارسال تمرین و پروژه

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

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

پیش‌نیاز‌ها

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

توضیحات دوره

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

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

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

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

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

 

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

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

 

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

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

دیدگاه کاربران

4.2

بر اساس امتیاز 121 دانشجو

1
2
3
4
5

مهرسام میرشکار

4 روز پیش

5

دوره ی خوبی هستش پیشنهاد میکنم بخرید و استفاده کنید مرسی از مدرس گرامی و پشتیبانی مکتب خونه 🙏

دانشجوی دوره

7 روز پیش

5

عالی فقط کاش یک قسمت یا فایلی بود نکاتی که میگن نوشته شده باشه

امان عامری

8 روز پیش

5

بسیار عالی

محمد رحیمی

10 روز پیش

5

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

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

15 روز پیش

5

عالی

سعید عبدی درکه

19 روز پیش

5

این دوره بسیار مفید و عالی هست. ممنون از استاد گازار عزیز

گواهینامه اختصاصی دو زبانه

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

امکان اشتراک گذاری در لینکدین
دو زبانه
8دوره
15,711دانشجو
506نظر و امتیاز

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

او فارغ‌التحصیل مهندسی کامپیوتر (گرایش سخت‌افزار) از دانشگاه خواجه نصیر است اما مسیر حرفه‌ای خود را به عنوان یک Full Stack JavaScript Developer ادامه داد. احسان از سال ۱۳۹۰ فعالیت حرفه‌ای خود را در ایران آغاز کرد و سپس برای ادامه‌ی مسیر کاری به استرالیا مهاجرت کرد؛ جایی که به عنوان مهندس نرم‌افزار و رهبر تیم‌های فنی تجربه‌های ارزشمندی به دست آورد. از سال ۲۰۲۳ نیز در لندن به فعالیت خود ادامه می‌دهد.

احسان علاوه بر فعالیت‌های حرفه‌ای، همیشه به آموزش و انتقال تجربه علاقه‌مند بوده است. تاکنون بیش از ۵۰۰ ویدیو، ۱۰۰ مقاله و چندین دوره آموزشی منتشر کرده و بیش از ۱۲ هزار دانشجو از آموزش‌های او بهره‌مند شده‌اند. او همچنین پادکست فارسی نقطه ورود را راه‌اندازی کرده است که به بررسی موضوعات روز دنیای فناوری برای برنامه‌نویسان و علاقه‌مندان ایرانی می‌پردازد.

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

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

مهارت‌هایی که می‌آموزید

دوره‌های مشابه

دیگر دوره‌های احسان گازار

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

حداقل و حداکثر زمانی که می‌توانم یک دوره را بگذرانم چقدر است؟

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

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

خیر. به‌دلیل ملاحظات محیط‌زیستی و کاهش مصرف کاغذ، گواهی‌نامه فقط به‌صورت الکترونیکی ارائه می‌شود.

آیا بعد از پایان مدت دوره همچنان به محتوای آن دسترسی دارم؟

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

آیا در صورت خرید دوره، گواهی‌نامه آن به من تعلق می‌گیرد؟

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