کمپ متخصص فرانت اند

توضیحات دوره

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

پیش نیازها

توانایی کار با کامپیوتر و اینترنت

مخاطبان این دوره

1- افرادی که علاقمند به فرانت اند و طراحی سایت هستند.

٢-طراحان سایت

سرفصل دوره

آشنایی با HTML
Tag ها و Element ها
Attribute چیست
تگ <div> و <span>
Comment ها
ساختار یک فایل HTML
عنصر <html>
عنصر <head>
عنصر <title>
عنصر <body>
مبانی فرمت کردن متن
Float
ایجاد سرصفحه ها
ایجاد پاراگراف ها با استفاده از عنصر <p>
ایجاد خط فاصله با استفاده از عنصر‎<br />‎
عنصر <b>
عنصر <i>
عنصر‎<hr />‎
عنصرهای جمله ای
عنصر <em>برای افزودن تاکید
عنصر <strong>برای افزودن تاکید قوی
عنصر <q>برای نقل قول های کوتاه
عنصر <code>برای نمایش سورس کد
لیست ها
استفاده از عنصر <ul>
لیست های دارای شمارش
لیست های تو در تو
کار با تصاویر
صفت Src
صفت Alt
پیوند ها
صفت Href
صفت Target
استفاده از Anchor
لینک کردن نام، تصویر و…
فرم ها
آشنایی با فرم ها
ایجاد یک فرم با استفاده از عنصر <form>
صفت action
صفتmethod
صفت id
و عنصر <form>
ورودی متن
دکمه ها
چک باکس ها
دکمه های رادیویی
باکس های انتخاب
باکس های انتخاب فایل
کنترل های مخفی
ایجاد لیبل برای کنترل های با استفاده از عنصر <label>
عنصر های معنایی
Header
Nav
Footer
Article
Section
قابلیت های جدید HTML5
اعتبار سنجی فرم ها
Cascading Style Sheet
آشنایی با CSS
روش های مختلف استفاده از CSS در صفحه
عنصر <link>
عنصر <style>
مزایای CSS های External
مشخصه های CSS
کنترل کردن متن
مشخصه font-family
مشخصه font-size
مشخصه font-weight
مشخصه font-style
فرمت کردن متن
مشخصه color
مشخصه text-align
مشخصه text-decoration
مشخصه text-shadow
مشخصه text-transform
مشخصه letter-spacing
مشخصه word-spacing
مشخصه white-space
مشخصه direction
کلاس های شبه متن
شبه کلاس first-letter
شبه کلاس first-line
سلکتور ها
انتخابگر Class
انتخابگر ID
انتخابگر فرزند
انتخابگر هم نوع مجاور
انتخابگر عمومی
انتخابگر صفت
طول ها
واحدهای نسبی
واحدهای مطلق
درصدها
آشنایی با مدل Box
مثالی از کاربرد مدل Box
مشخصه های Border
مشخصه padding
مشخصه margin
ابعاد یک Box
باگ مدل Box Internet Explorer
مطالبی بیشتر در زمینه Cascading Style Sheet ها
لینک ها
پس زمینه ها
مشخصه background-color
مشخصه background-image
مشخصه background-repeat
مشخصه background-position
مشخصه background-attachment
مشخصه background (شکل کوتاه)
لیست ها
مشخصه list-style-type
مشخصه list-style-position
مشخصه list-style-image
مشخصه list-style (شکل کوتاه)
جدول ها
مشخصه های خاص جدول ها
مشخصه border-collapse
مشخصه border-spacing
مشخصه table-layout
شبه کلاس های‎:focus و‎ :active
مشخصه های دیگر
مشخصه cursor
مشخصه display
مشخصه visibility
مختصات دهی و چینش با استفاده از CSS
مشخصه Position
مختصات دهی به صورت Relative
مختصات دهیFixed
مشخصه z-index
شناور کردن با استفاده از مشخصه float
مشخصه clear
واحد های اندازه گیری در CSS
بررسی و کاربرد واحد اندازه گیری px
بررسی و کاربرد واحد اندازه گیری em
بررسی و کاربرد واحد اندازه گیری in
بررسی و کاربرد واحد اندازه گیری cm
بررسی و کاربرد واحد اندازه گیری mm
بررسی و کاربرد واحد اندازه گیری Percentage
کجا باید از چه واحدی استفاده کنیم
آشنایی با رنگ ها
استفاده از نام رنگ
استفاده از کد ترکیبی (عدد دهدهی)- RGB
استفاده از کد ترکیبی (عدد مبنای 16)- Hex
بررسیBox Model
Box Model چیست
بررسی Border
بررسی Margin
بررسی Padding
ابعادBox
بررسی height
بررسی width
بررسی line-height
بررسی min-height
بررسی max-height
برسیmin-width
بررسی max-width
PositionهاCSS
بررسی و کاربرد Static Position
بررسی و کاربرد Absolute Position
بررسی و کاربرد Relative Position
بررسی و کاربرد Fixed Position
کار با CSS3 و قابلیت های جدید آن
Advanced Selectors
گرد کردن گوشه ها- Rounded Corners
حاشیه تصویری- Border Image
سایه ها- Box Shadow & Text Shadow
رنگ ها- Colors
RGBA
Gradient
Transform چرخش ، جابجایی و…
قاب های چند ستونی- Multi Column Layout
استفاده از فونت در وب- Web Fonts
متحرک سازی اجزای صفحه - Animations and Transitions
Box Sizing
Media Queries
پس زمینه- Background
پس زمینه های متعدد- Multiple Backgrounds
Background-size
Background-clip
background-origin
Text-overflow
Word-wrap
Word-break
چگونه صفحات وب ما در تمام مرورگرها یکسان نمایش داده شود
ساخت سایت تک صفحه ای با html css flexbox

