درباره دوره:
دنیای اینترنت و وب امروزه به عضوی جدائیناپذیر از دنیای فیزیکی تبدیل شده به طوری بیشتر فعالیت های ما به آن وابسته است. با ظهور اینترنت دیگر مرزهای جغرافیایی کم رنگتر شده اند و هرکس میتواند از این فرصت برای پیشرفت خود استفاده کند. عدم آشنایی با این فضا باعث عقب ماندن از سایر هم نوعان و رقبا میشود. دوره آموزش طراحی وبسایت فرانت اند از مجموعه دورههای آموزش برنامه نویسی مکتب خونه مختص آشنایی با حوزه وب و طراحی سایت است.
امروزه یکی رایج ترین راه های کسب درامد در وب، برنامهنویسی فرانت اند است. در این فرایند تلاش میشود تا یک واسط کاربری مناسب برای کاربران فراهم شود تا استفاده از وبسایت، وب اپلیکیشن و… برای آنها سادهتر شود. دوره آموزش برنامه نویسی فرانت اند به شما این امکان را میدهد که با استفاده از کدنویسی، فضای سایت را طراحی کرده و آنچه را موردنظر UI Designer است را روی آن پیاده کنید. در واقع در این دوره یاد میگیرید با ابزارهایی مانند html و css چگونه بخش فرانت اند یک وب سایت را طراحی کنید. در این دوره مباحث زیادی با موضوع طراحی بخش Front یک وبسایت مطرح شده است. از جمله این موضوعات میتوان به موارد زیر اشاره کرد:
علاوه بر این موارد در این دوره با مباحث گستردهتری پیرامون موضوع برنامهنویسی فرانت اند آشنا خواهید شد.
در این دوره مطالب لازم برای تبدیل شما به یک برنامه نویس فرانت اند آموزش داده میشود و در نهایت خواهید توانست تا فرانت اند یک وب سایت از صفر تا صد انجام دهید. هدف اصلی این دوره آموزش برنامهنویسی فراند و همه ویژگیهایی است که برای طراحی بخش فرانت اند به آن نیاز خواهید داشت.
مباحثی که برای آموزش در این دوره در نظر گرفته شده است به نحوی است که همه کاربران و علاقهمندان میتوانند در این دوره شرکت کنند و مباحث ارائه شده را یاد بگیرند. این دوره ی بسیار کاربردی برای همه افرادی است که به فعالیت در حوزه طراحی وب علاقه دارند. همه دانشجویان رشتههای مربوط به کامپیوتر و آی تی و هرکسی که بهنوعی به برنامه نویسی علاقه داشته باشد؛ میتوانند در این دوره شرکت کنند.
فصل اول: آشنایی با مفاهیم FrontEnd Development:
1 – چه چیزهایی در این دوره یاد میگیرید؟
2 – آشنایی با پروتکل و HTML
3 – آشنایی با Editorها
4 – آشنایی با مرورگرها
5 – آشنایی اولیه با Inspect Element و تفاوت و کارآیی مرورگرها
6 – چطور این دوره را بگذارنید؟
7 – کوییز آشنایی با مفاهیم FrontEnd Development
فصل دوم: آشنایی با HTML به صورت پایهای:
1 – آشنایی با تگهای اولیه html, body, head
2 – آشنایی با Heading ها و Paragraph
3 – آشنایی بیشتر با Typography و تگهای Strong, i, Strike, Article
4 – کوییز آشنایی بیشتر با تگها
5 – کار با LiveServer برای تجربهی برنامهنویسی بهتر
6 – کوییز کار با LiveServer برای تجربهی برنامهنویسی بهتر
7 – آشنایی با Comment ها و List ها در HTML
8 – کوییز آشنایی با Comment ها و List ها در HTML
9 – کار با Table ها در HTML
10 – چطور از HTML برای Formatting استفاده کنیم؟
11 – توضیح تمرین فصل دوم: یک مقالهی انگلیسی بنویسید
12 – تمرین فصل دوم: یک مقالهی انگلیسی بنویسید
فصل سوم: آموزش ویژگیهای پیشرفتهتر در HTML و آشنایی با attributeها:
1 – کار با نمایش لینک و عکس در HTML
2 – آشنایی با favicon, charset و URL Encode ها در HTML
3 – کوییز آشنایی با favicon, charset و URL Encode ها در HTML
4 – آشنایی با Form Tag ها
5 – روشهای نمایش ویدئو و سایر مدیاها در مرورگر و معرفی iframe
6 – کوییز نمایش ویدیو
7 – آموزش Map کردن روی Image، تگهای Map, Area و Picture
8 – آشنایی با Semantics در HTML
9 – آموزش Extensionهای Prettier, HTML Boilerplate و Emmet
10 – کوییز استایل دهی
11 – توضیح تمرین فصل سوم: یک صفحه نمایش ویدئو از سایت آپارات یا یوتیوب بسازید
12 – تمرین فصل سوم: یک صفحه نمایش ویدئو از سایت آپارات یا یوتیوب بسازید
فصل چهارم: آموزش Style دادن صفحه و زبان CSS به صورت پایهای:
1 – چطور استایل دهیم و CSS چیست؟
2 – کار با CSS Selector ها و تغییر Background Color
3 – آشنایی با border, border-radius و ایجاد card
4 – کوییز گردکردن دوره عکس
5 – آشنایی با Padding و Margin و Outline
6 – کار با font ها در CSS
7 – کوییز فرمت فرانت در وب
8 – ویرایش متن با text-transform, text-decoration و کلی property دیگر
9 – آموزش استایل دادن Link ها، List ها و Tableها
10 – آموزش Poistion Absolute/Relative/Fixed و Center کردن یک Element
11 – کوییز نمایش المنت روی المنت دیگر
12 – توضیح تمرین فصل چهارم: یک Card بسازید
13 – تمرین فصل چهارم: یک Card بسازید
فصل پنجم: آموزش CSS و مباحث پیشرفتهتر:
1 – آموزش کار با Z-index و Opacity
2 – آموزش Combinator ها در CSS
3 – کوییز تایپوگرافی
4 – آموزش کار با Pseudo-classes ها
5 – آشنایی کار با Pseudo-element ها
6 – کار با Unit های مختلف و معرفی سایت type-scale.com
7 – آشنایی با vw, vh و calc و بررسی CSS Attribute Selector ها
8 – کوییز استفاده از vh
9 – کار با Media Queries ها و Max و Min Width و Height
10 – کوییز Media Queries
11 – توضیح تمرین فصل پنجم: پیادهسازی سه باکس
12 – تمرین فصل پنجم: پیادهسازی سه باکس
فصل ششم: آموزش CSS FLEX و پروژهی پیادهسازی سایت Envato.com:
1 – آموزش اولیه و شروع پروژه با Flex
2 – آموزش Justify Content و Align Items و پیادهسازی navbar
3 – کار با Flex Direction، SVG و Transition
4 – کوییز سیستم Flex
5 – آموزش کار با Flex Wrap و Overflow
6 – کار با Flex Grow و Flex Shrink و Flex Basis
7 – کوییز Flex-Grow:1
8 – پیادهسازی DropDown
9 – توضیحات تمرین فصل ششم: پیادهسازی سایت Udemy.com
10 – تمرین فصل ششم: پیادهسازی سایت Udemy.com
فصل هفتم: آموزش CSS GRID و پیادهسازی Myer.com.au:
1 – آموزش مقدماتی CSS Grid و شروع پروژهی Myer
2 – کوییز CSS Grid
3 – کار با Grid Gap و Modular کردن CSS
4 – آموزش تعریف auto-fit و auto-fill همراه با repeat
5 – کوییز auto-fill
6 – کار با CSS Variable ها
7 – کار با Gradient، پیادهسازی Overlay و کار با :focus
8 – کوییز المنتهای موازی
9 – توضیح تمرین فصل هفتم: پیادهسازی سایت Groupon
10 – تمرین فصل هفتم: پیادهسازی سایت Groupon
فصل هشتم: آموزش SASS و پیادهسازی صفحه لاگین miro.com:
1 – آموزش اولیه SASS
2 – معرفی SASS Architecture و Import و Variable ها در SASS
3 – کوییز SASS
4 – تعریف button ها و آموزش BEM – Block – Element – Modifiers
5 – کوییز روش Bem
6 – پیادهسازی input ها و کار با Mixins
7 – کوییز mixins
8 – کار با CSS Animation ها و تعریف Keyframes
9 – توضیح تمرین فصل هشتم: پیادهسازی صفحه اصلی سایت miro.com
10 – تمرین فصل هشتم: پیادهسازی صفحه اصلی سایت miro.com
فصل نهم: آشنایی و کار با Frameworkهای CSS:
1 – آموزش Bootstrap و چرایی استفاده یا عدم استفاده از آن
2 – بررسی JavaScript در Bootstrap و آشنایی با Modal
3 – کوییز چرا bootstrap
4 – بررسی و معرفی Material Framework
5 – بررسی و معرفی Ant Design، Foundation و Pure.css
6 – بررسی و معرفی جزئی تر از Tailwind
7 – کوییز Tailwind
8 – توضیح تمرین فصل نهم: پیادهسازی سایت eventbrite.com با یک CSS Framework
9 – تمرین فصل نهم: پیادهسازی سایت eventbrite.com با یک CSS Framework
فصل دهم: نکات بیشتر:
1 – آموزش اولیه JavaScript و معرفی دوره
2 – آموزش اولیه JQuery و چرایی استفاده یا عدم استفاده از آن
3 – آموزش مقدماتی با Node و Node-modules و Bower و Gulp و غیره
4 – بعد از آموزش HTML و CSS و کمی JavaScript چه کنیم؟
5 – توضیح تمرین فصل دهم: پیادهسازی Uxcel.com
6 – تمرین فصل دهم: پیادهسازی Uxcel.com