چه چیزی یاد خواهید گرفت؟
فصل اول-Flex
فصل دوم-Grid
فصل سوم-توضیح نقاط شکست(Breakpoints) و کلمات کلیدی مربوطه
فصل چهارم-مفهوم BoxModel و ویژگی BoxSizing
فصل پنجم-بررسی واحد های اندازه مطلق و نسبی در Css
فصل ششم-بررسی ویژگی های Width, Height و Css Units
فصل هفتم- MaxMin – Width Height
فصل هشتم-پروژه اول با Flex
فصل نهم-پروژه دوم با Grid
فصل دهم-پروژه کامل و ریسپانسیو شده با Grid-Flex
در مورد این دوره
این روزا همه ی وبسایت ها باید رسپانسیو باشند. به گونه ای که برای همه کاربران موبایل، تبلت و دسکتاپ به خوبی نمایش داده شود. همچنین المان های داخلی باید به صورت اصولی جانمایی شوند تا طرح مدنظر به خوبی پیاده شود. فلکس و گرید در کنار مدیاکوئری ها این کار رو برای ما انجام میدهند. فرقی ندارد که با چه فریمورکی کار بکند، در هر صورت باید بتوانید فلکس و گرید را به خوبی درک کنید و در پروژه استفاده کنید.
با گذروندن این دوره و تکمیل چندین پروژه، می توانید مطمئن شوید که درک مناسبی نسبت به طراحی پیدا کرده اید. آنچه سعی کرده ام در این دوره آموزشی رعایت کنم، این بوده که این مفاهیم با زبانی ساده اما عمیق به مخاطب منتقل داده شود.
سوالات متداول
نظرات (0)
Div
Section
Article
Header-Footer
مثالی از بخش بندی در Html
مفاهیم اولیه فلکس
مفاهیم اولیه فلکس
تمرین اول-سایت آمازون را طبق توضیح فیلم طراحی کنید.به صورت باکس
تمرین دوم-سه طرح خام که فرستاده میشود را از طریق فلکس طراحی کنید
justify-content
align-content
align-items
flex-grow
flex-shrink-order
flex-basis-flex
تمرین اول-طبق فیلم آمازون را طراحی کنید.فقط محتوا بصورت باکس باشد.مهم چیدمان
تمرین دوم-سه طرح خام بارگزاری شده هر کدام را جدا طراحی کنید
طراحی بخش -Slider
طراحی بخش -Form
طراحی بخش -Description
طراحی بخش -Content
flex-news
video
طراحی بخش -Header
طراحی بخش -footer
آشنایی با گرید
grid-template-columns and grid-template
repeat-fr
grid-coulmn-row
example-grid
align-items
align-self
auto-flow
mincontent-maxcontent
ریسپانسیوسازی در گرید
طبق تصاویر فرستاده شده تمپلیت ها طراحی شود
ریسپانسیوسازی-قسمت اول-مفهوم box-sizing
ریسپانسیوسازی-قسمت دوم-واحدهای اندازه گیری در ریسپانسیوسازی
ریسپانسیوسازی-قسمت دوم-واحدهای اندازه گیری در ریسپانسیوسازی
ریسپانسیوسازی-قسمت سوم-Media Queriesپارت اول
ریسپانسیوسازی-قسمت سوم-Media Queriesپارت دوم
طراحی قالب از طریق ریسپانسیوسازی-قسمت اول
طراحی قالب از طریق ریسپانسیوسازی-قسمت دوم
طراحی قالب از طریق ریسپانسیوسازی-قسمت سوم
طراحی قالب از طریق ریسپانسیوسازی-قسمت چهارم
معرفی قالب
setup
بخش اول هدر -Html
بخش اول هدر -Css
بخش دوم هدر
شبکه های اجتماعی بخش هدر
بخش About
بخش Service
بخش Latest Works پارت اول
بخش Latest Works پارت دوم
بخش Let's Get In Touch پارت اول
بخش Let's Get In Touch پارت دوم
بخش Skills
بخش Timeline
بخش Blog پارت اول
بخش Blog پارت دوم
بخش footer
فایل پروژه
طراحی فرم لاگین پارت اول
طراحی فرم لاگین پارت دوم
