آکادمی برنامه نویسان

لوگو
ورود ثبت نام
بوت کمپ برنامه نویس شو
فاما سرور
کمپ آموزشی و پروژه محور Asp.Net Core (اجرای پروژه واقعی )

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

توضیحات دوره

یک وب سایت تشکیل شده است از تعدادی فایل با فرمت های مختلف که توسط مرورگرهایی همچون Firefox , Chrome و ... توسط کامپیوتر های شخصی، موبایل و یا تبلت بازدید می شوند. برای  پیاده سازی یک وب سایت دو بخش کلی برای کد نویسی وجود دارد که به یک بخش، سمت سرور (Server Side) و دیگری سمت کلاینت یا کاربر (Client Side)  گفته می شود. برای طراحی یک قالب، نیاز به دانستن موضوعاتی مانند: Html, Css می باشد.

شما در دوره طراحی سایت مدرن به صورت حرفه ای آموزش خواهید دید که چگونه یک قالب وب سایت را طراحی کنید.

پیش نیازها

این دوره پیش نیاز ندارد 

مخاطبان این دوره

  • دوستداران طراحی سایت
  • کسانی که سعی دارند ساخت صفحات وب را خودشان به عهده بگیرند

سرفصل دوره

html

  • آشنایی با 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
  •  

Tailwind Css

  • مقدمه ای بر tailwind
  • اصول طراحی واکنشگرا در tailwimd
  • variants
  • کاربا رنگ ها و اندازه ها
  • مفهوم کامپوننت واستفاده از آن
  • utilities
  • شخصی سازی
  • استفاده از فلکس باکس
  • استفاده از grid
  • پروژه عملی

 

اهداف این آموزش

  • تسلط به مباحث طراحی سایت
  • آشنایی با تکنولوژی های مدرن حوزه طراحی سایت

 

https://barnamenevisan.info/c/QXR