Badar Khalil
<p></p>
Lessons by Badar 153
Browser DevTools for CSS: Inspect, Debug & Edit Styles LiveCSS 5 min read CSS 2D Transforms: translate, rotate, scale, skew and transform-originCSS 4 min read CSS 3D Transforms: perspective, preserve-3d, rotateX/Y and backface-visibilityCSS 5 min read CSS Accessibility (focus, contrast)CSS 2 min read CSS Architecture & BEMCSS 2 min read CSS Attribute Selectors: [attr], ^=, $=, *= and MoreCSS 4 min read CSS BackgroundsCSS 4 min read CSS Basic Selectors: Type, Class, ID, Universal & GroupingCSS 4 min read CSS Borders, Outlines & Rounded CornersCSS 5 min read CSS Box Shadow & Text ShadowCSS 6 min read CSS Buttons: Variants, States, Sizes and Accessible Button DesignCSS 6 min read CSS Card Component: Layouts with Flexbox, Grid, Container Queries and SubgridCSS 6 min read CSS Colors (HEX, RGB, HSL, OKLCH)CSS 5 min read CSS Combinators: Descendant, Child, Adjacent & General SiblingCSS 4 min read CSS Comments & Code Formatting Best PracticesCSS 3 min read CSS Filters & backdrop-filter (Glassmorphism)CSS 6 min read CSS Fonts and font-family: Font Stacks, Weights and System FontsCSS 7 min read CSS Gradients (Linear, Radial, Conic)CSS 5 min read CSS Interview Q&A & Cheat SheetCSS 2 min read CSS Introduction & History: What Is CSS and Why It MattersCSS 4 min read CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @propertyCSS 5 min read CSS Margin and Margin CollapseCSS 7 min read CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible NavigationCSS 7 min read CSS Opacity & Blend ModesCSS 5 min read CSS Overflow: hidden, scroll, auto, clip and Text TruncationCSS 7 min read CSS Padding: Shorthand, Percentages and Best PracticesCSS 6 min read CSS PerformanceCSS 2 min read CSS Pseudo-classes: :hover, :focus, :nth-child & Modern SelectorsCSS 6 min read CSS Pseudo-elements (::before, ::after)CSS 5 min read CSS Reset & NormalizeCSS 8 min read CSS Scroll-Driven Animations: animation-timeline, scroll() and view()CSS 5 min read CSS Specificity ExplainedCSS 4 min read CSS Syntax & How Browsers Apply StylesCSS 4 min read CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and MoreCSS 7 min read CSS Text Properties: Alignment, Spacing, Decoration and WrappingCSS 7 min read CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible OverlaysCSS 6 min read CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discreteCSS 5 min read CSS Units: px, rem, em, %, vw, vh and dvhCSS 7 min read CSS Variables (Custom Properties)CSS 8 min read CSS View Transitions API: Progressive Enhancement for Page and State AnimationsCSS 5 min read CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-HeightCSS 9 min read CSS align-content: Align Multiple Flex Lines ExplainedCSS 3 min read CSS align-content: Space and Align Multiple Flex LinesCSS 3 min read CSS align-items: Align Flex Items on the Cross AxisCSS 4 min read CSS align-items: Align Flex Items on the Cross AxisCSS 3 min read CSS box-sizing: content-box vs border-boxCSS 5 min read CSS flex-direction: Row, Column, Reverse Explained with ExamplesCSS 4 min read CSS flex-direction: row, row-reverse, column & column-reverse ExplainedCSS 4 min read CSS flex-wrap & flex-flow: Wrap Flex Items the Right WayCSS 4 min read CSS flex-wrap and flex-flow: Complete Guide with ExamplesCSS 4 min read CSS gap, row-gap & column-gap in Flexbox: Modern SpacingCSS 4 min read CSS gap, row-gap and column-gap in Flexbox and GridCSS 3 min read CSS justify-content: Align Flex Items on the Main AxisCSS 4 min read CSS justify-content: Align Flex Items on the Main AxisCSS 4 min read Cascade Layers (@layer)CSS 7 min read Cascade, Inheritance & !importantCSS 5 min read Centering TechniquesCSS 6 min read Container QueriesCSS 9 min read Dark Mode (prefers-color-scheme, light-dark())CSS 9 min read Debugging Common CSS BugsCSS 2 min read Display & Inline-blockCSS 7 min read Embedding YouTube Videos in HTMLHTML 2 min read Flex Container and Flex ItemsCSS 6 min read Flexbox Introduction and Mental ModelCSS 6 min read Float & Clear (Legacy, and Why to Avoid It)CSS 5 min read Fluid Typography with clamp()CSS 9 min read HTML & CSS Integration (Inline, Internal, External)HTML 2 min read HTML Accessibility (ARIA, Screen Readers)HTML 2 min read HTML Attributes (Global & Standard)HTML 2 min read HTML Audio EmbeddingHTML 2 min read HTML Basic Syntax & Document StructureHTML 2 min read HTML Block vs Inline Elements ExplainedHTML 2 min read HTML Browser Support & CompatibilityHTML 2 min read HTML Canvas (2D Drawing API) 🔥HTML 3 min read HTML Character Sets: UTF-8 & Encoding ExplainedHTML 2 min read HTML Classes vs ID: Selectors ExplainedHTML 2 min read HTML Colors (Names, HEX, RGB, HSL)HTML 2 min read HTML Comments (Best Practices)HTML 2 min read HTML Div & Span: Generic Containers ExplainedHTML 1 min read HTML Doctypes ReferenceHTML 2 min read HTML Drag & Drop APIHTML 2 min read HTML Editors & Environment SetupHTML 2 min read HTML Elements & Tags ExplainedHTML 2 min read HTML Emojis 😀: How to Use Them in Web PagesHTML 1 min read HTML Entities & Special CharactersHTML 2 min read HTML Events ReferenceHTML 2 min read HTML Favicon SetupHTML 1 min read HTML File Paths (Absolute vs Relative)HTML 2 min read HTML Form Attributes (action, method, etc.)HTML 1 min read HTML Form Elements (input, select, textarea, button)HTML 1 min read HTML Form Validation (Client-Side)HTML 2 min read HTML Forms IntroductionHTML 2 min read HTML Geolocation APIHTML 2 min read HTML Global Attributes ReferenceHTML 2 min read HTML Head Element Deep DiveHTML 2 min read HTML Headings (H1–H6) & SEO Best PracticesHTML 2 min read HTML Iframes: Embedding External ContentHTML 1 min read HTML Images (Alt Text, Lazy Loading, Formats)HTML 2 min read HTML Input Attributes (required, placeholder, pattern)HTML 2 min read HTML Input Types (Modern Types: email, date, color, range)HTML 2 min read HTML Interview Preparation (Top Q&A)HTML 3 min read HTML Introduction & HistoryHTML 1 min read HTML Layout Techniques: Header, Nav & FooterHTML 2 min read HTML Links (Anchor Tags & Hyperlinks)HTML 2 min read HTML Lists: Ordered, Unordered & Description ListsHTML 2 min read HTML Media OverviewHTML 2 min read HTML Page Title & Meta Tags (SEO Essentials)HTML 2 min read HTML Paragraphs & Line BreaksHTML 2 min read HTML Performance Optimization BasicsHTML 2 min read HTML Plug-ins (Object & Embed Tags)HTML 2 min read HTML Quiz & Practice ExercisesHTML 1 min read HTML Quotations & Citations (blockquote, q, cite)HTML 2 min read HTML SVG (Scalable Vector Graphics)HTML 3 min read HTML Semantic Elements (article, section, aside, nav)HTML 3 min read HTML Server-Sent Events (SSE)HTML 2 min read HTML Style Guide & Coding ConventionsHTML 2 min read HTML Styles (Inline CSS Basics)HTML 2 min read HTML SymbolsHTML 1 min read HTML Tables Explained: Rows, Columns & Merging CellsHTML 2 min read HTML Tag List (Full Reference)HTML 2 min read HTML Text Formatting (Bold, Italic, Mark, etc.)HTML 1 min read HTML URL Encoding ExplainedHTML 1 min read HTML Video Embedding (Native Player)HTML 2 min read HTML Web Storage (localStorage & sessionStorage)HTML 2 min read HTML Web Workers (Background Processing)HTML 2 min read HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form ControlsCSS 6 min read HTML vs XHTML: Key DifferencesHTML 1 min read HTTP Methods & Messages (Basics for Forms/APIs)HTML 2 min read Icons (SVG & Icon Fonts)CSS 10 min read Main Axis vs Cross Axis and the DevTools Flex InspectorCSS 7 min read Math Functions (calc, min, max, clamp)CSS 8 min read Media QueriesCSS 8 min read Mobile-First & the ViewportCSS 9 min read Modern CSS Selectors: :is(), :where(), :has()CSS 5 min read Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps AnimationsCSS 6 min read Native CSS NestingCSS 7 min read Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and SchemaCSS 6 min read Position (relative, absolute, fixed, sticky)CSS 6 min read Responsive HTML Design: Mobile-First ApproachHTML 2 min read Responsive Images & VideoCSS 8 min read Responsive Navigation PatternCSS 12 min read Sass vs Native CSSCSS 2 min read Setting Up Your CSS Workspace: Linking Files & Live ServerCSS 3 min read Styling LinksCSS 8 min read Styling Lists & TablesCSS 7 min read The CSS Box Model: Content, Padding, Border and MarginCSS 7 min read Understanding the DOCTYPE & HTML5 BoilerplateHTML 2 min read Web Fonts: Google Fonts, @font-face and Variable FontsCSS 7 min read Website Layout BasicsCSS 8 min read Why Layout Evolved: Tables, Floats, Flexbox and GridCSS 8 min read Writing Semantic & SEO-Friendly HTMLHTML 2 min read Z-index & Stacking ContextsCSS 6 min read aspect-ratio & object-fitCSS 7 min read
Articles by Badar 7
- How to Center an Image in CSS (5 Reliable Methods)Learn how to center an image in CSS with margin, text-align, Flexbox, Grid, and absolute positioning, plus fixes for when centering silently fails.
- How to Make an Image Link in HTMLLearn how to make an image link in HTML with the right <a> and structure, plus new-tab, accessibility, and troubleshooting fixes.</a>
- How to Convert String to Int Java: parseInt(), valueOf() & MoreLearn how to convert string to int Java the right way with parseInt(), valueOf(), radix conversion, and safe NumberFormatException handling.
- How to Check if a String Contains a Word in PythonThe direct way to check if a string contains a word in Python, plus whole-word matching, case-insensitive search, and finding word positions.
- What Is WPF in C#? A Complete Guide to Windows Presentation FoundationWhat is WPF in C#? A clear guide to Windows Presentation Foundation, how it works with C# and XAML, and whether it's worth learning in 2026.
- How to Add an Image in HTML: The Complete img Tag GuideLearn how to add image in HTML with the img tag, alt text, relative paths, srcset, and the picture element — plus common mistakes to avoid.
- How to Center a Div in CSSA practical guide to how to center a div in CSS across real scenarios, from full-page layouts to modals, plus fixes for when it won't work.