لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش یک دوره کامل CSS Flexbox و یک پروژه وب سایت دنیای واقعی [ویدئو]
A Complete CSS Flexbox Course and a Real World Website Project [Video]
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
قبل از اینکه Flexbox روی صفحه نمایش بیاید، مجبور بودیم از موقعیت یابی نسبی یا مطلق، پاکسازی شناور و 100 خط کد برای دستیابی به یک طرح وب سایت مناسب استفاده کنیم. همه اینها الان تغییر کرده است. با CSS Flexbox، می توانید طراحی وب سایت خود را تنها در چند خط کد طرح بندی کنید و حتی آن را واکنش گرا کنید! دیگر هیچ چارچوبی مانند بوت استرپ برای جبران کمبودهای CSS وجود ندارد. تنها در چند ساعت به یک طراح وب حرفه ای تبدیل شوید. اگر اصول اولیه HTML و CSS را بدانید، همه چیز آماده است. چند ساعتی را صرف یادگیری دستهای از نحوهای Flexbox کنید، و در کمترین زمان، طرحبندیهای وب عالی ایجاد خواهید کرد! اکنون برای تبدیل شدن به یک طراح وب حرفه ای نیازی به یادگیری یک سری فریمورک ندارید! ما از یک مثال در دنیای واقعی برای توضیح مفاهیم استفاده خواهیم کرد.
تمامی کدها و فایل های پشتیبانی این دوره در آدرس زیر موجود است: https://github.com/PacktPublishing/A-Complete-CSS-Flexbox-Course-and-a-Real-World-Website-Project نحوه ایجاد یک وب ساده طرح بندی با هدر، پاورقی، 2-3 ستون با محتوا و نوار ناوبری بدون استفاده از شناورها یا ویژگی های موقعیت یابی.
چگونه وب سایت خود را بدون استفاده از چارچوب های خارجی مانند بوت استرپ به یک وب سایت کاملاً واکنش گرا تبدیل کنید.
نحوه ایجاد ویجت ها، چرخ فلک ها، برنامه ها، گالری ها، نوارهای ناوبری، آیتم های منو
نحوه کنترل موقعیت، اندازه و فاصله عناصری که ایجاد می کنید بدون اینکه آنها را در هم بریزند.
چگونه عناصر وب سایت خود را به صورت افقی یا عمودی چیدمان کنیم و ترازها را با یک خط کد تغییر دهیم
چگونه عناصر را در صفحه بدون تغییر ترتیب آنها در کد HTML خود سفارش دهید.
چگونه به طور خودکار عرض و ارتفاع عناصر را تغییر دهیم تا فضای ظروف اصلی خود را پر کنند، بدون اینکه ابعاد ثابتی بدهند. این دوره برای یک طراح تازه کار است که می خواهد شروع به ایجاد وب سایت های بهتر کند. یک طراح وب واکنش گرا که در دنیای بوت استرپ گیر کرده و راه حل ساده تری می خواهد. یک طراح وب با تجربه که می خواهد راه ساده تری برای ایجاد طرح ها و طرح های وب سایت و فریلنسرها، کارمندان، دانشجویان داشته باشد - هر کسی می تواند دوره ما را بگذراند و از آن بهره مند شود. 1. ما دوست داریم در تدریس خود دقیق باشیم. همه چیزهایی را که برای شروع به ایجاد طرحها و طرحبندیهای وب عالی با کد/سینتکس Flexbox نیاز دارید، در این دوره پیدا خواهید کرد. لازم نیست جای دیگری را جستجو کنید. * 2. ما قویاً از یادگیری با انجام دادن حمایت می کنیم، نه فقط گوش دادن یا خواندن. سخنرانی های ما مملو از نمونه های فراوانی است که هر مفهومی را به وضوح توضیح می دهد. *
سرفصل ها و درس ها
معرفی
Introduction
معرفی
Introduction
ساخت ظرف فلکس
Creating a Flex container
ایجاد ظرف Flex و موارد Flex
Creating the Flex container and Flex items
ایجاد و طراحی نوار ناوبری - نمونه دنیای واقعی ما
Creating & designing the navigation bar - our real world example
نوار پیمایش را به یک ظرف Flex با منوها به عنوان آیتم های انعطاف پذیر تبدیل کنید
Make the navigation bar a Flex container with the menus as the flex items
ویژگی های اساسی فلکس باکس
Basic properties of Flexbox
ویژگی رشد فلکس - اقلام فلکس را برای پر کردن ظرف فلکس رشد دهید
Flex grow property - grow the flex items to fill the flex container
ویژگی Flex shrink - اقلام انعطاف پذیر را کوچک کنید تا صفحه نمایش کوچکتری داشته باشند
Flex shrink property - shrink the flex items to fit a smaller screen
ویژگی Flex wrap - هنگامی که اندازه صفحه نمایش کاهش می یابد، موارد انعطاف پذیر را بپیچید
Flex wrap property - wrap the flex items when screen size reduces
پایه فلکس - یک عرض شروع برای موارد فلکس تنظیم کنید
Flex basis - set a starting width for the flex items
نماد کوتاه Flexbox
Flexbox shorthand notation
ویژگی های بهبود فلکس باکس
Enhancement properties of Flexbox
خاصیت محتوا را توجیه کنید - موارد انعطاف پذیر را تراز کنید
Justify content property - Align the flex items
خواص فلکس جریان و جهت فلکس
Flex flow and flex direction properties
موارد را روی محور متقاطع تراز کنید
Align items on the cross axis
ترتیب عناصر
Element order
موارد خود تراز شونده را جداگانه تراز کنید
Align self - aligning items separately
پروژه دنیای واقعی - یک وب سایت کامل با Flexbox ایجاد کنید
Real world project - create a full blown website with Flexbox
اسکلت HTML وب سایت
HTML skeleton of the website
هدر را طراحی کنید و آن را پاسخگو کنید
Design the header and make it responsive
با Flexbox یک نوار ناوبری واکنشگرا برای وب سایت طراحی کنید
Design a responsive navigation bar for the website with Flexbox
دو ستون اصلی را طراحی کنید و آنها را پاسخگو کنید
Design the two main columns and make them responsive
با ظروف Flex تو در تو، یک فوتر پاسخگو طراحی کنید
Design a responsive footer with nested Flex containers
Packtpub یک ناشر دیجیتالی کتابها و منابع آموزشی در زمینه فناوری اطلاعات و توسعه نرمافزار است. این شرکت از سال 2004 فعالیت خود را آغاز کرده و به تولید و انتشار کتابها، ویدیوها و دورههای آموزشی میپردازد که به توسعهدهندگان و متخصصان فناوری اطلاعات کمک میکند تا مهارتهای خود را ارتقا دهند. منابع آموزشی Packtpub موضوعات متنوعی از جمله برنامهنویسی، توسعه وب، دادهکاوی، امنیت سایبری و هوش مصنوعی را پوشش میدهد. محتوای این منابع به صورت کاربردی و بهروز ارائه میشود تا کاربران بتوانند دانش و تواناییهای لازم برای موفقیت در پروژههای عملی و حرفهای خود را کسب کنند.
Aarthi Elumalai موسس DigiFisk است. در DigiFisk، آنها قصد دارند برنامه نویسی را سرگرم کننده و تعاملی کنند. اگر از تئوری های بی پایان خسته شده اید، به جای درستی آمده اید. با شروع دوره های سطح مبتدی در هر زبان برنامه نویسی یا زمینه ای، آنها شما را راهنمایی می کنند تا با چندین کلاس مبتنی بر پروژه در دنیای واقعی پیشرفت کنید تا شما را برای پیشرفت در دنیای واقعی مجهز کنند. سخنرانیهای آنها معمولاً مفصل است و چیزی را از قلم نمیاندازد، بنابراین برنامهنویسان مبتدی و پیشرفته میتوانند از هر دوره چیزی یاد بگیرند. مطمئن شوید که از سفر خود به دنیای جذاب برنامه نویسی با DigiFisk لذت خواهید برد.
نمایش نظرات