Why: Your website should look great on mobile, tablet, and desktop.
Learn:
⦁ Media Queries
⦁ Flexbox
⦁ CSS Grid
Example (Flexbox Layout):
{
display: flex;
justify-content: space-between;
}Example (Media Query):
@media (max-width: 600px) {.container {
flex-direction: column;
}
}Why: Pre-built styles save time and help maintain consistency.
Bootstrap Example:
<button class="btn btn-success">Subscribe</button>
Tailwind CSS Example:
<button class="bg-green-500 text-white px-4 py-2 rounded">Subscribe</button>
Why: Simplifies DOM manipulation and AJAX requests (still useful in legacy projects).
Example (Hide Element):
<button id="btn">Hide</button>
<p id="text">Hello World</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#btn").click(function() {
$("#text").hide();
});
</script>
Why: Ensure users enter correct data before submission.
Example:
<form onsubmit="return validateForm()">
<input type="email" id="email" placeholder="Email">
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
const email = document.getElementById("email").value;
if (email === "") {
alert("Email is required");
return false;
}
}
</script>
Why: Add interactivity (like toggling dark mode, modals, menus).
Dark Mode Example:
<button onclick="toggleTheme()">Toggle Dark Mode</button>
<script>
function toggleTheme() {
document.body.classList.toggle("dark-mode");
}
</script>
<style>.dark-mode {
background-color: #111;
color: #fff;
}
</style>
⦁ Compress images (use WebP)
⦁ Minify CSS/JS
⦁ Lazy load images
⦁ Use fewer fonts
⦁ Avoid blocking scripts in
<head>⦁ Responsive landing page (Bootstrap/Tailwind)
⦁ Toggle dark/light theme
⦁ Newsletter signup form with validation
⦁ Mobile menu toggle with JavaScript
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
As the mouse moves, JavaScript updates the position of the .magic element to center it relative to the cursor, and CSS provides styling and animation.
👉 code
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
1. Blob maker
https://blobmaker.app
2. Getwaves
https://getwaves.io
3. CSS Button Generator
https://markodenic.com/tools/buttons-…
4. Gradient generator
https://cssgradient.io
5. Glassmorphism
https://glassmorphism.com
6. Neumorphism
https://neumorphism.io
7. Pattern generator
https://patternify.com
8. css3 generator
https://css3generator.com
9. Clip Path Maker
https://bennettfeely.com/clippy
Please open Telegram to view this post
VIEW IN TELEGRAM
www.blobmaker.app
Blobmaker - Make organic SVG shapes for your next design
Make organic SVG shapes for your next design. Modify the complexity, contrast, and color, to generate unique SVG blobs every time.
❤1
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7
This media is not supported in your browser
VIEW IN TELEGRAM
This pseudo-class is useful for styling elements that have no content within them.
Please open Telegram to view this post
VIEW IN TELEGRAM
🙏1
Forwarded from هشتگ تبلیغ تخصصی (گسترده)
📌 بازاریابی رو به اعداد قابل اندازهگیری تبدیل کن ❗️
✅ سرفصلها:
🔹 بخشبندی بازار و طراحی پرسونا
🔹 تصمیمگیری دادهمحور در بازاریابی
🔹 بهینهسازی کانالهای بازاریابی
🔹طراحی و اجرای تستهای بازاریابی
🏛 موسسه توسعه
🌐 httb.ir/6gpHN
Please open Telegram to view this post
VIEW IN TELEGRAM
Before: @media rules reacted to screen width (e.g. under 768px → smaller font).
Problem: components behave differently in cards, sidebars, modals — viewport alone isn’t enough.
Container Queries let CSS adapt to a parent’s size, not the whole screen.
.card { container-type: inline-size; }
@container (max-width: 400px) {
.card-title { font-size: 1rem; }
}How it works
• Mark a container with container-type.
• Use @container to style elements inside it.
• Components adapt to parent width, no global media hacks.
• Cleaner CSS, fewer JS tweaks, local responsive behavior.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1🙏1