14 min

Building a personal website... With no code?! Built By Hand Ep 4

How do I develop a website with very little classical training on coding? How do I make sure that what I build works on all modern browsers? How do I develop something custom, without having to build every single page by hand?

Watch on YouTube →

In the fourth episode of Built By Hand, Ben is sitting down to develop his personal portfolio website... without knowing how to code. How do you know if what you build in no-code tools is up to web standard? How do you think about approaching a development process? What is the box model? In the end, it's not that tough. Join Ben as he moves through the development process and builds his website using Webflow: a no-code visual development tool that is revolutionizing the way designers can build quality websites.

Transcript

Last episode, I designed the desktop and mobile version of my website. With the design in place, it's now time to get the site developed.

Typically in the past, I would hire a team of developers to build the websites we designed for clients. Whether that's a custom theme or a completely custom site - I've been able to hand off the designs to experts who make it happen. And that works great. There's a beautiful collaboration that happens because developers and engineers are incredibly creative. I believe that we're two sides to the same coin.

But the name of the game here is Built By Hand. And that means I want to do everything myself. So... how do I develop a custom websi— a quality custom website, from scratch, without knowing how to code?

I can remember when I was just starting out how overwhelming the world of web development felt. Especially for someone who spent a lot of time in identity, print, and packaging design... it felt like a different language. Which... it was... (stutter)... But I was really interested in it, so I started just hacking things together, and eventually, my interest bled over into client work... and I found myself working on a microsite for the US Olympic committee... Team USA. That was stressful. There were so many frustrating moments - things I just didn't understand. Every time I ran into a problem, I'd try and find a quick answer in some forum, but I felt like I was flying by the seat of my pants. I had no idea what I was doing... but I wanted to. I wanted to learn. It just felt like it was too much to absorb - to learn html, css, javascript... I settled for picking up bits and pieces.

I kinda figured I was alone in this... but it turns out... it's a pretty common story. I had a chat with Ran Segall, a designer, educator, and youtuber - and oddly enough, his story is really similar.

Ran is now on a mission to help designers learn how to create great websites using no-code tools. And that's exactly what I will need to use in order to build my site.

Well, if you're going no-code or light-code, the success and failure of your site relies on the platform that you pick to build with. Its a big decision that can cause you major pain if you don't pick the right one

I have been through the ringer when it comes to all the platforms that promise an easy-to-build-website: stock themes, page builders, wysiwyg editors, flash, dreamweaver... I've seen and done it all.

Now I thought about making this section dramatic. I thought about pretending to sort though and find the right platform to build with. That could have been educational... but honestly... Right now, there is only one no-code platform that I build with: Webflow.

For those of you who don't know, Webflow is a visual development tool: From their website, "Webflow empowers web designers to build professional, responsive, and custom websites in a completely visual canvas with no code."

As you probably guessed, this episode is sponsored by Webflow.

But here's the deal: I would have built this site in Webflow... even if they weren't a sponsor. Don't tell them... but I would have done this for free.

Oh and by the way... the Webflow account you're going to see: that's mine. I pay for it. It's not comped. And I've had it for years.

Listen.. by the end of this video, you're gonna want to try Webflow. It's the truth. And when you do, please click the link in the description or go to <URL>. That's going to help us track how much of an impact we've had for them.

But anyway... here's why I'm a Webflow fanboy:

I have complete control.
Puts out clean code.
Very few weird things.
I can actually make a site the way a dev would.
Visual dev
Animation is intuitive
Working with Webflow and working with clients is just awesome

I've done quite a bit of work on Webflow in the past few years: The Futur's website, the Building a Brand website, and a few of my buddy's sites were all built in Webflow. I speak the language, and it's a tool that I'm familiar with.

For those of you who aren't familiar with the Webflow interface, this is how it looks when you start a fresh page. On the left, you can control your site and ecommerce settings, see all of your collections and pages, view your page structure, and add elements to the page. On the right, you can change the way these elements look and behave. It feels very much like all the other design programs we use, but all the visual tools use the same naming, principles, and fundamentals from html & CSS. As you use Webflow, you'll start to learn more about this stuff, which is one of the reasons why I love the platform.

