سرفصل Web Design I
نوع اجرا : حضوری و آنلاین
پیشنیاز : آشنایی با کامپیوتر
مدرک : مجتمع فنی تهران
اگر شما میتوانید ساعات زیادی را با کامپیوتر بگذرانید، کمی استعداد طراحی و گرافیکی دارید، از انجام کارهای خلاقانه لذت میبرید، شغل طراحی وب سایت مناسب شماست. طراحان سایت معمولاً افراد با تلاشی هستند و باید ساعات زیادی از روز را پای سیستم بگذرانند.هر روز با چالشهایی روبهرو میشوند که ممکن است بسیاری از آنها را قبلاً تجربه نکرده باشند. بنابراین اگر میخواهید طراح وب سایت باشید باید روحیهی شکست ناپذیری را در خود تقویت نمایید.شما با شرکت در این دوره اولین قدم برای یادگیری طراحی وب را برداشته اید. چرا که در دنیای وب سایت ها همه چی با HTML و CSS شروع و پایان می یابد. یادگیری این دوره دروازه ای برای ورود به شاخه هایی همچون سئو و بهینه سازی وب سایت و یادگیری یک زبان برنامه نویسی وب مانند PHP و JS می باشد.
با پیشرفت فناوری اطلاعات، عده کثیری به سمت کار با کامپیوتر و گذراندن وقت با آن روی آوردهاند. طراحی صفحات وب یکی از مهمترین مهارتها در دنیای فناوری اطلاعات است. این مهارت شامل دورههای مختلفی بوده و گذراندن آموزش HTML CSS به عنوان دوره بیس و پایه، میتواند کمک کننده باشد. HTML به وسیله روشهای نشانه گذاری و تگها، توانایی طراحی سایت را در اختیار دانشجویان قرار میدهد. در نهایت CSS به کمک آمده تا تنظیمات و ویرایشهایی را بر روی تگهای html به کار برد.
سرفصل دوره
معرفی مفاهیم پایه طراحی وب
آشنایی با مفهوم و تاریخچه وب و زیرساختهای نرم افزاری و سخت افزاری لازم برای ایجاد، استقرار و نگهداری وب سایت هامعرفی مفاهیم شبکه ای مرتبط با وب مانند Domain،Host،Web Server،DNS Server
بررسی مفهم 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
• معرفی CSS
معرفی تگ 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
flec-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
align-self
order
flex-grow
flex-shrink
flex
معرفی media query و ساخت صفحات responsive
معرفی srcset و x-descriptor و w-descriptor
معرفی تگ picture
معرفی owl carousel
پروژه تبدیل UI به صفحات وب
نحوه خرید دامنه و هاست
بازار کار:
با ورود فروش آنلاین در ایران و استفاده از سایتها و ایجاد کسب و کارهای غیر حضوری، شغلهای جدیدی نیز ایجاد شدند. یکی از این شغلها طراحی سایت است. شما با یادگیری طراحی سایت می توانید برای شرکت های طراحی وب یا در بخش های فناوری اطلاعات سازمانهای بزرگ دولتی و شرکت های خصوصی و یا به طور مستقل کار کنید. اگر در یک شرکت مشغول باشید، می توانید تا سمت های مدیریت تیم طراحی یا مدیر محتوای سایت پیشرفت کنید و با کسب تجربه بیشتر می توانید برای خود در این حوزه کسب و کاری راه اندازی کنید.
مهارت های کسب شده پس از طی دوره :
ایجاد آمادگی لازم برای یادگیری یک زبان برنامه نویسی وب
تسلط بر اینترنت و مفاهیم وب
ایجاد آمادگی به منظور خلق وب سایت هایی با طراحی جدید و بروز
یادگیری یک سایت کاملا واکنش گرا و سازگار با انواع دیوایس های مختلف
بهروز بودن و توانایی بهروز نگه داشتن دانش خود
دانشپذیران پس از اتمام دوره و ارائه پروژه ،مدرک مجتمع فنی تهران دریافت مینمایند .
سرفصل های آموزشی رو از کجا میشه دید؟
سلام سرفصل دوره بالا درج شده شما در دوره Web Design I
HTML5 و CSS آموزش میبینید
سرفصل کلاس چی هست؟
سلام web Design I
شامل آموزش HTMLو CSS میباشد سرفصل دوره در بالای دوره درج شده است
میشه بفرمایید منظور از web1 چیه؟ دقیقا چه مباحثی تدریس میشه؟
امکان برگزاری آنلاین این دوره هست؟ چون شرایط شرکت کردن حضوری رو ندارم اصن
سلام وقت بخیر دوره بصورت حضوری و آنلاین اجرا میگردد.