نحوه ساخت وب سایت Portfolio Developer خود با HTML ، CSS و JavaScript

کلاد کریس

همه این روزها به وب سایت ها و برنامه های وب احتیاج دارند. بنابراین اگر به عنوان یک توسعه دهنده وب کار می کنید ، فرصت های زیادی برای شما وجود دارد.

اما اگر می خواهید یک کار توسعه دهنده وب بدست آورید ، برای نشان دادن مهارت ها و تجربه های خود به یک وب سایت خوب نمونه کارها نیاز دارید.

در این آموزش ، من در مورد برخی از دلایل اصلی ایجاد وب سایت نمونه کارها برای خودتان بحث خواهم کرد. سپس ، من شما را از طریق نحوه ساخت وب سایت Portfolio کاملاً پاسخگو با HTML ، CSS و JavaScript پیاده می کنم.

جدول محتویات

وب سایت نمونه کارها توسعه دهنده چیست؟

یک وب سایت پرتفوی توسعه دهنده اطلاعات مربوط به کارفرمایان بالقوه در مورد مهارت ، تجربه و پروژه های شما را که روی آن کار کرده اید ارائه می دهد.

شما می توانید وب سایت نمونه کارها خود را به عنوان resumé آنلاین خود در نظر بگیرید.

چرا باید یک وب سایت نمونه کارها داشته باشید

1. یک وب سایت نمونه کارها حضور آنلاین شما را افزایش می دهد

به عنوان یک توسعه دهنده ، شما به حضور آنلاین نیاز دارید. شما می توانید این حضور آنلاین را در سیستم عامل های رسانه های اجتماعی مانند توییتر ، فیس بوک و اینستاگرام پرورش دهید. اما این موارد کاملاً خود شما نیستند ، زیرا ناظران آن سیستم عامل ها تقریباً کنترل کامل بر حساب شما دارند.

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

2. وب سایت نمونه کارها Résumé آنلاین شماست

وب سایت نمونه کارها شما مانند Résumé آنلاین شما است. مشتریان بالقوه و مدیران استخدام می توانند به راحتی شما را به صورت آنلاین پیدا کرده و پروژه ها و مهارت های قبلی خود را بررسی کنند.

این همچنین بدان معنی است که وقتی کسی می خواهد به شما فرصتی برای کار برای آنها بدهد و از پروژه های قبلی شما بخواهد ، فقط یک لینک به وب سایت خود (نمونه کارها خود) به آنها می دهید. این نه تنها پروژه های شما را دارد بلکه مهارت و اطلاعات شما در مورد تجربه گذشته شما نیز هست.

3. یک وب سایت نمونه کارها شواهدی از تخصص در زمینه شما را نشان می دهد

داشتن وب سایت نمونه کارها (چه رسد به ساختن شما) به عنوان یک توسعه دهنده ، پیام واضحی را ارسال می کند که مهارت های خود را عملی می کنید و می دانید چه کاری انجام می دهید.

یک نمونه کارها همچنین می تواند به ایجاد اعتماد به مشتری کمک کند زیرا آنها شواهد مستقیمی در مورد کیفیت کار شما دارند.

پروژه نمونه کارها - نحوه ساخت نمونه کارها توسعه دهنده آنلاین خود

می توانید با HTML ، CSS و JavaScript یک وب سایت پرتفوی جالب برای خودتان ایجاد کنید. و این همان کاری است که ما در اینجا می خواهیم انجام دهیم.

من قبلاً این کار را چند ماه پیش انجام دادم و آن را به عنوان یک محصول رایگان در Gumroad در دسترس همه قرار دادم ، بنابراین تصمیم گرفتم یک آموزش در مورد نحوه انجام آن ایجاد کنم.

این نسخه ی نمایشی زنده از آنچه ما خواهیم ساخت.

برای دنبال کردن با من ، می توانید پرونده های استارت را از GitHub بگیرید.

ساختار پوشه پروژه

برای جلوگیری از سردرگمی ، من در پوشه های مربوطه HTML ، CSS ، JavaScript ، آیکون ها و تصاویر این پروژه را ترتیب می دهم.

پرونده HTML در پوشه ریشه می رود و پرونده های تصویر ، نماد ، CSS و JavaScript در یک پوشه دارایی در زیر پوشه های جداگانه خود قرار می گیرند. این یک عمل معمول است.

همچنین یک فایل Readme وجود دارد که شامل تمام ابزارهایی است که من در این پروژه استفاده کردم ، با پیوندهای مربوطه. در پرونده های استارت موجود است.

دیگ بخار HTML اساسی

