CSS WeeklyLearn 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.
📖 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 content
How to create the YouTube like-button glow effect when you say “subscribe” in a videoCSS Weekly2024-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.
📖 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 content
- Zoran Jambor #css #htmlvideoFrontend News #11: Justified Text, JS moveBefore Method, Performance OptimizationCSS Weekly2025-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.
- Zoran Jambor #frontendnews #cssVS Code Tips - Code Navigation Using BreadcrumbsCSS Weekly2025-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.
📖 Chapters 00:00 How breadcrumbs in VS Code work 00:29 How to navigate between folders, files, and symbols using breadcrumbs in VS Code 01:13 How to use breadcrumbs with keyboard shortcuts in VS Code 02:17 How to customize breadcrumbs in VS Code
- Zoran Jambor #vscode #vscodetipsHow to set up a local testing server using Serve NPM package #codingCSS Weekly2025-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.
- Zoran Jambor #coding #css #html #javascriptCreate Auto-Expanding Form Fields Using field-sizing CSS PropertyCSS Weekly2025-01-22 | Find out how to easily create auto-expanding input and textarea form fields using the field-sizing CSS property.
- Zoran Jambor #cssA Practical, Hands-On Guide to Improving Your UI (JavaScriptmas Challenge)CSS Weekly2024-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. 😉
📖 Chapters 00:00 Intro 00:16 What is Javascriptmas 01:02 JavaScriptmas - Ugly Advent Calendar Challenge 02:30 How to set up a color palette 06:56 How to check color contrast in DevTools 07:39 How to set up good typography 09:48 How to set up HTML headline hierarchy 11:00 How to use alignment in UI 12:15 How to use whitespace in UI 13:43 How to fine-tune text sizes & spacing in UI 15:40 How to set up interesting calendar UI 17:33 How to set up clickable cards in HTML/CSS 23:48 How to create a ribbon in CSS using clip-path 25:05 How to add additional colors to UI 26:28 How to tweak CSS Grid sizing 26:48 How to tweak HSL colors 27:13 How to make UI more refined & interesting 29:24 How to use Font Awesome 30:49 How to make mobile responsive UI 34:34 How to add interactivity to Card UI 40:44 Ugly Advent Calendar Challenge Stretch Goals 41:19 Why should you participate in JavaScriptmas
- Zoran Jambor #css #javascriptmasFrontend News #10: Gradient Borders, Perfect Centering, Animating Details/SummaryCSS Weekly2024-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.
- Zoran Jambor #css #cssnewsFrontend News #9: View Transitions, Container Queries, Baseline StatusCSS Weekly2024-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.
📖 Chapters 00:00 Intro 00:20 View Transitions API 00:47 How to enable Cross-Document View Transitions 04:56 Cloudways 05:41 A Friendly Introduction to Container Queries 07:09 Show Baseline status on your blog posts and presentations 10:36 Easing Wizard 11:40 Waves Hello: CSS Only
- Zoran Jambor #css #cssnewsFrontend News #8: New CSS Logo, OpenType Font Features, Tooltip TipsCSS Weekly2024-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.
📖 Chapters 00:00 Table of contents 00:21 New CSS Logo 02:49 Features of your font you had no idea about 03:16 Wakamai Fondue 03:56 How to enable OpenType font features 05:15 Product for Engineers 06:10 Perfect Bug Report 07:00 Tooltip Best Practices 08:10 Just a Drawer™ 09:08: A question for you
- Zoran Jambor #css #cssnewsAI in Chrome DevTools?!?CSS Weekly2024-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.
📖 Chapters 00:00 How to enable AI features in Chrome DevTools 01:16 How to use AI Console Insights in Chrome DevTools 03:29 How to use AI StyleSheets Assistance in DevTools 04:36 How to test image optimization 07:25 How to get general AI suggestions for the page 08:23 How to get help with implementing a new feature 08: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 code 15:56 CSS Stickers 16:15 Is AI in Chrome DevTools good?
- Zoran Jambor #css #devtoolsCSS Tip: Easily Deal With Layout Shifts Caused by ScrollbarsCSS Weekly2024-10-18 | Find out how to prevent layout shifts when scrollbars are hidden/shown using the scrollbar-gutter CSS property.
Zoran Jambor #css #csslayoutHow To Animate a Button Based on Video Content (YouTube Button Subscribe Animation)CSS Weekly2024-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.
- Zoran Jambor #css #htmlvideoFrontend News #7: CSS Masonry, Accessible Accordion Components, CSS Music VideoCSS Weekly2024-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.
📖 Chapters 00:00 About this Episode 00:28 Choosing a Masonry Syntax in CSS 02:13 New to the web platform in September 03:24 The color-scheme Property 04:20 Product for Engineers 05:02 Tools and Techniques to Create Accessible Accordion Components 05:31 CSS Triggers 06:11 CSS Music Video 06:47 A challenge for you
Zoran Jambor #css #cssnewsStart Using Minimap Section Headers in VS CodeCSS Weekly2024-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.
📖 Chapters 00:00 How to find minimap options in VS Code settings 00:23 How "Minimap Max Column" in VS Code really works 01:16 How to use Minimap Mark Section Headers in VS Code 02:40 How Region Section Headers work in Minimap of VS Code 03:14 The problem with Region Section Headers in CSS & HTML 03:36 CSS Stickers Discount 04:05 Conclusion
- Zoran Jambor #css #vscodeEnable *NEW* CSS Transitions BehaviorCSS Weekly2024-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.
📖 Chapters 00:00 What calc-size() function does 00:28 Update on single-argument form for calc-size() 01:22 How two-argument form of calc-size() works 02:11 Why one-argument for of calc-size() no longer works 02:51 How interpolate-size property works 03:42 How to enable new CSS Transitions behavior on the entire page 04:20 When to use calc-size() and when interpolate-size 04:41 Browser support for calc-size() and interpolate-size
- Zoran Jambor #css #csstricksFrontend News #6: One Million Checkboxes, Can I Use CLICSS Weekly2024-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.
📖 Chapters 00:00 Intro 00:19 The secret inside One Million Checkboxes 01:17 CSS display contents 01:55 BrowserStack Bug Capture 02:22 Time Travelling CSS With :target 03:27 Command line tool for “Can I Use …” 05:00 Glassmorphic Cube (CSS) 05:35 A question for you
- Zoran Jambor #cssCSS Tips - Animate to “height: auto;”CSS Weekly2024-09-11 | Find out how to easily animate from “height: 0;” to “height: auto;” using newly available calc-size() function.
- Zoran Jambor #css #csstipsFrontend News #5: ChatGPT CSS, Custom Range SlidersCSS Weekly2024-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.
📖 Chapters 00:00 Intro 00:26 Custom Range Slider 01:12 Styling Tables the Modern CSS Way 01:51 Hypermode 02:31 How to convert Chrome extensions to Safari 03:15 The Solar System in CSS 04:16 2 Cool Ways to Use :has() 04:43 A question for you
- Zoran Jambor #css #cssnews #webdevelopmentFrontend News #4: State of CSS 2024, Syntax HighlightingCSS Weekly2024-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.
📖 Chapters 00:00 Intro 00:22 State of CSS 2024 00:45 Syntax Highlighting in Hand-Coded Websites 01:22 Level Up Your Coding Skills With Scrimba 01:56 Is CSS Grid really slower than Flexbox? 02:29 Choose the right image format 03:26 Batman-Comic.CSS 04:38 Interactive Gradient & Glassmorphism with noise 05:28 A question for you
- Zoran Jambor #css #cssnews #webdevelopmentTailwind CSS — How To Create a Stunning Button #programmingjokesCSS Weekly2024-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.
- Zoran Jambor #css #tailwindcssStunning Staggered CSS Animation/Transition on Page LoadCSS Weekly2024-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.
📖 Chapters 00: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-rule
- Zoran Jambor #css #cssanimationAnimate HTML Details & Summary Elements Using Pure CSSCSS Weekly2024-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.
📖 Chapters 00:00 About HTML Details & Summary element 01:26 Style HTML Details disclosure element using CSS 02:40 Inspect HTML Details Shadow DOM in DevTools 03:55 Utilize HTML Details pseudo-elements 05:10 Animate HTML Details open/close using calc-size() 07:00 Use transition-behavior: allow-discrete; to animate content-visibility 08:58 Browser support for calc-size() & transition-behavior: allow-discrete; 10:04 Animate HTML Summary Arrow marker 15:01 Connect multiple Details elements 15:59 Open Details disclosure widget by default 16:25 Browser support for HTML Details “name” attribute
- Zoran Jambor #css #htmldetailsAnimate to height: auto; & display: none; Using CSS TransitionsCSS Weekly2024-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)".
📖 Chapters 00:00 About CSS transitions & demo setup 01:26 How to transition to height: auto; 04:06 How to transition from display: none 04:43 How transition-behavior CSS property works 06:32 How @starting-style at-rule works 08:34 Browser support for transition-behavior & @starting-style
- Zoran Jambor #css #csstipsCSS Gradient Text StylesCSS Weekly2024-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.
- Zoran Jambor #css #csstipsCSS Email Obfuscation - Create a Clickable LinkCSS Weekly2024-04-25 | A hands-on guide on how to create clickable CSS-obfuscated email links with a bit of JavaScript.
🔥 Mastering Linting: masteringlinting.com 🏷️ Coupon for 20% off at the checkout: CSSOBFUSCATION
📖 Chapters 00:00 How CSS email obfuscation works 01:05 How to create a clickable CSS-Obfuscated email link 05:22 How to add a subject to the obfuscated email link 07:39 Conclusion
- Zoran Jambor #css #jsVS Code Tips - Fix Multiline Comments in CSS/HTMLCSS Weekly2024-04-22 | A quick tip showing how to fix broken block comments behavior in Visual Studio Code by utilizing the built-in Emmet toolkit.
- Zoran Jambor #vscode #visualstudiocodeEmail Obfuscation Using CSSCSS Weekly2024-04-08 | Learn how email obfuscation works and why you should obfuscate your emails using CSS.
📖 Chapters 00:00 What is email obfuscation 00:47 Email obfuscation techniques 03:17 How CSS email obfuscation works 04:37 Why CSS email obfuscation works
- Zoran Jambor #cssVS Code Tips - Fix Multiline Comments in CSS/HTMLCSS Weekly2024-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.
📖 Chapters 00:00 Problem with block comments in VS Code 01:39 Use Emmet to toggle block comments in CSS/HTML 02:23 Add Keyboard Shortcut to “Emmet: Toggle Comment” command 03:33 Restrict Keyboard Shortcut to CSS & HTML files 06:49 Why you should use Emmet Toggle Comments command in VS Code
- Zoran Jambor #css #vscodeCenter ANYTHING in CSS With This Line of Code #css #csstipsCSS Weekly2024-03-19 | A quick tip outlining how to easily center any content vertically (including block-level elements) in CSS using the align-content property.
- Zoran Jambor #css #csstipsSimplify Your CSS Using :is() and :where() Pseudo-ClassesCSS Weekly2024-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.
📖 Chapters 00:00 How :is() pseudo-class works 02:12 How to simplify selector lists using nested :is() statements 03:02 How specificity works with :is() 05:31 The difference between :is() and :where() pseudo-classes 06: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-classes
- Zoran Jambor #cssNative Input Toggle Switch #css #htmlCSS Weekly2024-02-27 | A quick tip showing how to create a native toggle switch by adding a single attribute to a checkbox input element.
- Zoran Jambor #css #htmlWhere is CSS4? #css #css4CSS Weekly2024-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.
- Zoran Jambor #css #css4Best Programming Fonts (2024)CSS Weekly2024-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.
📖 Chapters 00:00 Why you should find a good coding font 00:28 How to change font family in VS Code 01:13 How to enable ligatures in VS code 02:04 What are font ligatures 02:54 How to find a good programming font 03:47 JetBrains Mono Font 04:05 Cascadia Code Font 04:37 Iosevka Font 05:05 How to inspect font variations on MacOS in Font Book 05:46 Using font variations in VS Code 06:31 Fira Code Font 06:48 GitHub Monaspace Font 07:37 What if font ligatures are not working in VS Code 08:48 What is your favorite coding font?
- Zoran Jambor #codingfonts #vscodeVS Code Tips - Leverage the Outline ViewCSS Weekly2024-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).
- Zoran Jambor #vscode #visualstudiocodeVS Code Tips — Custom Folding Ranges #vscodeCSS Weekly2024-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.
- Zoran Jambor #vscode #visualstudiocodeArc Browser Boosts – How To Tweak Website CSSCSS Weekly2024-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.
📖 Chapters 00:00 Intro 02:28 How Arc browser Boosts work 03:43 How to tweak code in Arc browser Boosts 03:56 How to show/hide sidebar in Arc Browser 04:15 How to open Developer Tools from Arc Boost 05:09 How to copy CSS changes from DevTools to Arc Boost 06:50 How to tweak the fixed layout sizing in DevTools 08:50 How to prepare absolute layout for CSS Grid 10:32 How to set CSS Grid using grid-template-areas 12:22 How to set optimal line lengths in CSS 13:24 How to add gap between CSS Grid elements 13:55 How to tweak sizing of CSS Grid columns 15:10 Howgrid switch reasoingn - adjust mobile version 15:39 How to copy CSS changes from DevTools to Arc Boost 16:22 How to fix sidebar margin problems 17:00 How to adjust layout for mobile responsive version 18:57 How to adjust sidebar for mobile responsive version 19:45 How to adjust ad for mobile resposive version 22:06 How to adjust logo for mobile responsive version 23:32 How to adjust search & copyright for mobile responsive version 25:08 How we tweaked Daring Fireball in Arc Boost 25:35 Why should Arc support Boosts on mobile 26:00 Conclusion
- Zoran Jambor #css #arcbrowserChrome DevTools Inception #devtoolsCSS Weekly2024-01-16 | A quick tip showing how (and why) you can inspect Chrome Developer Tools with Chrome Developer Tools.
Course 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.
- Zoran Jambor #css #devtoolsCSS Stickers!CSS Weekly2024-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.
- Zoran Jambor #css #cssstickersHow to handle touchscreen gestures in the browser using CSS #css #csstipsCSS Weekly2023-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.
- Zoran Jambor #css #csstipsCSS Tips — Practical img Element DefaultsCSS Weekly2023-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.
Course 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.
📖 Chapters 00:00 Why you should use this technique 00:49 Demo setup 01:12 Fix distorted images 02:14 Fix empty space under images 03:02 Style alt text 03:59 Style low-quality image placeholders (LQIP) 05:07 Add margin for shape-outside
- Zoran Jambor #css #cssbasicsHow to enable experimental CSS & JS features in Chrome, Firefox & SafariCSS Weekly2023-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.
Course 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.
📖 Chapters 00:00 Intro 00:31 How to enable experimental web features in Chrome 02:22 How to enable experimental web features in Edge, Arc, etc. 02:45 How to enable experimental web features in Firefox 04:22 How to enable experimental web features in Safari
- Zoran Jambor #css #devtoolsHow to Create Stunning Slanted Containers with CSSCSS Weekly2023-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.
📖 Chapters 00:00 Intro & demo setup 01:56 Create a slanted edge using clip-path 04:47 Adjust content to follow the slanted edge using shape-outside 09:14 Refactor physical to logical CSS properties 10:44 Set shape-outside points 13:55 Fix reversed up clip-path points 15:01 Tweak margins between cards 15:48 Add padding between slanted edge and content using clip-path 18:49 Add padding between slanted edge and content using shape-outside 20:54 Drawback of this technique and conclusion
Course 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.
- Zoran Jambor #css #csstutorialsFlexbox — justify-content or align-items?!? #cssCSS Weekly2023-11-30 | CSS Quick tip that will help you understand if you need justify-content or align-items property in Flexbox.
Course 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.
- Zoran Jambor #css #csstipsCSS Tips - Custom list styles with @counter-style #cssCSS Weekly2023-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.
Course 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.
- Zoran Jambor #css #csstutorialsCSS4 Is Coming (Not a Clickbait)CSS Weekly2023-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.
📖 Chapters 00:00 Intro 00:27 Why were we told CSS 4 will never happen 03:15 Why is CSS 4 happening now 04:45 What are the reasons CSS 4 is coming 05:22 About “Let’s Define CSS 4” GitHub discussion 06:37 What should be included in CSS 4 07:39 What features are currently in CSS 4 09:04 My opinion on CSS4 11:33 Conclusion
Course 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.
- Zoran Jambor #css #css4Enforce Underlined Links in FirefoxCSS Weekly2023-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.
Course 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.
- Zoran Jambor #css #firefoxTypes of Themes in Visual Studio Code #vscode #vscodeextensionsCSS Weekly2023-11-14 | A quick overview of different types of themes available in Visual Studio Code: Color Themes, File Icon Themes, and Product Themes.
🔥 Course Mastering Prettier & Stylelint: masteringlinting.com 🏷️ Use coupon YOUTUBE25 to get an additional 25% off on the already discounted, pr-launch price.
- Zoran Jambor #vscode #vscodeextensionsPractical Guide to CSS PositioningCSS Weekly2023-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.
📖 Timestamps 00:00 Intro & demo setup 01:18 What is “position” property 01:49 How “position: static;” works 03:32 How “position: relative;” works 05:15 How “position: absolute;” works 08:59 How “position: fixed;” works 09:59 How “position: sticky;” works 12:10 Overview of how positioning in CSS works
Course 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.
- Zoran Jambor #css #cssbasicsHow To Easily Calculate CSS Specificity #css #specificityCSS Weekly2023-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=youtube
Course 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.
- Zoran JamborTop Visual Studio Code Product Icon ThemesCSS Weekly2023-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.
Course 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.
📖 Chapters 00:00 What are Product Icons in Visual Studio Code 01:26 Material Product Icons 01:46 Fluent Icons 02:07 Carbon Product Icons 02:42 Tabler Product Icons 03:24 MaterialIconic Product Icons 03:45 Bootstrap Product Icons 04:05 Feather Product Icons 04:19 Conclusion