Hey,
My name is Jaspreet Kaur
Web Developer and CSS Specialist
I specialize in responsive web design, building mobile-first sites that adapt to any screen size, from mobile phones to desktops, ensuring a consistent experience for all users. I am also proficient in using CSS frameworks like Tailwind and Bootstrap, which speeds up development while delivering a custom look and feel that aligns with your brand.
-
Fluid Scaling: Controlling Bounds with Min and Max
While the fxx() function ensures perfect proportionality, pure fluid scaling can be dangerous. If a paragraph has font-size: fxx(16) (based on a 1920px design), and a user views it on a 320px mobile phone, the font size will proportionally scale down to roughly 2.6px. This is completely illegible. Therefore, we must set “guardrails”—mathematical boundaries that dictate how small or how
-
Fluid Scaling: Implementation in SCSS
In Part 1, we learned that the core of our fluid scaling relies on wrapping a target pixel value in a calc() function multiplied by our global ratio variable: calc(VALUE * var(–wp–custom–fxx)). While powerful, writing out that full calc() string every time we want to define a padding, margin, font-size, or width is tedious and prone to typos. To solve
-
Fluid Scaling: The Core Concept
In modern web design, creating layouts that look perfect on every screen size—from massive 4K monitors to small mobile phones—is a significant challenge. Traditional approaches rely heavily on fixed pixel values (e.g., width: 300px) combined with numerous media queries (@media (max-width: 768px) { … }) to snap elements into different layouts at specific breakpoints. This “snapping”
-
Creating Outlined Text Effects with CSS Text Stroke
Typography plays a crucial role in modern web design. With the right styling, even a simple text element can serve as a strong visual anchor for your layout. One effective yet often overlooked technique is the use of CSS text stroke, which allows developers to add outlines around text — creating clean, bold, and visually