Building a personal website... With no code?! Built By Hand Ep 4
Chris Do's education platform reveals how designers can build a custom website from scratch without writing a single line of code.
Chris Do
Founder, The Futur™ · August 10, 2021
The Designer's Dilemma
There is a particular frustration reserved for the accomplished designer who decides to build their own website. It is the friction between the fluid, infinite control of a design canvas and the rigid, logical world of code. One world bends to your will. The other breaks if you do not bend to its rules.
Ben Burns, a seasoned designer and creative director, found himself squarely in this dilemma. Known for leading teams that build brands and websites for clients, he embarked on a mission to finally complete the one project he’d never finished: his own personal site.
The series is called Built By Hand. The name implies a personal touch, a craftsman’s approach. For Burns, this meant doing everything himself, including the development. The problem was, he didn’t know how to code.
“I can remember when I was just starting out how overwhelming the world of web development felt,” Burns recalls. His background was in identity, print, and packaging design, disciplines where a pixel is a pixel. The web felt like a foreign language. “I started just hacking things together… there were so many frustrating moments, things I just didn't understand.”
This is not an uncommon story. The leap from visual design to web development is a chasm many creatives fear to cross. Burns found a kindred spirit in Ron Segal, a designer and educator who runs the popular web design resource, Flux Academy. Segal’s journey started in the early days of the internet, tinkering with HTML on forums to make his posts stand out.
“If you wanted your posts or comments to look really cool, you would put a border on it or make the font bigger,” Segal explains. That early hacking gave him a grasp of the basics. But modern web development presented a new set of challenges. “What's the difference between position absolute and position relative? These kind of things are really hard to explain… these are the actual things that for me make the difference between ‘yeah, you can do the layout’ and then ‘you can do whatever you want’.”
The gap between a static design and a living, breathing website is filled with technical principles that can feel impenetrable. For Burns, the memory of struggling with web fundamentals was still fresh. “I didn't understand the box model whatsoever,” he admits. “I didn't understand why I couldn't grab an image and then put it on a screen exactly where I wanted to.”
To build a quality, custom website by hand, without a team of developers, Burns needed a different approach. He had to find a tool that could translate his design vision into clean, functional code without forcing him to become a full-stack engineer.
The No-Code Promise
The solution lies in a category of tools that has matured from clunky page builders into sophisticated visual development environments. The world of no-code is no longer about compromise. It is about empowerment.
For designers, the promise of no-code is the ability to build what you design, retaining full control over the final product. But as Burns warns, this promise hinges entirely on the platform you choose. “If you're gonna go no code or light code, the success and failure of your site really relies on the platform that you pick to build with,” he states. “It's a big decision that can cause you major pain if you don't pick the right one.”
Having navigated the landscape of WYSIWYG editors, stock themes, and now-defunct tools like Flash and Dreamweaver, Burns is unequivocal in his choice. “Honestly, right now there's only one no-code platform that I build with. That's Webflow.”
Webflow has carved out a unique space by positioning itself not as a simple website builder, but as a visual development tool. Its own website captures the mission perfectly: “Webflow empowers web designers to build professional, responsive, and custom websites in a completely visual canvas with no code.”
Burns’s endorsement is rooted in several key advantages he sees in the platform:
- Complete Control: Unlike template-based systems, Webflow provides granular control over every element on the page, mirroring the freedom of professional design software.
- Clean Code Output: The front-end code that Webflow generates is clean, semantic, and efficient. Burns confirmed this with his own network of engineers. There are no hidden workarounds or clunky artifacts from the visual editor.
- A True Visual Development Process: The interface and workflow directly map to the core principles of HTML and CSS. Building in Webflow feels like how a developer would code a site, just visually.
- Intuitive Interactions: The basic animation and interaction controls are powerful yet easy to grasp, allowing for sophisticated effects without a steep learning curve.
This alignment of design and development principles is why Webflow has become a go-to for designers who want to build. It doesn't just help you make a website; it teaches you how websites are made. As Burns notes, “As you use Webflow, you'll start to learn more about this stuff, which is one of the reasons why I love this platform. It actually teaches you the web fundamentals as you build your site.” This educational aspect is crucial for anyone looking to build a sustainable skill, a concept explored in depth in our Intimate Conversation on Personal Branding.
Deconstructing the Web: The Box Model
Before any building can begin, a fundamental mental shift is required. Designers are accustomed to the infinite freedom of the artboard. You can place an object anywhere. In web development, this is not the case.
The most critical, and often most confusing, principle for designers to grasp is the box model. On the web, everything is a box.
An image is a box. A block of text is a box. A video player is a box. These boxes live inside other boxes, which are themselves inside even larger boxes. The outermost container is the page body itself. Everything you see on a webpage is part of a complex, nested hierarchy of rectangular shapes.
“The reason why you can't just drop an image right in the center of a web page is because our browser uses all these boxes to figure out where everything needs to be positioned,” Burns explains. The position of an element is not absolute. It is relative to its container and its siblings.
To control this positioning, you must understand two key properties:
- Margin: This is the clear space around an element. Think of it as a forcefield pushing other elements away from it. To add space between two neighboring boxes, you add margin to one or both of them.
- Padding: This is the clear space on the inside of an element. If you have a small box inside a larger box, adding padding to the parent box will push the inner box away from the parent’s edges.
Burns uses the analogy of building blocks or Legos. Each piece (a div, in web terms) can be styled and placed, but it exists within a system. It can sit next to another block, on top of another, or inside another. You cannot simply float a block in mid-air and expect it to stay there. Its location is determined by its relationship to the entire structure.
Understanding the box model is the first and most important step in moving from a designer’s mindset to a builder’s mindset. It is the language of web layout. This foundational thinking is key, not just in design, but in how you structure any business venture, a theme Daniel Priestley discusses in our chat on How to Get Better Clients.
Stop trying to drag and drop. Start thinking in terms of containers, relationships, and the space between things.
A Blueprint for Building
With a firm grasp of the box model, the next step is to create a plan. A successful build is not about randomly adding elements to a page. It is about constructing a deliberate, repeatable system.
Before touching Webflow, Burns sketched out a structural framework for his entire website. This blueprint ensures consistency, simplifies responsiveness, and dramatically speeds up the development process. This is not just a plan for one page, but a system for all pages.
His framework is a simple, powerful hierarchy:
- Sections: The largest containers on the page, these divs define the major parts of the layout. Every page is broken down into logical sections like a header, a main content area, a contact form section, and a footer.
- Containers: Inside each section, Burns places containers that function like rows in a table. These divs span the width of the content area and hold the page's content, ensuring everything is neatly aligned.
- Columns: Inside each container (or row), the content is organized into columns. For his design, Burns created a flexible five-column grid. An element can span all five columns for a full-width look, or it can be split into various combinations, like a three-column and a two-column element side-by-side.
To illustrate, Burns breaks down his “Collab” page design. The page is first divided into four main sections: the heading, the main content, the contact form, and the footer. Within the content section, each line of content (like a heading, a paragraph, or a group of logos) lives within its own container, or row. Finally, within those rows, elements are placed into columns.
The real power of this framework reveals itself when the browser size changes.
On a large desktop screen, the columns expand to fill the available space, creating a wide, spacious layout. As the browser gets narrower for a tablet or phone, the columns within each row automatically stack on top of each other. A three-column layout on desktop becomes a single column of three items on mobile. This makes the entire site responsive by design.
This is strategic thinking applied to development. Instead of solving the layout for every page and every screen size individually, you build a system that handles 90% of the work automatically. Build a system, not a collection of pages.
The Typography Crisis and the Wizardry Solution
Even with a robust structural framework, a critical challenge remained: typography. The way text behaves on a responsive website can make or break the design.
Burns had a specific goal. He wanted the size of everything, including text, to scale in direct relationship to the browser window. “No matter what size screen the viewer has, things look the same,” he explains. This approach, often called fluid or intrinsic typography, aims to eliminate awkward line breaks, orphans, and widows by ensuring all elements scale proportionally.
The standard tools for this, like CSS viewport units (vw), were not giving him the control he needed. “Every time I set it to viewport units, it just breaks at specific screen sizes,” he says, showing examples from his old site where headings become comically large on wide screens and too small on narrow ones.
He was stuck. He knew how to solve it with custom CSS using the `calc()` function, but that would defeat the purpose of a no-code build. “I don't want to do that,” he says, frustrated. “I want to use the Webflow thing.”
The breakthrough came from a YouTube tutorial. Ben discovered a method developed by Webflow expert Timothy Rix, a system he aptly calls “Wizardry.” This was the exact solution he was looking for.
The Wizardry method provides the best of both worlds. The typography scales fluidly with the browser width, maintaining perfect proportions across a wide range of screen sizes. However, at predefined maximum and minimum widths, the scaling stops. The type size “locks” in place.
This prevents text from becoming unreadably large on ultra-wide monitors or illegibly small on the narrowest mobile screens. “You can see it's changing in size until a certain point, and boom, locks it in place,” Burns demonstrates. “No more weirdness, no more odd text wrapping.”
To implement this, he first built a dedicated style guide page in his Webflow project. This page contained every single typographic element used on the site: H1s, H2s, body copy, captions, and links. He applied the Wizardry styling to each element here, once. With the style guide complete, these perfectly responsive text styles were now available as classes to be used anywhere on the site.
This preparation was key. By solving the typography problem system-wide before building a single page, he ensured a consistent, professional, and foolproof result. This level of planning is often what separates a successful project from a struggling one, a principle we explore in How To Grow A Small Creative Agency.
From Blueprint to Reality: The Assembly Line
With the structural framework defined and the responsive typography system in place, the actual page building process became an assembly line.
What once took hours of guesswork now took minutes of systematic construction. The first page took three to four hours as he refined the process. The second took two. Eventually, he could knock out a complete static page in about 15 minutes.
This rapid acceleration is what he calls the “class effect.” In CSS and platforms like Webflow, a “class” is a saved bundle of styling information. Once you style one element, you can save those settings as a class and apply it to any other similar element with a single click. Styling an H1 heading once means you never have to style it again.
This is where Burns shares a crucial pro-tip that separates beginners from professionals: have a system for naming your classes.
By default, Webflow might generate a name like “Header 712.” This is meaningless. A few weeks later, you will have no idea what that class does. A professional workflow requires a clear, organized naming convention.
Burns follows simple but essential rules for naming classes:
- Be Descriptive: Name the class after what it does or what it is. For example, `section-hero`, `container-narrow`, `heading-xl`, or `button-primary`.
- Use Lowercase: Stick to lowercase letters for all class names. This is standard practice in web development.
- No Spaces: Never use spaces in class names. Use dashes (`-`) or underscores (`_`) to separate words.
“Having some kind of a system is absolutely essential to staying organized,” Burns insists. This isn’t just about neatness. It’s about efficiency and scalability. When you need to find a style, you know exactly what to look for. When you need to make a site-wide change, you can do it by editing a single, logically named class.
Automating Content with a Smart CMS
A personal website isn't just a collection of static pages. It's a platform for content. For his portfolio, blog posts, videos, and podcast appearances, Burns needed a dynamic content management system (CMS).
Here again, he opted for a strategic, system-based approach. Instead of creating separate collections for blog posts, projects, and videos, he created a single, unified “Content” collection that would hold everything.
The ingenuity of this setup lies in how the content is displayed. He built a single CMS template page that could intelligently adapt based on the type of content it was showing. He achieved this using conditional visibility, a feature within Webflow.
He added a “Content Type” field to his collection. When creating a new item, he could tag it as a “Blog Post,” “Video,” or “Podcast.”
On the template page, he created different header blocks for each content type:
- An image block for blog post feature images.
- A video embed block for YouTube videos.
- An HTML embed block for podcast players.
Then, he set the visibility for each block. The image block would only be visible if the content type was “Blog Post.” The video embed would only show if the content type was “Video.” The same logic applied to the podcast player.
This meant one template could power his entire content library. When he adds a new video, he simply provides the URL and selects “Video” as the type. The template automatically places it in the header. For a podcast, he pastes the embed code from Spotify or Apple Podcasts and selects “Podcast.”
This is automation at its best. It reduces maintenance, ensures consistency, and makes publishing new content incredibly fast. The front-end is elegant and custom, while the back-end is brutally efficient.
Old Dog, New Tricks
Burns crammed roughly 20 hours of development work into his video episode. The process, from planning and structure to styling and CMS setup, was remarkably painless. There was no massive crisis, no soul-crushing bug that derailed the project.
This lack of drama is, in itself, the point. The smooth process was not an accident. It was the direct result of years of trial and error, of learning the hard way, and of applying those lessons to a smarter process.
The final takeaway from this journey is not about Webflow, or CSS, or even web design. It's about the willingness to learn and the courage to start.
“In the tech world, I'm an old dog,” Burns reflects. “And if I can learn new tricks, you know, trying new things, so can you.”
He sees too many creatives standing on the edge, paralyzed by self-doubt. You can’t build a website without knowing how to code. You can’t apply for a job without having enough experience. You can’t start a business without a degree.
This is the voice of fear.
“If you're waiting for permission or a sign, well, I mean here it is,” he declares.
You got this. Go try something.
TRANSCRIPT
Enjoyed this? There’s more where it came from.
Get insights on creativity, business, and design from The Futur.
You can unsubscribe anytime. By submitting, you agree to receive communications and to our Privacy Policy.