Facebook introduced StyleX, a styling system that combines the convenience of CSS-in-JS with the performance of static CSS.
It generates collision-resistant atomic styles and allows you to write expressive, type-safe, and super-fast code.
StyleX is already used in all of the company's products.
The main idea is to compile styles at build time so that the CSS code does not grow with the application.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Top websites to practice your frontend skills:
➡️ Codewell: https://codewell.cc
➡️ CSSBattle: https://cssbattle.dev
➡️ LeetCode https://leetcode.com
➡️ Codewars https://codewars.com
➡️ Frontend mentor https://frontendmentor.io
➡️ CodinGame https://codingame.com
💎 @Htmlcss_channels
Please open Telegram to view this post
VIEW IN TELEGRAM
cssbattle.dev
The funnest CSS game for web designers & developers
❤1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
Motion
Patterns
AB Tests
Inspiration
Breakdowns
UI components
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
SVG Animation
This is an SVG image animated in SCSS
👉 code
💎 @Htmlcss_channels | #css #JavaScript #HTML
This is an SVG image animated in SCSS
👉 code
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4
This project shows your skills, boosts your resume, and helps you stand out. Follow these steps:
• Install VS Code
• Create a folder named portfolio
• Add index.html, style.css, and script.js
html
<!DOCTYPE html>
<html>
<head>
<title>Your Name</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Your Name</h1>
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>Short intro, skills, and goals</p>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="project">Project 1</div>
<div class="project">Project 2</div>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email: [email protected]</p>
</section>
<footer>© 2025 Your Name</footer>
</body>
</html>
css
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background: #f5f5f5;
color: #333;
}
header {
background: #222;
color: white;
padding: 1rem;
text-align: center;
}
nav a {
margin: 0 1rem;
color: white;
text-decoration: none;
}
section {
padding: 2rem;
}
.project {
background: white;
padding: 1rem;
margin: 1rem 0;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
footer {
text-align: center;
padding: 1rem;
background: #eee;
}
• Add smooth scroll, dark mode toggle, or animations if needed
• Push code to GitHub
• Deploy with Netlify or Vercel (connect repo, click deploy)
• Make it mobile responsive (media queries)
• Add a profile photo and social links
• Use icons (Font Awesome)
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1🔥1
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
❤3
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
Forwarded from هشتگ تبلیغ تخصصی (گسترده)
💡 دوره جــــامع OKR
🗣 سرفصل ها:
🔘 آشنایی با OKR
🔘 انواع طرز فکر
🔘 از مدیریت علمی تا آشنایی با MBO و OKR
🔘 اهداف و نتایج کلیدی موثر
🔘 مدیریت چرخه OKR
🔘 شناسایی و پیادهسازی KPI در سازمان
🔘 مربیگری OKR
🏛 موسسه توسعه
📌 مشاوره رایگان و مشاهده جزئیات دوره:
➕ httb.ir/Yqxp7
➕ httb.ir/Yqxp7
➕ httb.ir/Yqxp7
➖➖
🗣 سرفصل ها:
🏛 موسسه توسعه
➖➖
Please open Telegram to view this post
VIEW IN TELEGRAM
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