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

[@Webflow]

No code is my love language 💙

[@elvirac4094]

That's why you're using so much code in your own Webflow websites.

[@felixquansah5214]

Timothy Ricks is a web design asset to the community we can’t afford to lose. Such a generous content creator!

[@mrbenburns]

Absolutely agree. I am a Patreon sub of his platform. 10/10 recommend

[@HooKt4]

This series is so great. Really the only reason to keep being subscribed to this channel, despite the shorts-spam.

[@mrbenburns]

I appreciate that - and thanks for hanging in there through the shorts. We're trying to take advantage of the algorithm (strike while it's hot)

[@realricardoruiz]

The designer is getting closer and closer to gaining total creative freedom

[@space.tel-e-grams]

This is exactly the series I wanted and needed to see. Also, Ben's face while explaining divs is the most adorable thing I have seen on the internet today.

[@mrbenburns]

😂

[@sonoftroy8572]

Position Absolute: this will break the original alignment of your element structure and will cause the rest of the alignment to shift upwards thus ignoring the element that is positioned absolute. it's cool because you'll have full control of it's positioning but you have to keep in mind, the parent and child containment relationship because it can cause issues when adjusting for mobile devices Position Relative: this will not break the original alignment of your element structure. you can position your element relative to it's original position. this is awesome because you can move your element around and not have to worry about your structure breaking. Just be careful when using a mobile first approach with this element because it can cause hierarchy issues

[@randatatang9222]

Just what I needed. Was poised to start learning HTML, CSS and JavaScript next week but this video just saved me the time and stress. More into industrial design and design engineering and just needed a personal portfolio website. Thanks a lot.

[@mrbenburns]

This is a perfect fit for you. And you’ll learn that stuff along the way

[@jordanhovater6802]

Really appreciate the hard work and countless hours that went into this series, Ben. I've been following The Futur, Flux, and T. Ricks separately, and seeing all those worlds collide in this one video gave me encouragement that (I think) I'm on the right track 😂

[@boudewijnluijks]

Exactly this :)

[@felixquansah5214]

Same here🙌🏽🙌🏽🙌🏽 love all these channels

[@warlockwolf]

It's been a joy to redesign my website along with this series Mr Ben. You really hit the nail on the creative struggle, especially the little things behind the glitz and glam of beautiful design. Despite lockdown, I feel heard. There's comfort in knowing that there are people out there tackling the same issues and I'm happy that we're able to solve them together (kinda) through this series. Things become so bizarre when you realise that you are your own client and that what you're building is essentially a digital home for people to visit. I know it gets frustrating at times but let's keep it up, we've got this. Much love from Malaysia.

[@MuhammadYamman]

How easy you make everything to be understood is just INCREDIBLE!

[@mrbenburns]

Thanks so much 🙏

[@N0STIC0]

The "like the video" moment worked really nice.

[@mrbenburns]

lol ty

[@syedbadar1090]

Thank you so much, Ben. I had been waiting for this episode for a week, as expected helpful as the previous episodes. I have been working to create a personal portfolio website for my master's admission and one for my design studio, this series has helped me a lot.

[@maira.akhtar]

Will you be using webflow, wix or squarespace for hosting?

[@rebeccariley7743]

Thank you. This was super helpful. I have always had so much frustration designing a website, and I also couldn't understand why you couldn't just click and drag. So, for real, this was super helpful and was really well explained. Keep it up!

[@fumakage1654]

Been “feeding” on this content. Really sad I missed joining the futur group by a month but am happy I can suck up everything you guys are putting out. Thanks Mr. Burns. I’m one of those people that have been drawing and doing arts+ since I was a kid but got stuck in a part of the industry that isn’t my vibe. So I’m a 100%-self-taught mid-aged-Dino that’s “Going design - or is gonna die trying”. Thanks again.

[@MatthewEncina]

🙌🏽

[@DesignbuildsolutionsLLC]

Can I just say I LOVE the click/gun labeler! Brings back memories :)

[@danielq888]

