| معرفی مفاهیم پایه طراحی وب |
- بررسی مفهم 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()
- آموزش وسط چین کردن تگ ها
- معرفی 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 به صفحات وب
- نحوه خرید دامنه و هاست
|
