Building a personal website... With no code?! Built By Hand Ep 4
Вставка
- Опубліковано 26 чер 2024
- 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
No code is my love language 💙
That's why you're using so much code in your own Webflow websites.
Timothy Ricks is a web design asset to the community we can’t afford to lose. Such a generous content creator!
Absolutely agree. I am a Patreon sub of his platform. 10/10 recommend
The designer is getting closer and closer to gaining total creative freedom
🙌🏽
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
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.
😂
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 😂
Exactly this :)
Same here🙌🏽🙌🏽🙌🏽 love all these channels
This series is so great. Really the only reason to keep being subscribed to this channel, despite the shorts-spam.
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)
The "like the video" moment worked really nice.
lol ty
How easy you make everything to be understood is just INCREDIBLE!
Thanks so much 🙏
Can I just say I LOVE the click/gun labeler! Brings back memories :)
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.
The timing of this video is proof I'm living in The Truman Show.
Second that
Your comment was very heartening. Thanks for being genuine. 😆
I was just looking for this kind of information and guess what ben burns will be dropping bombs on this topic 😎
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.
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
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.
Will you be using webflow, wix or squarespace for hosting?
Always waiting for new episodes!
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.
Been waiting for this! Let's go.
👋 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:
ua-cam.com/video/MrAnu4zdjjY/v-deo.html
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
Nice! Thanks for the note, Daniel!
The content I live for. Thank you Futur
Thanks for your wonderful creative mood 😎
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.
This is a perfect fit for you. And you’ll learn that stuff along the way
Awesome episode introducing webflow.. Can’t wait for the next one!
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!
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.
Waiting from India. I'm huge fan of Futur team, and ben burns simplicity is my favourite.!!!
Thanks so much!
Woohoo, my timing is right on time. Looking forward to this!
Right on :)
Thank you Ben for sharing this process. I hope to tackle this someday for myself and get my current site out of Squarespace.
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!
This series is really inspiring - thank you :)
best like plug ever
LOVE seeing your thought process!!!!!!!!!!!!
having a look on Box magic (div blocks) on your screen helped me so much!
Love the encouragement to start.
You got this ;)
Damnnn love this ep so much!
No code game is best thing happen in the last decade ❤️
Absolutely agree. There will always be room for devs to come rescue us lol
@@mrbenburns that true, and thank you for sharing your process and I hope we can see more content from you in the channel 🤗
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.
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.
Thanks so much!
Amazing work!
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
Nice!!!
I don't just want to like this video, I want to double like it. Wait, maybe I should suggest that to UA-cam.
Thanks brother. See you on the other side of that precipice.
1:00 oh my gosh this works so much hahahahah Well done Ben!
Of course couldn't leave this video unlinked 😉😀 Great new episode!
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 .
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!
Thank you!
Absolute favorite part of the video…when Ben tells you to press the like button😂😂😂
So insightful!
Really nice design! When is the website going live?
Love 💗 Webflow
I love this ben!!
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 🤷
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 UA-cam Animation - man we are hive-minded on this series!
Hahaha yes! Tim is awesome
I am enjoying this series. Likewise, I am in the same boat. cant wait to dive in webflow
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!
Yes, yes, yes...
Huh, I didn’t expect to find the perfect explanation of the box model in this video, but I’m pleasantly surprised.
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).
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!
you mean we should design it in webflow or Xd?
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.
I KNOW RIGHT lol
Can't tell you how often I just wanted to center an element on screen.
soudtrack is fire tho 🔥🔥
Best LIKE i ever gave.
It was really fun! Bit irrelevant question, what is the device you used to get those back/white-text stickers? it's super cool!
I was just about to ask this. Please, somebody let us know!
Did I see you're in Greenville now?! 👍Moved here from NYC 9 years ago - never going back... Excited to see the finished site!
Yep! Gville meetup when all this stuff is over
@@mrbenburns Hell. Yes!
Hi Ben, loving this video, btw where is your keyboard from? loving the colour scheme of it ❤
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
@@mrbenburns thanks!
What applications do you use to design this whole website? I'd love to know it. Thank you.
Episode 4 yes
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?
💪
I really appreciate the hard work you put in this videos. Thanks for the inspiration!
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!
Hehehe glad to see you here Billy
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.
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.
how do u make your grid at webflow?
nice custom keyboard mr ben!
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)?
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
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! :)
It's a LabelMaker! Super cheap (like $18 on Amazon)
@@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)
1:15 Fusion..... I saw what you did there...
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!
With readymag you can drop stuff on the website like on your arboard, just saying :D
Forgot to tag this as an ad
Media Queries would handle your type issue.
hey Ben When the Site will be live.
@1:17 how come no one is talking about the poses in this timelapse? xD.
17:30 Do i learn CSS or Webflow?
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 😂
💖🌷💖🌷💖
What keyboard is that?
GMMK Pro with lubed Alpacas and GMK Kaiju keycaps ;)
@@mrbenburns Thanks Man! Looks Great!
Be inside of each oth....wait a minute . hahaha
😬😂
Uhhhh please i neeed to know what keyboard u have😍😍
I pressed already. I swear lol
lol you may enter.
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
Take a shot every time he says webflow
What about Wix?
Whatever works.
I'd be curious as to how this site ranks on Lighthouse. Seems like webflow always results in massive bloat.
Blah blah blah. I’m out of words.
This amazes me because it’s free
❤️
Great work, Ben. Really hoped to see you chat with Kevin Powell in this episode. Kevin Powell is the CSS guru. :D
*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.*
Stalk me in the comments?? ...
Stalked.