Mr. Ben Burns thanks for this great series, your transparency and genuinity is your best part. By the way, fun fact, I'll be working on my own portfolio site on Webflow during the live lol

[@mrbenburns]

Nice! Thanks for the note, Daniel!

[@abhayrohit]

After ages of struggle I finally got my Websites Uniform by using "vw" in the prefix in css for everything , not px, not vh, not rem, not em, only ve and The Design Stays how I Intend it to be on everything, every Device there is

[@ayushiagarwal8247]

I was just looking for this kind of information and guess what ben burns will be dropping bombs on this topic 😎

[@gaminwithgc]

Fantastic series Ben. I've been using Webflow since 2017, and although I am a designer and front-end developer, I really like using Webflow and recommend it to everyone looking to create a website!

[@mrbenburns]

Thank you!

[@doingeven5196]

im watching this on one screen and building my website on another screen --- on webflow of course. learned about it in the making a brand series. love love webflow

[@mrbenburns]

Nice!!!

[@dalejanzen3253]

Really enjoying this Built by Hand series, as I also did Building the Brand, Ben! I've been a working brand creative kinda guy for a whole lot of years already, and as many of my peers are starting to talk retirement, I'm launching into Webflow development and your 'old dog, new tricks' reference in episode 4 resonates with me! I'm not brand new to Webflow, or to a certain level of web design and development... but launching into a whole 'nother level of understanding that raises the bar. Challenging at times, of course... but exhilarating at the same time. Thanks for putting your journey out there!

[@ravichandranbranding]

Waiting from India. I'm huge fan of Futur team, and ben burns simplicity is my favourite.!!!

[@mrbenburns]

Thanks so much!

[@simontutorials29]

The content I live for. Thank you Futur

[@EverythingsByDesign]

Woohoo, my timing is right on time. Looking forward to this!

[@mrbenburns]

Right on :)

[@bastianschiller862]

Always waiting for new episodes!

[@omeralsoma_]

The lesson from this series is you can do anything you want as long as you are open to learning the tool to do it.

👋 Hello! Mr.Ben Burns I am trying to learn Webflow. Your videos are awsome. I wish you had more. So, I went looking for more and found this one. Which was talking about the "box model" and it is so funny.😅 I think you will like. I know you are an expert now. But just wanted to let you know that I remembered you 🥰while watching that. Thank You, Mr.Ben, for all that you do.

here is the link: kzbin.info/www/bejne/g6Okn6hqr8mdoLs

[@dripcaraybbx]

The timing of this video is proof I'm living in The Truman Show.

[@eklerrr]

Second that

[@IceHibiscus]

Your comment was very heartening. Thanks for being genuine. 😆

[@antoniovoinovich7713]

Thanks for your wonderful creative mood 😎

[@blingstalker]

Thank you Ben for sharing this process. I hope to tackle this someday for myself and get my current site out of Squarespace.

[@omeralsoma_]

No code game is best thing happen in the last decade ❤️

[@mrbenburns]

Absolutely agree. There will always be room for devs to come rescue us lol

[@omeralsoma_]

@@mrbenburns that true, and thank you for sharing your process and I hope we can see more content from you in the channel 🤗

[@seanknox7321]

Lol it’s a pendulum. We use to have Front page, which was amazing. Then everyone demanded more freedom and wanted to get away from installing Microsoft extension and moved to dream weaver, then shifted away to other IDEs and now we are back here.

[@Ali-dk6lz]

Struggling to find my first client, I guess I'll have to hand people a freakin developed website along with my design. Wow this video came in clutch.

[@neonlaundry]

This content and video is amazing. Thank you for putting all the work you did into producing this. Very informative and absolutely made me a Webflow fanboy. I don't know how many times I'll watch this, but it's SO informative. Thank you Thank you Thank you.

[@mrbenburns]

Thanks so much!

[@franci-uz]

LOVE seeing your thought process!!!!!!!!!!!!

[@franci-uz]

having a look on Box magic (div blocks) on your screen helped me so much!

