سرفصل های دوره Web Design Pack
معرفی مفاهیم پایه طراحی وب
بررسی مفهم UI
بررسی مفهوم UX
بررسی مفهوم Front-End
بررسی مفهوم Back-End
معرفی HTML
معرفی CSS
معرفی Javascript
بررسی مفهوم SEO
بررسی مفهوم Progressive Enhancement
بررسی مفهوم Responsive Web Design
بررسی مفهوم Internet
بررسی مفهوم Protocol
بررسی مفهوم WEB
بررسی مفهوم HTTP
بررسی مفهوم Server
بررسی مفهوم IP
بررسی مفهوم Domain
بررسی مفهوم DNS
بررسی مفهوم Intranet
بررسی مفهوم Extranet
بررسی موتور های رندرگیری مرورگر ها
بررسی URL
بررسی مفهوم HTTPS
بررسی تفاوت سایت های static و dynamic
بررسی request و response های یک وب سایت
بررسی نحوه رندرگیری کد ها توسط مرورگر
کامنت ها در HTML
معرفی tag ها در HTML و انواع آن ها(single & pairs)
بررسی ساختار تگ ها در HTML
معرفی VS Code و پلاگین های آن(material icons, material themes , open in browser , prettier ,rainbow brackets , path intellisense, )
بررسی ساختار یک سند HTML
معرفی BOM و DOM
نمایش درخت HTML
بررسی مفهوم semantic
• معرفی HTML
- معرفی تگ p و display آن
- معرفی تگ های Heading و display آن ها
- معرفی تگ hr و display آن
- معرفی لیست های ترتیبی و غیر ترتیبی و display آن ها
- آموزش Emmet
- معرفی attribute های تگ های HTML و بررسی نکات آن ها
- آموزش لیست های Nested
- معرفی پلاگین live-server در vs code
- معرفی تگ blockqoute و display آن
- معرفی تگ pre و display آن
- معرفی Webstorm و نحوه نصب و کرک آن
- معرفی پلاگین های Webstorm و استفاده از آن ها (atom material icons, material theme ui lite, rainbow brackets)
- برسی تفاوت های HTML4 و HTML5
- معرفی Doctype
- معرفی تگ های sematic
- معرفی تگ main و display آن
- معرفی تگ header و display آن
- معرفی تگ footer و display آن
- معرفی تگ section و display آن
- معرفی تگ article و display آن
- معرفی تگ aside و display آن
- معرفی تگ nav و display آن
- معرفی تگ address و display آن
- معرفی تگ em و display آن
- بررسی تفاوت display های inline و block
- معرفی تگ strong و display آن
- معرفی تگ b و display آن
- معرفی تگ i و display آن
- معرفی تگ s و display آن
- معرفی تگ u و display آن
- معرفی تگ small و display آن
- معرفی تگ q و display آن
- معرفی تگ abbr و display آن
- بررسی حالات nesting در element ها
- معرفی تگ sub و display آن
- معرفی تگ sup و display آن
- معرفی تگ mark و display آن
- معرفی تگ ins و display آن
- معرفی تگ del و display آن
- معرفی تگ br و display آن
- معرفی تگ div و display آن
- معرفی تگ span و display آن
- معرفی id و class و بررسی تفاوت آن ها
- معرفی global attributes
- بررسی character escapes
- آموزش دستورات پایه CMD
- معرفی node js
- معرفی npm
- معرفی live-server و دستورات آن
- معرفی تگ a و display آن
- معرفی Attribute HREF
- معرفی URL های Relative و Absolute
- لینک کردن تگ a به بخشی از سایت و استفاده از پراپرتی scroll-behavior
- بررسی Attribute Target
- بررسی mail links
- بررسی tel links
- معرفی تصاویر و بررسی انواع آن ها(vector & raster)
- بررسی فرمت های عکس ها
- بررسی انواع color mode
- معرفی mimetype
- معرفی تگ img و display آن
- بررسی تفاوت display های block و inline و inline-block
- معرفی تگ table و display آن
- معرفی تگ های tr و th و td
- معرفی Attribute colspan & rowspan
- معرفی تگ caption در table
- معرفی تگ های thead و tbody و tfoot
- بررسی چگونگی عمکرد form ها
- معرفی تگ form و attribute های action و method و enctype
- بررسی method های get و post
- معرفی تگinput و انواع type های آن(text,password,search,email,url,tel,submit,reset,button,radio,checkbox,file,hidden,date,time,number,range,color)
- معرفی attribute های Value,name,placeholder,min-length,max-length,required,diabled,readonly
- معرفی تگtextarea و display آن
- معرفی تگ Select و option و optgroup
- معرفی تگ label و display آن
- آموزش اتصال input و lablel به هم
- معرفی تگ fieldset و legend
- معرفی تگ iframe
- معرفی تگ video و display آن
- معرفی تگ audio و display آن
معرفی CSS
معرفی declaration
معرفی selector و property و value
معرفی element selector
معرفی id selector(local & global)
معرفی class selector(local & global)
بررسی تفاوت Style های inline , internal ,external
بررسی اولویت های style دهی
کامنت ها در CSS
معرفی !important و اولویت آن
معرفی group selector
معرفی CSS Units
معرفی property های زیر در CSS
Font-family
استفاده از سایت transfonter
استفاده از font-face
بررسی مفهوم font stack
Font-size
Font-weight
Font-style
Font-variant
Font
Color
معرفی descendant selectors
معرفی child selectors
معرفی next-sibling selector
معرفی Subsequent-sibling selectors
معرفی universal selector
Line-height
Text-indent
Text-align
Text-decoration
Text-transform
Letter-spacing
Word-spacing
Text-shadow
Whitespace
Vertical-align
Direction
List-style-type
معرفی رنگ ها
معرفی HEX color Mode
معرفی RGB color mode
معرفی RGBa color mode
Color
Background-color
Width
Height
Opacity
معرفی attribute selector ها و regex
Background-image
Background-repeat
Background-position
Background-origin
Background-attachment
Background-size
Background
ساخت کامپوننت parallax
Linear-gradient
Radial-gradient
Repeating-linear-gradient
Repeating-radial-gradient
بررسی سایت css gradient generator
تقسیم بندی ماژولار css با استفاده از @import
بررسی مفهوم box model
Overflow
Padding
Box-sizing
Border-style
Border-width
Border-color
Border
Border-radius
بررسی سایت border radius generator
Outline-style
Outline-width
Outline-color
Outline-offset
Outline
Margin
بررسی مفهوم collapsing margin
بررسی margin در تگ های inline
بررسی negative margins
معرفی css variables با استفاده از :root و var()
معرفی تابع ریاضی calc()
آموزش وسط چین کردن تگ ها
Display
Box-shadow
معرفی font awesome و نحوه نصب و استفاده از آن
معرفی pseudo class selector های زیر:
Link
Visited
Focus
Hover
Active
معرفی مفهوم transition
Transition-property
Transition-duration
Transition-timing-functioning
بررسی وب سایت cubic-bezier
Transition-delay
Transition
بررسی سایت hover.css
معرفی سایر pseudo class selector ها
Root
Empty
First-child
Last-child
Only-child
First-of-type
Last-of-type
Only-of-type
Nth-child()
Nth-last-child()
Nth-of-type()
Nth-last-of-type()
Enabled
Disabled
Checked
Not()
ساخت یک پروژه ساده
معرفی pseudo element selector های زیر
First-line
First-letter
Before
After
ادامه معرفی property های Css
Float
Clear
Shape-outside
Shape-margin
Position(static,relative,absolute,fixed,sticky)
Top , left , right , bottom
Z index
ساخت منو nested
ساخت mega menu
ساخت منو همبرگری
ساخت منو دیجی کالا
Transform
Translate()
Rotate()
Skew()
Sclale()
Transform-origin
Perspective
Perspective-origin
Filter
Blur()
Brightness()
Contrast()
Grayscale()
hue-rotate()
invert()
saturate()
sepia()
معرفی animation ها و نحوه استفاده از @keyframes
animation-name
animation-duration
animation-timing-functioning
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
معرفی کتاب خانه animate.css
resize
border-collapse
border-spacing
empty-cells
table-layout
caption-side
معرفی swiper js
flex
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
align-self
order
flex-grow
flex-shrink
معرفی media query و ساخت صفحات responsive
معرفی srcset و x-descriptor و w-descriptor
معرفی تگ picture
معرفی owl carousel
پروژه تبدیل UI به صفحات وب
نحوه خرید دامنه و هاست
معرفی grid css
grid column
grid row
grid cell
grid cell
grid line
معرفی property های grid
grid-template-columns
grid-gap
grid-column-gap
grid-row-gap
grid-template-rows
grid-column
grid-row
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-template-areas
grid-area
justify-content
justify-items
justify-self
align-content
align-items
align-self
معرفی SASS
معرفی Sass و نحوه نصب و کانفیگ آن
کانفیگ Sass با npm scripts
کانفیگ sass با نرم افزار های جانبی مثل koala
ایجاد متغیر در sass
آموزش nesting در sass
آموزش استفاده از pseudo class selector ها و pseudo element selector ها در Sass
آمورش inheritance و @extend در sass
آموزش condition ها در sass
آموزش استفاده از ریاضیات در sass
آموزش استفاده از function ها در sass
آموزش استفاده از @mixin در sass
آموزش iteration ها در sass
ساخت گرید بندی bootstrap با sass
آموزش media query در sass
انجام یک پروژه ساده با sass
معرفی bootstrap 5
آموزش نحوه دانلود و نصب bootstrap5 و کانفیگ آن
معرفی break point ها
معرفی انواع container
آموزش استفاده از grid بندی bootstrap 5
نحوه استفاده از grid بندی bootstrap و ساخت صفحات responsive
تزار کردن افقی و عمدی column ها
عوض کردن order
استفاده از offset
معرفی margin
معرفی padding
معرفی gutter
معرفی background color
معرفی color
معرفی دیسپلی ها
معرفی flex
معرفی float
معرفی overflow
معرفی position
معرفی shadow
معرفی width و height
معرفی vertical align
معرفی کلاس border
معرفی کلاس rounded
معرفی کلاس های heading
معرفی کلاس های display
معرفی کلاس lead
معرفی کلاس mark
معرفی کلاس small
معرفی کلاس text-decoration-underline
معرفی کلاس text-decoration-line-through
معرفی کلاس initialism
معرفی کلاس blockquote
معرفی کلاس text-center
معرفی کلاس list-unstyled
معرفی کلاس list-inline و list-inline-item
معرفی کلاس img-fluid
معرفی کلاس img-thumbnail
معرفی کلاس rounded
استفاده از float در bootstrap
معرفی کلاس table
استفاده از رنگ ها در table
معرفی کلاس table-striped
معرفی کلاس table-hover
معرفی کلاس table-active
معرفی کلاس table-bordered
استفاده از رنگ ها در table border
معرفی کلاس table-borderless
معرفی کلاس table-sm
معرفی کلاس table-responsive
معرفی vertical align در bootstrap
آموزش Table های nesting
معرفی کلاس table-light و table-dark
معرفی Caption-side در bootstrap
معرفی کلاس figure و figure-img و figure-caption
معرفی کلاس form-label و form-control
معرفی کلاس form-control-plaintext
معرفی کلاس visually-hidden
معرفی کلاس form-control-color
معرفی کلاس form-select
معرفی کلاس form-check و form-check-input و form-check-label
معرفی کلاس form-switch
معرفی کلاس form-check-inline
معرفی کلاس btn-check
معرفی کلاس form-range
معرفی کلاس input-group و input-group-text
معرفی کلاس input-group-sm
معرفی کلاس dropdown-toggle و dropdown-menu و “dropdown-item و dropdown-divider
معرفی کلاس dropdown-menu-end
معرفی کلاس dropdown-toggle-split
معرفی کلاس form-floating
معرفی کلاس s-invalid و is-valid و invalid-feedback و has-validation
معرفی کلاس {valid|invalid}-tooltip
استفاده از کامپوننت های زیر:
Accordion
Alert
Badge
Breadcrumb
Buttons
Button group
Card
Close button
Collapse
Dropdowns
List group
Modal
Nav & tabs
Navbar
Offcanvas
Pagination
Popovers
Progress
Scrollspy
Spinners
Toasts
Tooltip
معرفی کلاس clearfix
معرفی کلاس link-*
معرفی کلاس ratio
معرفی کلاس fixed-top
معرفی کلاس fixed-bottom
معرفی کلاس ticky-top
معرفی کلاس visually-hidden
معرفی کلاس visually-hidden-focusable
معرفی کلاس visually-hidden-focusable
معرفی کلاس card و card-body و card-title و card-text
معرفی کلاس stretched-link
معرفی کلاس text-truncate
ساخت پروژه با bootstrap
آموزش Javascript
معرفی زبان JavaScript
معرفی کاربرد های زبان JavaScript
معرفی فریمورک ها و کتابخانه های این زبان
بررسی تفاوت های زبان های مفسری و کامپایلری
معرفی تگ script
بررسی قرار دادن تگ script در جای های مختلف
معرفی اتریبیوت های defer و async و تفاوت آن ها
نحوه نوشتن JavaScript به صورت external
چاپ کردن دیتا با java script
Document.write
Document.writeln
Alert
Console.log
نحوه کامنت گذاری
معرفی متغیر ها
بررسی نحوه نام گذاری متغیر ها
بررسی روش های نام گذاری متغیر ها
نحوه کار با متغیر ها
معرفی var و let و const
معرفی انواع داده
معرفی typeof
بررسی concat در js
بررسی بک تیک و template string
نحوه ورودی گرفتن از کاربر
آموزش casting در js
معرفی block scope ها و متغیر های global و local
معرفی arithmetic operator ها
معرفی assignment operator ها
معرفی comparison operator ها
معرفی ternary operator
معرفی logical operator ها
معرفی nan و تابع isNan
معرفی شرط ها
If
Else
Else if
Switch
معرفی توابع در js
نحوه ورودی گرفتن توابع
بررسی تفاوت توابع void و غیره
بررسی توابع بازگشتی
معرفی حلقه ها
For
While
Do while
معرفی حلقه های تو در تو
معرفی آرایه ها
نحوه دسترسی به عناصر آرایه و معرفی index ارایه ها
آپدیت ارایه ها
نحوه استفاده از length در ارایه ها
معرفی توابع push و pop و shift و unshift
معرفی تابع isArray
معرفی associative array ها
معرفی تابع toString
معرفی تابع join
معرفی تابع delete
معرفی تابع Splice
معرفی تابع concat
معرفی تابع Slice
معرفی تابع sortNumeric
معرفی متد foreach
معرفی متد map
بررسی تافوت foreach و map
معرفی متد filter
معرفی متد indexOf و lastIndexOf
معرفی object
نحوه دسترسی به عناصر object
آموزش event ها
Click
Mouse enter
Mouseleave
Keyup
Keydown
نحوه css دادن با js
ساخت ماشسن حساب با js
معرفی متد های string
Substr
Sunstring
Slice
Tolowercase
toUppercase
replace
trim
charAt
indexof
lastindexof
include
startwith
endwith
نحوه دسترسی به کارکتر های string
معرفی متد split
آموزش ساخت modal
معرفی Math در js
PI
e
sqrt
round
floor
ceil
trunc
random
ساخت captcha
معرفی arrow function ها
معرفی dom و bom
دسترسی به dom با استفاده از id و tagname و classname
استفاده از queryselector
معرفی innerhtml و innertext
معرفی .attribute
معرفی setattribute
معرفی .claaname
معرفی .href
معرفی .src
معرفی regular expression
استفاده از متد های search و replace
معرفی modifier ها در search
استفاده از parentnode و childrennode و firstchild و lastchild و nextsibiling و previoussibiling
معرفی createElement و append و insertBefore و remove
معرفی bom
Screen.width
Screen.height
Screen.height
Screen.availwidth
Screen.availheight
Innerwidth
Innerheight
Location.href
Location.hostname
Location.pathname
Location.protocol
معرفی setTimeOut و setInterval
ساخت ساعت دیجیتال
معرفی json
معرفی توابع .parse و .stringfy
بررسی تافاوت json و object
بررسی تفاوت json و xml
بررسی انواع داده ها در json
ساخت فایل json
بررسی تفاوت sync و async
استفاده از callback در async
استفاده از promise در async
استفاده از await در async
معرفی ajax و api
بررسی تفاوت soap و Rest api
معرفی get در api
XmlHttpRequest
Promise
Fetch
Axios
معرفی ecmascript
نحوه array destructing
نحوه object destructing
نحوه import و expprt
استفاده از allias و * در import و export
معرفی مفاهیم شی گرایی و کلاس ها
ساخت کلاس در js
معرفی متغیر ها و توابع public و private
معرفی setter و getter
معرفی constructor
معرفی وراثت در شی گرایی
معرفی کلاس های static
معرفی jquery
نحوه دانلود و نصب jquery
استفاده از document.ready
آموزش selector ها در jquery
روبداد ها در jquery
Click
Dclick
Moueenter
Mouseleave
Hover
Focus
Blur
On
معرفی افکت ها
Show
Hide
Fadein
Fadeout
Fadetoggle
Fadeto
Slidedown
Slideup
Slidetoggle
انیمیشن در jquery
معرفی callback در jquery
نحوه استفاده از scroll در jquery
ساخت منو با jquery
معرفی addclass و Removeclass و hasclass
نمایش محتوا سایت با اسکرول
معرفی traversing در jquery
Parent
Parents
Parentuntil
Children
Find
Siblings
Next
Nextall
Nextuntil
Prev
Prevall
Prevuntil
First
Last
Eq
Filter
Not
معرفی ajax در jquery
آموزش ساخت json-server
پروژه وبسایت کامل با استفاده از js و jquery و api
معرفی کتابخانه react
دانشپذیران پس از پایان دوره و قبولی در ازمون، مدرک معتبر و قابل ترجمه رسمی مجتمع فنی تهران دریافت می نمایند.
عذرمیخوام گذروندن این دوره نیازمند پیش نیاز خاصی هست چون مبتدیم میرسم و در شغل یابی اوکی هستش؟
سلام دوباره دوره آموزشی برای web design pack میزارید ؟ چون شرایط تایمیم اصن به این دوره نمیخوره و اینکه مدرک این دوره پس از اتمام چجوریه؟
سلام برای اطلاع بیشتر میتونید با شماره ۰۲۱۲۶۱۲۱۱۰۷ تماس بگیرید