هر کس هنگام کدگذاری یک پروژه کامل با HTML ، CSS و JavaScript ترجیحات خود را دارد. برخی دوست دارند ابتدا کل دیگ بخار HTML را تعریف کنند و بعداً CSS را تعریف کنند ، اما من دوست دارم همه بخش ها را به صورت بخش انجام دهم.

بنابراین ، من با بخش Navbar شروع می کنم. اما خوب است که نشان دهیم که دیگ اصلی HTML چگونه به نظر می رسد:

من تمام بخش هایی را که در HTML اظهار نظر کرده است ، دارم تا بتوانید بهتر را دنبال کنید. در دیگ بخار همچنین CDN برای انیمیشن CSS (یک کتابخانه انیمیشن CSS) و نمادهای یونی وجود دارد ، کتابخانه نماد که من برای این پروژه انتخاب کردم.

من یک Favicon ساخته شده از طریق Favicon IO و آن را در بخش سر به هم پیوند داده ام. Favicon تصویر کوچکی است که در برگه مرورگر نشان می دهد.

بخش Navbar

بخش Navbar شامل آرم ساده متن H1 و منوی NAV است:

اگر نمی دانید عنصر دکمه چه چیزی را نشان می دهد ، این میله ها برای جابجایی منوی NAV در موبایل (منوی همبرگر) است. این در دسک تاپ پنهان خواهد شد اما در موبایل نشان داده شده است.

من همچنین بخش های جداگانه وب سایت را به این موارد NAV پیوند می دهم ، بنابراین وقتی کاربر روی هر یک از موارد NAV کلیک می کند ، آنها را به بخشی که مربوط به مورد NAV است که کلیک می کنند ، منتقل می شوند.

به همین دلیل من به ترتیب ویژگی های مرجع Hyperlink (HREF) را به ترتیب در #about ، #Skills ، #Projects و #Contacts تنظیم کرده ام. بخش جداگانه وب سایت دارای این ویژگی ها به عنوان شناسه است.

Navbar اکنون به این شکل است:

نحوه سبک کردن ناوبر

Navbar قطعاً به برخی از یک ظاهر طراحی شده نیاز دارد تا کمی زیبا تر به نظر برسد.

قبل از اینکه به درستی از Navbar استفاده کنیم ، برخی از متغیرهای CSS را اعلام می کنم تا بعداً کارها را آسانتر کنم. این امر به این دلیل است که ، با متغیرهای CSS ، جلوگیری از افزونگی و تکرار در پرونده CSS خود ساده تر است.

نحو برای اعلام متغیرهای CSS به این شکل است:

برای استفاده از متغیر ، این کار را انجام می دهید:

من همچنین قلم Roboto را از Google وارد می کنم ، و برخی از تنظیم مجدد CSS را برای حذف برخی از ویژگی های پیش فرض مانند حاشیه و بالشتک برای عناصر ، تغییر متن برای برچسب های لنگر و نوع لیست برای لیست ها اعلام می کنم.

اگر توجه داشته باشید ، من برای همه پیوندها در وب سایت از خط 39 تا 41 یک حالت شناور را تنظیم کردم.

در اینجا یک قانون خوب برای اعلام متغیرهای CSS وجود دارد: اگر خودتان را با استفاده از همان خاصیت و مقدار اغلب در همان پرونده CSS می بینید ، باید متغیری را برای آن اعلام کنید تا از تکرار جلوگیری شود.

شما همچنین باید مانند من ، نام های متغیر خود را تا حد ممکن توصیفی داشته باشید تا به دیگران که ممکن است با کد شما کار کنند ، کمک کنند.

با تنظیم مجدد ، تغییراتی در Navbar در مرورگر وجود دارد:

برای سبک کردن NAVBAR و تراز کردن محتوای موجود در آن ، من از CSS Flexbox استفاده می کنم:

CSS فوق چه کاری انجام می دهد؟

من ناوبر را با خاصیت موقعیت چسبناک کردم ، بنابراین مهم نیست که چه چیزی در صدر باشد.

ویژگی Z-Index با مقدار 1 اطمینان می دهد که NAVBAR بیش از هر عنصر دیگری در صفحه وب نمایش داده می شود. اینگونه است که شما یک ناوبر چسبناک درست می کنید.

علاوه بر این ، من همچنین سایه ای را به پایین Navbar با خاصیت جعبه سایه اعمال کردم.

Navbar ظاهری جدید دارد:

اما ما هنوز تمام نشده ایم. موارد منو NAV باید در کنار هم باشد ، نه در بالای یکدیگر. من این کار را با Flexbox نیز انجام خواهم داد.

من همچنین با ساخت H1 ، NAV و دکمه منوی Hamburger ، بقیه یک ظاهر طراحی Navbar را به پایان می رسانم. من این کار را با برخی از متغیرهای CSS که در ابتدا اعلام شده اند انجام می دهم.

