اهمیت یادگیری پروژهمحور HTML و CSS چیست؟
برنامهنویسی، یکی از مشاغل پردرآمد جهان است. طراحی وب یکی از شاخههای برنامهنویسی محسوب میشود که روز به روز در حال پیشرفت و تبدیل شدن به یکی از الزامات دنیای امروز است. امروز هر شخصی که میخواهد خود را به دنیا معرفی کند، از وبسایت استفاده میکند. برای مثال اگر شما یک طراح گرافیک هستید، برای اینکه بتوانید درآمد خوبی کسب کنید و نمونه کارهای خود را به افرادی که در نزدیکی شما نیستند، نشان دهید، باید یک سایت خوب داشته باشید تا تمامی اطلاعات خود را در آن قرار داده و پس از جلب نظر مشتری، پروژههای جدید را انجام داده و شروع به درآمدزایی کنید. در این صورت، مشتریهای شما، بدون محدودیت جغرافیایی میتواند از کل دنیا باشد. پس امروزه هر شغلی، نیاز به یک سایت دارد.
در نهایت یادگیری پروژهمحور HTML و CSS برای یادگیری بهتر و عمیقتر این دو زبان نشانهگذاری بسیار مهم است. این روش آموزشی برای افرادی که به دنبال یادگیری HTML و CSS هستند، به دلیل مزایایی مانند افزایش تجربه عملی، یادگیری بهتر و افزایش قابلیت اطمینان بسیار مفید است.
در این آموزش ببین چه چیزی یاد میگیریم؟
ما در این آموزش ببین، یک پروژه عملی را انجام خواهیم داد. یعنی طرحی را که در ذهنمان داریم، تبدیل به کد میکنیم. ابتدا به سراغ پیادهسازی این طرح در فتوشاپ میرویم و سپس، این طرح را با استانداردهای روز جهانی به کدهای HTML و CSS تبدیل میکنیم.
پیش نیاز این دوره، آشنایی با تگ های HTML5 و خصوصیات CSS3 است.
فهرست سرفصلها و رئوس مطالب مطرح شده در اين مجموعه آموزشی، در ادامه آمده است:
- درس یکم: مقدمه کلی و معرفی
- پیش نیازهای آموزش
- نتیجه نهایی آموزش
- درس دوم: طراحی اسکچ (Sketch) در فتوشاپ
- اسکچ چیست؟
- نحوه طراحی اسکچ روی کاغذ
- طرح کلی دوره روی کاغذ
- انتخاب عرض مناسب قالب
- طراحی اسکچ موردنظر در فتوشاپ
- طراحی هدر (Header)، لوگو و آیکون های شبکه های اجتماعی
- طراحی منوها و اسلایدر (Slider)
- طراحی بخش های کناری
- طراحی بلاک اصلی مطالب
- طراحی فوتر (Footer) سایت
- درس سوم: تبدیل فایل PSD به HTML
- تجزیه و تحلیل فایل PSD
- بخش های مختلف طرح و بخش بندی
- نرم افزار Sublime Text
- معرفی پلاگین Emmet، نصب و استفاده از آن
- کد نویسی هدر و منوها
- کد نویسی اسلایدر و استفاده از پلاگین ها
- کد نویسی ستون های کناری و بخش محتوای سایت
- کد نویسی بخش فوتر سایت
- درس چهارم: ریسپانسیو (Responsive) کردن طرح
- واکنشگرایی چیست؟
- فریم ورک های مختلف واکنشگرایی (Bootstrap)
- ریسپانسیو کردن دستی سایت
- ریسپانسیو کردن بدون نیاز به آموزش بوت استرپ
مفید برای
- مهندسی نرم افزار