نکته:
ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:
دوره تکنیکهای پیشرفته CSS و طراحی ریسپانسیو برای مبتدیانی طراحی شده است که میخواهند یاد بگیرند چگونه یک صفحه وب ایجاد کنند، حتی اگر هیچ تجربه قبلی در کدنویسی نداشته باشند. شما یاد خواهید گرفت که چگونه محتوا را با استفاده از HTML ساختاردهی کنید، سایت خود را با CSS استایلدهی کنید و اصول طراحی ریسپانسیو را با بوتاسترپ (Bootstrap) پیادهسازی کنید؛ و همه اینها را در حالی انجام میدهید که یک صفحه وب واقعی و قابل اشتراک را از صفر میسازید.
در ماژول اول، مبانی HTML از جمله ساختار سند، تگهای ضروری و نحوه سازماندهی محتوا برای وضوح و دسترسیپذیری را بررسی خواهید کرد. شما یاد میگیرید چگونه از HTML برای ایجاد عناوین، لیستها، تصاویر، لینکها، جداول و فرمها استفاده کنید و اهمیت کدنویسی تمیز و تو در تو را درک کنید.
ماژول دوم بر CSS تمرکز دارد و به شما میآموزد که چگونه صفحه وب خود را با استفاده از انتخابگرها، ویژگیها و قابلیتهای پیشرفتهای مانند Flexbox و Grid استایلدهی و قالببندی کنید. شما بر کنترل چیدمان، تایپوگرافی و رنگها مسلط خواهید شد و خواهید دید که چگونه CSS میتواند یک صفحه ساده HTML را به یک وبسایت جذاب بصری تبدیل کند.
ماژول نهایی، بوتاسترپ را معرفی میکند؛ یک فریمورک قدرتمند برای ساخت وبسایتهای ریسپانسیو و سازگار با موبایل. شما با اجزای پیشساخته، سیستم شبکهبندی (Grid) و ابزارهای بوتاسترپ کار خواهید کرد تا چیدمانهای حرفهای ایجاد کنید که با هر دستگاهی سازگار باشد. در پایان، شما یک صفحه وب مدرن و کاملاً کاربردی خواهید داشت و مهارتهای پایهای را برای شروع یک وبسایت یا ادامه مسیر توسعه وب کسب خواهید کرد.
در پایان این دوره، شما با اعتماد به نفس کامل قادر خواهید بود:
۱. صفحات وب را با استفاده از تگها، المانها و ویژگیهای HTML بسازید و ساختاردهی کنید.
۲. صفحه وب خود را با CSS از نظر چیدمان، رنگها و تایپوگرافی استایلدهی کنید.
۳. وبسایتهای ریسپانسیو و حرفهای را با استفاده از اجزا و سیستم گرید بوتاسترپ ایجاد کنید.
۴. بهترین شیوههای طراحی وب را برای اطمینان از جذابیت بصری و دسترسیپذیری سایت به کار ببرید.
۵. یک صفحه وب واقعی و فعال را به عنوان بخشی از پورتفولیو یا حضور آنلاین خود به اشتراک بگذارید.
این دوره برای افرادی ایدهآل است که:
- به دنبال یک معرفی گامبهگام و عملی برای یادگیری نحوه ساخت صفحه وب، HTML و CSS هستند.
- در توسعه وب تازهکار هستند و مشتاقاند مهارتهای دیجیتال بنیادی را بیاموزند.
- یادگیری از طریق انجام پروژه و بهکارگیری دانش در پروژههای واقعی را ترجیح میدهند.
- برای رشد شخصی، تحصیلی یا حرفهای در حال بررسی طراحی وب هستند.
این دوره به شما قدرت میدهد تا یک وبسایت را شروع کنید، یک صفحه وب را کدنویسی کنید و اعتماد به نفس خود را با مهارتهای دیجیتال کاربردی و مورد نیاز دنیای آنلاین امروز افزایش دهید.
سلب مسئولیت: این یک منبع آموزشی مستقل است که توسط Board Infinity تنها برای مقاصد اطلاعرسانی و آموزشی ایجاد شده است. این دوره با هیچ شرکت، سازمان یا نهاد صدور گواهینامهای وابسته، تایید شده یا حمایت نشده است، مگر اینکه صراحتاً ذکر شده باشد. محتوای ارائه شده بر اساس دانش صنعت و بهترین شیوهها است اما به عنوان متریال آموزشی رسمی برای هیچ کارفرما یا برنامه گواهینامه خاصی محسوب نمیشود. تمامی نامهای شرکتها، علائم تجاری و لوگوهای ذکر شده متعلق به مالکان مربوطه است و صرفاً برای شناسایی آموزشی و مقایسه استفاده شده است.
سرفصل ها و درس ها
مقدمهای بر HTML
Introduction to HTML
آنچه در این درس خواهید آموخت
What you will learn in this Lesson
مقدمهای بر توسعه وب
Introduction to Web Development
HTML چیست؟
What is HTML?
آنچه در این درس خواهید آموخت
What you will learn in this Lesson
تگهای HTML
HTML Tag
تگهای قالببندی HTML
Formatting HTML Tag
فرمها و تگهای ورودی (Input)
Forms and Input Tags
تگ Iframe
Iframe Tag
تگ تصویر (Image)
Image Tag
تگ ویدیو
Video Tag
تگ صوتی (Audio)
Audio Tag
تگهای لیست
List Tag
تگهای جدول
Table Tags
تگهای معنایی (Semantic) و غیرمعنایی
Semantic Tags and Non- Semantic Tags
تگ Meta
Meta Tag
مقدمهای بر CSS
Introduction to CSS
آنچه در این درس خواهید آموخت
What you will learn in this Lesson
CSS چیست؟
What is CSS?
سینتکس (نحو) CSS
CSS Syntax
انتخابگرهای ساده CSS
CSS Simple Selector
انتخابگرهای ترکیبی CSS - بخش اول
CSS Combined Selectors - Part 1
انتخابگرهای ترکیبی CSS - بخش دوم
CSS Combined Selectors - Part 2
آنچه در این درس خواهید آموخت
What you will learn in this Lesson
انتخابگرهای Pseudo class - بخش اول
Pseudo-class selectors - Part 1
انتخابگرهای Pseudo class - بخش دوم
Pseudo-class selectors - Part 2
المانهای Pseudo
Pseudo Elements
انتخابگرهای Attribute
Attribute Selectors
آنچه در این درس خواهید آموخت
What you will learn in this Lesson
ویژگیهای فونت در CSS
CSS Fonts property
موقعیتها (Positions) در CSS
CSS Positions
ویژگی Float در CSS
CSS Float
ویژگی Display در CSS
CSS Display
واحدهای اندازهگیری CSS
CSS Units
آنچه در این درس خواهید آموخت
What you will learn in this Lesson
رنگها در CSS
CSS Colors
رنگهای پسزمینه در CSS
CSS Background Colors
مدل جعبهای (Box Model) در CSS
CSS Box Model
سایزبندی جعبه (Box Sizing) در CSS
CSS Box-Sizing
استایلدهی جداول در CSS
CSS Style Table
آیکونها در CSS
CSS Icons
سیستم CSS Display Grid - بخش اول
CSS Display Grid - Part 1
سیستم CSS Display Grid - بخش دوم
CSS Display Grid - Part 2
نوار ناوبری (Navigation Bar) با CSS
CSS Navigation Bar
منوهای کشویی (Dropdowns) با CSS
CSS Dropdowns
گالری تصاویر و Spriteها در CSS
CSS Image Gallery and Sprites
استایلدهی تصاویر و انعکاس تصاویر در CSS
CSS Styling Images & Image Reflections
فرمها در CSS
CSS Forms
افکتهای متنی در CSS
CSS Text Effects
ویژگیهای Object Fit و Position در CSS
CSS Object Fit & Position
آنچه در این درس خواهید آموخت
What you will learn in this Lesson
سیستم Flexbox در CSS - بخش اول
CSS Flexbox - Part 1
سیستم Flexbox در CSS - بخش دوم
CSS Flexbox - Part 2
گرادینتها (Gradient) در CSS
CSS Gradient
تبدیلات دو بعدی و سه بعدی (2D & 3D Transform) در CSS
CSS 2D & 3D Transform
انتقالها (Transitions) در CSS
CSS Transitions
انیمیشنها در CSS
CSS Animation
پرسوجوهای رسانهای (Media Queries) در CSS
CSS Media Queries
صفحهبندی (Pagination) با CSS
CSS Pagination
ستونهای چندگانه در CSS
CSS Multiple Columns
متغیرهای CSS
CSS Variables
مقدمهای بر بوتاسترپ
Introduction to Bootstrap
آنچه در این درس خواهید آموخت
What you will learn in this Lesson
مقدمهای بر بوتاسترپ (Bootstrap)
Introduction to Bootstrap
رنگها در بوتاسترپ
Bootstrap Colors
کانتینرها در بوتاسترپ
Bootstrap Containers
ستونها در بوتاسترپ
Bootstrap columns
ویژگی Display در بوتاسترپ - بخش اول
Bootstrap Display - Part 1
ویژگی Display در بوتاسترپ - بخش دوم
Bootstrap Display - Part 2
آنچه در این درس خواهید آموخت
What you will learn in this Lesson
تصاویر در بوتاسترپ
Bootstrap Images
دکمهها در بوتاسترپ
Bootstrap Buttons
فاصلهگذاریها در بوتاسترپ
Bootstrap Spacing
آنچه در این درس خواهید آموخت
What you will learn in this Lesson
کاروسل (Carousel) در بوتاسترپ
Bootstrap Carousel
نوار ناوبری (NavBar) در بوتاسترپ
Bootstrap NavBar
کارتها (Cards) در بوتاسترپ
Bootstrap Cards
بجها و نوار پیشرفت (Progress bar) در بوتاسترپ
Bootstrap Badges & Progress bar
صفحهبندی (Pagination)
Pagination
منوهای کشویی در بوتاسترپ
Bootstrap Dropdowns
مدالها (Modal) در بوتاسترپ
Bootstrap Modal
تولتیپ و پاپاوور در بوتاسترپ
Bootstrap Tooltip & Popover
ویژگی Scrollspy در بوتاسترپ
Bootstrap Scrollspy
ساخت پروژه بخش اول: شبیهساز اینستاگرام
Project Building Part 1: Instagram Clone
ساخت پروژه بخش دوم: شبیهساز اینستاگرام
Project Building Part 2: Instagram Clone
ساخت پروژه بخش سوم: شبیهساز اینستاگرام
Project Building Part 3: Instagram Clone
ساخت پروژه بخش چهارم: شبیهساز اینستاگرام
Project Building Part 4: Instagram Clone
ساخت پروژه بخش پنجم: شبیهساز اینستاگرام
Project Building Part 5: Instagram Clone
نمایش نظرات