آموزش فرانت اند پروژه محور __ طراحی سایت با HTML و CSS و Bootstrap

امروزه شرکت‌های بسیاری به برنامه نویس‌های فرانت اند نیاز دارند. اما برای تبدیل شدن به یک برنامه نویس فرانت اند چه مسیری را پیش رو داریم ؟ مسیر یادگیری فرانت اند چیست؟ اصولا برای تبدیل شدن به یک برنامه نویس فرانت اند راه‌های مختلفی وجود دارد، اما سه مطلب پایه‌ای در همه مسیرها مشترک است آن هم زبان html ، css و کتابخانه بوت استرپ. بعد از ماه‌ها تلاش، بسته جامع آموزش فرانت اند را تقدیم می‌کنیم. آموزش front end شامل سه فصل است. این فصل‌ها پیش از این به صورت مستقل در هم‌رویش منتشر شد. و حالا شما می‌توانید با پرداخت بهای کمتر، بسته را بصورت یکجا دریافت کنید. همچنین دریافت تک به تک فصل‌ها به نشانی‌های پایین امکان‌پذیر است:

1. بسته آموزش HTML5 پروژه محور و سریع __ طراحی سایت شخصی در 60 دقیقه
2. آموزش CSS سریع و پروژه محور __ طراحی سایت با CSS در 60 دقیقه
3. بوت استرپ 4 و 5 —- سریع و پروژه محور Bootstrap را بیاموزید!

فرانت اند چیست ؟

به بیان ساده، به پوسته و ظاهر سایت یا اپلیکیشن، فرانت اند می‌گویند. توسعه فرانت اند در طراحی وب با استفاده از زبان‌های CSS ، HTML و JS صورت می‌گیرد. در اپلیکیشن‌های موبایل، فرانت اند ممکن است با xml یا با فلاتر، زامارین، ری اکت نیتیو و… طراحی می‌شود. برای نمونه در مورد موبایل می‌توانید این آموزش رایگان فرانت اند واکنش‌گرا در اندروید را ببینید.

فرق فرانت اند و بک اند چیست ؟

فرانت اند و بک اند هر دو در طراحی سایت بسیار حائز اهمیت هستند. هم‌رویشی‌های عزیز حال می‌خواهیم به تفاوت فرانت اند و بک اند به  اختصار بپردازیم.

همینطور که پیش از این گفته شد، فرانت اند همان ظاهر پروژه و یا سایت ما محسوب می‌شود. و بک اند مربوط به برنامه نویسی پشت پروژه است (بک‌اند دست‌های پشت پرده است).

به عنوان مثال: شما روی اسم یکی از آموزش‌های هم رویش که کلیک می‌کنید، اینکه شما روی کدام آموزش کلیک کردید و باید توضیحات کدام آموزش را به شما نمایش دهد کار بک اند است ( یک عمل منطقی ). و در مقابل اینکه این اطلاعات به چه صورت برای شما نمایش داده می‌شود کار فرانت اند است.کارهای مربوط به فرانت اند از جمله رنگ متن ها، فونت، اندازه متن یا تصاویر و… .

پیشنهاد می‌کنیم در راستای این آموزش برای درک بهتر و بیشتر فرانت‌اند مقاله‌های زیر را در مجله هم‌رویش مطالعه بفرمایید:

• تفاوت backend و frontend __ توسعه فرانت اند و بک اند چیست ؟
• چگونه فرانت اند کار شویم ؟ ___ تبدیل شدن به توسعه دهنده front end در 9 گام
• استفاده از پایتون برای فرانت اند (frontend) _____ طراحی فرانت اند با پایتون

چگونه می‌شود به یک توسعه‌دهنده فرانت اند تبدیل شد ؟

برای تبدیل شدن به یک برنامه نویس فرانت اند در قدم اول باید با زبان HTML آشنا شویم. آن را درک کنیم تا بتوانیم اسکلت و سازه‌ی سایتمان را بسازیم.

