مطالب پیشنهادی از سراسر وب

آموزش کامل HTML5 و  CSS3 - بخش دوم (Code with Mosh)

دسته بندی ها: آموزش های ویژه ، آموزش سی اس اس (CSS) ، آموزش طراحی وب ، آموزش اچ تی ام ال (HTML) ، آموزش های Code with Mosh

دوره کامل تسلط بر HTML/CSS 

آخرین به روزرسانی: 2021-2

بر روی مفاهیم پیشرفته HTML5 و CSS3 در پشت وب سایت های سریع، زیبا و سازگار با موبایل مسلط شوید.

به یک متخصص HTML5/CSS3 تبدیل شوید!

شاید شما به اندازه کافی می دانید که در کد HTML / CSS موجود چگونه تغییرات کوچکی ایجاد کنید، اما برای ساختن چیزی از ابتدا باید بسیار تلاش کنید. اگر اصول را می دانید و به دنبال دوره ای هستید که مانند یک مبتدی مطلق با شما رفتار نکند، دیگر به دنبال آن نباشید.

این یک دوره سرگرم کننده، بسیار کاربردی و گام به گام که جدیدترین و پیچیده ترین مفاهیم HTML5 / CSS3 مانند طراحی واکنشگرا، سیستم های طرح بندی Flex & Grid، تایپوگرافی، تصاویر واکشن گرا، سازماندهی CSS و موارد بسیار دیگر را به شما می آموزد.

در این دوره هیچ توضیح طولانی، خسته کننده و تکراری وجود ندارد. فقط HTML5 / CSS3 به طور واضح توضیح داده شده است.

مهارت های HTML5 / CSS3 خود را به سطح بعدی برسانید

این یک دوره جامع، سرگرم کننده و بسیار عملی است که شما را برای کار آماده می کند

در پایان این دوره شما قادر خواهید بود...

  • با استفاده از سیستم های طرح بندی flex and grid، طرح بندی ها و عناصر موقعیت را ایجاد کنید
  • pinch بصری را با ترنسفورم ها، ترنزیشن ها و انیمیشن ها اضافه کنید
  • فرم هایی با اعتبار سنجی داده داخلی HTML5 ایجاد کنید
  • تایپوگرافی زیبایی ایجاد کنید
  • بهترین شیوه ها را برای ایجاد وب سایت های مدرن اعمال کنید
  • با اطمینان مشکلات را برطرف کنید
  • کد CSS3 تمیز، قابل نگهداری و شی گرا بنویسید

آنچه یاد خواهید گرفت:

  • CSS box model
  • واحدهای اندازه گیری CSS مانند px ،rem ،em ،vw و غیره
  • موقعیت یابی مطلق و نسبی
  • Flexible box layout (Flex)
  • Grid layout
  • کوئری های مدیا
  • تایپوگرافی
  • تصاویر واکشن گرا
  • تکنیک های بهینه سازی تصویر
  • گرافیک برداری مقیاس پذیر (SVG)
  • فونت های آیکون
  • فرم هایی با اعتبار سنجی داده ها
  • ترنسفورم ها، ترنزیشن ها و انیمیشن ها
  • بهترین شیوه های CSS
  • CSS شی گرا
  •  و غیره

یک دوره جامع، کاملاً ساختارمند و قابل مراجعه که شما را برای کار آماده می کند.

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

