طراحی سایت HTML CSS FLEXBOX
آشنایی با 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
جاوااسکریپت
معرفی جاوااسکریپت
چرا زبان برنامه نویسی؟
چرا زبان جاوااسکریپت؟
تاریخچه
نسخه ها -مزایای استفاده از این زبان
نصب و راه اندازی اولین پروژه
-طرق مختلف استفاده در مرورگر
اولین برنامه 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
ری اکت
معرفی دوره
توضیحات ابتدایی
آشنایی با React
چرا React
ابزار ها و نیازمندی های ابتدایی
ساخت اولین پروژه
مروری بر بروز رسانی های اکما اسکریپت
اپراتور Spread
Object , Array destructuring
مباحث پایه شئ گرایی در جاوا اسکریپت
Export – import
توابع فلشی Arrow function
تفاوت Const – Let – Var
بررسی فولدر ها و فایل های پروژه
مفهوم کامپوننت
ساخت کامپوننت
انواع کامپوننت
Virtual DOM در ری اکت
آشنایی با JSX
Prop
State
Reusable component
Class component
Functional component
setState
Destructuring
تفاوت State , Prop
چرخه حیات کامپوننت ها
استایل دهی در ری اکت
Styled Component
مفهوم Hook
useState
PrevState
Object , Array in useState
useEffect
Context
useContext
useReducer
useMemo
useCallback
useRef
Custom Hook
رویداد ها
مفهوم binding
List rendering
Conditional rendering
Mounting
Unmounting
Update
Memo
Pure component
Ref
propTypes
Portal
Error boundary
HOC
Ajax در React
Fetch
Axios
عملیات CRUD
مدیریت خطا ها
Interceptor
Publish نهایی پروژه روی هاست
react router
پروژه اول single page application SPA
پروژه دوم اعتبار سنجی فرم ها
پروژه سوم TODO List
معرفی ریداکس Redux
مفاهیم
تعاریف
راه اندازی
Action
Reducer
Store
پکیج محبوب react-redux
Redux thunk