نوار منوی همبرگر نیز باید پنهان شود. این کلاس از . burger-menu است ، بنابراین می توانیم نمایشگر را با آن تنظیم کنیم و همچنین دکمه را بهتر جلوه دهیم.

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

نحوه ساخت بخش قهرمان

بخش بعدی که ما روی آن کار خواهیم کرد بخش Hero است. این کار به همان اندازه ناو کار نمی کند.

دیگ بخار HTML برای بخش Hero در قطعه کد زیر قرار دارد:

تنها چیزی که کمی عجیب است ، کلاسهای Animate__Animated Animate__Shakex متصل به Div حاوی متن About Me است. نام کلاس از CSS Animate است و آنها برای تحریک ظرف متن درباره من خدمت می کنند.

با این کار ، وب سایت ظاهری جدید دارد:

چگونه بخش قهرمان را سبک کنیم

Flexbox یک بار دیگر به نجات می آید! در این بخش دو مجموعه اصلی محتوا وجود دارد - یک تصویر و متن در یک Div. بنابراین می توانیم از Flexbox برای نمایش آنها در کنار هم استفاده کنیم. می توانید ببینید که چگونه در قطعه کد CSS در زیر کار می کند:

تصویر Jane Doe ما خیلی بزرگ است ، بنابراین ما باید عرض و قد آن را کاهش دهیم. ما همچنین برای خوانایی باید متن زیستی (درباره متن من) را سبک کنیم. متغیرهای CSS در ابتدا اعلام شده در اینجا بسیار مؤثر خواهند بود.

بخش قهرمان اکنون زیبا به نظر می رسد:

چگونه می توان بخش های بیشتری را در مورد من ساخت

من این بخش را درج کردم تا اطلاعات بیشتری در مورد جین Doe با برخی از متن های نگهدارنده داشته باشم.

شما می توانید از این مورد استفاده کنید تا اطلاعاتی را که نتوانسته اید در بخش About Me قرار دهید ، درج کنید.

دیگ بخار HTML برای این بخش کاملاً کوتاه و ساده است:

CSS نیز ساده است. تمام کاری که ما انجام خواهیم داد این است که یک رنگ پس زمینه با متغیر CSS-Bg-Color CSS تنظیم کنید ، بخش را با تنظیم بالشتک ، حاشیه ، خط خط و تراز کردن متن H2 به مرکز قابل خواندن کنید:

در مرورگر ، بیشتر در مورد بخش به نظر می رسد:

نحوه ساخت بخش مهارت ها

از نسخه ی نمایشی زنده ، خواهید دید که بخش مهارت ها شامل مهارت های مرتبط مانند HTML ، CSS ، JavaScript و غیره است. من توانستم نمادهای آن زبانها را به عنوان SVG از Icons8 بدست آورم.

دیگ بخار HTML برای این بخش در قطعه کد زیر است:

در کل شش نماد وجود دارد. و به جای اینکه آنها را با Flexbox تراز کنم ، من آنها را در دو مکان (3 آموزش) با کلاس های مجموعه اول و دوم گروه بندی کردم ، بنابراین آنها در صدر یکدیگر قرار می گیرند. این بدان معنی است که استایل هایی که ما اعمال خواهیم کرد قابل خواندن تر خواهد بود. آسان!

توجه کنید که من ویژگی بارگذاری را به نمادها و تصاویر جداگانه وصل کرده ام و آن را تنبل می کنم. این امر اطمینان حاصل می کند که تصاویر فقط در هنگام پیمایش کاربر به بخش های حاوی آنها بارگیری می شوند. این متعاقباً زمان بار را سرعت می بخشد ، زیرا فقط آنچه لازم است بارگیری می شود.

نحوه سبک کردن بخش مهارت ها

بدون یک ظاهر طراحی شده ، بخش مهارت ها به این شکل است:

ما باید بخش را کمی سبک کنیم زیرا هنوز به اندازه کافی خوب به نظر نمی رسد:

در CSS فوق ، من حداکثر عرض را برای کل بخش تعریف کردم تا چیزها را برای تجربه بهتر کاربر به مرکز سوق دهد.

سایر سبک های مورد استفاده ما مربوط به وضوح و خوانایی است. به عنوان مثال ، من اندازه نمادها را افزایش دادم تا آنها را با خصوصیات عرض و ارتفاع قابل مشاهده تر کنم. من همچنین یک بالشتک 1REM (16 پیکسل) را برای همه نمادها اعمال کردم تا آنها را کمی از یکدیگر جدا کنم.

بخش مهارت ها اکنون جالب به نظر می رسد:

