آموزش برنامه نویسی مقدماتی وب

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

در این دوره، ابتدا با نگرشی متفاوت ساختار سیستم های کامپیوتری را مورد بررسی قرار می دهیم تا بتوانیم نحوه ارتباط بین اجزای مختلف را درک کنیم. سپس زبانهای برنامه نویسی و تفاوتهای موجود بین آنها را مورد ارزیابی قرار می دهیم و با کلیات تکنولوژی های مرسوم آشنا می شویم. در گام بعدی روش های حل مسئله و الگوریتم را مورد بررسی قرار خواهیم داد.

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

نام دوره :

• دوره مقدماتی برنامه نویسی

پیش نیاز:

• آشنایی با مهارت های کامپیوتر

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

• علاقمندان به درک عمیق تر دنیای برنامه نویسی

سر فصل های دوره :

طراحی وب با HTML

• درس اول: مقدمات HTML
  • معرفی HTML
  • شروع کار با HTML
  • مفهوم تگ یا نشانه
  • تگ html
  • تگ head
  • تگ body
  • تگ meta و استفاده از آن برای تعیین Encoding صفحه
  • تگ title و مزایا و نقش آن در SEO
  • معرفی مفهوم SEO یا Search Engine Optimization
  • تگ p برای ایجاد پاراگراف
  • معرفی خصوصیت style و مفهوم آن
  • معرفی خصوصیات مهم موجود در Style از قبیل font-size, width, height, color, background-color, background-image, font-weight, text
  • align, direction و …
  • معرفی تگ‌های Heading و نقش آن در SEO
  • معرفی تگ span
  • معرفی موجودیت (Entity) ها در HTML از جمله برای فاصله گذاری
  • معرفی تگ br
• درس دوم: تگ های Text Formatting
  • تگ b
  • تگ i
  • تگ u
  • تگ strong و نقش آن در SEO
  • تگ em و مفهوم آن
  • اشاره ای به وب معنایی
  • تگ های big, small, del, ins, mark, sup, sub, blockquote, q , abbr, address, cite, samp, code, kbd, code, pre, var
• درس سوم: Link Building
  • معرفی تگ a و خصوصیت href برای ایجاد لینک
  • انواع آدرس دهی و تفاوت آن ها
  • نکات مربوط به SEO
  • خصوصیت title
  • خصوصیت target
  • ایجاد Bookmark با استفاده از تگ a و خصوصیت name
• درس چهارم: عکس ها در صفحه وب
  • معرفی تگ img و خصوصیت src
  • معرفی خصوصیات title و alt
  • گذاشتن عکس در لینک و استفاده از خصوصیات مربوط به border
  • استفاده از map به منظور ایجاد چند ناحیه قابل کلیک در یک عکس
• درس پنجم: مروری بر CSS
  • بررسی اشکالات گذاشتن Style به صورت inline
  • معرفی تگ style
  • مفهوم انتخاب گر یا selector در CSS و بررسی چند selector از قبیل id و class
  • معرفی Style به صورت external و معرفی مفهوم CSS و تگ link
• درس ششم: لیست ها
  • تگ ol و لیست مرتب
  • تگ ul و لیست نامرتب
  • معرفی خصوصیات type و start
  • تعیین عکس به عنوان bullet برای لیست
• درس هفتم: جدول
  • معرفی تگ table
  • استفاده از تگ های tr و td در جدول
  • خصوصیات border, align, valign, width, colspan, row
  • تگ های colgroup, tfoot, thead, tbody
• درس هشتم: تگ div
  • معرفی مفهوم و موارد استفاده تگ div
  • کنار هم چیدن div ها برای قالب بندی صفحه
  • مفهوم position و مختصات left و top
  • مفهوم float
  • قالب بندی یک صفحه با div
  • مفهوم clear
• درس نهم: فرم در صفحه وب
  • تگ form
  • کنترل های فرم برای برنامه نویسی در html4 و html5
  • تگ های input با انواع button, text, checkbox, radio, submit , reset, password, number, color, date, range
  • تگ textarea
  • تگ select و option برای ایجاد Dropdown
  • تگ datalist
• درس دهم: مدیا در صفحه وب
  • معرفی تگ video و source برای گذاشتن ویدیو در صفحه وب
  • معرفی تگ audio
  • تگ object
  • تگ embed
• درس یازدهم: تگ های درون head و مفهوم DOCTYPE
  • معرفی انواع تگ های meta
  • تگ base
  • مفهوم DOCTYPE و معرفی انواع نسخه HTML
• درس دوازدهم: مروری مختصر بر رنگ ها

طراحی وب با CSS

• کار با CSS
•  CSS را کجا و چطور بنویسیم
• انتخابگرها (Selectors)
• رنگ‌ها در CSS
• پس‌زمینه در CSS
• جعبه‌ها، کادرها و حاشیه‌ها
• تنظيمات متن و بلاک‌های متنی
• استفاده از فونت‌ها در CSS
• نمايش بلاک‌های متنی در صفحه
• ليست‌ها در CSS
• تنظيمات جداول در CSS
• انتخابگرها و ترکيب‌کننده‌ها
• جلوه‌های دوبعدی و سه‌بعدی Transition
• پویانمایی در CSS
• طراحی واکنشگرا (Media Query)
• چینش صفحه با FlexBox
• چینش صفحه با Gride

Bootstrap 5

• شروع به کار
• چیدمان و Layout

• آشنایی با شبکه Grid
• نحوه تعریف ستون‌ها، مقداردهی اندازه هر ستون و کلاس‌های کمکی

• امکانات کار با محتوا

• کلاس‌های کار با نوشته‌ها و تایپوگرافی، هدینگ‌ها و پاراگراف‌ها
• کلاس‌های کار با نوشته‌ها و تایپوگرافی، ویژگی‌های متون
• کار با تصاویر و جداول
• کلاس‌های کمکی کار با Figureها

• فصل پنجم: فرم‌ها

• کلاس Inputهای فرم، کنترل‌های پایه، متن و فایل
• کلاس Inputهای فرم و کنترل‌های انتخابگر
• آشنایی با Input Group و ایجاد آن
• آشنایی با Input Group، تنظیمات و سایزبندی آن
• آشنایی با اعتبارسنجی فرم‌ها

• کامپوننت‌ها

• آکاردئون‌ها
• هشدارها
• کار باBadge و Breadcrumb
• کار با دکمه‌ها و Button Group
• کار با Card
• آشنایی و کار با Carousel
• کار با Close Button و Collapse
• کار با Dropdowns
• کار با List Group
• کار با Modal
• : کار با Tab
• کار با Navbar
• کار با Offcanvas و Pagination
• کار با Popovers و Progress
• کار با Spinners
• کار با Toasts
• کار با Scrollspy

• آشنایی و کار با کلاس‌های کمکی یا Helper

• کلاس‌های کمکی پایه
• رنگ‌بندی، حاشیه و موقعیت‌دهی

• آشنایی و کار با Utilities

• حاشیه و فاصله
• رنگ‌بندی متون و نمایش
• چیدمان، ترازبندی و Flex
• کلاس‌های کمکی کار با متون