Flex

CSS Flex Container
Parent Element (Container)
The flex-direction Property
The flex-wrap Property
The flex-flow Property
The justify-content Property
The align-items Property
The align-content Property
Perfect Centering
The CSS Flexbox Container Properties
CSS Flex Items
Child Elements (Items)
The flex-grow Property
The flex-shrink Property
The order Property
The flex-basis Property
The flex Property
The align-self Property
The CSS Flexbox Items Properties
CSS Flex Responsive
Responsive Flexbox
Responsive Image Gallery using Flexbox
Responsive Website using Flexbox
پروژه عملی

بوت استرپ ورژن ۵

معرفی و نصب و راه اندازی بوت استرپ
آشنایی با فایل های موجود در پوشه دانلود شده
آشنایی با نسخه های مختلف بوت استرپ
پشتیبانی در مرورگر های مختلف
مفهوم RFS
راست چین کردن پروژه های بوت استرپ
شخصی سازی کردن بوت استرپ
Reboot در بوت استرپ
آشنایی با تایپوگرافی
Breakpoint ها و Media Query ها
کار با Containers
سیستم شبکه یا Grid System در بوت استرپ
مفاهیم ردیف و ستون
مفهوم Gutters
مفهوم z index
استفاده از CSS Grid در بوت استرپ
استفاده از FlexBox در بوت استرپ
جداول در بوت استرپ
Figures در بوت استرپ
کار با فرم ها
کار با اینپوت ها
تگ های select , option , textarea
اعتبار سنجی ها
کار با تصاویر در بوت استرپ
کار با Component های بوت استرپ
کار با کامپوننت های Accordion - Alerts - Close button - Dropdowns - Offcanvas - Placeholders - Progress - Spinners - Toasts
کامپوننت های Buttons، Button group
کامپوننت Badges
کامپوننت های Progress، Pagination
کامپوننت های Alert، List group
کامپوننت Tooltip
کامپوننت Forms
کامپوننت های Dropdowns، Popovers
کامپوننت Breadcrumb
کامپوننت های Input group، Modal
کامپوننت Collapse
کامپوننت های Navs و Carousel
کامپوننت های Navbar، Scrollspy
کامپوننت Card
کار با Helpers
آشنایی با Utilities
Background
Borders
Colors
Display property
Float
Interactions
Opacity
Overflow
Position
Shadows
Sizing
Spacing
Text
Vertical alignment
Visibility

TailwindCSS

مقدمه ای بر tailwind
اصول طراحی واکنشگرا
کار با رنگ ها و اندازه ها
شخصی سازی
Utilities
فلکس باکس در تیلویند

جاوااسکریپت

معرفی جاوااسکریپت
چرا زبان برنامه نویسی؟
چرا زبان جاوااسکریپت؟
تاریخچه
نسخه ها -مزایای استفاده از این زبان
نصب و راه اندازی اولین پروژه
-طرق مختلف استفاده در مرورگر
اولین برنامه Hello World
مبانی برنامه نویسی به زبان جاوا اسکریپت
Comments
Variables
شناسه ها
کلمات رزرو شده
Data types
متغیر ها
ثابت ها
رشته ها
اعداد
عملگرها
تبدیلات
ساختار های شرطی
حلقه ها
آرایه ها
Sets
Maps
حلقه های تکرار
توابع - ورودی و خروجی
Arrow Functions
Scope
Hoisting
Callback
Object
DOM
انتخاب المان های صفحه وب
حرکت در DOM
CSS
Attributes
رویداد چیست؟
Event Object
Event Flow
Keyboard Events در جاوااسکریپت
رویداد ها کنترل ها اعتبار سنجی فرم ها
Animations
کار با فرم ها
عناصر صفحه
Events
BOM
Popup
Cookies
History Location
Windows
Browser Event
خطایابی و رفع آن ها
انواع خطا ها
سرفصل های تکمیلی
Json Closures Iterators Generators
Ajax
کار با Ajax
رویداد ها
Promises
نحوه ارسال درخواست Async در Ajax
بروز رسانی DOM با Ajax
استفاده Json در Ajax
اکما اسکریپت ECMAScript
Const و Let
Template Strings
Tagged Templates
بروز رسانی های ایجاد شده در توابع
عملگر Spread
Getters و Setters
متد های of و fill
متدهای find و findIndex
Map
WeakSet و WeakMap
بروزرسانی ها در ES7
Await و Async
بروزرسانی ها در ES8
مثال های عملی کوچک
ساخت ماشین حساب
ساخت Todo
ساخت چراغ راهنما
ساخت ساعت دیجیتال
ساخت شمارنده
بازی حدس عدد
اعتبار سنجی فرم ها
کتابخانه ی jQuery
دلایل استفاده از jQuery متدهای کاربردی
سکلتور ها
رویداد ها
افکت ها
کار با HTML
Ajax

پروژه های عملی جاوااسکریپت:

سبد خرید
بازی حدس عدد
ماشین حساب
جدول با قابلیت فیلترینگ و مرتب سازی داده ها و صفحه بندی
نمایش و مخفی سازی رمز عبور در ورودی
اسلایدر
لودینگ
تایپ متحرک
گالری تصویر
کپی متن
ورود و ثبت نام
دارک مود
آپلودر
پروژه Rest Api
تولید کد Captcha
آزمون آنلاین Quiz
پروژه آب و هوا

اهداف این آموزش

تسلط کافی به مهارت های اصلی در فرانت اند

https://barnamenevisan.info/c/98

توضیحات دوره
پیش نیازها
مخاطبان این دوره
سرفصل دوره
اهداف این آموزش