با این حال ، من فکر می کنم این بخش می تواند بهتر باشد ، بنابراین من تصمیم گرفته ام تا با ویژگی جعبه سایه ، ترفندهای بیشتری ایجاد کنم.

از HTML به یاد داشته باشید که یک ویژگی کلاس به نام . ICON-CARD وجود دارد که به همه نمادها متصل است. من از نام کلاس استفاده می کنم تا تمام نمادها را در کارت قرار دهم:

بخش مهارت ها بسیار بهتر به نظر می رسد: به آن نگاه کنید!

نحوه ساخت بخش پروژه ها

یکی از اهداف اصلی وب سایت نمونه کارها ، نمایش پروژه های خود است. بنابراین ما برای نمایش پروژه هایی که در گذشته روی آن کار کرده اید ، باید بخشی بسازیم.

این بخش احتمالاً خسته کننده ترین سبک است ، اما Flexbox جلوی دوست ما نمی شود.

HTML برای این بخش در قطعه کد زیر است:

با نگاهی به HTML ، در کل سه پروژه وجود دارد ، همه در بخش های جداگانه خود با نام کلاس پروژه-کانتینر و پروژه کارت. این نام های کلاس در یک ظاهر طراحی مداوم پروژه ها نقش مهمی خواهد داشت.

عنصر بخش حاوی خود یک کلاس از پروژه ها و ویژگی های شناسایی پروژه ها نیز دارد. نام کلاس برای یک ظاهر طراحی شده است و شناسه آن برای پیوند دادن آن به پیوند پروژه ها در NAVBAR است.

این پروژه ها دارای تصاویر جداگانه خود با نام کلاس Project-Pic ، عناوین آنها با کلاس با عنوان پروژه ، جزئیات بیشتر با نام کلاس پروژه های پروژه و پیوند با نام کلاس Project-Link هستند.

تنها هدف ارائه همه آنها نام کلاس منحصر به فرد ، سبک کردن آنها است.

این چند پروژه ای است که من هنگام شروع کار به عنوان یک توسعه دهنده روی خودم کار کردم.

بخش پروژه ها به نظر می رسد در مرورگر:

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

نحوه سبک کردن بخش پروژه

اول از همه ، من با تنظیم رنگ خاکستری (-Bg-Color) که در متغیرهای CSS به عنوان مقدار اعلام کردیم ، به کل بخش رنگ پس زمینه می دهم.

من همچنین با استفاده از کلاس Project-Pic ، عرض و ارتفاع تصاویر پروژه را کاهش می دهم. سپس من از Flexbox برای قرار دادن پروژه ها در کنار هم استفاده می کنم.

این بخش خیلی بهتر به نظر می رسد:

اکنون تصاویر بهتر به نظر می رسند ، اما عنوان پروژه ، جزئیات پروژه و پیوندهای پروژه باید به خوبی در ظروف فردی خود تراز شوند.

کل بخش پروژه نیز باید به مرکز منتقل شود. شما برای انجام این کار نیازی به Flexbox ندارید - می توان آن را با تنظیم ویژگی تراز متن به ارزش مرکز انجام داد:

توجه داشته باشید که من همچنین عرض 21. 875REM (350 پیکسل) را برای ظروف پروژه شخصی تعیین کردم. این کار آنها را از طرفین جدا می کند تا تجربه کاربری بهتری داشته باشد. در این حالت ، کاربر قبل از دیدن همه چیز نیازی به نگاه کردن به تمام وجود ندارد.

این بخش اکنون بهتر به نظر می رسد:

ما هنوز هم می توانیم این بخش را بهتر کنیم. عناوین پروژه ، جزئیات پروژه و پیوندهای پروژه با هم به نظر می رسد ، بنابراین باید مقداری بالشتک و حاشیه اضافه کنیم.

ظروف خاص پروژه نیز باید متمایز تر به نظر برسند. ویژگی جعبه سایه دوباره در اینجا مؤثر خواهد بود ، بنابراین من آنها را در کارتهای شخصی آنها قرار می دهم.

بخش پروژه اکنون بهتر به نظر می رسد:

نحوه ساخت بخش مخاطب

اگر یک کارفرمای یا مشتری بالقوه وب سایت نمونه کارها شما را جذاب می داند ، ممکن است بخواهند با شما تماس بگیرند. بنابراین می خواهید در این بخش ، در کنار پیوندها به پروفایل های رسانه های اجتماعی ، یک فرم تماس داشته باشید.

HTML برای این بخش به این شکل است:

در اینجا ما یک فرم تماس با فیلدهای ورودی برای نام و ایمیل ، یک Textarea ایجاد کرده ایم تا افراد بتوانند پیام ارسال شده را وارد کنند و یک دکمه ارسال برای ارسال پیام برای دیدن آن.

