آموزش بوت استرپ بوت کمپ (برای بوت استرپ 5)
Bootstrap Bootcamp (for Bootstrap 5)
طراحی. ساختن. مستقر کنید. به سرعت.
در دوره Bootstrap Bootcamp، با استفاده از ابزارهای ارائه شده در Bootstrap، نمونه کار خود را می سازید. ما از قدرت پاسخگویی بوت استرپ استفاده خواهیم کرد تا وب سایت شما را در هر دستگاهی بی نقص جلوه دهیم—از بزرگترین دسکتاپ گرفته تا آیفون 6 قدیمی.
ما نمونه کارها را طراحی خواهیم کرد که نه تنها کارکرد داشته باشد، بلکه زیبا به نظر برسد. آثار هنری، سرگرمی ها یا سایر صنایع دستی خود را در این نمونه کار تصویری نمایش دهید. ما از پایه، قدم به قدم می سازیم.
وب‌سایت‌ها نباید فقط روی رایانه شما زندگی کنند. آنها باید توسط تمام دنیا دیده شوند. به همین دلیل است که به شما نشان می‌دهم که چگونه کار خود را در آنجا آپلود یا اجرا کنید تا همه ببینند. و همچنین یک نام دامنه را به آن متصل کنید.
ما در این دوره به نحوه استفاده از موارد زیر خواهیم پرداخت:
طراحی وب واکنشگرا
شبکه/ظرف
Nav/Navbar
ادغام آرم SVG
Flex/Flexbox
طراحی سرفصل/پاراگراف
طراحی فرم
کارت‌ها
استقرار وب سایت شما
…و بیشتر!
** BONUS ***
من همچنین شما را با نحوه راه اندازی یک فرم کار از طریق Netlify آشنا خواهم کرد. همچنین یاد می گیرید که چگونه یک صفحه موفقیت ایجاد کنید، بنابراین ورودی های شما به درستی ارسال می شوند. ما فرم را با استفاده از طراحی فرم Bootstrap 5 تنظیم می کنیم.
می‌خواستم این دوره مختصر باشد تا بتوانید به سرعت قدرت Bootstrap 5 را درک کنید و در راه باشید. من بسیار هیجان زده هستم که قدرت فوق العاده Bootstrap 5 را به نمایش بگذارم.
برای این دوره، شما در حال ساختن یک نمونه کار شخصی هستید. صفحات زیر را می سازید:
- صفحه اصلی
- درباره صفحه
- صفحه اولیه نمونه کارها
- صفحه تماس
مرحله 1: از پروژه تمام شده خود اسکرین شات بگیرید.
مرحله 2: عکس صفحه را در اینجا آپلود کنید.
مرحله 3 (اختیاری): URL را از Netlify جایی که سایت خود را آپلود کردید کپی کنید.
مرحله 4 (اختیاری): URL را در اینجا ارسال کنید تا پروژه خود را بصورت آنلاین ببینید!
مثال پروژه:
درس ها Lessons
-
کمی پاکسازی اضافی A little additional cleanup
-
درباره محتوای صفحه با شناور و سرریز About page content with floats and overflow
-
قالب راه انداز بوت استرپ Bootstrap starter template
-
راه اندازی صفحه تماس Setting up the contact page
-
دکمه های بوت استرپ Bootstrap buttons
-
اضافه کردن لوگوی SVG Adding the SVG logo
-
نمادهای فوتر و بوت استرپ The footer and bootstrap icons
-
راه اندازی ناوبری Setting up the Navigation
-
راه اندازی صفحه درباره Setting up the about page
-
تنظیم گرافیک قهرمان Setting up the hero graphic
-
Netlify فرم ها Netlify forms
-
افزودن جزئیات تماس Adding contact details
-
وسط متن قهرمان با Flex Centering the hero text with Flex
-
تنظیم فرم Setting up the form
-
در نتیجه In conclusion
-
مرکز متن و لید Text center and lead
-
Netlify و روش کشیدن و رها کردن Netlify and the drag and drop method
-
پاورقی چسبناک A sticky footer
-
شبکه The grid
-
محفظه The container
-
بوت استرپ 5 کارت Bootstrap 5 cards
-
هانی پات را به فرم اضافه کنید Adding the honeypot to the form
-
درباره دوره About The Course
-
ناودان Gutters
-
افزودن یک فایل css سفارشی Adding a custom css file
-
محور x و فاصله محور y x axis and y axis spacing
https://donyad.com/d/26b5
Haydn Adams
مربی فنی خلاق
من در دو کلمه بزرگ شدم - دنیای طراحی/توسعه وب که در آن HTML، CSS و اکنون JSX نوشتم، و دنیای طراحی گرافیک که در آن به H J در Quark تسلط داشتم (بله، من گفتم Quark).
>من اکنون تقریباً تمام کارهایم را به صورت آنلاین تغییر داده‌ام، اما متوجه شدم که عناصر طراحی نباید تنها به این دلیل که به جای کاغذ به پیکسل‌ها تغییر می‌کنند، تغییر کنند.
در سال 2020، درک نحوه کدنویسی، به ویژه به عنوان یک طراح، و بیشتر از آن یادگیری نحوه طراحی از طریق کدنویسی بسیار مهم است.
قبل از ساختن ویدیوهای Udemy، من مدرس آکادمی دانشگاه هنر در سانفرانسیسکو بودم که در آنجا بیش از 13 سال طراحی و توسعه وب را تدریس کردم. همچنین در طی آن مدت، من 3 برنامه اندرویدی iPhone/iPad را راه اندازی کردم و بهترین برنامه دانلود شده در تاریخ دانشگاه را داشتم.
نمایش نظرات