این دوره دومین قسمت از سری Ultimate HTML & CSS است. در حالت ایده آل، شما باید قسمت اول را مشاهده کرده باشید یا حداقل با عناصر اولیه HTML، ویژگی های CSS و selectors، pseudo-selectors  آشنا باشید و بتوانید از Chrome DevTools برای توسعه وب استفاده کنید.

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

  • شروع کار
    • مقدمه
    • پیش نیازها
    • نحوه بهره وری از این دوره
    • دریافت کمک
    • دنبال کردن من
  • طرح بندی
    • مقدمه
    • Box Model
    • سایز عناصر
    • Overflowing 
    • واحدهای اندازه گیری
    • موقعیت گذاری
    • عناصر شناور
    • FlexBox 
    • Grid 
    • عناصر پنهان
    • کوئری های مدیا
    • خلاصه
    • تمرینات
  • تایپوگرافی
    • مقدمه
    • استایل دادن به فونت ها
    • تعبیه کردن فونت های وب
    • فلاش متن بدون استایل
    • سرویس های فونت
    • سیستم Font Stack
    • تغییر سایز فونت ها
    • فاصله عمودی
    • فاصله افقی
    • فرمت متن
    • خلاصه 
    • تمرینات
    • یادداشت سریع
  • تصاویر
    • مقدمه
    • فرمت ها و تایپ های تصاویر
    • تصاویر محتوا
    • تصاویر پیش زمینه
    • CSS Sprites
    • Data URLs
    • Clipping 
    • فیلترها
    • پشتیبانی اسکرین هایی با تراکم بالا
    • سوئیچ کردن رزولوشن
    • استفاده از فرمت های تصویر مدرن
    • Art Direction
    • گرافیک های وکتور مقیاس پذیر
    • آیکون های فونت
    • خلاصه
    • تمرینات
  • فرم ها
    • مقدمه
    • ایجاد فرم اولیه
    • استایل دادن به فرم ها
    • CSS Frameworks 
    • فیلدهای متنی
    • لیست های داده
    • لیست های Drop-down
    • Check Boxes
    • دکمه های رادیویی
    • اسلایدرها
    • ورودی های فایل
    • گروه بندی فیلدهای مرتبط
    • فیلدهای پنهان
    • اعتبارسنجی داده
    • ارسال فرم
    • خلاصه
    • تمرینات
  • ترنسفورم ها، ترنزیشن ها و انیمیشن ها
    • مقدمه
    • ترنسفورم ها
    • ترنزیشن ها سه بعدی
    • انیمیشن ها
    • انیمیشن های قابل استفاده مجدد
    • خلاصه
    • تمرینات
  • نوشتن CSS تمیز و قابل نگهداری
    • مقدمه
    • بهترین شیوه های CSS
    • متغیرها
    • CSS شی گرا
    • BEM 
    • خلاصه
    • گام های بعدی
    • یادداشت سریع

سایر بخش های دوره:

سایر ویدئوهای دوره:

پیش نیازهای دوره کامل HTML5 و  CSS3 - بخش 2

 

چگونه دوره کامل HTML5 و  CSS3 - بخش 2 را استفاده کنیم؟

 

آشنایی با Box Model در HTML5 و  CSS3

 

سایز عناصر در HTML5 و  CSS3

 

Overflowing در HTML5 و  CSS3

آیا این نوشته را دوست داشتید؟
Code with Mosh The Ultimate HTML5 & CSS3 Series: Part 2 Publisher:Code with Mosh Author:Mosh Hamedani Duration:5 HOURS Level:INTERMEDIATE

The Ultimate HTML/CSS Mastery Series

Master advanced HTML5 & CSS3 concepts behind fast, beautiful and mobile-friendly websites

Become an HTML5/CSS3 Expert!

Perhaps you know enough to make small tweaks in existing HTML/CSS code, but struggle to build something from scratch. If you know the basics and are looking for a course that doesn’t treat you like an absolute beginner, look no further.

A fun, highly-practical, step-by-step course that teaches you the both latest and more complex HTML5/CSS3 concepts such as responsive design, Flex & Grid layout systems, typography, responsive images, organizing CSS and much, much, more.

No lenghty, boring, repetitive explanations here. Just HTML5/CSS3 explained clearly.

Take your HTML5/CSS3 skills to the next level

A comprehensive, fun and highly-practical course that prepares you for the job

By the end of this course, you'll be able to…

  • Build layouts and position elements using flex and grid layout systems
  • Add visual pinch with transforms, transitions and animations
  • Build forms with data validation built-into HTML5
  • Create beautiful typography
  • Apply best practices for creating modern websites
  • Troubleshoot issues with confidence
  • Write clean, maintainable, object-oriented CSS3 code

What You'l Learn...

  • CSS box model
  • CSS measurement units (px, rem, em, vw, etc)
  • Absolute and relative positioning
  • Flexible box layout (Flex)
  • Grid layout
  • Media queries
  • Typography
  • Responsive images
  • Image optimization techniques
  • Scalable vector graphics (SVG)
  • Icon fonts
  • Forms with data validation
  • Transformations, transitions, and animations
  • CSS best practices
  • Object-oriented CSS
  • And much, much more!

A comprehensive, perfectly-structured and referenceable course that prepares you for the job

Prerequisites

