Welcome to the Worlds Worst
Website!
Learn from mistakes, watch bad videos, steal components.
My YouTube Channel
Website Build Challenge, Accepted!
Kevin Geary Hiring Challenge: I Built 3 Dynamic Sections in Etch + ACSS (Live Build + CPTs + Loops!) Kevin said: “Pay a dev to build a landing page, record it, talk through it.” I said: Challenge accepted. Picked a random design from lapa.ninja → recreated 3 sections from scratch. Watch me: Spin up Lando local site Install Etch + Automatic CSS Create 2 CPTs (Projects + Featured) + 2 taxonomies (Project Type + Service) Steal images with Chrome extension Build dynamic portfolio grid (grid–auto-2 + loop) Add emoji icons via taxonomy (no custom fields!) “Focus” section → dynamic service list Featured cards → clickable + AOS fade-up Auto-responsive (thank you ACSS) No Figma. No assets. Just a Framer site and vibes. Timestamps (10-sec intro skipped): 0:10 – The challenge + picking a design 1:30 – Lando setup + nuke Elementor 3:20 – Etch/ACSS install + license drama 5:10 – CPTs + taxonomies (Projects, Featured, Services) 8:40 – Steal images + media library chaos 10:20 – Portfolio grid: loop + grid–auto-2 14:50 – Dynamic taxonomies (emoji icons!) 18:30 – “Focus” section: flex + service loop 22:10 – Featured cards: clickable + AOS 26:40 – Mobile check + final polish 29:20 – “Would YOU hire me?” Verdict: 3 sections. Dynamic. Clean code. Under 30 mins (after setup). If I was using Elementor? I'd still be on section 1. Let me know, would you hire me? #WordPress #Etch #AutomaticCSS #WebDev #HiringChallenge #KevinGeary #Dynamic Looking for web development or branding services? https://apexbranding.design Interested in Etch? Check it out: https://etchwp.com?aff=43a07932 (affiliate link) Interested in Automatic CSS? Check it out: https://automaticcss.com/ref/2441/ (affiliate link)
Watch on YouTubeI tried out Elementors new Editor 4 Page Builder for WordPress
Elementor Editor 4 Alpha: I Tried the “Pro” Class System… And Rage Quit (Live Struggle + Etch Comparison!) Never used Elementor? Perfect. Watch a veteran dev fumble through Editor 4 (alpha) for the first time – classes, variables, grids, and a million clicks. I rebuild a simple AI-generated hero + cards section to test the hype: Spin up Lando local site (PHP 8.1 upgrade drama) Install Editor 4 → activate → skip Pro nags Classes on buttons? …but NOT on containers or grids? Global colors/variables? Kinda… but the UI is a maze Components? Pro-only Hover effects, cursor pointer, SVG icons? Style panel says nope Compare to Etch + Automatic CSS (same layout in 1/3 the time) Biggest Wins: Class-based (finally!) Auto-responsive grids Site-wide content width Biggest Fails: No section element Variables hidden & half-baked Pro-walled everything good (components, custom CSS) Click-fest UI + no escape key Timestamps (10-sec intro skipped): 0:10 – Why I’m even trying Elementor (send help) 0:50 – Lando setup + PHP 8.1 rebuild 3:20 – Install Editor 4 4:40 – First widget drag → UI rant begins 6:10 – Classes work… sometimes 8:30 – Global colors & variables 10:50 – Building hero (grid, image, flex hell) 15:20 – Buttons: no cursor pointer, no hover CSS 18:40 – Cards section → SVG icon nightmare 22:10 – Pro walls hit hard (components gone) 25:30 – Etch + ACSS rebuild (watch the speed) 28:40 – Final verdict: Alpha limbo Verdict: A tiny step toward pros… but still DIYer-first. If you’re code-shy, it’s “fine.” If you know CSS? Run back to Etch. Drop a comment: Would YOU pay for Pro just for components? #elementor #Editor4 #WordPress #WebDev #PageBuilder #Etch #AutomaticCSS #Rant Looking for web development or branding services? https://apexbranding.design Interested in Etch? Check it out: https://etchwp.com?aff=43a07932 (affiliate link) Interested in Automatic CSS? Check it out: https://automaticcss.com/ref/2441/ (affiliate link)
Watch on YouTubeThis is why I hate page builders
Why Page Builders Drive Me INSANE Watch this icon refuse to center in Elementor. I set the box to display: flex, justify: center, align: center… Still off-center. Why? Elementor added a ghost div I can’t see or select. My styles center the ghost — not the icon. Fix? Write custom CSS to target Elementor’s secret wrapper. This is why I ditched page builders. #Elementor #WebDev #CSS #Rant #Shorts Looking for web development or branding services? https://apexbranding.design Interested in Etch? Check it out: https://etchwp.com?aff=43a07932 (affiliate link) Interested in Automatic CSS? Check it out: https://automaticcss.com/ref/2441/ (affiliate link)
Watch on YouTubeCheck out PatternCSS, an inline block CSS editor for the Gutenberg editor
Pattern CSS First Look! Watch me discover Pattern CSS – a free plugin that adds a live CSS panel to EVERY block. No JSON nightmares, no dashboard hopping, just type and watch it update. Then watch me rant about the new Accordion block and how stupid it is that we have to use theme.json to style it. In 12 minutes you’ll see me: Install Pattern CSS (zero setup) Turn a boring paragraph red → then swap to an Automatic CSS variable (it just WORKS) Nest CSS like SCSS inside a row block Pop the editor out, drag it around, hit “Global” for site-wide tweaks Prove media queries & container queries work Try (and fail) to style the upcoming Accordion block with theme.json Rant about why JSON styling is actual torture The Plugin Verdict: If your client chains you to Gutenberg, Pattern CSS is your jailbreak key. If you’re free… stay far away and keep using Etch.Timestamps (10-sec intro skipped): 0:10 – Twitter thread that started it all 0:45 – Pattern CSS installed & first “color: red” 1:20 – Automatic CSS variables = magic 2:15 – CSS nesting inside rows (game changer) 3:40 – Global panel + pop-out editor 4:30 – Reading the docs live (WebAssembly?!) 6:00 – Attempting theme.json accordion styles 8:40 – Why this workflow gave me hives 10:30 – Block style variations = more JSON copypasta 11:20 – Final plea: someone defend this! Drop a comment: Are you team JSON or team “just give me a CSS box”? #wordpresstraining #Gutenberg #PatternCSS #WebDev #AutomaticCSS #Rant Looking for web development or branding services? https://apexbranding.design Interested in Etch? Check it out: https://etchwp.com?aff=43a07932 (affiliate link) Interested in Automatic CSS? Check it out: https://automaticcss.com/ref/2441/ (affiliate link)
Watch on YouTubeWatch me fix a silly CSS bug on my own WordPress website
Fixing a Silly CSS Bug on My Own WordPress Site (Lando + Git + VS Code Live Debug!) Wife interrupted take 1 to buy me coffee — worth it. Take 2: I discover a dumb image bug on a site I haven’t touched in forever. Hero images aren’t filling containers on mobile… and it’s 100% my fault. Watch me: Clone from GitHub Spin up Lando (Docker-based local dev) from scratch Fix the bug with a few lines of SCSS Forget to npm install → panic → fix → laugh Push live with my custom GitHub pull plugin (no FTP!) Explain object-fit: cover vs contain with live demos The Bug: Picture element had object-fit: cover… but the img inside didn’t → gaps, stretching, chaos on resize. The Fix: Add width 100%, height 100%, and object-fit: cover to the image. Done. Bonus Crash Course: Why object-fit: cover is your best friend (99% of the time) cover = fill space, crop edges contain = show full image, add letterbox No stretchy, warped images ever again Tools Used: Lando (Docker-powered local WP) VS Code (with creepy mind-reading autocomplete) Git + GitHub (no branches, living dangerously) SCSS → npm build Custom Git pull plugin (deploy in 1 click) Pro Tip: I don’t build sites like this anymore — I use Etch (It's like Dreamweaver for WordPress). No terminal. No bugs like this. Timestamps: 0:10 – Coffee interrupt & bug reveal 1:30 – Cloning from GitHub 2:40 – Lando init (Docker magic) 5:20 – VS Code finds the missing CSS 7:50 – The quick fix + live test 9:25 – Push live… then remember SCSS build 11:10 – object-fit: cover vs contain (visual demo) 13:40 – Why I ditched this workflow for Etch New to dev? You’ll see real Git, local setup, and why object-fit matters. Are you a web dev veteran? Laugh at my rookie mistakes on my own site. Drop a comment: Ever ship a bug this dumb? What’s your go-to local dev tool — Lando, Local, Docker, or something else? #wordpresstraining #WebDev #CSS #Lando #Git #VSCode #ObjectFit #Debugging Looking for web development or branding services? https://apexbranding.design Interested in Etch? Check it out: https://etchwp.com?aff=43a07932 (affiliate link) Interested in Automatic CSS? Check it out: https://automaticcss.com/ref/2441/ (affiliate link)
Watch on YouTubeWatch me use ACSS to create this otherwise complicated layout. (and a few bonus things)
Level up your WordPress layouts with Automatic CSS (ACSS) Content Grid—then turn a custom logo marquee into a reusable component with tweakable props for direction and speed. In this two-for-one tutorial, I demo how Content Grid makes “content-width + full-bleed” layouts dead simple (no hacky absolute positioning), then I convert a marquee widget into a component, wire up JSON looping, and fix a left↔right continuous scroll bug in plain JavaScript. What you’ll learn How ACSS Content Grid “zones” work (content, full, etc.) and why they’re a game-changer The minimal CSS you need: display: grid; grid-column: content-start / full; Turning a marquee into a component with data-direction and data-speed props Building a tiny JSON loop for logos (clean HTML, easy updates) Fixing a continuous-scroll bug in vanilla JS (no libraries) Chapters 00:00 Intro & what we’re building 01:02 Content Grid overview & zones 03:15 Making a content-width + full-bleed layout 05:10 Marquee HTML/CSS/JS walkthrough 08:02 Converting the marquee into a component (props) 10:25 JSON loop for logos 12:20 Fixing the right-to-left continuity bug (JS) 14:30 Wrap-up & next steps Tip: Add the content-grid class to your section, set the inner container to display: grid, then use grid-column: content-start / full to keep the left edge aligned to content width while letting the right side go full-bleed. Gear & stack (today) WordPress • Automatic CSS • Etch • Vanilla JavaScript Support the channel Some links may be affiliate links—at no extra cost to you, they help me make more tutorials. 🙏 Say hi / keep learning Looking for web development or branding services? https://apexbranding.design Interested in Etch? Check it out: https://etchwp.com?aff=43a07932 (affiliate link) Interested in Automatic CSS? Check it out: https://automaticcss.com/ref/2441/ (affiliate link) #wordpress #automaticcss #cssgrid #webdevelopment #componentdriven #vanillajs #bricksbuilder #oxygenbuilder #etchbuilder #uidesign #frontend
Watch on YouTubeTutorials
How to create a GitHub Action that creates a release in GitHub
This tutorial walks you through creating a GitHub Action that will create a Release in GitHub
Check it outEtch Components
Marquee that breaks out of content width on one side
This component is a component within a component. The outer component is a section/container combo that starts at the normal content width on the left but overflows all the way to the edge of the screen on the right. Inside this container is a scrolling marquee of images. You can choose the direction, and speed of the scrolling using component props.
Grab the code (and watch a video!)Table of Contents
Table of Contents component that can be added to a page that is already looping through content and will add a list or dropdown of links that link to the pieces of content.
Grab the code (and watch a video!)Grid to Carousel
This component creates a simple 3 column grid on desktop, that turns into a side scrolling carousel on mobile. NOTE: This component requires <a href="https://swiperjs.com/get-started">Swiper.js</a>
Grab the code