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

Подписаться 2,5 млн

Просмотров 48 тыс.

50% 1

Try Webflow for FREE:
ftris.me/webflow-bbh
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.
Get the Wizardry Tutorial:
• New Responsive Techniq...
For more series content you can't see anywhere else, check out:
thefutur.com/built-by-hand
Follow Timothy Ricks:
/ @timothyricks
Follow Ran Segall:
/ flux-with-ran-segall
www.flux-academy.com/
Get the Style Guide Kit:
thefutur.com/course/style-gui...
-----
Want a deeper dive? Typography, Lettering, Sales & Marketing, Social Media and The Business of Design courses available here:
thefutur.com/shop
===
👉Subscribe: goo.gl/F2AEbk
👉See our Academy Channel: goo.gl/vB9zoP
🎙 Futur Podcast: thefutur.com/podcast/
✍️ Futur Blog: thefutur.com/blog/
Kits & Proposals:
goo.gl/mSjuWQ
Visit our website:
www.thefutur.com
FREE resources:
goo.gl/Qh6gHr
-
We love getting your letters. Send it here:
The Futur
c/o Chris Do
1702 Olympic Blvd.
Santa Monica, CA 90404
USA
-
Host: Ben Burns
Producers: Ben Burns
Cinematographers/Editors: Stewart Schuster
Sound Editor: Sam Burns

Опубликовано:

5 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 170

@Webflow 2 года назад

No code is my love language 💙

@elvirac4094 2 года назад

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

@sonoftroy8572 2 года назад

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

@MatthewEncina 2 года назад

🙌🏽

@realricardoruiz 2 года назад

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

@dripcaraybbx 2 года назад

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

@eklerrr 2 года назад

Second that

@IceHibiscus 2 года назад

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

@felixquansah5214 2 года назад

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

@mrbenburns 2 года назад

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

@jordanhovater6802 2 года назад

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 2 года назад

Exactly this :)

@felixquansah5214 2 года назад

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

@N0STIC0 2 года назад

The "like the video" moment worked really nice.

@mrbenburns 2 года назад

lol ty

@space.tel-e-grams 2 года назад

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 2 года назад

😂

@syedbadar1090 2 года назад

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 2 года назад

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

@warlockwolf 2 года назад

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 2 года назад

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

@mrbenburns 2 года назад

Thanks so much 🙏

@omeralsoma_ 2 года назад

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.

@simontutorials29 2 года назад

The content I live for. Thank you Futur

@DesignbuildsolutionsLLC 2 года назад

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

@HooKt4 2 года назад

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

@mrbenburns 2 года назад

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)

@antoniovoinovich7713 2 года назад

Thanks for your wonderful creative mood 😎

@abhayrohit 2 года назад

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

@easyrider75 2 года назад

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

@dalejanzen3253 2 года назад

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!

@unattended129 2 года назад

Been waiting for this! Let's go.

@blingstalker 2 года назад

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

@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!

@bastianschiller862 2 года назад

Always waiting for new episodes!

@maechan014 2 года назад

Damnnn love this ep so much!

@danielq888 2 года назад

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 2 года назад

Nice! Thanks for the note, Daniel!

@franci-uz 2 года назад

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

@franci-uz 2 года назад

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

@randatatang9222 2 года назад

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 2 года назад

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

@ayushiagarwal8247 2 года назад

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

Год назад

👋 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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-MrAnu4zdjjY.html

@chloelitchfield7089 2 года назад

This series is really inspiring - thank you :)

@fumakage1654 2 года назад

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.

@Tangably 2 года назад

Love the encouragement to start.

@mrbenburns 2 года назад

You got this ;)

@neonlaundry 2 года назад

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 2 года назад

Thanks so much!

@dannyjoo 2 года назад

Amazing work!

@Ali-dk6lz 2 года назад

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.

@doingeven5196 2 года назад

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 2 года назад

Nice!!!

@RinuKuranga 2 года назад

So insightful!

@MarketingHarry 2 года назад

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

@anhphan2047 2 года назад

I love this ben!!

@gc_marcelli 2 года назад

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 2 года назад

Thank you!

@brianeric6524 2 года назад

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

@mrbenburns 2 года назад

Right on :)

@illdesign.studio8724 2 года назад

Love 💗 Webflow

@elysiumcore 2 года назад

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

@ravichandranbranding 2 года назад

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

