دوره آموزشی HTML و CSS: ساخت وبسایتهای واکنشگرا و واقعی - آخرین آپدیت
دانلود HTML and CSS Masterclass: Build Responsive Real-World Websites
دوره آموزشی HTML & CSS: ساخت وبسایتهای واکنشگرا و واقعی
ساخت وبسایتهای واکنشگرا و واقعی با HTML و CSS، CSS Flexbox و CSS Grid به همراه پروژههای عملی و تمرینها
آیا آمادهاید تا HTML & CSS را فرا بگیرید و وبسایتهای شگفتانگیز و واکنشگرا بسازید؟ چه مبتدی باشید و چه به دنبال تقویت مهارتهای توسعه وب خود هستید، این دوره نقطه شروع عالی است.
HTML & CSS پایه و اساس هر وبسایتی در اینترنت هستند. با این دوره، یاد خواهید گرفت که چگونه با استفاده از جدیدترین تکنیکها، از جمله CSS Flexbox و CSS Grid، وبسایتهای مدرن و واقعی ایجاد کنید. همچنین بر روی سه پروژه عملی کار خواهید کرد تا آموختههای خود را به کار ببرید و تجربه عملی کسب کنید.
آنچه یاد خواهید گرفت
-
تسلط بر HTML & CSS از ابتدا – یادگیری بلوکهای اصلی توسعه وب.
-
ساخت 3 پروژه واقعی – کسب تجربه عملی با توسعه وبسایتهای کاملاً کاربردی و واکنشگرا.
-
ایجاد چیدمانهای انعطافپذیر با Flexbox & CSS Grid – تسلط بر تکنیکهای چیدمان مدرن برای طراحی وب پویا.
-
بهبود وبسایتها با انیمیشنها و Transition ها – جذاب کردن وبسایتهای خود با انیمیشنهای CSS، keyframes، transition و transforms.
-
درک مفاهیم اصلی توسعه وب
-
فرمهای HTML، رسانهها و تگها
-
نحو CSS، انتخابگرهای ID و Class
-
انتخابگرها، انتخابگرهای شبه و عناصر معنایی
-
مدل Box CSS: Padding، Border و Margin
-
Positioning، Display، Float و موارد دیگر
-
فونتها، رنگها و تکنیکهای استایلدهی
-
Media Queries برای واکنشگرایی موبایل
چرا HTML & CSS را یاد بگیریم؟
HTML & CSS مهارتهای ضروری برای هر کسی هستند که به توسعه وب علاقهمند است. با یادگیری این فناوریها، میتوانید:
-
وبسایتهای خود را بسازید – ایجاد وبسایتهای شخصی، تجاری یا نمونه کارها از ابتدا.
-
شروع یک حرفه در توسعه وب – کسب مهارتهای لازم برای نقشهای توسعه فرانتاند.
-
واکنشگرا کردن وبسایتها – اطمینان از نمایش عالی وبسایتها در همه دستگاهها، از دسکتاپ تا گوشیهای هوشمند.
-
سفارشیسازی و بهبود صفحات وب – تغییر وبسایتهای موجود با استایلها و جلوههای خودتان.
چه کسانی باید در این دوره شرکت کنند؟
-
افراد کاملاً مبتدی بدون هیچگونه تجربه قبلی در توسعه وب.
-
توسعهدهندگان وب مشتاق که به دنبال ایجاد یک پایه قوی هستند.
-
طراحانی که میخواهند طرحهای خود را با کد به اجرا درآورند.
-
هر کسی که میخواهد وبسایتهای حرفهای و واکنشگرا ایجاد کند.
در پایان این دوره، شما:
-
قادر خواهید بود وبسایتهای زیبا و واکنشگرا را از ابتدا بسازید.
-
درک خواهید کرد که چگونه صفحات وب را با HTML ساختار دهید.
-
بر CSS مسلط خواهید شد تا وبسایتهای خود را به صورت حرفهای استایلدهی و چیدمان کنید.
-
با کار بر روی پروژههای واقعی، تجربه عملی کسب خواهید کرد.
-
آماده خواهید بود تا به JavaScript، React و توسعه فولاستک پیشرفت کنید.
چرا صبر کنیم؟ همین حالا شروع کنید!
به هزاران دانشآموز در سراسر جهان بپیوندید و اولین قدم خود را به سوی تبدیل شدن به یک توسعهدهنده وب بردارید. امروز در کلاس من شرکت کنید و شروع به ساخت وبسایتهای واقعی و واکنشگرا با HTML & CSS کنید!
دانلود فایلهای منبع: https://drive.google.com/drive/folders/1n2sxC26X3AJ2g80azG1XKyou0Fpm-8W1?usp=sharing
Lessons-درسها Lessons
-
Welcome to HTML and CSS Masterclass-خوش آمدید به کلاس ارشد HTML و CSS Welcome to HTML and CSS Masterclass
-
Getting Started-شروع کار Getting Started
-
What is Web Development?-وب توسعه چیست؟ What is Web Development?
-
How to download and install text editor (VSCode)-چگونه ویرایشگر متن (VSCode) را دانلود و نصب کنیم How to download and install text editor (VSCode)
-
Navigating VSCode interface-مرور رابط کاربری VSCode Navigating VSCode interface
-
Install and download browser-نصب و دانلود مرورگر Install and download browser
-
Install and understand HTML and CSS extensions-نصب و درک افزونههای HTML و CSS Install and understand HTML and CSS extensions
-
How to create HTML and CSS files and folder-چگونه فایلها و پوشههای HTML و CSS را ایجاد کنیم How to create HTML and CSS files and folder
-
What is HTML-HTML چیست What is HTML
-
HTML documents-مدارک HTML HTML documents
-
Continuation on HTML documents-ادامه مدارک HTML Continuation on HTML documents
-
HTML Tags-تگهای HTML HTML Tags
-
Continuation on HTML Tags-ادامه تگهای HTML Continuation on HTML Tags
-
Links-پیوندها Links
-
Images-تصاویر Images
-
Lists-لیستها Lists
-
Tables-جداول Tables
-
HTML forms-فرمهای HTML HTML forms
-
HTML Media-رسانههای HTML HTML Media
-
Continuation on HTML Media-ادامه رسانههای HTML Continuation on HTML Media
-
Button-دکمه Button
-
Comments-نظرات Comments
-
HTML Semantic Elements-عناصر معنایی HTML HTML Semantic Elements
-
What is CSS-CSS چیست؟ What is CSS
-
Types of CSS-انواع CSS Types of CSS
-
CSS Syntax-ساختار CSS CSS Syntax
-
CSS Comments-نظرات CSS CSS Comments
-
Universal Selector-انتخابگر سراسری Universal Selector
-
Element Selector-انتخابگر عنصر Element Selector
-
Class Selector-انتخابگر کلاس Class Selector
-
ID Selector-انتخابگر شناسه (ID) ID Selector
-
Grouping Selector-انتخابگر گروهبندی Grouping Selector
-
Descendant Selector-انتخابگر فرزند Descendant Selector
-
Pseudo-classes Selectors-انتخابگرهای شبهکلاس Pseudo-classes Selectors
-
Continuation on Pseudo-classes Selectors-ادامه انتخابگرهای شبهکلاس Continuation on Pseudo-classes Selectors
-
CSS Units-واحدهای CSS CSS Units
-
Font Styling-استایلدهی فونت Font Styling
-
Font Color-رنگ فونت Font Color
-
Background Styling-استایلدهی پسزمینه Background Styling
-
12 CSS Box Model (Padding, Border and Margin)-مدل جعبه CSS (Padding, Border و Margin) 12 CSS Box Model (Padding, Border and Margin)
-
Display Property-ویژگی Display Display Property
-
Float, Clear and Overflow-Float، Clear و Overflow Float, Clear and Overflow
-
Positioning-موقعیتیابی Positioning
-
Continuation on Positioning-ادامه موقعیتیابی Continuation on Positioning
-
Transformation-تبدیل (Transformation) Transformation
-
Transition-انتقال (Transition) Transition
-
Animation-انیمیشن Animation
-
CSS Flexbox Vs CSS Grid-مقایسه Flexbox و Grid در CSS CSS Flexbox Vs CSS Grid
-
Introduction to Flexbox-مقدمهای بر Flexbox Introduction to Flexbox
-
Responsive Flexbox-Flexbox واکنشگرا Responsive Flexbox
-
Completion on Flexbox-تکمیل Flexbox Completion on Flexbox
-
CSS Grid-Grid در CSS CSS Grid
-
Continuation on CSS Grid-ادامه Grid در CSS Continuation on CSS Grid
-
Project 1 - Building a Travel Website-پروژه 1 - ساخت وبسایت مسافرتی Project 1 - Building a Travel Website
-
Creating the Hero Section Content-ایجاد محتوای بخش هیرو (Hero) Creating the Hero Section Content
-
Making the Website Responsive-واکنشگرا کردن وبسایت Making the Website Responsive
-
Project 2 - Building a Photo Gallery Website-پروژه 2 - ساخت وبسایت گالری عکس Project 2 - Building a Photo Gallery Website
-
Building the Hero Section of Photo Gallery Website-ساخت بخش هیرو (Hero) وبسایت گالری عکس Building the Hero Section of Photo Gallery Website
-
Structuring the Gallery Layout-ساختاربندی چیدمان گالری Structuring the Gallery Layout
-
Animation of the Website Hero Section-انیمیشن بخش هیرو (Hero) وبسایت Animation of the Website Hero Section
-
Building the Gallery Website Footer-ساخت فوتر (Footer) وبسایت گالری Building the Gallery Website Footer
-
Responsiveness of Photo Gallery Website - Part 6-واکنشگرایی وبسایت گالری عکس - بخش 6 Responsiveness of Photo Gallery Website - Part 6
-
Conclusion of Photo Gallery Website-نتیجهگیری وبسایت گالری عکس Conclusion of Photo Gallery Website
-
Project 3 - Building an Architecture Agency Website-پروژه 3 - ساخت وبسایت آژانس معماری Project 3 - Building an Architecture Agency Website
-
Creating the Hero Section Content-ایجاد محتوای بخش هیرو (Hero) Creating the Hero Section Content
-
Creating the first section-ایجاد اولین بخش Creating the first section
-
Creating the images section-ایجاد بخش تصاویر Creating the images section
-
Creating the form section-ایجاد بخش فرم Creating the form section
-
Creating the footer section-ایجاد بخش فوتر Creating the footer section
-
completing the footer section-تکمیل بخش فوتر completing the footer section
-
Website Animation-انیمیشن وبسایت Website Animation
-
Website Responsive Design-طراحی واکنشگرا وبسایت Website Responsive Design
-
Conclusion of the Architectural Website-نتیجهگیری وبسایت معماری Conclusion of the Architectural Website
Quadri Ilebiyi
نمایش نظرات