بعد از HTML،  باید زبان CSS را یاد بگیریم. تا بتوانیم با استفاده از زبان CSS به سایتی که با استفاده از HTML طراحی کردیم رنگ ولعاب دهیم و آن‌ را زیبا کنیم.

بعد از CSS بهتر است که کتابخانه بوت استرپ را هم یاد بگیریم. با استفاده از این کتابخانه می‌توانیم خیلی راحت و سریع با کلاس‌های آماده، تا حد زیادی از ظاهر سایت را تغییر دهیم.

در نهایت به دنبال یاد‌گیری جاوا اسکریپت می‌رویم. به کمک جاوا اسکریپت با فریم ورک‌هایی همچون ری اکت، انگولار و ویو کار می‌کنیم. این فریم ورک‌ها ابزارهایی هستند که به کار ما قائده و قانون می‌دهند تا ما راحت‌تر فرانت اند را توسعه دهیم.

نکته: این راه هرگز تمام نخواهد شد. شما تبدیل به یک برنامه نویس فرانت اند ماهر نمی‌شوید، مگر اینکه خسته نشوید و سخت تلاش کنید.

این آموزش در یک نگاه

در بخش اول این آموزش، به آموزش زبان HTML پرداختیم. این جا خیلی سریع وارد دنیای html شدیم. یک وب سایت شخصی را به صورت خام طراحی کردیم.

سپس در بخش دوم از این آموزش، آموزش CSS را شروع کردیم. در آموزش CSS سایتی را که در فصل پیش طراحی کردیم ادامه دادیم. در این فصل با استفاده از CSS به سایت طراحی شده استایل دادیم.

سرانجام در بخش پایانی در این آموزش با کتابخانه بوت استرپ آشنا شدیم. وب سایت شخصی را از صفر تا صد دوباره با قوانین و کلاس‌های آماده بوت استرپ طراحی کردیم. در نهایت وب سایتی واکنش‌گرا و زیباتر خواهیم داشت.

پیش از این آموزش طراحی وبسایت انیمیشن دار با زبان HTML و CSS در هم‌رویش منتشر شده است. برای دیدن فیلم معرفی این دوره و جزئیات بیشتر بر روی لینک زیر کلیک کنید:

آموزش ساخت وبسایت انیمیشن دار با html و css

این آموزش بی نظیر است زیرا:

• کاملا پروژه محور است.
• خیلی سریع و اصولی شما به یک برنامه‌نویس فرانت اند تبدیل می‌شوید.

کلیدواژگان

آموزش فرانت اند | آموزش فرانت اند حرفه ای | پکیج آموزشی فرانت اند | front end | آموزش پروژه محور فرانت اند | پروژه محور front end | توسعه فرانت اند | آموزش frontend | آموزش کامل front end | دوره آموزشی front end | برنامه نویسی فرانت اند | آموزش کامل فرانت اند | دوره آموزش فرانت اند | مسیر یادگیری فرانت اند | یادگیری front end 

ریز محتوای فیلم‌ها

فصل اول – آموزش زبان html

درس صفر:

• معرفی دوره

درس اول:

• html چیست ؟ جایگاه html در طراحی سایت
• Tag چیست ؟ و چگونه می‌شود عناصر را با استفاده از tag در یک صفحه html بوجود آورد.

درس دوم:

• Code Editor چیست ؟
• نحوه دریافت و نصب visual studio code در ویندوز.

درس سوم:

• ایجاد اولین صفحه html
• ساخت header سایت
• ساخت navigation bar سایت

درس چهارم:

• ساخت قسمت خانه
• قرار دادن عکس در html

درس پنجم:

• ساخت قسمت درباره من
• ساخت قسمت تماس بامن

فصل دوم – آموزش زبان css

درس اول:

• CSS چیست ؟
• نحوه نوشتن CSS
•  انتخابگر چیست ؟
• انواع انتخابگرها
•  چگونگی استفاده از CSS