[@meowzord]

Ben, while you were 'complaining' about the font sizes not scaling, in my head I was like "Oh, Wizardry can fix that" CUT TO: T.Ricks KZbin Animation - man we are hive-minded on this series!

[@mrbenburns]

Hahaha yes! Tim is awesome

[@kyon_designer]

Great content as always Mr. Ben Burns. As an alternative to Webflow: Adobe Dreamweaver is also a great tool for this. Plus, you can copy styling (css code) from XD into the document really easily. In the matter of responsiveness you can do two things on code: set the size to a percentage instead of a unit or use media queries (bootstrap) setting breakpoints for different screen sizes (normally: desktop, tablet and mobile).

[@unattended129]

Been waiting for this! Let's go.

[@juantoledo5248]

Huh, I didn’t expect to find the perfect explanation of the box model in this video, but I’m pleasantly surprised.

[@easyrider75]

Awesome episode introducing webflow.. Can’t wait for the next one!

[@LanceHeadstrong]

Great explanation of the box method! This would have been great 15 years ago when I had to research, learn, experiment, and fail on my own.

[@mrbenburns]

I KNOW RIGHT lol

[@mrbenburns]

Can't tell you how often I just wanted to center an element on screen.

[@endesign5944]

With webflow if you’re going to build it yourself stick to your guns and go all the way, don’t design in it (like it’s sketch or figma) and then hand it over to a developer using WordPress to build it for you as it won’t fit their template ha ha ha my first mistake…I can laugh about it now years later, (even though I lost a client over it) now having learnt from my past mistakes. Well, I’m almost ready/brave to give Webflow another go thanks to the inspiring creative sites I see that seem to blow other wysiwyg out of the way, great series thank you!

[@maira.akhtar]

you mean we should design it in webflow or Xd?

[@felixquansah5214]

Absolute favorite part of the video…when Ben tells you to press the like button😂😂😂

[@curtismorrow4537]

I don't just want to like this video, I want to double like it. Wait, maybe I should suggest that to KZbin.

[@elysiumcore]

I am enjoying this series. Likewise, I am in the same boat. cant wait to dive in webflow

[@Tangably]

Love the encouragement to start.

[@mrbenburns]

You got this ;)

[@maechan014]

Damnnn love this ep so much!

[@eugene1984cilliers]

Really nice design! When is the website going live?

[@jieunkwon638]

What applications do you use to design this whole website? I'd love to know it. Thank you.

[@imchubacca]

Love the way you talk about the process of designing/building a website. I always have this mental blocker on the amount of margin and gutter width should be in building a page. I know there's not an absolute answer to it, but if you can share your thoughts, that'd be great. Thank you!

[@kiandraplummer9874]

I love that he said he didn't know fully understand the box model. I understand it wayy more AFTER learning flex and the grid systems 🤷

[@Piktro]

Can you use media queries and rem/em units to multiply all your font sizes based on the root html or parent div font sizes? I've watched a few videos on it to help with my tablet/mobile website designs, but haven't tried it myself so I could be misunderstanding, but for 48px type I think you can set your main div font-size property to 16px, then inside the container set the font size to 3em. After that, you can use media queries for different break points and change the font-size property only for the primary container. If I'm wrong, please don't hesitate to correct me. Just trying to understand better myself.

[@chloelitchfield7089]

This series is really inspiring - thank you :)

[@jmilligandesign]

Thanks brother. See you on the other side of that precipice.

[@glauberhenriq]

1:00 oh my gosh this works so much hahahahah Well done Ben!

[@anhphan2047]

I love this ben!!

[@JWKDESIGN]

Did I see you're in Greenville now?! 👍Moved here from NYC 9 years ago - never going back... Excited to see the finished site!

[@mrbenburns]

Yep! Gville meetup when all this stuff is over

[@profitecturebydesign3646]

@@mrbenburns Hell. Yes!

[@illdesign.studio8724]

Love 💗 Webflow

[@DVSK1]

how do u make your grid at webflow?

