HTML & CSS (Web Design I)

در دنیای دیجیتال امروز، طراحی وب به یک مهارت‌ ضروری تبدیل شده است. آموزش HTML CSS به عنوان پایه و اساس این مهارت، به یادگیری نحوه ساخت و طراحی وب‌سایت‌ها کمک می‌کند. HTML (زبان نشانه‌گذاری Hypertext) ساختار صفحات وب را تعریف می‌کند، در حالی که CSS (زبان شیوه‌نامه آبشاری) به ما این امکان را می‌دهد که ظاهر و زیبایی صفحات را بهبود بخشیم. با یادگیری این دو زبان، شما می‌توانید وب‌سایت‌های جذاب و کاربر پسند طراحی کنید.

قیمت دوره

7,000,000 تومان

برای دریافت مشاوره با ما در ارتباط باشید.

پرداخت درب منزل

بعد از دریافت سفارش

تضمین قیمت محصولات

کمترین قیمت در سطح اینترنت

امکان مرجوع کردن سفارش

در صورت عدم رضایت

تضمین کیفیت و اصالت

فروش مستقیم از شرکت

ارسال سریع سفارشات

با پست پیشتاز

توضیحات دوره

در دنیای دیجیتال امروز، طراحی وب به یک مهارت‌ ضروری تبدیل شده است. آموزش HTML CSS به عنوان پایه و اساس این مهارت، به یادگیری نحوه ساخت و طراحی وب‌سایت‌ها کمک می‌کند. HTML (زبان نشانه‌گذاری Hypertext) ساختار صفحات وب را تعریف می‌کند، در حالی که CSS (زبان شیوه‌نامه آبشاری) به ما این امکان را می‌دهد که ظاهر و زیبایی صفحات را بهبود بخشیم. با یادگیری این دو زبان، شما می‌توانید وب‌سایت‌های جذاب و کاربر پسند طراحی کنید.

شرکت در دوره HTML-CSS می‌تواند به شما کمک کند تا مهارت‌های مورد نیاز برای ورود به دنیای طراحی وب را کسب کنید. آموزش HTML CSS معمولاً شامل آموزش‌های عملی و پروژه‌های واقعی هستند که به شما فرصتی می‌دهند تا آموخته‌های خود را در عمل پیاده‌سازی کنید. در ادامه به بررسی اهمیت یادگیری آموزش HTML CSS و روش‌های مؤثر آموزش این دو زبان خواهیم پرداخت و به شما کمک خواهیم کرد تا قدم اول را در مسیر طراحی وب بردارید.

اگر شما می‌توانید ساعات زیادی را با کامپیوتر بگذرانید، کمی استعداد طراحی و گرافیکی دارید، از انجام کارهای خلاقانه لذت می‌برید، شغل طراحی وب سایت مناسب شماست. طراحان سایت معمولاً افراد با تلاشی هستند و باید ساعات زیادی از روز را پای سیستم بگذرانند.
هر روز با چالش‌هایی روبه‌رو می‌شوند که ممکن است بسیاری از آنها را قبلاً تجربه نکرده‌ باشند. بنابراین اگر می‌خواهید طراح وب سایت باشید باید روحیه‌ی شکست ناپذیری را در خود تقویت نمایید.
شما با شرکت در این دوره اولین قدم برای یادگیری طراحی وب را برداشته اید. چرا که در دنیای وب سایت ها همه چی با HTML و CSS شروع و پایان می یابد. یادگیری این دوره دروازه ای برای ورود به شاخه هایی همچون سئو و بهینه سازی وب سایت و یادگیری یک زبان برنامه نویسی وب مانند PHP و JS می باشد.

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

اطلاعات دوره

نوع دورهآنلاین, حضوری
نوع پرداختقسطی, نقدی
مدت دوره60 ساعت
روز برگزاریروزهای زوج
ساعت برگزاری17:30-20:30
تاریخ پیش بینی شروع کلاس1405/04/01
نحوه برگزاریحضوری - آنلاین
پیش نیازدارد
پیش نیاز هامبانی کامپیوتر
گواهی دورهدارد
استاداستاد تعیین نشده است

سایر زمان‌های برگزاری

روز برگزاری ساعت برگزاری تاریخ شروع استاد نحوه برگزاری عملیات
پنجشنبه09:00-14:001405/03/28حضوری - آنلاین مشاهده دوره
یکشنبه-سه شنبه17:30-20:301405/04/14حضوری - آنلاین مشاهده دوره
سرفصل ها
عناوین درس توضیحات درس
معرفی مفاهیم پایه طراحی وب
  • بررسی مفهم 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 به صفحات وب
  • نحوه خرید دامنه و هاست
پیش نیاز ها
  • گذراندن دوره ICDL برای ورود به این دوره الزامی است.
آینده شغلی
  • با ورود فروش آنلاین در ایران و استفاده از سایت‌ها و ایجاد کسب و کارهای غیر حضوری، شغل‌های جدیدی نیز ایجاد شدند. یکی از این شغل‌ها طراحی سایت است. شما با یادگیری طراحی سایت می توانید برای شرکت های طراحی وب یا در بخش های فناوری اطلاعات سازمانهای بزرگ دولتی و شرکت های خصوصی و یا به طور مستقل کار کنید. اگر در یک شرکت مشغول باشید، می توانید تا سمت های مدیریت تیم طراحی یا مدیر محتوای سایت پیشرفت کنید و با کسب تجربه بیشتر می توانید برای خود در این حوزه کسب و کاری راه اندازی کنید.

نظرات کاربران

نقد و بررسی‌ها

هنوز بررسی‌ای ثبت نشده است.

اولین کسی باشید که دیدگاهی می نویسد “HTML & CSS (Web Design I)”

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوره های مشابه