This course is the second part of my Ultimate HTML & CSS series. Ideally, you should have taken the first part or at least be familiar with basic HTML elements, CSS properties, selectors, pseudo-selectors and be able to use Chrome DevTools for web development.

Course Curriculum

  • Getting Started (3m)
  • Preview1- Introduction (1:03)
  • Preview2- Prerequisites (0:48)
  • Preview3- How to Take this Course (1:08)
  • Preview4- Getting Help
  • Preview5- Follow Me Around
  • Layout (94m)
  • Preview1- Introduction (0:45)
  • Preview2- The Box Model (6:02)
  • Start3- Sizing Elements (8:20)
  • Start4- Overflowing (3:03)
  • Start5- Measurement Units (10:59)
  • Start6- Positioning (9:45)
  • Start7- Floating Elements (9:33)
  • Start8- FlexBox (14:59)
  • Start9- Grid (19:03)
  • Start10- Hiding Elements (1:24)
  • Start11- Media Queries (10:06)
  • Start12- Summary
  • Start13- Exercises
  • Typography (56m)
  • Start1- Introduction (0:44)
  • Start2- Styling Fonts (7:38)
  • Start3- Embedding Web Fonts (7:39)
  • Start4- Flash of Unstyled Text (6:45)
  • Start5- Font Services (8:22)
  • Start6- System Font Stack (2:47)
  • Start7- Sizing Fonts (7:23)
  • Start8- Vertical Spacing (4:44)
  • Start9- Horizontal Spacing (3:16)
  • Start10- Formatting Text (6:15)
  • Start11- Summary
  • Start12- Exercises
  • Start13- A Quick Note
  • Images (60m)
  • Start1- Introduction (1:13)
  • Start2- Image Types and Formats (3:50)
  • Start3- Content Images (3:40)
  • Start4- Background Images (7:02)
  • Start5- CSS Sprites (7:24)
  • Start6- Data URLs (3:40)
  • Start7- Clipping (1:51)
  • Start8- Filters (2:16)
  • Start9- Supporting High-density Screens (8:14)
  • Start10- Resolution Switching (7:01)
  • Start11- Using Modern Image Formats (4:29)
  • Start12- Art Direction (2:33)
  • Start13- Scalable Vector Graphics (2:16)
  • Start14- Font Icons (5:19)
  • Start15- Summary
  • Start16- Exercises
  • Forms (55m)
  • Start1- Introduction (0:40)
  • Start2- Creating a Basic Form (3:50)
  • Start3- Styling Forms (8:44)
  • Start4- CSS Frameworks (8:46)
  • Start5- Text Fields (5:47)
  • Start6- Data Lists (4:45)
  • Start7- Drop-down Lists (3:07)
  • Start8- Check Boxes (2:57)
  • Start9- Radio Buttons (1:58)
  • Start10- Sliders (0:55)
  • Start11- File Inputs (1:20)
  • Start12- Grouping Related Fields (1:09)
  • Start13- Hidden Fields (1:37)
  • Start14- Data Validation (3:33)
  • Start15- Submitting the Form (5:55)
  • Start16- Summary
  • Start17- Exercises
  • Transformations, Transitions, and Animations (20m)
  • Start1- Introduction (0:24)
  • Start2- Transformations (4:10)
  • Start3- 3D Transformations (5:39)
  • Start4- Transitions (3:23)
  • Start5- Animations (5:05)
  • Start6- Reusable Animations (2:19)
  • Start7- Summary
  • Start8- Exercises
  • Writing Clean, Maintainable CSS
  • Start1- Introduction (0:50)
  • Start2- CSS Best Practices (9:20)
  • Start3- Variables (2:17)
  • Start4- Object-oriented CSS (5:06)
  • Start5- BEM (4:12)
  • Start6- Summary
  • Start7- What's Next (0:30)
  • Start8- A Quick Note

پیشنهاد آموزش مرتبط در فرادرس

خرید لینک های دانلود
  • حجم فایل: 7.87GB
  • زبان: انگلیسی
  • زیرنویس انگلیسی: ندارد
  • قیمت: 6000 تومان
  • آموزش کامل HTML5 و  CSS3 - بخش دوم (Code with Mosh) یک محصول ویژه است و دریافت لینک های دانلود آن با پرداخت هزینه امکان پذیر است. اطلاعات بیشتر