Trigger warning: We're going to roll up our sleeves and get nerdy in the episode. While this isn't going to be a full-on tutorial, we're going to cover some principles and fundamentals of web development that you need to know as you embark on your own website.

Speaking of fundamentals, there's one core web development principle that seems to stump designers: the box model. We're so used to being able to throw something—like an image—on an artboard and move it anywhere we want... well, in web development, things don't really work that way.

See, on the web, everything you put on screen is considered a box: an image, a block of text, a video... they're all interpreted as rectangular shapes. These elements all live inside other containers... which are also boxes. The biggest container that you'll run across is the page body: the box that contains the entire page. Then you have smaller containers called divs. Divs are simply invisible boxes that can contain things and be styled to look and act how you want them to. Think of them like the building blocks of a web page. They can sit next to each other, stack on top of each other, or be inside each other [cringe].

The reason why you can't just drop an image in the center of a web page is because our browsers use these boxes to figure out where everything needs to be positioned on the page.

Where something lives is determined by its relationship to everything else on the page. Let's take a look at a really simple example:

Here we have a two boxes on a page. By default, they'd look like this. If we wanted to add some space in between them, we'd need to add margin - that's the clear space around an element.

But lets say you have one div inside of another div. You can also move that child item by changing the padding of the parent box. Thats the clear space on the INSIDE of the parent box.

Now there are other ways that you can position things,

I think that the big takeaway here is that web development is not as simple as plopping an element on an artboard and being able to drag it where you want it to go.

Understanding the box model is crucial. That's why, before you sit down to develop your site, it really helps to have a plan for development in place. Let's take a look at how I planned to structure my pages.

First I'll sketch out how this works, then I'll show you how this would apply to one of the pages I designed.

Inside our page body, we'll need to have special containers—divs—called Sections. The name kind of says it all. These signify the major sections on the page, like header, content, and footer.

Now inside our page Sections, we'll have several divs that I call Containers. Think of these like rows in a table.

Inside each container (the rows), we'll have columns. For my design, I can have up to five columns inside each row. This is really flexible, because you can have an element that spans all five columns, or split it up between three columns and two columns, etc... you can create some really interesting layouts. The possibilities are really endless

If we take this page, for example, this would be the page body, then this would be a section, then we'd have our containers here - remember those are the rows of our table, then we have columns inside that. And finally, all the text and images, etc.

What's really cool about this page structure is what happens when the browser width changes.

When the browser gets smaller—like when someone is viewing the site from their phone—the columns inside of our container rows stack on top of each other.

And when the browser gets larger—like when someone views it on a big desktop screen—the columns inside of our containers simply expand to fill the space, within reason.

I’ve always ran into a problem with this approach: typography.

If the container is allowed to get wider or narrower depending on the browser width, but then size of the type doesn't change.... weird stuff can happen.

And if the type scales up and down with the browser width... but the box doesn't have room to to do the same with the browser... well... even weirder stuff can happen.

This is my old site, and I tried making things really responsive... But it didn't turn out. See how that first headline just never stops growing? It ends up looking really bad.

When the browser gets smaller—like when someone is viewing the site from their phone—the columns inside of our container rows stack on top of each other.

At this point, I was stuck. I didn't really want to hack things together, I wanted to do things the right way, so I went to the source of all knowledge and wisdom.

The YouTube Gods smiled upon me and delivered an incredible tutorial by a Webflow expert named Timothy Ricks. His method for responsive website styling, what he calls Wizardry, was exactly what I was looking for.

Alright today we're going to get all of our typography styled so that it's super responsive on desktop... and to start, I'm going to build a style guide - this is basically a big list of all the type and other elements we use on the site on one page.

The Wizardry Style Guide page came out really nicely. We're using responsive units for all the typography, but they lock in place at a certain screen width, see?