[@samuelmjprice]

best like plug ever

[@MarketingHarry]

Of course couldn't leave this video unlinked 😉😀 Great new episode!

[@therubbscreative]

I really appreciate the hard work you put in this videos. Thanks for the inspiration!

[@Plmanske]

It was really fun! Bit irrelevant question, what is the device you used to get those back/white-text stickers? it's super cool!

[@ukgoon85]

I was just about to ask this. Please, somebody let us know!

[@vincybadman871]

On the style page, how'd you create the color palette? (the actual boxes on the canvas). I tried using a div, and filling the background with a color, but it didn't render in the preview mode.

[@diegognoatto8706]

to all those who dream to become a web designer and myself, im writing this from the future in a hope of my old self glitch the time space continuoum and read it so i dont lose all the time i lost along my journey trying to figure out short cuts....i was waching the series and i loved and got excited to reach this point in time to wrapp the thing up but ohhh lord he used "create great websites" and "using no code tools" in the same sentence ,mate you give up too early, the box model is a thing u can learn in 10 minutes on youtube for free if u really want, wix,webflow,squarespace and others uses "create "professional" websites with no code sentences" it gives me chills in the spine everytime i hear it cause this are the people that lie to your new born dream of becoming a webdesigner, and they will force you later on th lie to your clients to keep aparences cause you already got paied, they dont tell you how bad things can become down the road if you dont know the tecnology underneath it but give people the idea that take shortcuts in order to deliver to a client a frankenstein they dont understand but call pro website anyway to a client that buy the idea cause in the end by the magic of css it looks all same same sounds like a good idea, but if the client ask along the line things like "can you recreate something cool i saw in a website or why just in safari my text hides underneath the photos? or why on mobile is the layout funny?(they will say bugged btw) " they book a ticket to zimbabuwe and vanish. 95% of my clients are businessman that the new added zimbabuan population left behind. please stop making websites if you dont know to make websites people and if you are passionate for it, go for it and learn it , html is a afternoon journey , and css isnt dificult once u grasp box model ,positioning and how things cascade by the order they are put in the document, the time u need to understand that if u change a parameter on a box that says margin [10px] in a shinny "no code" interface is literally the same time youll need to learn to write 1 line in css file margin:10px; DONE ;) they are lying to you for profit, the word "professional"should be banned from their mottos at the very least, ive been there into the bootstrappy,webflowi,wixy,wathever word and i lost a ton of time and learned the hard way that after learn how to use all the magic buttons on their interface i had to learn html css anyway if i want to become a professional and actually deliver something cool i could also have piece of mind and mantain it .

[@lvrry]

soudtrack is fire tho 🔥🔥

[@leonstrydom1]

Hey, I'm itching to see the Hamiltons website (shown ever so briefly at the start of te video)...right now, a different version of the site is live...will/when will the version shown at the start of the video go live?

[@robertbibong1040]

17:30 Do i learn CSS or Webflow?

[@dannyjoo]

Amazing work!

[@RinuKuranga]

So insightful!

[@AdmiralOfTheSkies]

Hi Ben, loving this video, btw where is your keyboard from? loving the colour scheme of it ❤

[@mrbenburns]

Thanks Peter! It’s a custom keyboard. The board is a GMMK PRO. It’s got lubed and filmed alpaca switches, a PC plate and Kaiju keycaps from drop

[@AdmiralOfTheSkies]

@@mrbenburns thanks!

[@MagdaReyman]

With readymag you can drop stuff on the website like on your arboard, just saying :D

[@billythecoker]

Hi. My name is Billy and I thought this video was about me, but I realized that I don’t have a beard. Thanks for sharing your experience with another old dog!

[@mrbenburns]

Hehehe glad to see you here Billy

[@werewolfpreyan]

I feel like an alien, I don't know. But what is that thing, from which you made the Black Stickers?? Love the series by the way! :)

[@mrbenburns]

It's a LabelMaker! Super cheap (like $18 on Amazon)

[@werewolfpreyan]

