Ideas, practical guidance and perspectives from Zero Noise Marketing.
Pronounced: /ˈsiː esˈɛs ˈlɒdʒɪkəl ˈprɒpətiz/ Imagine you're arranging furniture in a room. You might say "put the sofa against the wall" or "place the chair to the left of the table." CSS logical properties work similarly for website design
Pronounced: /ˈsɛs ˈsʌbɡrɪd/ Imagine you're building with LEGOs. You have a big baseplate (your main webpage), and you want to build smaller sections (like a header, sidebar, and main content area) on it. Normally, each section would have it
Pronunciation: /ˈzɛplɪn/ Zeplin isn't a magical ingredient or a trendy buzzword; it's a practical tool used by website designers and developers to streamline collaboration and ensure design consistency. Think of it as a central hub where de
Pronunciation: /ɪnˈvɪʒən diː ɛs ˈɛm/ InVision DSM, short for InVision Design System Manager, isn't a trendy buzzword; it's a powerful tool within the InVision platform. Think of it as a central hub where designers and developers store and m
Pronunciation: ab-STRACT ver-shun-ing Imagine you're building with LEGOs. Abstract versioning is like having a set of instructions that describes the overall structure and function of your LEGO creation, without specifying every single bric
Pronunciation: /skɛtʃ ˈsɪmbəlz/ Sketch symbols, in website design, are reusable components. Think of them like pre-made building blocks. Instead of designing every button, icon, or text field from scratch each time, designers create a symbo
Fig-ma (FIG-muh) Figma is a collaborative design tool used by website designers and other creatives. Think of it as a digital whiteboard where multiple people can work on a website's design simultaneously. Instead of everyone working on sep
Pronunciation: /dɪˈzaɪn ˈtoʊkənz/ Imagine you're building with LEGOs. Instead of searching for the exact shade of blue for every single brick, you have a named container – let's call it "SkyBlue" – that holds that specific shade. Every time
Flexbox Gap (fleks-boks gap): A relatively new CSS feature that simplifies spacing between items arranged using Flexbox. Imagine you're arranging building blocks. Flexbox is like the tray you use to hold them. Before Flexbox Gap, if you wan
Grid Template (grid tem-plate): A way to arrange items on a webpage in rows and columns. Imagine you're setting up a classroom. You need to arrange desks neatly so everyone has space and can see the board. A grid template is like a blueprin
Pronunciation: /ˈsɪs ˈɡrɪd ˈɛəriəz/ Imagine you're building with LEGOs. CSS Grid Areas is like having a big LEGO baseplate and deciding exactly where to put each brick before you start building. Instead of bricks, you have sections of your
Pronunciation: /ˈɒbdʒɛkt fɪt/ Imagine you have a beautiful photograph you want to display on your website. Object-fit is like choosing how that photo will fit into the space you've allocated for it. It determines how the image is resized an
Pronounced: See-Ess-Ess Shapes Imagine you're designing a website. Usually, elements like images and text blocks are simple squares or rectangles. CSS Shapes lets you make them any shape you want – circles, stars, even complex, irregular fo
Blend modes, pronounced /blend mōdz/, are a powerful tool in website design that control how layers of images or colors interact with each other. Imagine you're painting. You might layer different colors on top of each other. Blend modes de
Pronunciation: /ˈsɪs ˈfɪl.tərz/ Imagine you have a photograph. You can change its look—make it black and white, blur it, or increase its contrast—using photo editing software. CSS filters do something similar for images and other elements o
Pronunciation: /ˈsɪs ˈmæskz/ Imagine you have a cookie cutter. You press it into a piece of dough, and only the shape of the cutter remains. CSS masks work similarly on websites. They let you hide parts of an image or element, revealing onl
Pronunciation: /ˈstɪki ˈɛləmənts/ Imagine a note you stick to your refrigerator. It stays put even when you open and close the fridge door, right? Sticky elements on a website are similar. They're parts of a webpage that stay in a fixed pos
Scroll-triggered animations (skrol-trig-erd an-ih-MAY-shuns) Imagine a website where elements like images, text, or buttons appear or change as you scroll down the page. That's scroll-triggered animation. It's a way to make a website more e