How to create the YouTube like-button glow effect when you say “subscribe” in a video CSS Weekly 2024-06-24 | Learn how to create an interaction with an HTML Video element where a call to action button glows when a keyword like "subscribe,” "sign up,” or “like” is mentioned. The interaction is created using JavaScript based on the video content. This rainbow glow subscribe and like button effect can be seen on YouTube when words like "subscribe" or "like" are mentioned in a video.🌟 Demo: codepen.io/ZoranJambor/pen/yLWzqQY?layout=left🔥 Button by Jhey Tompkins (@jh3y): codepen.io/jh3y/pen/eYPYKep✈️ Jhey's website: https://jhey.dev/🔗 Mastering Linting: masteringlinting.com🏷️ 20% discount coupon code: videocue📖 Chapters 00:00 HTML setup for the interaction 01:23 How to generate subtitles for your videos 02:23 The principle behind the rainbow-glow YouTube effect 03:35 How to set up “cuechange” event listener in JavaScript 06:26 How to add/remove class on a button to trigger an animation effect 08:26 Recap - How to create glow effect based on video contentSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #htmlvideo
Frontend News #11: Justified Text, JS moveBefore Method, Performance Optimization CSS Weekly 2025-02-24 | Find out how to create viable justified text with automatic hyphenation, how to move elements around the DOM while preserving their state, how to test different font combinations on a real UI, and more.🔥 Improve your product building skills: cssw.io/product-for-engineers-feb18🔗 Links & Chapters00:00 Intro00:22 Justified Text: Better Than Expected? cloudfour.com/thinks/justified-text-better-than-expected01:43 Move elements around the DOM while preserving their state with moveBefore: bram.us/2025/01/16/move-elements-around-the-dom-while-preserving-their-state-with-movebefore02:46 Product for Engineers: cssw.io/product-for-engineers-feb1803:21 Website Performance Optimization: You Don't Need 20 Tips: debugbear.com/blog/website-performance-optimization03:58 uifonts.app: https://www.uifonts.app/04:27 How to easily create a dark mode using filter: invert(1) 05:24 Scroll Driven Galaxy Orbital Rotation: codepen.io/argyleink/pen/JoPvBzjSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support CSS Weekly☕️ Buy me a Coffee: buymeacoffee.com/cssweekly💖 Support CSS Weekly on Patreon: patreon.com/cssweekly👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS Stickers pack: stickers.css-weekly.comKeep up-to-date with CSS Weekly:🦋 Bluesky: https://bsky.app/profile/cssweekly.com🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#frontendnews #css
VS Code Tips - Code Navigation Using Breadcrumbs CSS Weekly 2025-02-10 | Find out how to quickly navigate between folders, files, and symbols in Visual Studio Code using breadcrumbs, with a detailed overview of keyboard shortcuts and customization options. Subscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweekly📖 Chapters00:00 How breadcrumbs in VS Code work00:29 How to navigate between folders, files, and symbols using breadcrumbs in VS Code01:13 How to use breadcrumbs with keyboard shortcuts in VS Code02:17 How to customize breadcrumbs in VS CodeKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#vscode #vscodetips
How to set up a local testing server using Serve NPM package #coding CSS Weekly 2025-01-29 | A quick tip showing how to set up a simple local testing environment for simple web apps, static files, and more using the NPM package Serve. Serve: npmjs.com/package/serveCSS Stickers: stickers.css-weekly.comSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#coding #css #html #javascript
Create Auto-Expanding Form Fields Using field-sizing CSS Property CSS Weekly 2025-01-22 | Find out how to easily create auto-expanding input and textarea form fields using the field-sizing CSS property. Subscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🦋 Bluesky: https://bsky.app/profile/cssweekly.com🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css
A Practical, Hands-On Guide to Improving Your UI (JavaScriptmas Challenge) CSS Weekly 2024-12-03 | A step-by-step guide on fixing bad user interfaces based on fundamental UI Design principles, along with tips that will help you take your UI skills to the next level—based on a JavaScriptmas coding challenge "Ugly Advent Calendar". 🎄 Participate in JavaScriptmas to win MDN & Scrimba Merch, lifetime Scrimba access and a 13" Macbook Air M3: cssw.io/javascriptmas📆 Demo: cssw.io/javascriptmas-demo📆 You need to be logged in to view the demo—but signup is free. 😉🔗 LinksScrimba Course Intro to UI Design Fundamentals: scrimba.com/intro-to-ui-design-fundamentals-c0q?via=ZoranCSSweeklyGuide to HSL Color Format: youtu.be/VInSzHOeFkEGuide to :root selector: youtu.be/lXUS5E4gqV0Guide to Logical CSS Properties: youtu.be/cV9JhEV4Ll0Guide to Individual Transform Properties: youtu.be/ZAXSbjrOZwgAdobe Color: color.adobe.comCoolors: coolors.co/palettesSubscribe to CSS Weekly Newsletter: 💌 css-weekly.com📖 Chapters00:00 Intro00:16 What is Javascriptmas01:02 JavaScriptmas - Ugly Advent Calendar Challenge02:30 How to set up a color palette06:56 How to check color contrast in DevTools07:39 How to set up good typography09:48 How to set up HTML headline hierarchy11:00 How to use alignment in UI12:15 How to use whitespace in UI13:43 How to fine-tune text sizes & spacing in UI15:40 How to set up interesting calendar UI17:33 How to set up clickable cards in HTML/CSS23:48 How to create a ribbon in CSS using clip-path25:05 How to add additional colors to UI26:28 How to tweak CSS Grid sizing26:48 How to tweak HSL colors 27:13 How to make UI more refined & interesting 29:24 How to use Font Awesome30:49 How to make mobile responsive UI34:34 How to add interactivity to Card UI40:44 Ugly Advent Calendar Challenge Stretch Goals41:19 Why should you participate in JavaScriptmasHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #javascriptmas
Frontend News #10: Gradient Borders, Perfect Centering, Animating Details/Summary CSS Weekly 2024-11-29 | Find out how to use View Transitions API to create cross-document page transitions, how to easily show Baseline status on your blog posts, how Container Queries work, and more.🔥 Get your JavaScript Certification: cssw.io/javascript-certification-bf🔗 Links1. Make creative borders with background-clip: border-area: webkit.org/blog/16214/background-clip-border-area2. Centering things: a solved problem? fullystacked.net/centering-things3. JavaScript Certification: cssw.io/javascript-certification-bf4. REM? PX? Why not both? dbushell.com/2024/11/11/rem-or-px5. Alt Text: What to Write: nngroup.com/articles/write-alt-text5. Styling details Horizontal Accordion: developer.chrome.com/blog/styling-details5.1. Horizontal Accordion Demo: codepen.io/web-dot-dev/pen/XWvBZNo5.2. Animate HTML Details & Summary Elements: youtu.be/idoaw75xjhUSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support CSS Weekly channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweekly📖 Chapters00:00 Intro00:18 Make creative borders with background-clip: border-area03:38 JavaScript Certification05:03 Centering things: a solved problem?06:34 REM? PX? Why not both?08:07 Alt Text: What to Write09:11 Styling details: Horizontal AccordionKeep up-to-date with CSS Weekly:🦋 Bluesky: https://bsky.app/profile/cssweekly.com🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #cssnews
Frontend News #9: View Transitions, Container Queries, Baseline Status CSS Weekly 2024-11-25 | Find out how to use View Transitions API to create cross-document page transitions, how to easily show Baseline status on your blog posts, how Container Queries work, and more.🔥 Elevate Your Web Development With Cloudways This BFCM: cssw.io/cloudways-bfcm🔗 Links1. View Transitions API: Single Page Apps Without a Framework: debugbear.com/blog/view-transitions-spa-without-framework1a. My blog: zoranjambor.com2. Cloudways: cssw.io/cloudways-bfcm3. A Friendly Introduction to Container Queries: joshwcomeau.com/css/container-queries-introduction4. Show Baseline status on your blog posts and presentations: https://web.dev/blog/show-baseline-status4a. Codepen Details/Summary demo: codepen.io/ZoranJambor/pen/jOorzPv5. Easing Wizard: easingwizard.com6. CSS Waves Hello: codepen.io/ghaste/pen/mdNZWNeSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support CSS Weekly channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweekly📖 Chapters00:00 Intro00:20 View Transitions API00:47 How to enable Cross-Document View Transitions 04:56 Cloudways05:41 A Friendly Introduction to Container Queries07:09 Show Baseline status on your blog posts and presentations10:36 Easing Wizard11:40 Waves Hello: CSS OnlyKeep up-to-date with CSS Weekly:🦋 Bluesky: https://bsky.app/profile/cssweekly.com🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #cssnews
Frontend News #8: New CSS Logo, OpenType Font Features, Tooltip Tips CSS Weekly 2024-11-14 | Find out what the new official CSS logo looks like, how to use OpenType features of high-quality fonts, how to create accessible tooltips, and more.🔥 Product for Engineers: cssw.io/flex-your-product-muscles🔗 Links1. Searching for a New CSS Logo: github.com/CSS-Next/css-next/issues/1052. Features of your font you had no idea about: sinja.io/blog/get-maximum-out-of-your-font2a. Wakamai Fondue: wakamaifondue.com3. Product for Engineers: cssw.io/flex-your-product-muscles4. Perfect Bug Report: perfectbugreport.io5. Tooltip Best Practices: css-tricks.com/tooltip-best-practices6. Just a Drawer™: codepen.io/jh3y/pen/LYwdMKNSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🦋 Bluesky: https://bsky.app/profile/cssweekly.com🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeekly📖 Chapters00:00 Table of contents00:21 New CSS Logo02:49 Features of your font you had no idea about03:16 Wakamai Fondue03:56 How to enable OpenType font features05:15 Product for Engineers06:10 Perfect Bug Report07:00 Tooltip Best Practices08:10 Just a Drawer™09:08: A question for youKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #cssnews
AI in Chrome DevTools?!? CSS Weekly 2024-10-31 | A detailed guide to using the AI assistance panel in Chrome DevTools outlining how to use AI Console Insights and AI Assistance for CSS styles on practical, real-world examples.@AddyOsmani's guide on implementing Dark Theme using AI Assistance: youtube.com/watch?v=RSyZA3VV6UM🔥 CSS Stickers: cssw.io/stickers🏷️ 20% Off Coupon: devtoolsaiSubscribe to CSS Weekly Newsletter: 💌 css-weekly.com📖 Chapters00:00 How to enable AI features in Chrome DevTools01:16 How to use AI Console Insights in Chrome DevTools03:29 How to use AI StyleSheets Assistance in DevTools04:36 How to test image optimization07:25 How to get general AI suggestions for the page08:23 How to get help with implementing a new feature08:50 How to debug layout shift using AI Assistance in DevTools 13:21 Is it possible to get non-contextual AI assistance?13:53 How to use AI to better understand page code15:56 CSS Stickers16:15 Is AI in Chrome DevTools good?Help support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #devtools
CSS Tip: Easily Deal With Layout Shifts Caused by Scrollbars CSS Weekly 2024-10-18 | Find out how to prevent layout shifts when scrollbars are hidden/shown using the scrollbar-gutter CSS property.🔥 CSS Stickers: cssw.io/stickers🏷️ Cupon code for 30% off: SCROLLBAR-GUTTERSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS Stickers pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjamborZoran Jambor#css #csslayout
How To Animate a Button Based on Video Content (YouTube Button Subscribe Animation) CSS Weekly 2024-10-10 | Quick-tip showing how to create an effect where a button lights up when a keyword like "subscribe,” "sign up,” or “like” is mentioned in a video.🔗 Detailed guide: youtu.be/AIq2sfYCVrs🌟 Demo: codepen.io/ZoranJambor/pen/yLWzqQY?layout=left🔥 Button by Jhey Tompkins (@jh3y): codepen.io/jh3y/pen/eYPYKepSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #htmlvideo
Frontend News #7: CSS Masonry, Accessible Accordion Components, CSS Music Video CSS Weekly 2024-10-06 | Find out what CSS Masonry syntax might look like, how to create accessible accordions, which CSS property can trigger Layout, Paint, or Composite, watch the first ever CSS-only music video, and more.🔥 Product for Engineers: cssw.io/posthog-newsletter🔗 Links:1. Choosing a Masonry Syntax in CSS: oddbird.net/2024/10/01/grid-masonry-nuance2. New to the web platform in September: https://web.dev/blog/web-platform-09-20243. Product for Engineers: cssw.io/posthog-newsletter4. Tools and Techniques to Create Accessible Accordion Components: a11y-collective.com/blog/accessible-accordion5. CSS Triggers: css-triggers.com6. CSS Music Video: codepen.io/ivorjetski/pen/jOgEyPO🎥 CSS Weekly ExplainersExclusive Accordions: youtu.be/idoaw75xjhUThe calc-size() Function: youtu.be/1VsMKz4ZwegThe interpolate-size Property: youtu.be/lXZE1vrXM1AThe color-scheme Property: youtu.be/nQzRTsjBXfQSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweekly📖 Chapters00:00 About this Episode00:28 Choosing a Masonry Syntax in CSS02:13 New to the web platform in September03:24 The color-scheme Property04:20 Product for Engineers05:02 Tools and Techniques to Create Accessible Accordion Components05:31 CSS Triggers06:11 CSS Music Video06:47 A challenge for youKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjamborZoran Jambor#css #cssnews
Start Using Minimap Section Headers in VS Code CSS Weekly 2024-09-26 | Visual Studio Code tip showing you how to make Minimap useful by utilizing Mark Section Headers and Region Section Headers, with an explanation of how Max Column option works.🔥 CSS Stickers: cssw.io/stickers🏷️ Cupon code for 30% off: MINIMAPSubscribe to CSS Weekly Newsletter: 💌 css-weekly.com📖 Chapters00:00 How to find minimap options in VS Code settings00:23 How "Minimap Max Column" in VS Code really works01:16 How to use Minimap Mark Section Headers in VS Code02:40 How Region Section Headers work in Minimap of VS Code03:14 The problem with Region Section Headers in CSS & HTML03:36 CSS Stickers Discount04:05 ConclusionHelp support my channel on Patreon:💖 patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #vscode
Enable *NEW* CSS Transitions Behavior CSS Weekly 2024-09-18 | Find out how to enable new CSS transitions behavior that allows you to transition to intrinsic sizing keywords like "height: auto;" and how calc-size() implementation changed.🔗 LinksPrimer on calc-size() function: youtu.be/1VsMKz4ZwegDemo: codepen.io/ZoranJambor/pen/JjQQEmo?layout=leftGitHub Issue: github.com/w3c/csswg-drafts/issues/10478Subscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweekly📖 Chapters00:00 What calc-size() function does00:28 Update on single-argument form for calc-size()01:22 How two-argument form of calc-size() works02:11 Why one-argument for of calc-size() no longer works02:51 How interpolate-size property works03:42 How to enable new CSS Transitions behavior on the entire page04:20 When to use calc-size() and when interpolate-size04:41 Browser support for calc-size() and interpolate-sizeKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #csstricks
Frontend News #6: One Million Checkboxes, Can I Use CLI CSS Weekly 2024-09-13 | Find out what happened with One Million Checkboxes experiment, how display:contents and :target pseudo-class work, how to get Can I Use data directly from your command line, and more.🔥 BrowserStack Bug Capture: cssw.io/browserstack-bug-capture🔗 Links1. The secret inside One Million Checkboxes: https://eieio.games/essays/the-secret-in-one-million-checkboxes/2. CSS display contents: ishadeed.com/article/display-contents3. BrowserStack Bug Capture: cssw.io/browserstack-bug-capture4. Time Travelling CSS With :target pseudo-class: css-tricks.com/time-travelling-css-with-target5. caniuse-cli: github.com/bramus/caniuse-cli6. Glassmorphic Cube (CSS): codepen.io/konstantindenerz/pen/NWZRYXK🎥 Video — Transition to `height: auto` & `display: none` Using Pure CSS: youtu.be/1VsMKz4Zweg📰 Article — Transition to `height: auto` & `display: none` Using Pure CSS: blog.css-weekly.com/transition-to-height-auto-display-none-using-pure-cssSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweekly📖 Chapters00:00 Intro00:19 The secret inside One Million Checkboxes01:17 CSS display contents01:55 BrowserStack Bug Capture02:22 Time Travelling CSS With :target03:27 Command line tool for “Can I Use …”05:00 Glassmorphic Cube (CSS)05:35 A question for youKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css
CSS Tips - Animate to “height: auto;” CSS Weekly 2024-09-11 | Find out how to easily animate from “height: 0;” to “height: auto;” using newly available calc-size() function.🔗 LinksDemo: codepen.io/ZoranJambor/pen/gONRzbGBlog article: blog.css-weekly.com/transition-to-height-auto-display-none-using-pure-cssVideo guide: youtu.be/1VsMKz4ZwegSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel🪧 Buy a CSS sticker pack: stickers.css-weekly.com👨🎓 Get a course: masteringlinting.com💖 Jouin us on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #csstips
Frontend News #5: ChatGPT CSS, Custom Range Sliders CSS Weekly 2024-09-06 | Find out in which cases you can use ChatGPT to generate CSS, how to create stunning range sliders using Anchor Positioning & Scroll-Driven Animations, why and how you should convert your Chrome extensions to Safari, and more.🔥 Hypermode: cssw.io/hypermode-ai🔗 Links1. Custom Range Slider: frontendmasters.com/blog/custom-range-slider-using-anchor-positioning-scroll-driven-animations2. Styling Tables the Modern CSS Way: https://piccalil.li/blog/styling-tables-the-modern-css-way/3. Hypermode: cssw.io/hypermode-ai4. How to convert Chrome extensions to Safari: evilmartians.com/chronicles/how-to-quickly-and-weightlessly-convert-chrome-extensions-to-safari5. The Solar System in CSS: dev.to/madsstoumann/the-solar-system-in-css-51bo6. Two Cool Ways to Use :has() - codepen.io/jlengstorf/pen/YzMwNrpSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor📖 Chapters00:00 Intro00:26 Custom Range Slider01:12 Styling Tables the Modern CSS Way01:51 Hypermode02:31 How to convert Chrome extensions to Safari03:15 The Solar System in CSS04:16 2 Cool Ways to Use :has()04:43 A question for you- Zoran Jambor#css #cssnews #webdevelopment
Frontend News #4: State of CSS 2024, Syntax Highlighting CSS Weekly 2024-08-25 | Find out why you should take the State of CSS 2024 survey, if it’s possible to build syntax highlighting directly into a font, if CSS Grid is slower than Flexbox, and more.🔥 Level Up Your Coding Skills With Scrimba: cssw.io/level-up-your-dev-skills1. State of CSS 2024: survey.devographics.com/en-US/survey/state-of-css/20242. Syntax Highlighting in Hand-Coded Websites: https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/3. Level Up Your Coding Skills With Scrimba: cssw.io/level-up-your-dev-skills4. Is CSS Grid really slower than Flexbox? benfrain.com/is-css-grid-really-slower-than-flexbox5. Choose the right image format: https://web.dev/articles/choose-the-right-image-format6. Batman-Comic.CSS: alvaromontoro.com/sansjs/demos/batman-comic-css7. My Batman Comic: codepen.io/ZoranJambor/pen/QWXmPGb8. Interactive Gradient & Glassmorphism with noise: codepen.io/Podgro/pen/oNOKYqr🔗 LinksMy article that covers interpolate-size property: blog.css-weekly.com/transition-to-height-auto-display-none-using-pure-cssCreate a Stunning Glassmorphism Effect in CSS: youtube.com/watch?v=5SUeAJn5xbUSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweekly 📖 Chapters00:00 Intro00:22 State of CSS 202400:45 Syntax Highlighting in Hand-Coded Websites01:22 Level Up Your Coding Skills With Scrimba01:56 Is CSS Grid really slower than Flexbox?02:29 Choose the right image format03:26 Batman-Comic.CSS04:38 Interactive Gradient & Glassmorphism with noise05:28 A question for youKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #cssnews #webdevelopment
Tailwind CSS — How To Create a Stunning Button #programmingjokes CSS Weekly 2024-06-26 | Tailwind CSS is amazingly popular, and incredibly useful. However, it comes with one major downside that I tried to funily demonstrate in this video.Subscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #tailwindcss
Stunning Staggered CSS Animation/Transition on Page Load CSS Weekly 2024-06-11 | Find out how to create a stunning staggered fade-in animation on page load with pure CSS, using Transitions, @starting-style at-rule, and Custom Properties.🔗 Links Demo: codepen.io/ZoranJambor/pen/eYaEwezAnimate HTML Details: youtu.be/idoaw75xjhU Transition to height auto: youtu.be/1VsMKz4Zweg Individual Transform Properties: youtu.be/ZAXSbjrOZwg📖 Chapters00:00 Fade in effect using CSS Animations 01:20 Fade in effect with CSS Transitions (@starting-style) 03:32 Slide, scale, & fade-in effect 04:29 Staggered animation using :nth-child() 05:25 Staggered animation using Custom Properties and calc() 08:09 Browser Support for @starting-style at-ruleSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support CSS Weekly👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #cssanimation
Animate HTML Details & Summary Elements Using Pure CSS CSS Weekly 2024-06-07 | Find out how to fully animate the HTML Details/Summary disclosure widget using only CSS, including the Summary marker arrow rotate, and height transition to open/close the element content.You’ll learn how to inspect the Shadow DOM of native HTML elements, how the calc-size() function works, why you need transition-behavior property to animate content-visibility, how to connect multiple HTML Details elements, and more.🔗 LinksDemo: codepen.io/ZoranJambor/pen/jOorzPv?layout=leftTransition to "height: auto;" Using Pure CSS: youtu.be/1VsMKz4Zweg DevTools Tips: youtu.be/W7GQglXn-jQLogical CSS Properties: youtu.be/cV9JhEV4Ll0Individual CSS Transform Properties: youtu.be/ZAXSbjrOZwgExperimental Web Platform Features: youtu.be/3IH3P-KCvmAmarker on MDN developer.mozilla.org/en-US/docs/Web/CSS/markerSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweekly📖 Chapters00:00 About HTML Details & Summary element01:26 Style HTML Details disclosure element using CSS02:40 Inspect HTML Details Shadow DOM in DevTools03:55 Utilize HTML Details pseudo-elements05:10 Animate HTML Details open/close using calc-size() 07:00 Use transition-behavior: allow-discrete; to animate content-visibility08:58 Browser support for calc-size() & transition-behavior: allow-discrete;10:04 Animate HTML Summary Arrow marker 15:01 Connect multiple Details elements15:59 Open Details disclosure widget by default16:25 Browser support for HTML Details “name” attributeKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #htmldetails
Animate to height: auto; & display: none; Using CSS Transitions CSS Weekly 2024-05-31 | Find out how to easily transition from “height: 0;” to “height: auto;” and “display: none;” to “display: block;” without any hacks, tricks, or JavaScript, using only new CSS features: calc-size() function, transition-behavior property and @starting-style at-rule.UPDATE: The calc-size() function no longer supports a single argument; it works only as a two-argument form. The first argument is the basis, and the second argument is the calculation, where the passed basis argument is available as the "size" keyword. So all examples in the video should be "calc-size(auto, size)" instead of "calc-size(auto)".🔗 LinksDemo: codepen.io/ZoranJambor/pen/GRaNZNV??editors=1000&layout=leftCSS Stickers: stickers.css-weekly.comGuide to Logical Properties: youtu.be/cV9JhEV4Ll0Experimental Web Platform features: youtu.be/3IH3P-KCvmA📖 Chapters00:00 About CSS transitions & demo setup01:26 How to transition to height: auto;04:06 How to transition from display: none04:43 How transition-behavior CSS property works06:32 How @starting-style at-rule works08:34 Browser support for transition-behavior & @starting-styleSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel🪧 Buy a CSS sticker pack: stickers.css-weekly.com👨🎓 Get a course: masteringlinting.com💖 Jouin us on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #csstips
CSS Gradient Text Styles CSS Weekly 2024-05-03 | Learn how to easily create gradient text styles and gradient text outlines with a few lines of CSS. Even though the vendor prefix is required, this is supported in all modern browsers.Demo: codepen.io/ZoranJambor/pen/bGJZobLSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #csstips
CSS Email Obfuscation - Create a Clickable Link CSS Weekly 2024-04-25 | A hands-on guide on how to create clickable CSS-obfuscated email links with a bit of JavaScript.🔗 LinksEmail Obfuscation Using CSS: youtu.be/w0rQwOSVmZsDemo: codepen.io/ZoranJambor/pen/MWRZeWo🔥 Mastering Linting: masteringlinting.com🏷️ Coupon for 20% off at the checkout: CSSOBFUSCATION📖 Chapters00:00 How CSS email obfuscation works01:05 How to create a clickable CSS-Obfuscated email link05:22 How to add a subject to the obfuscated email link07:39 ConclusionSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #js
VS Code Tips - Fix Multiline Comments in CSS/HTML CSS Weekly 2024-04-22 | A quick tip showing how to fix broken block comments behavior in Visual Studio Code by utilizing the built-in Emmet toolkit.Subscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#vscode #visualstudiocode
Email Obfuscation Using CSS CSS Weekly 2024-04-08 | Learn how email obfuscation works and why you should obfuscate your emails using CSS.Email obfuscation by Spencer Mortensen: spencermortensen.com/articles/email-obfuscationDemo: codepen.io/ZoranJambor/pen/qBwjXbVSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeekly📖 Chapters00:00 What is email obfuscation00:47 Email obfuscation techniques03:17 How CSS email obfuscation works04:37 Why CSS email obfuscation worksKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css
VS Code Tips - Fix Multiline Comments in CSS/HTML CSS Weekly 2024-03-26 | Visual Studio Code tip showing you how to fix broken block comments behavior in CSS/HTML when toggling a comment adds a new comment instead of uncommenting the focused comment.EDIT: Jayden Pearse noted in the comments that you can use "resourceLangId" instead of "resourceExtname," which will also work on files without an extension, as long as the correct language (CSS or HTML) is detected or set manually.BETTER When Expression: editorTextFocus && !editorReadonly && (resourceLangId == 'html' || resourceLangId == 'css')When Expression shown in the video: editorTextFocus && !editorReadonly && (resourceExtname == '.css' || resourceExtname == '.html')Subscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweekly 📖 Chapters00:00 Problem with block comments in VS Code 01:39 Use Emmet to toggle block comments in CSS/HTML02:23 Add Keyboard Shortcut to “Emmet: Toggle Comment” command03:33 Restrict Keyboard Shortcut to CSS & HTML files06:49 Why you should use Emmet Toggle Comments command in VS CodeKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #vscode
Center ANYTHING in CSS With This Line of Code #css #csstips CSS Weekly 2024-03-19 | A quick tip outlining how to easily center any content vertically (including block-level elements) in CSS using the align-content property.Subscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #csstips
Simplify Your CSS Using :is() and :where() Pseudo-Classes CSS Weekly 2024-03-06 | A detailed guide to :is() and :where() CSS pseudo-classes, explaining exactly how they work, what's the difference between them, and how they can help you simplify your CSS, along with some gotchas you should keep in mind.Demo: codepen.io/ZoranJambor/pen/zYbgWmJSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweekly📖 Chapters00:00 How :is() pseudo-class works02:12 How to simplify selector lists using nested :is() statements03:02 How specificity works with :is()05:31 The difference between :is() and :where() pseudo-classes06:53 Gotchas — :is() and :where() are forgiving07:44 Gotchas - pseudo-elements don’t work with :is() and :where()08:26 Gotchas - :is() was originally named :matches() and :any()08:44 When to use :is() and :where() pseudo-classesKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css
Native Input Toggle Switch #css #html CSS Weekly 2024-02-27 | A quick tip showing how to create a native toggle switch by adding a single attribute to a checkbox input element.Subscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #html
Where is CSS4? #css #css4 CSS Weekly 2024-02-16 | A short look at the current state of CSS4 with an explanation of why CSS4 is happening after all and which CSS features it might include.🔗 LinksLet's define CSS4: github.com/w3c/csswg-drafts/issues/4770CSS Next: github.com/orgs/CSS-Next/projects/1/views/2Subscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeekly- Zoran Jambor#css #css4
Best Programming Fonts (2024) CSS Weekly 2024-02-13 | A detailed guide on setting up font family and font ligatures in Visual Studio Code, along with an overview of a few fantastic programming fonts you should try out. You’ll learn how to easily experiment and try out different coding fonts to find your perfect font and how to solve a major gotcha related to font ligatures.🔗 LinksCoding Fonts Playground: cssw.io/coding-fontsGitHub Monaspace Font: cssw.io/monaspaceSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor📖 Chapters00:00 Why you should find a good coding font00:28 How to change font family in VS Code01:13 How to enable ligatures in VS code02:04 What are font ligatures02:54 How to find a good programming font03:47 JetBrains Mono Font04:05 Cascadia Code Font04:37 Iosevka Font 05:05 How to inspect font variations on MacOS in Font Book05:46 Using font variations in VS Code06:31 Fira Code Font06:48 GitHub Monaspace Font07:37 What if font ligatures are not working in VS Code08:48 What is your favorite coding font?- Zoran Jambor#codingfonts #vscode
VS Code Tips - Leverage the Outline View CSS Weekly 2024-02-11 | A hands-on tip on how to get the most out of the outline view in Visual Studio Code. The outline view shows the symbol tree of the currently active editor, which allows you to jump to a specific symbol immediately (CSS selector, function in JavaScript, tag in HTML).Subscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#vscode #visualstudiocode
VS Code Tips — Custom Folding Ranges #vscode CSS Weekly 2024-02-07 | A short guide on creating Manual Folding Ranges in Visual Studio Code that allow you to collapse and expand (fold and unfold) any part of your code.Subscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#vscode #visualstudiocode
Arc Browser Boosts – How To Tweak Website CSS CSS Weekly 2024-01-31 | An in-depth guide on using Boosts in Arc browser (@TheBrowserCompany) to tweak CSS of websites to your own needs—on a practical example of adjusting Daring Fireball (@daringfireball) to become mobile responsive using CSS Grid. You'll learn how to use Arc Boots, Changes Drawer in DevTools, how to easily set up mobile-responsive CSS Grid, and more.🔗 LinksArc browser: arc.netDaring Fireball: daringfireball.netDaring Fireball Arc Boost: arc.net/boost/67EB8124-2215-4755-9BF5-9AAAF8538B7CDaring Fireball Arc Boost Code: codepen.io/ZoranJambor/pen/zYbRJXjIn-Depth Guide to CSS Logical Properties: youtu.be/cV9JhEV4Ll0In-Depth Guide Guide to grid-template-areas: youtu.be/sAsX9e2NzZ4Subscribe to CSS Weekly Newsletter: 💌 css-weekly.comHelp support my channel👨🎓 Get a course: masteringlinting.com🪧 Buy a CSS sticker pack: stickers.css-weekly.com💖 Support me on Patreon: patreon.com/cssweeklyKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor📖 Chapters00:00 Intro 02:28 How Arc browser Boosts work03:43 How to tweak code in Arc browser Boosts03:56 How to show/hide sidebar in Arc Browser04:15 How to open Developer Tools from Arc Boost05:09 How to copy CSS changes from DevTools to Arc Boost06:50 How to tweak the fixed layout sizing in DevTools08:50 How to prepare absolute layout for CSS Grid10:32 How to set CSS Grid using grid-template-areas12:22 How to set optimal line lengths in CSS13:24 How to add gap between CSS Grid elements13:55 How to tweak sizing of CSS Grid columns15:10 Howgrid switch reasoingn - adjust mobile version15:39 How to copy CSS changes from DevTools to Arc Boost16:22 How to fix sidebar margin problems17:00 How to adjust layout for mobile responsive version18:57 How to adjust sidebar for mobile responsive version19:45 How to adjust ad for mobile resposive version22:06 How to adjust logo for mobile responsive version23:32 How to adjust search & copyright for mobile responsive version25:08 How we tweaked Daring Fireball in Arc Boost 25:35 Why should Arc support Boosts on mobile26:00 Conclusion- Zoran Jambor#css #arcbrowser
Chrome DevTools Inception #devtools CSS Weekly 2024-01-16 | A quick tip showing how (and why) you can inspect Chrome Developer Tools with Chrome Developer Tools.Subscribe to CSS Weekly Newsletter: 💌 css-weekly.comCourse Mastering Prettier & Stylelint🔥 Learn everything about the best linting tools while supporting CSS Weekly: masteringlinting.com🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted pre-launch price.Keep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #devtools
CSS Stickers! CSS Weekly 2024-01-05 | Introducing a set of beautifully designed CSS Stickers just for you to showcase your love for CSS and jump-start a conversation around CSS, accessibility, or any coding subject. 🔗 CSS Stickers Link: stickers.css-weekly.comKeep up-to-date with CSS Weekly:💌 Newsletter: css-weekly.com🎓 Course: masteringlinting.com🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeekly📖 Chapters00:00 Introducing CSS Stickers00:19 CSS Stickers designs00:43 CSS Stickers dimensions01:17 Why CSS Stickers - Zoran Jambor#css #cssstickers
How to handle touchscreen gestures in the browser using CSS #css #csstips CSS Weekly 2023-12-27 | A quick tip outlining how to use the touch-action CSS property to handle touchscreen gestures like panning and pinching to improve the responsiveness of your mobile app's user interface.Help support my channel💚 Buy a CSS sticker pack: stickers.css-weekly.com📚 Get a course: masteringlinting.comKeep up-to-date with CSS Weekly:💌 Newsletter: css-weekly.com🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeekly- Zoran Jambor#css #csstips
CSS Tips — Practical img Element Defaults CSS Weekly 2023-12-19 | A line-by-line guide through the sensible CSS for image elements you should apply in all your projects to make your img elements bulletproof by default.All credit goes to Harry Roberts, who originally shared this technique on Twitter.Harry's Tweet: twitter.com/csswizardry/status/1717841334462005661CodePen Demo: codepen.io/ZoranJambor/pen/JjxzYPaFollow Harry Roberts:✍️ Blog: csswizardry.com🐦 Twitter: twitter.com/csswizardryGet CSS Stickers Pack:🔖 stickers.css-weekly.comSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comCourse Mastering Prettier & Stylelint🔥 Learn everything about the best linting tools while supporting CSS Weekly: masteringlinting.com🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted pre-launch price.Keep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeekly📖 Chapters00:00 Why you should use this technique00:49 Demo setup01:12 Fix distorted images02:14 Fix empty space under images03:02 Style alt text03:59 Style low-quality image placeholders (LQIP)05:07 Add margin for shape-outside- Zoran Jambor#css #cssbasics
How to enable experimental CSS & JS features in Chrome, Firefox & Safari CSS Weekly 2023-12-11 | A step-by-step guide on how to enable experimental CSS and JavaScript features and various Web APIs in Chrome, Firefox, and Safari. 🔗 LinksChrome — chrome://flagsFirefox — about:configSafari — in SettingsEdge — edge://flagsArc — arc://flagsExperimental features in Firefox: developer.mozilla.org/en-US/docs/Mozilla/Firefox/Experimental_featuresSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comCourse Mastering Prettier & Stylelint🔥 Learn everything about the best linting tools while supporting CSS Weekly: masteringlinting.com🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted pre-launch price.Keep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeekly📖 Chapters00:00 Intro00:31 How to enable experimental web features in Chrome02:22 How to enable experimental web features in Edge, Arc, etc.02:45 How to enable experimental web features in Firefox04:22 How to enable experimental web features in Safari- Zoran Jambor#css #devtools
How to Create Stunning Slanted Containers with CSS CSS Weekly 2023-12-05 | A detailed, in-depth guide to creating slanted card components using CSS clip-path & shape-outside properties.⚠️ Please note: - At the time of recording, I didn’t realize the `shape-margin` property exists, which lets you effortlessly add margin to `shape-outside` — use this instead of tweaking the path points.- I’m using some physical properties like `width` and `height` in code — these should have been logical properties like, `inline-size`, and `block-size` — it's fixed in the demo. - Lastly, I’ve recorded the video with a throat infection, and my voice gets progressively worse as the video advances—sorry about this.🔗 LinksCodePen Demo: codepen.io/ZoranJambor/pen/YzBNGgrMastering Linting: masteringlinting.comCSS Stickers: stickers.css-weekly.comIn-Depth Guide to CSS Logical Properties: youtu.be/cV9JhEV4Ll0clip-path on MDN: developer.mozilla.org/en-US/docs/Web/CSS/clip-pathshape-outside on MDN: Subscribe to CSS Weekly Newsletter: 💌 css-weekly.com📖 Chapters00:00 Intro & demo setup01:56 Create a slanted edge using clip-path04:47 Adjust content to follow the slanted edge using shape-outside09:14 Refactor physical to logical CSS properties10:44 Set shape-outside points13:55 Fix reversed up clip-path points15:01 Tweak margins between cards 15:48 Add padding between slanted edge and content using clip-path18:49 Add padding between slanted edge and content using shape-outside20:54 Drawback of this technique and conclusionCourse Mastering Prettier & Stylelint🔥 Learn everything about the best linting tools while supporting CSS Weekly: masteringlinting.com🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted pre-launch price.Get CSS-themed stickers:🪧 stickers.css-weekly.comKeep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #csstutorials
Flexbox — justify-content or align-items?!? #css CSS Weekly 2023-11-30 | CSS Quick tip that will help you understand if you need justify-content or align-items property in Flexbox.Demo: codepen.io/ZoranJambor/pen/RwvYLXLSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comCourse Mastering Prettier & Stylelint🔥 Learn everything about the best linting tools while supporting CSS Weekly: masteringlinting.com🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted pre-launch price.Keep up-to-date with CSS Weekly:🐦 Twitter: twitter.com/@cssweekly🎶 TikTok: tiktok.com/@cssweekly🎇 Instagram: instagram.com/cssweekly📘 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:👨💼 Blog: zoranjambor.com💼 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #csstips
CSS Tips - Custom list styles with @counter-style #css CSS Weekly 2023-11-23 | A quick tip on using @counter-style CSS at-rule to change list bullet points into emojis, using "system," "symbols," and "suffix" descriptors.Codepen demo:🔗 codepen.io/ZoranJambor/pen/rNPvVQySubscribe to CSS Weekly Newsletter: 💌 css-weekly.comCourse Mastering Prettier & Stylelint🔥 Learn everything about the best linting tools while supporting CSS Weekly: masteringlinting.com🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted pre-launch price.Keep up-to-date with CSS Weekly:👉 Twitter: twitter.com/CSSWeekly👉 Instagram: instagram.com/cssweekly👉 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:🔗 Blog: zoranjambor.com👉 Twitter: twitter.com/zoranjambor👉 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #csstutorials
CSS4 Is Coming (Not a Clickbait) CSS Weekly 2023-11-20 | A look at the current state of CSS development, with a detailed explanation of why CSS4 is coming even though we were told that it will never happen, what it might include, and what all of this means for you.🔗 LinksLet’s Define CSS 4: github.com/w3c/csswg-drafts/issues/4770CSS Feature List: github.com/orgs/CSS-Next/projects/1/views/2Subscribe to CSS Weekly Newsletter: 💌 css-weekly.com📖 Chapters00:00 Intro00:27 Why were we told CSS 4 will never happen03:15 Why is CSS 4 happening now04:45 What are the reasons CSS 4 is coming05:22 About “Let’s Define CSS 4” GitHub discussion06:37 What should be included in CSS 407:39 What features are currently in CSS 409:04 My opinion on CSS411:33 ConclusionCourse Mastering Prettier & Stylelint🔥 Learn everything about the best linting tools while supporting CSS Weekly: masteringlinting.com🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted pre-launch price.Keep up-to-date with CSS Weekly:👉 Twitter: twitter.com/CSSWeekly👉 Instagram: instagram.com/cssweekly👉 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:🔗 Blog: zoranjambor.com👉 Twitter: twitter.com/zoranjambor👉 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #css4
Enforce Underlined Links in Firefox CSS Weekly 2023-11-16 | A short overview of the new "Always underline links" browser option, available in Firefox 121, which adds underlines to all links, even when you specifically set "text-decoration: none;" in your CSS.Subscribe to CSS Weekly Newsletter: 💌 css-weekly.comCourse Mastering Prettier & Stylelint🔥 Learn everything about the best linting tools while supporting CSS Weekly: masteringlinting.com🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted, pre-launch price.Keep up-to-date with CSS Weekly:👉 Twitter: twitter.com/CSSWeekly👉 Instagram: instagram.com/cssweekly👉 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:🔗 Blog: zoranjambor.com👉 Twitter: twitter.com/zoranjambor👉 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #firefox
Types of Themes in Visual Studio Code #vscode #vscodeextensions CSS Weekly 2023-11-14 | A quick overview of different types of themes available in Visual Studio Code: Color Themes, File Icon Themes, and Product Themes.Top Color Themes: youtu.be/C_pn9hS8GuYTop Icon Themes: youtu.be/_ROI6t7cHQETop Product Themes: youtu.be/aLCzInfPqo8Subscribe to CSS Weekly Newsletter: 💌 css-weekly.com🔥 Course Mastering Prettier & Stylelint: masteringlinting.com🏷️ Use coupon YOUTUBE25 to get an additional 25% off on the already discounted, pr-launch price.Keep up-to-date with CSS Weekly:👉 Twitter: twitter.com/CSSWeekly👉 Instagram: instagram.com/cssweekly👉 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:🔗 Blog: zoranjambor.com👉 Twitter: twitter.com/zoranjambor👉 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor #vscode #vscodeextensions
Practical Guide to CSS Positioning CSS Weekly 2023-11-08 | A detailed guide on how positioning in CSS works, explaining everything you need to know about CSS position property with clear examples covering all values, including static, relative, absolute, fixed, and sticky.🔗 LinksCodepen demo: codepen.io/ZoranJambor/pen/NWodLaMChrome DevTools Tips: youtu.be/W7GQglXn-jQIn-Depth Guide to CSS Logical Properties: youtu.be/cV9JhEV4Ll0📖 Timestamps00:00 Intro & demo setup01:18 What is “position” property01:49 How “position: static;” works03:32 How “position: relative;” works05:15 How “position: absolute;” works08:59 How “position: fixed;” works09:59 How “position: sticky;” works12:10 Overview of how positioning in CSS worksSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comCourse Mastering Prettier & Stylelint🔥 Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com🏷️ Use coupon code YOUTUBE25 to get an additional 15% off on the already discounted, pre-launch price.Keep up-to-date with CSS Weekly:👉 Twitter: twitter.com/CSSWeekly👉 Instagram: instagram.com/cssweekly👉 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:🔗 Blog: zoranjambor.com👉 Twitter: twitter.com/zoranjambor👉 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#css #cssbasics
How To Easily Calculate CSS Specificity #css #specificity CSS Weekly 2023-11-02 | Find out how to easily get the exact specificity value of a certain selector, and easily compare multiple selectors to understand which are more specific.🧮 Specificity Calculator by Keegan Street: https://specificity.keegan.st/?utm_source=CSS-Weekly&utm_medium=youtubeSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comCourse Mastering Prettier & Stylelint🔥 Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted, pre-launch price.Keep up-to-date with CSS Weekly:👉 Twitter: twitter.com/CSSWeekly👉 Instagram: instagram.com/cssweekly👉 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:🔗 Blog: zoranjambor.com👉 Twitter: twitter.com/zoranjambor👉 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor
Top Visual Studio Code Product Icon Themes CSS Weekly 2023-10-31 | Make your development environment stand out with stunning Visual Studio Code Product Icon themes. This collection features hand-picked themes that should make your VSCode UI nicer and you a bit more productive.🎨 Best VS Code Color Themes: youtu.be/C_pn9hS8GuY📂 Best VS Code File Icon Themes: youtu.be/_ROI6t7cHQE🎯 VS Code Product Icon Themes1. Material Product Icons: marketplace.visualstudio.com/items?itemName=PKief.material-product-icons2. Fluent Icons: marketplace.visualstudio.com/items?itemName=miguelsolorio.fluent-icons3. Carbon Product Icons: marketplace.visualstudio.com/items?itemName=antfu.icons-carbon4. Tabler Product Icons: marketplace.visualstudio.com/items?itemName=zguolee.tabler-icons5. MaterialIconic Product Icons: marketplace.visualstudio.com/items?itemName=nyxb.materialiconic-product-icons6. Bootstrap Product Icons: marketplace.visualstudio.com/items?itemName=RubenVerg.bootstrap-product-icons7. Feather Product Icons: marketplace.visualstudio.com/items?itemName=melishev.feather-vscodeSubscribe to CSS Weekly Newsletter: 💌 css-weekly.comCourse Mastering Prettier & Stylelint🔥 Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted, pre-launch price.📖 Chapters00:00 What are Product Icons in Visual Studio Code01:26 Material Product Icons01:46 Fluent Icons02:07 Carbon Product Icons02:42 Tabler Product Icons03:24 MaterialIconic Product Icons03:45 Bootstrap Product Icons04:05 Feather Product Icons04:19 ConclusionKeep up-to-date with CSS Weekly:👉 Twitter: twitter.com/CSSWeekly👉 Instagram: instagram.com/cssweekly👉 Facebook: facebook.com/CSSWeeklyKeep up to date with what I'm up to:🔗 Blog: zoranjambor.com👉 Twitter: twitter.com/zoranjambor👉 LinkedIn: linkedin.com/in/zoranjambor- Zoran Jambor#visualstudiocode #vscode