Wizardry worked like a dream. I couldn't have asked for more - and yes, we'll link the tutorial below. Once the style guide page was in place, all I needed to do was to use my page framework to build out the rest of the static pages on the site -

Remember how I planned to structure my pages? The sections, containers, and columns? That whole framework? Well, it turns out, this pairs beautifully with the wizardry system, and putting the pages together was a breeze.

As I went through and developed all of the static pages, I noticed that I started to pick up speed the deeper I went. The first page took 3-4 hours to develop, the second only took about two hours, and eventually it got to where I could knock out a page in 15 minutes. That's the class effect. Once you've styled a piece of text, you never need to do that again. Reusing symbols and components also helped a lot throughout the process.

Alright I have a little pro tip for you. You might have noticed in that I've been typing names in the upper right hand corner of the Webflow editor. As you make things on your website look the way you want them to look, Webflow remembers these changes by saving these settings in groups called classes. But here's a key separation between a beginner and a pro. Don't use the names that webflow comes up with. Having a class named Header 712 doesn't tell you, well, anything, and it's going to hard to reuse the class in the future if you can't remember what it was. Having a system is essential to staying organized. But one thing to make sure of - don't use capital letters or spaces. If you ever get into the custom code side of things, it's going to be hard to reference classes that have odd spaces or Capital letters in them.

But here's a key separation between a beginner and a pro. Don't use the names that webflow comes up with. Having a class named Header 712 doesn't tell you, well, anything, and it's going to hard to reuse the class in the future if you can't remember what it was.

Alright! We've got the Home page built, the Now Page, the collab page, and the content pages. And everything is responsive - both for really large screens like this, and mobile. We're pretty much done with the bones of the site, and we're ready to move into the fun stuff: animations and inserting content. At this point, we had all the static pages done, the content management system up, running, and looking good, and the desktop site was looking pretty close to being done.

To be honest, the entire development process to this point was pretty painless. Which actually may not have made for a thrilling episode. There wasn't a huge challenge for your boy to overcome here. But once again, this is all stuff I picked up by trial and error and failure. By just doing stuff and seeing what happens.

And that leads me to a good takeaway here. In the tech world, I'm an old dog. And if I can pick up new tricks, try new things... so can you.

I see so many of you guys standing on the precipice, looking over the edge, wondering if you should start something.... or try something... and something is holding you back. Like you can't try putting together a website without taking a course... or you can't apply for that job because you don't have enough experience... or that you can't start a business without a degree...

So if you're waiting for permission, or a sign... well, here it is.

And a great place to start? Well that'd be by giving Webflow a try. Head to thefutur.com/webflow or click the link in the description to sign up for free. The really cool thing is that you can build out your entire website, collections and all, absolutely free until you're ready to publish it. So there's literally no reason not to start. Like now. Like go do it now. Go!

Next episode! Next episode is going to be a doozy. We're going to talk about taking the website to a whole other level by working with animations and interactions. I have sliders that need to slide, page transitions that need to transition, and scroll effects that need to scroll—scroll? anyway... I'm going to be trying things that I've never tried before, like an animated dark mode switch... and learning JQuery... And I'm going to be honest... not everything works out.

I'll see you then... But for now, remember... I'm not here to tell you how to do things. I'm simply sharing my journey. Pick up what you need, leave what you don't - find the process that works for you.

Oh and by the way - we crammed about 20 hours of work into this little episode, so obviously there's so much that we couldn't cover. If you want to watch everything unfold live, you can head over to thefutur.com/built-by-hand or see the playlist on my personal youtube channel. All of the full length stream recordings are there for you.

I'll be stalking the comments as always, so be sure to chat with me below.

It's time for you guys to get back to work. You got this. Remember, we love you, and we'll see you next time.

ABOUT

Chris Do

Chris Do is an Emmy award-winning director, designer, strategist, and educator. He's the Founder and CEO of The Futur—an online education platform that teaches the business of design to creative thinkers.

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.