@mrbenburns 2 года назад

Thanks so much!

@imchubacca 2 года назад

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!

@felixquansah5214 2 года назад

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

@kiandraplummer9874 2 года назад

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 🤷

@kyon_designer 2 года назад

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).

@omeralsoma_ 2 года назад

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

@mrbenburns 2 года назад

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

@omeralsoma_ 2 года назад

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

@seanknox7321 2 года назад

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.

@meowzord 2 года назад

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 RU-vid Animation - man we are hive-minded on this series!

@mrbenburns 2 года назад

Hahaha yes! Tim is awesome

@jmilligandesign 2 года назад

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

@curtismorrow4537 2 года назад

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

@LanceHeadstrong 2 года назад

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 2 года назад

I KNOW RIGHT lol

@mrbenburns 2 года назад

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

@juantoledo5248 2 года назад

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

@samuelprice414 2 года назад

best like plug ever

@glauberhenriq 2 года назад

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

@eugene1984cilliers 2 года назад

Really nice design! When is the website going live?

@JWKDESIGN 2 года назад

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 2 года назад

Yep! Gville meetup when all this stuff is over

@profitecturebydesign3646 2 года назад

@@mrbenburns Hell. Yes!

@therubbsmusic 2 года назад

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

@endesign5944 2 года назад

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 2 года назад

you mean we should design it in webflow or Xd?

@Piktro 2 года назад

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.

@modsbeats 2 года назад

Episode 4 yes

@AdmiralOfTheSkies 2 года назад

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

@mrbenburns 2 года назад

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 2 года назад

@@mrbenburns thanks!

@lvrry 2 года назад

soudtrack is fire tho 🔥🔥

@LeshiZgoogle 2 года назад

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 2 года назад

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

@vincybadman871 2 года назад

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.

@jieunkwon638 Год назад

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

@leonstrydom1 2 года назад

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?

@DVSK1 2 года назад

how do u make your grid at webflow?

@ruangan.fahmi_ 2 года назад

💪

@youcompletebroadcast3755 2 года назад

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!

@extractedvisions8158 2 года назад

Best LIKE i ever gave.

@garyvoigt321 2 года назад

Yes, yes, yes...

@vledov 2 года назад

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 2 года назад

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

@billythecoker 2 года назад

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 2 года назад

Hehehe glad to see you here Billy

@katscandance 2 года назад

nice custom keyboard mr ben!

@MagdaReyman 2 года назад

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

@werewolfpreyan 2 года назад

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 2 года назад

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

@werewolfpreyan 2 года назад

@@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)

@niklasfalge8888 2 года назад

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 😂

@olekolok2739 2 года назад

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

@robertbibong1040 2 года назад

17:30 Do i learn CSS or Webflow?

@JsuisMamadou Месяц назад

hey Ben When the Site will be live.

@shainzen 2 года назад

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

@easyrecipesanddeliciousfoo2954 2 года назад

💖🌷💖🌷💖

@alexduran5605 2 года назад

Forgot to tag this as an ad

@gregory-davewidmer2788 2 года назад

What keyboard is that?

@mrbenburns 2 года назад

GMMK Pro with lubed Alpacas and GMK Kaiju keycaps ;)

@gregory-davewidmer2788 2 года назад

@@mrbenburns Thanks Man! Looks Great!

@A9FootMidget 2 года назад

Media Queries would handle your type issue.

@walterayala7018 2 года назад

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

@loliradotopper 2 года назад

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

@mrbenburns 2 года назад

😬😂

@IshikaShanai 2 года назад

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

@mustaphanail2005 2 года назад

I pressed already. I swear lol

@mrbenburns 2 года назад

lol you may enter.

@willsantos3781 2 года назад

Take a shot every time he says webflow

@harrypoderskis 2 года назад

What about Wix?

@thefutur 2 года назад

Whatever works.

@welling1 2 года назад

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

@_ap__ 2 года назад

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

@vcat417 2 года назад

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

@mrbenburns 2 года назад

❤️

@fashionaholik5744 2 года назад

*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.*

@vcat417 2 года назад

Stalk me in the comments?? ...

@mrbenburns 2 года назад

Stalked.

@TheKatsarov 2 года назад

From entrepreneur pov.. web flow is great, but from tech pov as a programmer, I would not recommend web flow, it is really bad technically implemented.