آموزش PSD به Bootstrap 4: طراحی وب خود را به یک صفحه وب تبدیل کنید
PSD to Bootstrap 4: Turn your web design into a web page
این جایی است که می آموزید چگونه طراحی وب را با بوت استرپ 4 به یک صفحه وب تبدیل کنید.
بوت استرپ سریع‌ترین روشی است که می‌توانید یک صفحه وب بسازید که واکنشگرا باشد و در همه جا نمایش داده شود.
این کلاس مفاهیم و تکنیک‌هایی را که می‌توانید برای ساخت صفحات وب بوت استرپ استفاده کنید، آموزش می‌دهد.
علاوه بر مفاهیم بنیادی، شما به نحوه انجام موارد زیر توجه خواهید کرد:
- پیمایش پیچیده ای ایجاد کنید که در دستگاه های بزرگ و کوچک کاملاً کار کند.
- طرح‌بندی‌های پویا را با استفاده از سبک‌های شبکه Bootstrap پیاده‌سازی کنید.
- چگونه می توانید صفحه وب بوت استرپ خود را سفارشی کنید تا آن را واقعاً متعلق به خودتان کنید.
- این کلاس از نمونه‌های تئوری و عملی مختلفی استفاده می‌کند تا مطمئن شود که استفاده از Bootstrap را با اطمینان یاد می‌گیرید.
من در تمام مراحل در طول دوره با شما خواهم بود، بنابراین اگر به کمک نیاز دارید - فقط بپرسید!
برای پروژه کلاس خود، یک طراحی وب را به یک صفحه وب کارآمد تبدیل می کنیم.
من یک طراحی وب (به عنوان PSD و تصاویر) ارائه کرده‌ام که می‌توانید از آن برای پروژه استفاده کنید، اما می‌توانید از طراحی خود نیز استفاده کنید.
در هر صورت، با دنبال کردن کلاس و پیاده‌سازی پیمایش، طرح‌بندی صفحه و کنترل‌های ورودی، مهارت‌های واقعی و عملی را توسعه خواهید داد که می‌توانید برای پروژه‌های آینده از آنها استفاده کنید.
موارد تحویلی شما یک صفحه وب کارآمد است.
می توانید پیشرفت خود را با آپلود تصاویر صفحه وب خود نشان دهید و کد عالی خود را با پیوند دادن به یک یا CodePen نشان دهید.
من منابعی را برای ساخت پروژه شما در فایل bootstrap-project-resources.zip ارائه کرده ام.
می توانید فایل منابع را با دوبار کلیک کردن روی آن باز کنید. در دایرکتوری project-resources موارد زیر را خواهید یافت:
- طراحی
- : این طرحی است که من در کلاس با آن کار خواهم کرد. فهرست شامل یک فایل PSD و تصاویری از طرح نهایی است.
- پیاده‌سازی اسکلت: فایل‌های شروعی که می‌توانید برای کدنویسی همراه با آنها در طول کلاس استفاده کنید (شما باید index.html را ویرایش کنید)
- navigation-template.html: نمونه ناوبری بوت استرپ که می توانید در پروژه های آینده استفاده کنید.
- final-implementation: مثال تکمیل شده مورد استفاده در این کلاس، برای مرجع ارائه شده است.
فراموش نکنید که پروژه خود را در گالری پروژه پست کنید! این یک راه عالی برای دریافت بازخورد در مورد کار خود و یافتن راه حل برای مشکلاتی است که ممکن است با آن مواجه شوید.
من نمی‌توانم منتظر بمانم تا ببینم با Bootstrap 4 چه چیزی می‌سازید!
درس ها Lessons
-
این کلاس برای چه کسانی است؟ Who is this class for?
-
نحوه ایجاد پاورقی صفحه در بوت استرپ How to create a page footer in Bootstrap.
-
آنچه در این کلاس یاد خواهید گرفت What you'll learn in this class.
-
ستون ها را با جزئیات بوت استرپ کنید. Bootstrap columns in detail.
-
معرفی کلاس. Introduction to the class.
-
بوت استرپ چیست؟ What is Bootstrap?
-
مروری بر مفاهیم بوت استرپ Bootstrap concepts overview.
-
چگونه یک صفحه وب بوت استرپ را سفارشی کنیم. How to customize a Bootstrap web page.
-
نحوه پیاده سازی ناوبری بوت استرپ How to implement Bootstrap navigation.
-
چگونه یک منوی کشویی به ناوبری بوت استرپ اضافه کنیم. How to add a dropdown menu to Bootstrap navigation.
-
یک طرح با کانتینر، ردیف و ستون ایجاد کنید. Create a layout with containers, rows and columns.
-
ایجاد کنترل های ورودی بوت استرپ Creating Bootstrap input controls.
-
چگونه ناوبری بوت استرپ را پاسخگو کنیم. How to make Bootstrap navigation responsive.
-
یک جدول داده با ستون های کوچک اضافه کنید. Add a data table with small columns.
-
بررسی کلاس. Class review.
https://donyad.com/d/471d59
Luke Fabish
بریم کدنویسی کنیم!!
من به توانمندسازی از طریق یادگیری بسیار معتقدم، و معتقدم آموزش در Skillshare به همین دلیل است.
به‌عنوان یک مهندس نرم‌افزار حرفه‌ای، از منابع آموزشی در اینترنت بهره‌مند شدم.
به خصوص، من می‌خواهم کلاس‌های من Skillshare نقطه ورودی برای هر کسی باشد که می‌خواهد از همان ابتدا برنامه‌نویسی را یاد بگیرد و سفری به جهان را آغاز کند. توسعه نرم افزار حرفه ای.
تصورات غلط زیادی در مورد اینکه برای برنامه نویس شدن باید چه نوع فردی باشید وجود دارد.
- در ریاضیات خوب هستید؟
- به رایانه وسواس دارید؟
- IQ بالا؟
هیچ یک از این موارد لازم نیست.
اگر آماده یادگیری هستید و مایل به حل مشکل هستید، آنچه را که لازم است بدست آورده اید.
شخصاً، در حالی که هرگز به سخت‌افزار رایانه علاقه نداشته‌ام، همیشه از امکاناتی که نرم‌افزار ایجاد می‌کند هیجان‌زده بوده‌ام.
استیو جابز این را به بهترین وجه گفت - "مثل یک دوچرخه برای ذهن."
این چیزی است که نرم افزار خوب می تواند باشد.
و این ایده که می توانم با یادگیری کدنویسی چیزی شبیه به آن بسازم؟ باور نکردنی .
من برای اولین بار در مورد دستکاری نرم افزار در مدرسه هیجان زده شدم زمانی که در کلاس ششم یکی از دوستان به من نشان داد که چگونه می تواند برنامه اجرا شده روی کامپیوتر میکرو بی بی سی مدرسه را تغییر دهد.
اکنون، به‌جای اینکه برای طلا حرکت کنیم، پیشگام در بازی ما به دنبال مدفوع بود.
من گیر کردم.
من در خانه کامپیوتر نداشتم، اما دوستم Commodore64 داشت.
ما مجلات رایانه شخصی خریدیم و صدها خط از برنامه های BASIC را در C64 تایپ کردیم. ما نمی‌دانستیم که داریم چه کار می‌کنیم، و نمی‌دانیم وقتی برنامه‌ها کار نمی‌کنند چه کاری انجام دهیم.
چند سال به جلو رفتم، و من برای تحصیل در رشته کامپیوتر به دانشگاه رفتم.
در آنجا، یکی از رضایت بخش ترین تجربیات یادگیری زندگی ام را داشتم. احساس می کردم میدان بی حد و حصری از فرصت پیش روی من باز شده است.
اما زمانی که در صنعت کار می‌کردم، تنها بخش کوچکی از آموخته‌هایم را در کار روزانه‌ام به کار بردم.
و فرصت های یادگیری من تمام شده بود.
یا من اینطور فکر می کردم!
سرانجام متوجه شدم که اگر قرار است به یادگیری ادامه دهم، باید خودم مراقب آن باشم.
بنابراین برنامه یادگیری خودم را انجام دادم - کتاب‌های زیادی خواندم، دوره‌های آنلاین انجام دادم و آموزش‌های بی‌شماری را انجام دادم. در واقع من هنوز این کار را انجام می دهم!
بار دیگر، احساس می‌کنم میدان باز و بی‌محدود است.
امیدوارم با همه فرصت‌های یادگیری در Skillshare، افق‌های حرفه‌ای و شخصی خود را به همین ترتیب گسترش دهید.
نمایش نظرات