Tech_updates
January 25, 2025 at 01:07 AM
30-days learning plan to master web development, covering HTML, CSS, JavaScript, and foundational concepts 👇👇
### Week 1: HTML and CSS Basics
Day 1-2: HTML Fundamentals
- Learn the structure of HTML documents.
- Tags: , , , , , <h1> to <h6>, <p>, <a>, <img>, <div>, <span>, <ul>, <ol>, <li>, <table>, <form>.
- Practice by creating a simple webpage.
Day 3-4: CSS Basics
- Introduction to CSS: Selectors, properties, values.
- Inline, internal, and external CSS.
- Basic styling: colors, fonts, text alignment, borders, margins, padding.
- Create a basic styled webpage.
Day 5-6: CSS Layouts
- Box model.
- Display properties: block, inline-block, inline, none.
- Positioning: static, relative, absolute, fixed, sticky.
- Flexbox basics.
Day 7: Project
- Create a simple multi-page website using HTML and CSS.
### Week 2: Advanced CSS and Responsive Design
Day 8-9: Advanced CSS
- CSS Grid.
- Advanced selectors: attribute selectors, pseudo-classes, pseudo-elements.
- CSS variables.
Day 10-11: Responsive Design
- Media queries.
- Responsive units: em, rem, vh, vw.
- Mobile-first design principles.
Day 12-13: CSS Frameworks
- Introduction to frameworks (Bootstrap, Tailwind CSS).
- Basic usage of Bootstrap.
Day 14: Project
- Build a responsive website using Bootstrap or Tailwind CSS.
### Week 3: JavaScript Basics
Day 15-16: JavaScript Fundamentals
- Syntax, data types, variables, operators.
- Control structures: if-else, switch, loops (for, while).
- Functions and scope.
Day 17-18: DOM Manipulation
- Selecting elements (getElementById, querySelector).
- Modifying elements (text, styles, attributes).
- Event listeners.
Day 19-20: Working with Data
- Arrays and objects.
- Array methods: push, pop, shift, unshift, map, filter, reduce.
- Basic JSON handling.
Day 21: Project
- Create a dynamic webpage with JavaScript (e.g., a simple to-do list).
### Week 4: Advanced JavaScript and Final Project
Day 22-23: Advanced JavaScript
- ES6+ features: let/const, arrow functions, template literals, destructuring.
- Promises and async/await.
- Fetch API for AJAX requests.
Day 24-25: JavaScript Frameworks/Libraries
- Introduction to React (components, state, props).
- Basic React project setup.
Day 26-27: Version Control with Git
- Basic Git commands: init, clone, add, commit, push, pull.
- Branching and merging.
Day 28-29: Deployment
- Introduction to web hosting.
- Deploy a website using GitHub Pages, Netlify, or Vercel.
Day 30: Final Project
- Combine everything learned to build a comprehensive web application.
- Include HTML, CSS, JavaScript, and possibly a JavaScript framework like React.
- Deploy the final project.
### Additional Resources
- HTML/CSS: MDN Web Docs, W3Schools.
- JavaScript: MDN Web Docs, Eloquent JavaScript.
- Frameworks/Libraries: Official documentation for Bootstrap, Tailwind CSS, React.
- Version Control: Pro Git book.
Practice consistently, build projects, and refer to official documentation and online resources for deeper understanding.
</div>
<div class="flex items-center justify-start mt-6 pt-4 border-t border-gray-100">
<div class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
<div class="flex items-center text-gray-700">
<div class="flex items-center space-x-2">
<span class="text-2xl transform hover:scale-110 transition-transform cursor-default">
❤️
</span>
<span class="text-2xl transform hover:scale-110 transition-transform cursor-default">
👍
</span>
<span class="text-2xl transform hover:scale-110 transition-transform cursor-default">
👏
</span>
<span class="ml-2 font-semibold text-gray-800 text-sm">
22
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300 mb-6">
<h2 class="text-xl font-semibold mb-6 flex items-center">
<i class="fas fa-comments mr-2 text-blue-500"></i>
Comments
</h2>
<div class="mb-8">
<form id="commentForm" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="user_name" class="block text-sm font-medium text-gray-700 mb-1">Name *</label>
<input type="text" id="user_name" name="user_name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your name">
</div>
<div>
<label for="user_email" class="block text-sm font-medium text-gray-700 mb-1">Email *</label>
<input type="email" id="user_email" name="user_email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your email">
</div>
</div>
<div>
<label for="content" class="block text-sm font-medium text-gray-700 mb-1">Comment *</label>
<textarea id="content" name="content" rows="4" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your comment"></textarea>
</div>
<div class="flex justify-end">
<button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors font-medium">
Submit Comment
</button>
</div>
</form>
</div>
<div id="commentsList" class="space-y-6">
</div>
<div id="noComments" class="text-center py-8 text-gray-500 hidden">
No comments yet
</div>
</div>
</article>
<aside class="lg:w-1/3 order-2">
<div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300">
<h2 class="text-lg font-semibold mb-4 flex items-center">
<i class="fas fa-layer-group mr-2 text-blue-500"></i> Similar Channels
</h2>
<div class="space-y-3">
<a href="/channel/67a0f15b7626af808d11b916/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors">
<div class="relative flex-shrink-0">
<img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/la-opinion-noticias-cover_bb8e937fc6035183e8380509d5228e29.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="La Opinión Noticias WhatsApp Channel">
<div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div>
</div>
<div class="flex-1">
<h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">La Opinión Noticias</h4>
<p class="text-xs text-gray-500 flex items-center">
<i class="fas fa-users mr-1 text-blue-500"></i>
111.0K
</p>
</div>
</a>
<a href="/channel/67a0f15b7626af808d11b921/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors">
<div class="relative flex-shrink-0">
<img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/el-tiempo-ultima-hora-cover_a5c38643c247df58948305bdcade8fe9.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="EL TIEMPO Última Hora WhatsApp Channel">
<div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div>
</div>
<div class="flex-1">
<h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">EL TIEMPO Última Hora</h4>
<p class="text-xs text-gray-500 flex items-center">
<i class="fas fa-users mr-1 text-blue-500"></i>
585.7K
</p>
</div>
</a>
<a href="/channel/67a0f15f7626af808d11b927/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors">
<div class="relative flex-shrink-0">
<img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/at-endocrinorosero-cover_23b443c6046a9ffa007179012b7682e2.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="@endocrinorosero WhatsApp Channel">
<div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div>
</div>
<div class="flex-1">
<h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">@endocrinorosero</h4>
<p class="text-xs text-gray-500 flex items-center">
<i class="fas fa-users mr-1 text-blue-500"></i>
107.6K
</p>
</div>
</a>
<a href="/channel/67a0f15f7626af808d11b95a/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors">
<div class="relative flex-shrink-0">
<img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/la-silla-vacia-el-desatrase-cover_6cce8114da85989e939f96cda8af1e25.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="La Silla Vacía🪑- El Desatrase WhatsApp Channel">
<div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div>
</div>
<div class="flex-1">
<h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">La Silla Vacía🪑- El Desatrase</h4>
<p class="text-xs text-gray-500 flex items-center">
<i class="fas fa-users mr-1 text-blue-500"></i>
151.5K
</p>
</div>
</a>
<a href="/channel/67a0f15f7626af808d11b937/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors">
<div class="relative flex-shrink-0">
<img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/adriana-meaury-cover_909ef2345f8c72831013136d30db9224.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="Adriana Meaury WhatsApp Channel">
<div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div>
</div>
<div class="flex-1">
<h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">Adriana Meaury</h4>
<p class="text-xs text-gray-500 flex items-center">
<i class="fas fa-users mr-1 text-blue-500"></i>
49.7K
</p>
</div>
</a>
<a href="/channel/67a0f1587626af808d11b90a/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors">
<div class="relative flex-shrink-0">
<img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/blu-radio-cover_a350a9f2da5f5573cd70feff9304152b.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="BLU Radio WhatsApp Channel">
<div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div>
</div>
<div class="flex-1">
<h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">BLU Radio</h4>
<p class="text-xs text-gray-500 flex items-center">
<i class="fas fa-users mr-1 text-blue-500"></i>
904.4K
</p>
</div>
</a>
<a href="/channel/67a0f24d7626af808d11c5df/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors">
<div class="relative flex-shrink-0">
<img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/lowyat-net-cover_5776290ec785d806dde1dd42e8d9235e.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="Lowyat NET WhatsApp Channel">
<div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div>
</div>
<div class="flex-1">
<h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">Lowyat NET</h4>
<p class="text-xs text-gray-500 flex items-center">
<i class="fas fa-users mr-1 text-blue-500"></i>
145.2K
</p>
</div>
</a>
<a href="/channel/67a0f1597626af808d11b90c/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors">
<div class="relative flex-shrink-0">
<img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/cocinando-con-minuto30-cover_f11d03d8c24b2a9a37527a106accbd80.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="Cocinando Con Minuto30 WhatsApp Channel">
<div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div>
</div>
<div class="flex-1">
<h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">Cocinando Con Minuto30</h4>
<p class="text-xs text-gray-500 flex items-center">
<i class="fas fa-users mr-1 text-blue-500"></i>
358.8K
</p>
</div>
</a>
</div>
</div>
</aside>
</div>
</main>
</div>
<!-- Footer -->
<footer class="bg-gradient-to-br from-gray-900 to-gray-900 text-white mt-12">
<div class="container mx-auto max-w-7xl px-4 py-12">
<!-- Main Footer Content -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Brand Section -->
<div>
<div class="flex items-center space-x-2 mb-4">
<img src="/img/logo-color.svg" alt="Logo" width="235">
</div>
<p class="text-gray-400 text-sm leading-relaxed mb-4">Discover and join the best WhatsApp channels that match your interests.</p>
</div>
<!-- Explore -->
<div>
<h3 class="text-base font-semibold mb-4">Explore</h3>
<ul class="space-y-2 text-sm text-gray-400">
<li><a href="/verified-channels" class="hover:text-green-400 transition-colors">Verified Channels</a></li>
<li><a href="/add" class="hover:text-green-400 transition-colors">Add Your Channel</a></li>
<!-- <li><a href="https://blog.wapeek.io" class="hover:text-green-400 transition-colors">Blog</a></li> -->
</ul>
</div>
<!-- Help & Support -->
<div>
<h3 class="text-base font-semibold mb-4">Help & Support</h3>
<ul class="space-y-2 text-sm text-gray-400">
<li><a href="/page/contact" class="hover:text-green-400 transition-colors">Contact Us</a></li>
<li><a href="/page/privacy" class="hover:text-green-400 transition-colors">Privacy Policy</a></li>
<li><a href="/page/terms" class="hover:text-green-400 transition-colors">Terms of Service</a></li>
</ul>
</div>
</div>
<!-- Bottom Footer -->
<div class="border-t border-gray-800 mt-8 pt-6 flex flex-col md:flex-row items-center justify-between text-gray-500 text-sm">
<p>© 2025 WhatsApp Channels Directory</p>
</div>
</div>
</footer>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.css">
<script>
document.addEventListener('DOMContentLoaded', function() {
// Plyr.js Video Player Initialization
const videoPlayer = document.querySelector('.video-player');
if (videoPlayer) {
const player = new Plyr(videoPlayer, {
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
hideControls: true,
resetOnEnd: true
});
}
// Lazy load images
const lazyImages = document.querySelectorAll('img.lazy-load');
if ('IntersectionObserver' in window) {
const imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
const img = entry.target;
img.classList.remove('lazy-load');
imageObserver.unobserve(img);
}
});
}, { rootMargin: "0px 0px 200px 0px" });
lazyImages.forEach(img => imageObserver.observe(img));
} else {
lazyImages.forEach(img => img.classList.remove('lazy-load'));
}
// Share Button Logic
const shareButton = document.getElementById('shareButton');
const shareOptions = document.getElementById('shareOptions');
const copyLinkButton = document.getElementById('copyLink');
if (shareButton && shareOptions) {
shareButton.addEventListener('click', (event) => {
event.stopPropagation();
shareOptions.classList.toggle('hidden');
});
document.addEventListener('click', (event) => {
if (!shareOptions.contains(event.target) && !shareButton.contains(event.target)) {
shareOptions.classList.add('hidden');
}
});
}
if (copyLinkButton) {
copyLinkButton.addEventListener('click', () => {
navigator.clipboard.writeText(window.location.href).then(() => {
const originalText = copyLinkButton.innerHTML;
copyLinkButton.innerHTML = '<i class="fas fa-check text-green-500 mr-2"></i> Copied!';
setTimeout(() => {
copyLinkButton.innerHTML = originalText;
shareOptions.classList.add('hidden');
}, 1500);
}).catch(err => console.error('Failed to copy link: ', err));
});
}
// Comments Logic
const commentForm = document.getElementById('commentForm');
const commentsList = document.getElementById('commentsList');
const noComments = document.getElementById('noComments');
const postId = '67b206f38646045dc1fcc7bb';
const channelId = '120363297233107559';
// Show 'no comments' message if list is initially empty
if (commentsList && noComments && commentsList.children.length === 0) {
noComments.classList.remove('hidden');
}
if (commentForm) {
commentForm.addEventListener('submit', async function(e) {
e.preventDefault();
const submitButton = commentForm.querySelector('button[type="submit"]');
submitButton.disabled = true;
submitButton.classList.add('opacity-50');
const formData = {
user_name: document.getElementById('user_name').value,
user_email: document.getElementById('user_email').value,
content: document.getElementById('content').value,
post_id: postId,
channel_id: channelId
};
try {
const response = await fetch('/comments/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
const data = await response.json();
// Clear previous alerts
commentForm.querySelector('.alert')?.remove();
const alertDiv = document.createElement('div');
alertDiv.className = 'alert mb-4 p-4 rounded-lg';
if (data.success) {
alertDiv.classList.add('bg-green-100', 'text-green-700');
alertDiv.textContent = data.message;
commentForm.reset();
} else {
alertDiv.classList.add('bg-red-100', 'text-red-700');
alertDiv.textContent = data.message || 'An error occurred.';
}
commentForm.insertBefore(alertDiv, commentForm.firstChild);
setTimeout(() => alertDiv.remove(), 5000);
} catch (error) {
console.error('Error submitting comment:', error);
} finally {
submitButton.disabled = false;
submitButton.classList.remove('opacity-50');
}
});
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const postContainer = document.querySelector('.post-body');
if (!postContainer) {
console.warn('.post-body elementi bulunamadı.');
return;
}
// GÜNCELLENMİŞ VE DAHA GÜÇLÜ REGEX:
// Bu Regex, linkin tamamını yakalar ve sadece video ID'sini (1. grup) bize verir.
// &t=... gibi ek parametreleri de eşleşmeye dahil ederek temizler.
const youtubeRegex = /https?:\/\/(?:www\.)?(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})(?:[?&]?[^"'\s<]*)?/gi;
// .post-body içeriğini alıp üzerinde değişiklik yapıyoruz.
let content = postContainer.innerHTML;
// Bulunan her YouTube linki için değiştirme işlemi yap
// Callback fonksiyonu: (fullMatch, videoId)
// - fullMatch: Regex'in yakaladığı tüm link (örn: https://.../S6jLC1Dl5TE&t=41s)
// - videoId: Sadece parantez içindeki yakalama grubu (örn: S6jLC1Dl5TE)
content = content.replace(youtubeRegex, (fullMatch, videoId) => {
// Eğer bir videoId yakalandıysa, Plyr HTML'i ile değiştir.
if (videoId) {
console.log(`YouTube linki bulundu. Video ID: ${videoId}`);
return `
<div class="plyr-container" style="margin: 20px 0;">
<div class="js-plyr-player" data-plyr-provider="youtube" data-plyr-embed-id="${videoId}"></div>
</div>
`;
}
// Eğer bir sorun olursa orijinal metni koru
return fullMatch;
});
// .post-body içeriğini yeni oluşturduğumuz HTML ile güncelliyoruz.
postContainer.innerHTML = content;
// Yeni eklenen tüm Plyr oynatıcılarını bul ve başlat.
const players = document.querySelectorAll('.js-plyr-player');
if (players.length > 0) {
const plyrInstances = Array.from(players).map(p => new Plyr(p, {
// Plyr seçeneklerini buraya ekleyebilirsiniz:
// https://github.com/sampotts/plyr/#options
// Örneğin: captions: { active: true }
}));
// Oynatıcı nesnelerine konsoldan erişmek için (isteğe bağlı)
window.plyrInstances = plyrInstances;
console.log(`${plyrInstances.length} adet YouTube oynatıcısı başarıyla başlatıldı.`);
}
});
</script>