This media is not supported in your browser
VIEW IN TELEGRAM
Light/Dark Toggle With Morphing Icon
Theme switcher. Implemented using CSS.
⤷Get code
💎 @Htmlcss_channels | #css #JavaScript #HTML
Theme switcher. Implemented using CSS.
⤷Get code
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2🔥1🙏1
This media is not supported in your browser
VIEW IN TELEGRAM
You can make the UI cleaner by reducing or removing scrollbars using the scrollbar-width property
Example of a thin scrollbar:
Example of a hidden scrollbar (the area remains scrollable):
Suitable for sidebars, data tables, chat panels, dashboards with lots of scrolls, carousels, touch interfaces.
As a result, the scroll works, but the UI looks neater
💎 @Htmlcss_channels | #css #JavaScript #HTML
Example of a thin scrollbar:
ul {
scrollbar-width: thin;
}Example of a hidden scrollbar (the area remains scrollable):
.cards-container {
scrollbar-width: none;
}Suitable for sidebars, data tables, chat panels, dashboards with lots of scrolls, carousels, touch interfaces.
As a result, the scroll works, but the UI looks neater
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1👍1🙏1
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🙏1
This media is not supported in your browser
VIEW IN TELEGRAM
Making smooth scrolling to elements using the scrollIntoView method
JS:
💎 @Htmlcss_channels | #css #JavaScript #HTML
JS:
const links = document.querySelectorAll('.link');
links.forEach((item) => {
item.addEventListener('click', (e) => {
e.preventDefault();
let id = item.getAttribute('href');
let formattierID = id.substring(1);
let section = document.getElementById(formattierID);
section.scrollIntoView({
behavior: 'smooth',
});
});
});Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Shoe Swap
The logic for switching slides is implemented in JS. Animated in SCSS.
Code
💎 @Htmlcss_channels | #css #JavaScript #HTML
The logic for switching slides is implemented in JS. Animated in SCSS.
Code
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3
ابزارهای موجود در این مقاله به ساده‌سازی و سرعت بخشیدن به فرآیند توسعه و آزمایش front-end کمک می‌کنند.
- از استخراج سبک های CSS از وب سایت ها گرفته تا تجزیه و تحلیل و بهینه سازی SEO.
https://proglib.io/p/15-superpoleznyh-plaginov-chrome-v-pomoshch-frontenderu-2024-09-20
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8
اگر قصد داری معماری میکروفرانت اند را اصولی و مرحله‌به‌مرحله یاد بگیری، این لیست می‌تواند یک نقطه شروع محکم و قابل اتکا باشد.
https://github.com/billyjov/microfrontend-resources
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
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: http://codewell.cc
➡️ CSSBattle: http://cssbattle.dev
➡️ LeetCode http://leetcode.com
➡️ Codewars http://codewars.com
➡️ Frontend mentor http://frontendmentor.io
➡️ CodinGame http://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
Forwarded from هشتگ تبلیغ تخصصی (گسترده)
🎯 ۹ ساعت آموزش #رایگان
⏱️ 9 ساعت آموزش + لایو ترید
🎁 برای مدت محدود: کاملاً #رایگان!
(💵 ارزش واقعی دوره: ۵٬۰۰۰٬۰۰۰ تومان)
💡 تو این ۹ ساعت یاد می‌گیری مثل برنده‌ها باشی:
⚙️ ترکیب معاملات دستی و رباتیک
🧠 مدیریت سرمایه‌ت مثل حرفه‌ای‌ها
📊 سنجش استراتژی‌هات با منطق و عدد
📈 ساخت تحلیل واقعی از اخبار، احساسات و داده‌ها
➖➖➖➖
📌 چرا رایگانه؟
چون آموزش باکیفیت، شروع اعتماده — ادامه مسیر دست خودته.
Please open Telegram to view this post
VIEW IN TELEGRAM
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
❤3
This project shows your skills, boosts your resume, and helps you stand out. Follow these steps:
1️⃣ Setup Your Environment
• Install VS Code
• Create a folder named portfolio
• Add index.html, style.css, and script.js
2️⃣ Create the HTML Structure (index.html)
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: your@email.com</p>
</section>
<footer>© 2025 Your Name</footer>
</body>
</html>
3️⃣ Add CSS Styling (style.css)
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;
}
4️⃣ Add Interactivity (Optional - script.js)
• Add smooth scroll, dark mode toggle, or animations if needed
5️⃣ Host Your Site
• Push code to GitHub
• Deploy with Netlify or Vercel (connect repo, click deploy)
6️⃣ Bonus Improvements
• 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
Forwarded from رویدادها و دوره های آموزشی
اگر دنبال ترکیب ایده‌آل قدرت، پایداری و قیمت مناسب هستی، RTX 4090 بهترین انتخابه؛ ⚡
قوی‌ترین کارت گرافیک 24GB در جهان، مناسب برای اینفرنس و ترینینگ مدل‌های زبانی تا 30B پارامتر
با توان پردازشی فوق‌العاده 82+ TFLOPS 🚀
ایرانGPU
تنها و اولین شرکت بورسی هوش مصنوعی در ایران
با ۵ سال سابقه فعالیت تخصصی
و ۲۰+ دیتاسنتر فعال در سراسر کشور
⭐ شروعی مقرون‌به‌صرفه برای پروژه‌های هوش مصنوعی شما
📩 برای دریافت مشاوره همین حالا پیام دهید.
🔗 https://B2n.ir/wd7102
قوی‌ترین کارت گرافیک 24GB در جهان، مناسب برای اینفرنس و ترینینگ مدل‌های زبانی تا 30B پارامتر
با توان پردازشی فوق‌العاده 82+ TFLOPS 🚀
ایرانGPU
تنها و اولین شرکت بورسی هوش مصنوعی در ایران
با ۵ سال سابقه فعالیت تخصصی
و ۲۰+ دیتاسنتر فعال در سراسر کشور
⭐ شروعی مقرون‌به‌صرفه برای پروژه‌های هوش مصنوعی شما
📩 برای دریافت مشاوره همین حالا پیام دهید.
🔗 https://B2n.ir/wd7102
❤1
✅ Advanced Front-End Development Skills 🌐✨
🔹 1. Responsive Design
Why: Your website should look great on mobile, tablet, and desktop.
Learn:
⦁ Media Queries
⦁ Flexbox
⦁ CSS Grid
Example (Flexbox Layout):
Example (Media Query):
🔹 2. CSS Frameworks
Why: Pre-built styles save time and help maintain consistency.
Bootstrap Example:
Tailwind CSS Example:
🔹 3. JavaScript Libraries (jQuery Basics)
Why: Simplifies DOM manipulation and AJAX requests (still useful in legacy projects).
Example (Hide Element):
🔹 4. Form Validation with JavaScript
Why: Ensure users enter correct data before submission.
Example:
🔹 5. Dynamic DOM Manipulation
Why: Add interactivity (like toggling dark mode, modals, menus).
Dark Mode Example:
🔹 6. Performance Optimization Tips
⦁ Compress images (use WebP)
⦁ Minify CSS/JS
⦁ Lazy load images
⦁ Use fewer fonts
⦁ Avoid blocking scripts in
📌 Mini Project Ideas to Practice:
⦁ Responsive landing page (Bootstrap/Tailwind)
⦁ Toggle dark/light theme
⦁ Newsletter signup form with validation
⦁ Mobile menu toggle with JavaScript
💎 @Htmlcss_channels | #css #JavaScript #HTML
🔹 1. Responsive Design
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;
}
}🔹 2. CSS Frameworks
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>
🔹 3. JavaScript Libraries (jQuery Basics)
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>
🔹 4. Form Validation with JavaScript
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>
🔹 5. Dynamic DOM Manipulation
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>
🔹 6. Performance Optimization Tips
⦁ Compress images (use WebP)
⦁ Minify CSS/JS
⦁ Lazy load images
⦁ Use fewer fonts
⦁ Avoid blocking scripts in
<head>📌 Mini Project Ideas to Practice:
⦁ Responsive landing page (Bootstrap/Tailwind)
⦁ Toggle dark/light theme
⦁ Newsletter signup form with validation
⦁ Mobile menu toggle with JavaScript
💎 @Htmlcss_channels | #css #JavaScript #HTML
❤1