اگر نگاهی خوب به عنصر فرم داشته باشید ، خواهید دید که من یک ویژگی اکشن دارم که از Formspree به یک URL تنظیم شده است. این همان چیزی است که من برای ارسال فرم انتخاب کردم. با FormSpree می توانید بدون نیاز به تنظیم سرور با PHP یا JavaScript ، پیام را مستقیماً در صندوق ورودی ایمیل خود دریافت کنید.

توجه داشته باشید که شما نمی توانید از URL من استفاده کنید - این برای شما مفید نخواهد بود. به راحتی می توانید خود را در وب سایت FormsPree به صورت رایگان تنظیم کنید. من همچنین منبعی را در مورد نحوه تنظیم FormSpree در پرونده README پروژه ضمیمه کردم.

من برخی از ویژگی های شناسه و کلاس را برای ورودی های فردی برای سبک کردن آنها تنظیم کرده ام. همچنین یک ویژگی نام برای همه قسمت های ورودی وجود دارد. این مورد توسط سرویس ارسال فرم FormsPree مورد نیاز است.

برای به دست آوردن یک اعتبارسنجی اساسی ، من یک ویژگی مورد نیاز را پیوست کردم ، بنابراین اگر کاربر هر یک از قسمت های ورودی را بدون استفاده از آن رها کند ، از ارسال آن امتناع می ورزد.

نحوه سبک کردن بخش تماس

بدون یک ظاهر طراحی شده ، بخش مخاطب به هیچ وجه خوب به نظر نمی رسد:

تمام کاری که من در CSS انجام خواهم داد ، کل محتوا را به مرکز تراز می کند و باعث می شود قسمت های ورودی بهتر به نظر برسند.

با ویژگی های تراز و حاشیه متن ، می توانید H2 و ظرف را برای فرم تماس با مرکز تراز کنید.

من همچنین کل فرم را در یک کارت با ویژگی جعبه سایه قرار می دهم.

زمینه های ورودی ، Textarea ، برچسب ها و متغیرها قطعاً به برخی از یک ظاهر طراحی شده و همچنین برای کمک به تراز و وضوح نیاز دارند:

فرم اکنون بهتر به نظر می رسد:

اما صاحبخانه ها با برچسب ها سازگار نیستند. بنابراین ما باید به آن رنگ و مقداری بالشتک بدهیم. من به آن رنگ اصلی تنظیم شده در لیست های متغیر CSS را می دهم.

برای انتخاب متغیرهای موجود برای یک ظاهر طراحی شده ، می توانید از شبه کلاس مکان نگهدارنده استفاده کنید:

در فرم تماس ، تنها چیزی که باقی مانده است ، سبک کردن دکمه است. دکمه ها به راحتی سبک هستند:

در قطعه کد CSS در بالا ، من با دادن 100 ٪ به آن ، دکمه را در ظرف فرم به طول می انجامم. من همچنین با مقداری بالشتک ، حاشیه ، مرز و وزن فونت جسورانه تر آن را دیدم.

خاصیت-شعاع مرزی با مقدار 5px لبه های تیز را از بین می برد و انتقال در هنگام کاهش دکمه در حالت شناور ، کمترین سرعت را کاهش می دهد.

حالت شناور در قطعه کد CSS در زیر تعریف شده است:

فرم اکنون بسیار بهتر به نظر می رسد:

به یاد داشته باشید که داشتن پیوندهای رسانه های اجتماعی در وب سایت نمونه کارها شما یک مزیت برای هر کسی است که ممکن است بخواهد با شما تماس بگیرد. این کار بعدی است که ما می خواهیم انجام دهیم ، و ما می خواهیم این کار را به روشی منحصر به فرد انجام دهیم.

HTML برای دکمه های اجتماعی در قطعه کد زیر است:

نمادهای اجتماعی که من انتخاب کردم نمادهای GIF انیمیشن از Icons8 هستند. من همه آنها را در یک ظرف با کلاس اجتماعی قرار دادم و برای یک ظاهر طراحی شده به آنها یک کلاس فردی از Socicon دادم.

به برخی از نمادهای رسانه های اجتماعی متحرک که در زیر چشمک می زنند نگاهی بیندازید:

چگونه نمادهای اجتماعی را سبک کنیم

با استفاده از CSS فوق ، نمادهای اجتماعی در صفحه وب به سمت راست ثابت می شوند ، بنابراین هرکسی که به وب سایت مراجعه کند ، مهم نیست که در کجا پیمایش می کند.

من همچنین با اختصاص دادن همه مقادیر کاهش عرض و ارتفاع ، اندازه نمادها را کاهش دادم.

