Font

Type a website and give its fonts

👇👇
https://fontofweb.com



💎 Channel: @htmlcss_channels

معرفی وبسایت FrontEnd Mentor

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

🔹یکی از امکانات جذاب وبسایت این هستش که میتونه با بقیه رقابت کنید و خودتون رو به چالش بکشید، همچنین با جمع کردن مقدار مشخصی امتیاز میتونید برای خودتون یک پروفایل ایجاد کنید که میتونه در پیدا کردن شغل بهتون کمک کنه.

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

https://www.frontendmentor.io/

#معرفی_سایت

💎 Channel: @htmlcss_channels

Social buttons effects

Code


#button

💎 Channel: @htmlcss_channels

🔰 معرفی سایت برای آیکون

می تونین انواع آیکون های موردنياز تون رو با فرمت های svg و jsx از داخل این سایت پیدا کنید.

🌐 heroicons.com


#معرفی_سایت

💎 Channel: @htmlcss_channels

🔸یه سایت فوق العاده برای طراحان وب با کلی نمونه واقعی و آنلاین برای الهام گرفتن

💎 https://browsingmode.com

دسته بندی بر اساس موضوع داره و می‌تونید نمونه وب سایت‌ها رو بر این اساس ببینید


#معرفی_سایت


💎 Channel: @htmlcss_channels

#CSS Underline Hover #Animation



💎 Channel: @htmlcss_channels

🔰 معرفی سایت webdesign inspiration

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


🌐 webdesign-inspiration.com


#معرفی_سایت


💎 Channel: @htmlcss_channels

Creating a Responsive Login Form with #HTML and #CSS


💎 Channel: @htmlcss_channels

#HTML & #CSS



💎 Channel: @htmlcss_channels

💎 Channel: @htmlcss_channels

💻 100 روز، 100 پروژه HTML، CSS و جاوا اسکریپت رایگان (به همراه کد)

اگه روزی یکی از این پروژه ها رو انجام بدید روز صدم 100 پروژه در رزومه تون دارید

👇

https://www.codewithrandom.com/100-day-frontend-projects/

#پروژه



💎 Channel: @htmlcss_channels

Responsive Subscription Form using #HTML and #CSS




💎 Channel: @htmlcss_channels

با دادن این پرامپت به  نسخه جدید چت جی پی تی( GPT-4O ) می تونید به راحتی کدهای HTML و Css  طرح مورد نظرتان را دریافت کنید
طرح دست نویس وبسایت را براش آپلود کنید و ازش بخواهید کدهای HTML و Css طرح مورد نظر را به شما بدهد


Prompt: Create HTML and CSS code for the webpage design I've sketched.



💎 Channel: @htmlcss_channels

100+ پروژه جاوا اسکریپت برای مبتدیان به همراه کد

آیا شما مبتدی هستید و به دنبال  پروژه های جاوا اسکریپت برای بهبود دانش جاوا اسکریپت خود هستید؟
اگر بله، پس این پست برای شما مناسب است
👇

https://www.codewithrandom.com/2023/11/21/frontend-projects-source-code/

#پروژه
#JavaScript
💎 Channel: @htmlcss_channels

JavaScript Tips to Change Border Radius & Background Color

#JavaScript

💎 Channel: @htmlcss_channels

📥بیش از 50 ایده جالب پروژه #ReactJs به همراه کد از سطح مبتدی و متوسط

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

📌با ساختن این پروژه های React JS چه چیزهایی یاد می گیرید؟

HTML و CSS , JS  , JSX , GIT , NodeJS + NPM , Redux

🔻🔻
https://www.codewithrandom.com/2024/03/14/react-js-projects-source-code/

#پروژه

💎 Channel: @htmlcss_channels

Creating a Hovered Gallery Effect with Flex Grow

https://github.com/atherosai/ui/tree/main/gallery-06


💎 Channel: @htmlcss_channels

💢 پنج پروژه front-end به همراه کد

1) YouTube clone
https://codingkite.com/design-responsive-youtube-home-page-clone/

2) contact us
https://codingkite.com/how-to-create-contact-us-page-using-html-css/

3) Netflix clone
https://codingkite.com/responsive-netflix-landing-page-in-html-css-js/

4) signup form
https://codingkite.com/create-responsive-sign-in-form-using-javascript/

5) image hover effect
https://codingkite.com/easiest-way-to-create-image-hover-effect-using-html/

#پروژه

💎 Channel: @htmlcss_channels

File Upload in #HTML & #CSS



💎 Channel: @htmlcss_channels

‼️چرا باید تایپ اسکریپت را یاد بگیریم؟

ممکن است این سوال برای توسعه‌دهندگان پیش آید که چرا با وجود زبان قدرتمندی مانند جاوا اسکریپت، نیاز به زبان دیگری مانند تایپ اسکریپت داریم. مزایای استفاده از زبان تایپ اسکریپت زمانی برای ما آشکارتر می‌شود که در پروژه‌های بزرگ ملزم به استفاده از جاوا اسکریپت باشیم. TypeScript به عنوان Superset زبان جاوا اسکریپت ارائه شده و هدف آن کدنویسی آسان با کم‌ترین میزان خطا و استفاده از ویژگی‌های پیشرفته‌ی زبان‌های شی‌گرا، جهت نوشتن برنامه‌های سمت سرور و سمت کاربر است. از طرفی، با توجه به سرعت بالای رشد و توسعه‌ی زبان‌های تحت وب، مرورگرها برای پشتیبانی و انتشار ویژگی‌های جدید در موتورهای خود، به مدت زمانی نسبتا طولانی نیاز دارند. اینجاست که بار دیگر #TypeScrip کارآیی خود را نشان می‌دهد. TypeScript با کتابخانه‌های محبوب جاوا اسکریپت مانند #ReactJS و #JQUERY سازگار است و پس از کامپایل، می‌توانید اطمینان حاصل کنید که خروجی نهایی کد شما با انواع مرورگرها سازگار خواهد بود. تایپ اسکریپت برای توسعه‌ی برنامه‌های AngularJS 2 توصیه شده است. بنابراین اگر علاقه‌مند به توسعه‌ی وب اپلیکیشن‌های خود با این فریم‌ورک هستید، می‌بایست ابتدا تایپ اسکریپت را فرا بگیرید زیرا برای نوشتن کدهای JavaScript درون انگولار از کدهای زبان TypeScript استفاده می‌شود. اگر اکنون با جاوا اسکریپت آشنایی دارید، مهاجرت به TypeScript برای شما مشکل‌ساز نخواهد بود؛ زیرا سینتکس TypeScript شباهت زیادی با Javascript و EC6 دارد و تمامی کدهای جاوا اسکریپت موجود، در تایپ اسکریپت معتبر شناخته می‌شوند. حتی می‌توانید با تغییر پسوند فایل‌ها از js به ts، از آن‌ها به عنوان کدهای تایپ‌اسکرپیت استفاده کنید.



💎 Channel: @htmlcss_channels