درس دوم:

• استایل دهی header سایت
•  کار با ویژگی های padding , margin, font-family , background-color  text-align

درس سوم:

• استایل دهی navigation-bar ( منوی بالای سایت )
•  کار با ویژگی های text-decoration , background-color , display, transition, color

درس چهارم:

•  استایل دادن به home section
• کار با ویژگی های padding-left , padding-right , margin-top , font-size, text-shadow , box-shadow

درس پنجم:

• استایل دادن به about section – contact-section
• کار با ویژگی های font-size , padding , margin , width , opacity, transition

درس ششم:

•  استایل دادن به فرم ارتباط با من
•  کار با ویژگی های border , border-radius , width , padding , margin , background color , font-family , transition , cursor , color , box-shadow

فصل سوم – اموزش کتابخانه بوت استرپ

درس صفر:  معرفی دوره

درس اول :  بوت استرپ چست؟

• معرفی بوت استرپ
• تاریخچه به وجود آمدن بوت استرپ
• ویژگی های بوت استرپ
• کاربرد بوت استرپ به صورت عملی

درس دوم :  ابزار های مورد نیاز

• معرفی vs code
• معرفی اکستنشن های لازم برای دوره
• استخراج فایل‌های بوت استرپ
• لینک کردن و وصل کردن فایل های بوت استرپ به پروژه

درس سوم :‌  ساخت منوی بالای سایت

• ساخت منوی بوت استرپی
• مفهوم spacing در بوت استرپ
• شخصی سازی کردن منو با استفاده از css

درس چهارم :  ساخت قسمت خانه

• توضیح گرید سیستم در بوت استرپ
• استفاده از کلاس‌های گرید : container-fluid , row ,col
• استفاده از کلاس‌های عکسی :‌ img-fluid , rounded-circle
• استفاده از کلاس‌های فونتی : font-weight-bold , display-4
• استفاده از کلاس‌های رنگی :‌ text-wihte, text-danger , bg-transparent
• استفاده از کلاس های فاصله گذار : my-auto , p-4, p-5

درس پنجم :‌  ساخت قسمت درباره من

• استفاده از کلاس‌های گرید :‌ container
• استفاده از کلاس های فاصله گذار : pb-2 , mt-5 , p-5
• استفاده از کلاس‌های فونتی : font-weight-bold
• کلاس های دیگر :‌ text-center , alert-secondary , rounded

درس ششم :  ساخت قسمت توانایی های من

• مفهوم progress-bar یا نوار پیشرفت
• ایجاد نوار پیشرفت با کلاس های : progress , progress-bar
• استفاده از کلاس‌های گرید :‌ container , row , col
• استفاده از کلاس های رنگی : bg-success , bg-primary , bg-danger , bg-info

درس هفتم :  ساخت فرم ارتباط با من

• ایجاد فرم با کلاس‌های : form-control , col-form-label
• استفاده از کلاس‌های گرید :‌ container , row , col
• استفاده از کلاس‌های رنگی : alert-warning , btn-info
• استفاده از کلاس های فاصله گذار : mt4 , mt-5, pb-2 , mb-5

درس هشتم :‌  تفاوت بوت استرپ ۴ و ۵

• بررسی تفاوت هر نسخه با نسخه‌ی قبل
• نکته‌های ریزی که بوت استرپ ۴ رو به محبوب ترین ورژن تبدیل کرد
• تفاوت‌های اصلی نسخه ۵ بوت استرپ

درس نهم :  مهاجرت از بوت استرپ ۴ به بوت استرپ ۵

• عوض کردن لینک‌ها و استفاده از لینک‌هایی که بوت استرپ رو به وسیله فضای ابری در اختیار ما قرار می‌دادند
• بررسی اینکه در بوت استرپ ۵ چه ویژگی هایی تغییر کرده است
• مرتب کردن سایت و درست کردن اسامی attribute‌ها

درس دهم :  جمع بندی و طوفان فکری