تنها کاری که باید انجام شود ، پاورقی است. هیچ چیز پیچیده ای در پاورقی HTML و CSS جدا از موجودیت شخصیت رزرو شده برای نماد کپی رایت و قلب وجود ندارد:

اکنون یک وب سایت پرتفوی تمام عیار داریم!

اما ما باید آن را پاسخگو باشیم ، زیرا در دستگاه های کوچکتر خوب به نظر نمی رسد:

ما باید تمام محتوای بخش های جداگانه را در قسمت بالای بخش دیگر (در یک طرح ستون) نمایش دهیم. ما می توانیم این کار را به راحتی با نمایش داده شدگان رسانه ای و Flexbox انجام دهیم.

قبل از افزودن نمایش داده های رسانه ای برای پاسخگویی ، اجازه می دهیم یک دکمه پیمایش به بالا را با HTML ، CSS و JavaScript پیاده سازی کنیم.

نحوه اضافه کردن پیمایش به دکمه بالا

HTML برای دکمه Scroll to Top

برای HTML ، من یک نماد متحرک از Icons8 گرفتم و تصمیم گرفتم آن را در یک برچسب I قرار دهم.

برچسب I دارای یک کلاس پیمایش برای یک ظاهر طراحی شده و شناسه پیمایش برای انتخاب آن با JavaScript است. این امر به این دلیل است که در پروژه های من ، من دوست دارم از کلاس هایی برای یک ظاهر طراحی شده و شناسه برای عملکردهای JavaScript استفاده کنم.

چگونه می توان پیمایش را به نماد برتر سبک کرد

من نماد پیمایش به بالا را درست مثل نمادهای اجتماعی ثابت می کنم. من همچنین به آن یک ویژگی مکان نما از نشانگر می دهم ، بنابراین مکان نما وقتی کاربر روی آن حرکت می کند تغییر می کند.

با استفاده از کلاس آراسته به نماد پیمایش به بالا ، من همچنین اندازه نماد را برای دید افزایش می دهم:

نماد خوب به نظر می رسد:

اما هنوز کاری انجام نمی دهد. بنابراین ما باید آن را با چند خط JavaScript عملکردی کنیم:

فیلمنامه فوق چه کاری انجام می دهد؟

خط اول دکمه پیمایش به بالا را با ویژگی شناسه متصل به آن در HTML انتخاب می کند. ما در اینجا از روش querySelector () استفاده کردیم. همچنین می توانید از روش getElementById () استفاده کنید.

در خطوط باقیمانده ، من از Click EventListener برای دستیابی به عمل کلیک کاربر و بهره برداری از قسمت Scrollto از شیء ویندوز استفاده کردم تا دکمه کاربردی باشد.

با استفاده از این قابلیت ، هنگامی که کاربر روی دکمه پیمایش به بالا کلیک می کند ، صفحه به آرامی به سمت بالا و سمت چپ وب سایت می رود. من این کار را با تنظیم بالا به 0 ، از سمت چپ به 0 و رفتار برای صاف کردن انجام دادم.

با باز کردن کنسول ابزارهای توسعه دهنده مرورگر خود می توانید در مورد شیء ویندوز اطلاعات بیشتری کسب کنید. پنجره را تایپ کرده و وارد کنید ، سپس همه چیز موجود در شیء ویندوز را مشاهده می کنید ، همانطور که در زیر انجام دادم:

چگونه می توان وب سایت نمونه کارها خود را پاسخ داد

برای پاسخگویی وب سایت ، ما از نمایش داده های CSS Media و Flexbox استفاده خواهیم کرد.

ابتدا باید تصاویر و متن را کوچکتر به نظر برسانیم ، و سپس با تنظیم جهت فلکس روی ستون ، محتوای هر بخش را در یک طرح عمودی قرار خواهیم داد.

در پرس و جو رسانه ای ، من از 2 نقطه شکست - 720px و 420px استفاده خواهم کرد.

نقطه شکست 720px برای تبلت ها و تلفن های همراه است و 420px برای تلفن های کوچک مانند آیفون 6 و تلفن های اندرویدی کوچک است.

نقاط دیدنی رسانه ای نکاتی است که می خواهید محتوای یک وب سایت با توجه به عرض یک دستگاه پاسخ دهد. بنابراین ، هر کدی که در زیر نقطه شکست 720px قرار دارد ، بسته به اینکه آیا عرض حداکثر یا عرض را مشخص می کنید ، در دستگاه های دارای صفحه نمایش کمتر از یا بیشتر از 720px منعکس می شود.

در مورد عرض حداکثر 720px ، نحو پرس و جو رسانه ای به این شکل است:

نحوه ایجاد پرس و جو رسانه ای برای تبلت ها و تلفن های همراه (حداکثر عرض 720px)

