Tools & practical guides
Build better websites.
One useful step
at a time.
Free browser tools and practical Oxygen guides for the next thing you need to build.
A little type, a lot of possibilities
320 px
Type that adapts.
1440 px
Type that adapts.
CSS clamp() · responsive typography
Made by Benjamin Olsen · Web development teacher in Denmark
Choose your next step
What are you building today?
Start with a small task. Leave with something you can use.
Give Oxygen pages
a shared template
Keep the frame consistent and each page’s content its own.
Read the guide →Preparing to go live? Open the launch checklist →
Try something useful
Readable colors.
A clear answer.
Check a color pair before it becomes part of your design.
A contrast result checks one part of accessibility. Review the finished page too.
Open the full contrast checker →21:1
AA normal text: Pass
AAA normal text: Pass
Normal text: AA 4.5:1 · AAA 7:1Readable text starts here.
One project, six practical stages
Build and launch an
Oxygen service website.
Build a small service website in Oxygen. Follow the decisions, use the tools, and check the result at each stage.
Start the project →A few good places to start
Useful now. Worth keeping.
Browse the library →A small selection of guides and resources to put to work on your next website.
Oxygen 6 · Guide
● ● ●
Shared frame
Unique page content
Shared contact section
Template Content Area, explained.
Give service pages a shared frame while keeping their content separate.
Read the guide →Browser tool
A checklist for the next launch.
Keep project notes, track the checks and export a handover.
Open the checklist →Oxygen designs
A useful starting layout.
Explore reusable layouts, then adapt the content to your project.
Browse the designs →Keep exploring
Topics and new resources.
The library grows as I publish guides, tools and projects. Browse by topic or see what has been added recently.
Breakdance Extensions →
Explore Breakdance element recipes for Oxygen, extension setup, dependencies and practical examples. Check version requirements before choosing an element.
146 published resourcesCSS & Web Design →
Practical guides and tips for fluid typography, spacing, color contrast and choosing useful web tools. Apply the examples to your next layout.
4 published resourcesOxygen 6 →
Learn native Oxygen 6 elements, build reusable layouts and components, and work with dynamic content. Find task-based tutorials and individual element references.
27 published resourcesWordPress →
Practical WordPress setup, launch and maintenance workflows. Learn through useful tasks, real settings and repeatable checklists.
1 published resourcesNew · Project path ·
Build and launch an Oxygen service website
Build a small service website through six practical stages: plan the content, import native designs, build pages in Oxygen, check real content and prepare for launch.
Updated · WordPress plugin · 2.0.0 ·
Oxygen Workflow Elements
Seven native Oxygen elements for service estimates, searchable content, package comparisons, project briefs, checklists, version notices and contextual support.
New · Guide / note ·
Compare service packages in Oxygen with BO Package Compare
Set up a two-to-five-package comparison in Oxygen with shared features, explicit annual prices, difference controls and a mobile two-package view.
New · Guide / note ·
Create a searchable WordPress library with BO Content Explorer
Build an Oxygen content library from public WordPress posts or manual cards. Combine search, two taxonomy filters and pagination without custom CSS.
The person behind the tools
Hi, I’m Benjamin.
I teach web development in Denmark and spend a lot of time working with WordPress, Oxygen and the details that make websites easier to build.
I share small tools and clear examples you can put to work on your own projects.
Practical examples
Clear limits and version notes
Have a website or tool in mind?
I can help with WordPress and Oxygen websites, improvements to an existing site, or a custom plugin or tool. Tell me about the task you need to solve.
Explore working with me →