@@mrbenburns Man, that is creativity! Great job in using the labelmaker to explain ideas. I'm an educator, so I like how you're explaining things in this series in particular. Keep it up! (P.S.: I use wix to design my websites, not interested in using Webflow at all, but I just love how you people put education and entertainment together)

[@vledov]

Thank you Ben for this series! I'm also in the process of building my portfolio. This is the first website I make on webflow. And it turns out easier than I thought (perhaps because I already knew html, css and js a little). Website is almost ready, but I got stuck because I began to hate text in the "about" section. It looks too narcissistic. I have already rewritten it several times, but I cannot get rid of the feeling of excessive self-praise. It seems that the text reflects a person much cooler than me. This is really frustrating. Maybe you have some advice how to write a text that doesn't feel like "look how cool I am" (because i'm not, i'm just a mediocre designer)?

[@mrbenburns]

Oooo we will get into this in the last episode. One thing that I do is to be a little tongue in cheek about that stuff. But honestly just try to have a conversation with your viewer/user. Think about what they would ask you. Then answer

[@modsbeats]

Episode 4 yes

[@JsuisMamadou]

hey Ben When the Site will be live.

[@extractedvisions8158]

Best LIKE i ever gave.

[@shainzen]

Uhhhh please i neeed to know what keyboard u have😍😍

[@gregory-davewidmer2788]

What keyboard is that?

[@mrbenburns]

GMMK Pro with lubed Alpacas and GMK Kaiju keycaps ;)

[@gregory-davewidmer2788]

@@mrbenburns Thanks Man! Looks Great!

[@walterayala7018]

Hello I would like your help in building a website for a new venture I want to move forward in . Please let me know and I really want someone in the online community

[@IshikaShanai]

@1:17 how come no one is talking about the poses in this timelapse? xD.

[@garyvoigt321]

Yes, yes, yes...

[@katscandance]

nice custom keyboard mr ben!

[@niklasfalge8888]

I just tested webflow. I started the tutorial which got stuck on the "paragraph below heading" part, then i reloaded it to skip the tutorial, but pressing the "exit"-button repeatedly won't work. Now talk about making a good first impression 😂

[@A9FootMidget]

Media Queries would handle your type issue.

[@youcompletebroadcast3755]

Loved the part explaining the box model because this is something I really struggled with when starting a website design for my design business. There's three of us in the business but no one knew coding or how to build a website so I gave it a crack by using wordpress and elementor as a web builder. It was so hard at the start because I was doing exactly as you described, placing images and then assuming I could move them however I want. I wish I could have seen this video a year ago when I was building the site, would have saved me a lot of time!

[@alexduran5605]

Forgot to tag this as an ad

[@YouAreSoMadRN]

What about Wix?

[@thefutur]

Whatever works.

[@olekolok2739]

1:15 Fusion..... I saw what you did there...

[@welling1]

I'd be curious as to how this site ranks on Lighthouse. Seems like webflow always results in massive bloat.

[@ruangan.fahmi_]

💪

[@easyrecipesanddeliciousfoo2954]

💖🌷💖🌷💖

[@loliradotopper]

Be inside of each oth....wait a minute . hahaha

[@mrbenburns]

😬😂

[@_ap__]

Great work, Ben. Really hoped to see you chat with Kevin Powell in this episode. Kevin Powell is the CSS guru. :D

[@willsantos3781]

Take a shot every time he says webflow

[@mustaphanail2005]

I pressed already. I swear lol

[@mrbenburns]

lol you may enter.

[@vcat417]

Blah blah blah. I’m out of words. This amazes me because it’s free

[@mrbenburns]

❤️

[@fashionaholik5744]

*EditorX from Wix is better, also cheaper, plus they let you have free unlimited sites, webflow is very bad and they don't have lot of features that EditorX has.*

[@iamchriswick]

jQuery in 2021? Blasfemy 😅

[@mrbenburns]

I know right?! Hit me up in Discord or IG and I'll tell you what I'm working with hehe - maybe there's a better way