ما شروع به پاسخگویی وب سایت درست از Navbar خواهیم کرد ، زیرا Navbar در دستگاه های کوچکتر خوب به نظر نمی رسد.

اول ، من قصد دارم بالشتک Navbar را کاهش دهم تا آرم H1 و موارد منوی NAV به خوبی جا دهند:

همه چیز اکنون کمی بهتر به نظر می رسد:

در دستگاه های کوچک ، موارد منو NAV باید در بالای یکدیگر قرار بگیرند و آنها باید پنهان شوند. بنابراین ، زمان آن برای به روزرسانی کد است تا در ابتدا منوی همبرگر پنهان شود.

نحوه ساخت منوی همبرگر

برای تهیه منوی همبرگر ، باید موارد منو NAV را از نمای خارج کنیم. سپس باید یک کلاس از نمایش را در موارد لیست NAV تنظیم کنیم که با چند خط JavaScript جابجا می شوند (به یاد داشته باشید موارد NAV در یک لیست بدون هماهنگ قرار دارند).

در قطعه کد CSS در بالا ، من یک موقعیت ثابت را در لیست بدون هماهنگ (UL) تنظیم کردم تا آن را روی صفحه شناور کند. من همچنین آن را از بالای 86px با بالا با بالا: 86px و 10 ٪ به سمت چپ پایین آوردم.

من به آن 80 ٪ از والدین آن (عنصر NAV از HTML) را به آن اختصاص دادم ، آن را با متن متنی به مرکز هل دادم و در نهایت آن را با ویژگی Transform TranslateX (120 ٪) پنهان کردم. این امر آن را به سمت راست سوق می دهد و آن را از منظره بیرون می کشد.

و اکنون ، هنگامی که کاربر برای نشان دادن موارد NAV کلیک می کند ، همه آنها از سمت راست می چرخند. عالی.

اگر می خواهید موارد منوی NAV از سمت چپ به سمت چپ بکشید ، مقدار خاصیت Transform را به Transform: Translatex (-120 ٪) تغییر دهید (این مخالف مستقیم Transform: TranslateX (120 ٪) است). بسته به اولویت شما ، به آسانی آسان است.

من همچنین حاشیه 8px را به موارد NAV اختصاص دادم تا فضای بیشتری به آنها بدهم.

Navbar اکنون به این شکل است:

نوار منوی همبرگر پنهان است. بنابراین ما باید آن را با دادن یک نمایشگر از بلوک ، تنظیم یک کلاس نمایش برای ترجمه در محور x به 0 برای نشان دادن آن ، و سپس آن را با JavaScript تغییر دهیم.

میله های منوی همبرگر ما اکنون نشان داده می شود ، اما موارد NAV پنهان مانده است. برای نشان دادن آن ، باید کلاس نمایش را با JavaScript روشن و خاموش کنیم.

جاوا اسکریپت برای منوی همبرگر

برای جابجایی موارد منوی NAVBAR NAV با JavaScript ، ابتدا باید همه موارد مربوط به NAVBAR را انتخاب کرده و آنها را در برخی از متغیرها ذخیره کنیم:

• متغیر Burger میله های منوی Hamburger را انتخاب کنید
• متغیر UL موارد لیست را انتخاب می کند (پیوندهای NAV در کل)
• متغیر NAV خود ظرف (عنصر NAV) را انتخاب می کند

کاری که ما باید انجام دهیم این است که وقتی کاربر روی نوار منوی همبرگر کلیک می کند ، کلاس NAV UL. SHOW را تغییر دهیم. ما این کار را با اضافه کردن یک EventListener Click به نوار منوی Hamburger و سپس استفاده از روش Toggle برای حذف و اضافه کردن کلاس نمایش انجام خواهیم داد.

به یاد داشته باشید که ما آن را انتخاب کردیم و آن را در متغیری به نام Burger ذخیره کردیم.

موارد NAV ما اکنون می توانند روشن و خاموش شوند:

اما مشکلی وجود دارد - NAV موبایل هر زمان که روی لینک های مورد NAV کلیک شود پنهان نیست. بنابراین ما باید در صورت کلیک بر روی هر یک از پیوندهای مورد NAV ، کلاس NAV UL. SHOW را حذف کنیم.

ما می توانیم این کار را با چند خط جاوا اسکریپت انجام دهیم:

به یاد داشته باشید که پیوندهای NAV دارای یک کلاس از NAV-LINK از HTML هستند. بنابراین من همه آنها را با آن کلاس انتخاب کردم و آنها را در متغیری به نام Navlink قرار دادم. ما این کار را با روش queryselectorall () انجام دادیم.

