Responsive Web design with HTML5 and CSS @far_amooz.pdf
10.3 MB
☑️ کتاب طراحی وب. انتشار 2020 ( انگلیسی )
آیا شما یک توسعه دهنده full-stack هستید که نیاز دارید تا مهارت‌های front-end خود را ارتقا بخشید؟ شاید هم شما روی front-end کار می‌کنید و به یک مرور کلی از هر آنچه که HTML و CSS مدرن ارائه می‌دهند احتیاج دارید؟ یا احتمالا تا به حال فقط وبسایت کوچکی را ساخته اید و به درک عمیقی از طراحی وب واکنش گرا و چگونگی دستیابی به آن نیاز دارید؟ اگر این گونه هست، این کتاب برای شماست!
📂 دسته بندی:
#کتاب
#html #css
🆔 @Web_Developer_98 ☜
آیا شما یک توسعه دهنده full-stack هستید که نیاز دارید تا مهارت‌های front-end خود را ارتقا بخشید؟ شاید هم شما روی front-end کار می‌کنید و به یک مرور کلی از هر آنچه که HTML و CSS مدرن ارائه می‌دهند احتیاج دارید؟ یا احتمالا تا به حال فقط وبسایت کوچکی را ساخته اید و به درک عمیقی از طراحی وب واکنش گرا و چگونگی دستیابی به آن نیاز دارید؟ اگر این گونه هست، این کتاب برای شماست!
📂 دسته بندی:
#کتاب
#html #css
🆔 @Web_Developer_98 ☜
❤🔥2
☑️ به اطلاع می رسانیم دوره آموزشی HTML5 و Css3 با پوشش JavaScript در 30 جلسه از چنل وب دیزاینر98 تقدیم حضور خواهد شد.
🗣زبان آموزش: فارسی 🇮🇷
📊 سطح دوره: پیشرفته
🗂 دسته بندی: #html_css
🌈 Web_Designer98.t.me
🗣زبان آموزش: فارسی 🇮🇷
📊 سطح دوره: پیشرفته
🗂 دسته بندی: #html_css
🔸این دوره مناسب افرادی است که زبان HTML و CSS را فراگرفته‌اند و قصد دارند نحوه به‌کارگیری این دو زبان و نحوه ترکیب این دو را در قالب‌های تخصصی و رابط کاربری سطح بالا یاد بگیرند این دوره اختصاصاً به پیاده‌سازی قالب‌های حرفه‌ای و گرافیکی با استفاده از HTML و CSS می‌پردازد. پس اگر این دو زبان را به‌صورت کامل بلد هستید و قصد دارید مهارت خود را در پیاده‌سازی قالب‌های تخصصی بالا ببرید این دوره مناسب شما است. تاحدامکان سعی میشه در این دوره از مثال‌های کاربردی و مطالبی که در بازار کار زیاد استفاده می‌شود استفاده شود تا مطالب به‌صورت کامل برای شما عزیزان کاربردی و قابل‌فهم باشد و همین‌طور زمانی که وارد بازار کار شدید پیاده‌سازی انواع طرح‌ها برای شما بسیار ساده و به‌راحتی یک آب‌خوردن باشد.
🌈 Web_Designer98.t.me
👏4
✅ بهترین فریمورک‌های CSS
1⃣ Bootstrap:
یکی از پرطرفدارترین فریمورک‌ها که امکانات زیادی برای طراحی ریسپانسیو ارائه می‌دهد.
2⃣ Tailwind CSS:
یک فریمورکUtility-First که به شما امکان می‌دهد طراحی‌های بسیار سفارشی بسازید.
3⃣ Foundation:
فریمورکی قوی که برای طراحی وب‌سایت‌های ریسپانسیو و کاربردی مناسب است.
4⃣ Bulma:
فریمورکی مدرن و مبتنی بر Flexbox که استفاده از آن بسیار آسان است.
5⃣ Semantic UI:
فریمورکی با تمرکز بر روی معنایی بودن کد و طراحی زیبا.
6⃣ Materialize CSS:
فریمورکی بر اساس اصول Material Design که طراحی زیبا و کاربرپسند را به همراه دارد.
7⃣ Skeleton:
فریمورکی سبک و ساده برای طرح‌های اولیه و پروژه‌های کوچک.
8⃣ Pure css:
فریمورکی مینیمالیستی که برای سرعت و کارایی بالا ساخته شده است.
#وب #فریمورک #css #html
🌈 Web_Designer98.t.me
1⃣ Bootstrap:
یکی از پرطرفدارترین فریمورک‌ها که امکانات زیادی برای طراحی ریسپانسیو ارائه می‌دهد.
2⃣ Tailwind CSS:
یک فریمورکUtility-First که به شما امکان می‌دهد طراحی‌های بسیار سفارشی بسازید.
3⃣ Foundation:
فریمورکی قوی که برای طراحی وب‌سایت‌های ریسپانسیو و کاربردی مناسب است.
4⃣ Bulma:
فریمورکی مدرن و مبتنی بر Flexbox که استفاده از آن بسیار آسان است.
5⃣ Semantic UI:
فریمورکی با تمرکز بر روی معنایی بودن کد و طراحی زیبا.
6⃣ Materialize CSS:
فریمورکی بر اساس اصول Material Design که طراحی زیبا و کاربرپسند را به همراه دارد.
7⃣ Skeleton:
فریمورکی سبک و ساده برای طرح‌های اولیه و پروژه‌های کوچک.
8⃣ Pure css:
فریمورکی مینیمالیستی که برای سرعت و کارایی بالا ساخته شده است.
#وب #فریمورک #css #html
🌈 Web_Designer98.t.me
✅ آموزش ساخت کپچا ساده با استفاده از جاوااسکریپت 👇👇
💢 توضیحات:
1⃣ این کد یک کپچا عددی تصادفی ایجاد می‌کند.
2⃣ کاربر باید عدد تولید شده را در فیلد ورودی وارد کند.
3⃣ وقتی کاربر روی دکمه "تأیید" کلیک می‌کند، کپچا بررسی می‌شود و نتیجه نمایش داده می‌شود.
4⃣ اگر کاربر پاسخ نادرستی وارد کند، کپچا به‌طور تصادفی دوباره تولید می‌شود.
#css #html #js
🌈 Web_Designer98.t.me
<!-- https://yangx.top/Web_Designer98 -->
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@Web_Designer98</title>
<style>
/* https://yangx.top/Web_Designer98 */
body {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
#captcha {
font-size: 24px;
margin: 10px;
}
/* https://yangx.top/Web_Designer98 */
</style>
</head>
<body>
<!-- https://yangx.top/Web_Designer98 -->
<h2>تأیید کپچا @Web_Designer98</h2>
<div id="captcha"></div>
<input type="text" id="captchaInput" placeholder="کد را وارد کنید">
<button onclick="validateCaptcha()">تأیید</button>
<p id="result"></p>
<!-- https://yangx.top/Web_Designer98 -->
<script>
//https://yangx.top/Web_Designer98
function generateCaptcha() {
const captchaLength = 5;
let captcha = '';
for (let i = 0; i < captchaLength; i++) {
captcha += Math.floor(Math.random() * 10); // تولید اعداد ۰ تا ۹
}
//https://yangx.top/Web_Designer98
document.getElementById('captcha').textContent = captcha;
return captcha;
}
let generatedCaptcha = generateCaptcha();
function validateCaptcha() {
const userInput = document.getElementById('captchaInput').value;
const result = document.getElementById('result');
if (userInput === generatedCaptcha) {
result.textContent = 'کپچا موفقیت آمیز بود! ✅';
} else {
result.textContent = 'کپچا ناموفق بود. لطفاً دوباره امتحان کنید. ❌';
generatedCaptcha = generateCaptcha(); // تولید دوباره کپچا
document.getElementById('captchaInput').value = ''; // پاک کردن فیلد ورودی
}
}
</script>
<!-- https://yangx.top/Web_Designer98 -->
</body>
</html>
💢 توضیحات:
1⃣ این کد یک کپچا عددی تصادفی ایجاد می‌کند.
2⃣ کاربر باید عدد تولید شده را در فیلد ورودی وارد کند.
3⃣ وقتی کاربر روی دکمه "تأیید" کلیک می‌کند، کپچا بررسی می‌شود و نتیجه نمایش داده می‌شود.
4⃣ اگر کاربر پاسخ نادرستی وارد کند، کپچا به‌طور تصادفی دوباره تولید می‌شود.
#css #html #js
🌈 Web_Designer98.t.me
👍5