سپس تمام پیوندها را با روش آرایه foreach حلقه کردم و برای یک رویداد کلیک در همه آنها گوش کردم. سپس من از روش remove () ارائه شده توسط DOM برای حذف کلاس نمایش هر زمان که هر یک از موارد منو NAV کلیک کنید استفاده کردم. این همه موارد لیست را از منظره خارج می کند.

این کار زیادی استبا آنچه که ما فقط پوشش داده ایم می توانید یک منوی همبرگر برای هر وب سایت تهیه کنید.

چگونه بخش قهرمان را پاسخگو کنیم

بخش قهرمان در حال حاضر به نظر نمی رسد عالی است:

تمام کاری که ما باید انجام دهیم این است که به آن جهت فلکس ستون در پرس و جو رسانه ای بدهیم ، عرض و ارتفاع تصویر جین دو را کاهش داده و متن درباره من (متن زیستی) را قابل خواندن کند.

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

چگونه می توان اطلاعات بیشتر در مورد من را پاسخ داد

بخش بیشتر در مورد من بد به نظر نمی رسد ، اما مطمئناً می توانیم آن را بهبود بخشیم:

من CSS زیر را دارم که آن را قابل خواندن و قابل خواندن تر کنم:

من کل بخش را کمی پایین آوردم و از هر طرف بالشتک را افزایش دادم ، H2 را به مرکز تراز کردم و متن را توجیه کردم.

چگونه بخش مهارت ها را پاسخگو کنیم

نمادهای مهارت خیلی بزرگ به نظر می رسند:

تنها کاری که باید در پرس و جو رسانه انجام دهیم کاهش اندازه نمادها با خصوصیات عرض و ارتفاع:

چگونه بخش پروژه ها را پاسخگو کنیم

در بخش پروژه ها ، ما باید با تنظیم جهت فلکس روی ستون ، سه پروژه را در بالای یکدیگر قرار دهیم. من همچنین عرض ظروف جداگانه را کمی کاهش می دهم.

نحوه پاسخگو بودن فرم تماس

عرض فرم تماس باید کاهش یابد تا آن را از طرفین دور کند و مطمئن شوید که نمادهای ثابت رسانه های اجتماعی در بالای آن نیستند.

تنها کاری که باید انجام دهیم این است که حداکثر عرض تنظیم شود:

فرم تماس اکنون بهتر به نظر می رسد:

نحوه پاسخگویی وب سایت در تلفن های کوچک

در تلفن های کوچک مانند آیفون 6 ، 7 و 8 پلاس ، نمادهای اجتماعی و نماد پیمایش به بالا نشان داده نمی شوند. یک پیمایش افقی نیز وجود دارد.

برای رفع این سؤالات ، من برخی از نمایش داده های رسانه ای را در نقطه شکست 420px اضافه می کنم:

من اندازه تصویر جین Doe را کاهش دادم ، و همچنین عرض متن BIO (درباره متن من) ، ظرف پروژه و ظروف فرم تماس را نیز کاهش دادم.

همه این تغییرات باعث می شود که نمادها در سمت راست وب سایت نشان دهند-رسانه های اجتماعی و نمادهای پیمایش به بالا.

اکنون همه چیز خوب به نظر می رسد:

این پایان همه چیز است. ما یک وب سایت نمونه کارها کاملاً پاسخگو داریم.

می توانید نسخه نهایی را به عنوان یک فایل ZIP از این repo github بارگیری کنید.

همچنین می توانید نسخه ی نمایشی زنده وب سایت نمونه کارها را نیز بررسی کنید. این یک readme است که حاوی اطلاعاتی در مورد ابزارهایی است که من استفاده کردم و چگونه می توانید وب سایت را سفارشی کنید.

نتیجه

در این آموزش ، شما یاد گرفتید که یک وب سایت نمونه کارها توسعه دهنده چیست و چرا باید یکی از آنها را داشته باشید.

شما همچنین یاد گرفتید که چگونه یک وب سایت نمونه کارها کاملاً پاسخگو را با HTML ، CSS و JavaScript بسازید.

بخش های مختلف این آموزش هر یک از پروژه های کوچک است که در صورت ترکیب ، به یک وب سایت غول پیکر یک صفحه تبدیل می شوند. به عنوان مثال ، می توانید طراحی کارت ، یک نوار منوی پاسخگو ، یک فرم تماس عملکردی و یک دکمه پیمایش به بالا را انجام دهید زیرا این آموزش همه آنها را پوشش می دهد.

در صورت تمایل می توانید وب سایت را به سلیقه خود سفارشی کنید.

اگر این آموزش را مفید می دانید ، می توانید آن را با دوستان و خانواده خود به اشتراک بگذارید. من واقعاً از آن قدردانی می کنم.