Webflow Tutorial - Mint Redesign Concept

- NEW SKILLSHARE CLASS -
Hey all! I just launched a new course called "Webflow for Beginners". Most of the tutorials I do on KZbin are for intermediate users. But, I wanted to do something for folks starting from scratch. Click the link below to get 2 months of Skillshare Premium for free and be able to watch the course:
skl.sh/2PU9tML
- ABOUT -
This week, I finished up an unsolicited redesign concept for Mint's home page for fun. Read more about the design rationale on my Dribbble (link below). In this Webflow Tutorial, we use techniques like Flex Box, CSS Grid, and text column layouts. Skip ahead using the time codes below:
03:28 - Navbar
14:35 - Header Section
23:50 - Creating the Benefits Section with text columns
39:20 - CTA Section
47:33 - Creating the Blog Teaser Section with Webflow
54:25 - Developing the Footer with CSS Grid
- ABOUT ME -
Serve - My Studio’s Site: www.madebyserve.com/
Dribbble: dribbble.com/Jose_Ocando

[@roywilkie9577]

I am really glad I found this, because so many Webflow tutorials carry a really sardonic, snarky tech-bro vibe. I can't stand them. Webflow University is the worst. This guy, on the other hand, seems pretty mindful of the audience, & presents the concepts in a very straightforward manner.

[@Soljardel]

Awesome tutorial. The way you explain is so great!!!!!

[@geirwerner1]

Best Webflow tutorial so far! =) (and that is takin into account that Webflows own tutorials are amazingly good!)

[@jarnovandersmitte8917]

Great video. Really shows multiple aspects of webflow.

[@JakePomperDesign]

Super helpful Jose! Thanks for sharing!

[@zholdas1]

Great Work! Very clear explanation, especially about ems of parent and current element and grids.

[@blairrobert6160]

Great videos Jose. Very informative (even though I have been using Webflow for several months). Much appreciated.

[@user-lq2jt8xq1w]

It’s amazing❤️❤️❤️ so beautiful website!

[@0xOrganix]

Thank you very much for streamlined info... please continue to help us.

[@aliceshumanova6703]

Amaziiiing work!!

[@digitalbizconsultant]

Great Job Jose.

[@loremipsum720]

This is one of the best tutorials I've seen for Webflow. Your knowledge of HTML, CSS, and best web practices is a perfect example for people starting with programs like this (mostly designers) that don't understand the importance of clean organization, and class naming. Brilliant. Wish you had continued with the tutorials. Thanks for sharing

[@JoseOcandoVideos]

Thanks for the kind words. I'm a bit of an accountant at heart, so I really like things to be organized and neat :)

[@wizardtips5764]

Thank you this was great! You explained things very well.

[@shanxi1]

thank you so much - this was really helpful!

[@ielyax]

Do more of these please. The only one I know is Nelson. And both of you guys are great!

[@JoseOcandoVideos]

Thanks Elyas! Much appreciated. I hope to have another upload in the next couple of weeks :)

[@tarnum13]

I think Jose videos are even better 😉

[@nelsonjimenez7939]

Who is Nelson

[@Fjgkxidbykcdkff]

Great video. Thanks!

[@melvynpaulino6183]

It was a good tutorial Jose. Keep it up!

[@Brrrrr_]

Awesome brooo

[@AdiDolan]

thanks for the video!

[@MichalCzerlikowski]

Great stuff, almost no one explain mobile views as you do!

[@JoseOcandoVideos]

Thanks Michal! I'm currently planning a video on tips for creating a responsive site. Stay tuned!

[@markogveric9701]

Great, great great! Thank you. One small tip for Sketch - with cmnd and click you can directly select an element in a group. I saw you double clicking multiple times to select it. With cmnd and click groups don't matter and object is reached in a sec. #timesaver

[@wt1272]

THIS IS THE BEST WEBFLOW TUTORIAL ON KZbin! Thank you

[@prashantdagar4171]

I just join your skillshare course 😁

[@MattsWorld]

You should sell this to Intuit! Awesome tutorial!

[@user-rl2ty8wh4v]

you are awesome

[@matters5]

I would watch a tutorial from you for designing using Figma!

[@johnas7449]

I would really appreciate if you can share your assets that you used to create this site. I would like to follow along with the tutorial. Thanks in advance!

[@bardiarez6410]

Thanks so much! I’m just getting into design and these are extremely helpful. What is the tool you are us using to analyze the site in terms of determining those design details like padding, sizing , font etc so you can emulate it in web flow?

[@RYS381]

He's using Sketch. It's software for designing (only for Mac). It's not free. Alternatives would be Adobe XD and Figma, which are free.

[@connorchatting420]

Jose how come when you add the images like the main hero or the CTA you don't have to set a height? Do you make the images the correct size before importing them in to Webflow? This is something I have really struggled to understand!

[@ShahadatHossain-yw3qi]

Great tut as always. I am a beginner here, i am trying to follow the steps but for some reason my navbar hight is huge. I am on 1068px with 100%. Can you please tell me the resulation you are working on?

[@carlgamble480]

Slightly late to the party here but do you have the assets for this tutorial still...?

[@shubham-cd9lx]

you should have provided file that you are using, it would be really helpful!

[@markhipolito8622]

I wish you can share the assets for this tutorial. I would love to try designing this in webflow, just for exercise.

[@JoseOcandoVideos]

Hey Creative Gamer. Thanks for watching the video. It took a while for me to make the illustrations. So, I decided to keep them in reserve in case I could use them in the future. But, Pablo Stanley just released some open source doodles you could use for your practice. Check them out at: www.opendoodles.com/?ref=producthunt.

[@TheAudioConnect]

For some reason when i add the navbar element I’m getting huge text across the page “Home About Contact” and i can’t figure out how to fix it.

[@alecsy7589]

If you look closely at when he says that he uses EMs for his font sizes, PX is actually selected instead of EM

[@kaycampbell364]

Great job how a tutorial of how illustrations were made please

[@JoseOcandoVideos]

Oh! I never thought about doing a tutorial on design elements like that. Thanks for the idea Kay!

[@DaKing6997]

Hey Jose. Just curious what the software is called you are using side by side with web flow at 6:48

[@JoseOcandoVideos]

Great question. It's a design software for Macs called Sketch (sketchapp.com). Alternatives would be Adobe XD, which is free, and Figma, which is free up to a point I think.

[@ammarfaez4907]

For mobile view?

[@babelmontesco]

Great tutorial! However navbar isn't responsive with the changes you've made. Thanks anyway!

[@vain3d973]

Jose, and Idea why i can't Align text to right @ 15:47?

[@vain3d973]

Maybe what dimensions did you use to export the swoop?

[@aephemerial-tv]

How can I make my navlink buttons work?

[@aephemerial-tv]

like when you press one, it redirects you to a specific page

[@shahabjoon201]

Hi.. I do not know anything about webflow.. would you please tell me, is that just a concept or at the end it can give us a html & css template.. thanks in advance

[@JoseOcandoVideos]

Hey Shahab. Not sure I totally understand the question. But, you can export the HTML and CSS and host it elsewhere. I'm sure they have more resources in Webflow University regarding this: university.webflow.com/

[@shahabjoon201]

@@JoseOcandoVideos Thank you Jose

[@disco.lemonade]

This is rather complicated. I prefer to code it all, but that CMS is what makes this worth especially compared to WordPress

[@JoseOcandoVideos]

That's fair. But, totally agree the CMS makes Webflow quite powerful. Thanks for watching!

[@abboshonaslamov3947]

so i am a web designer and trying to get into webflow to design and also create websites for clients any tips on how i can get started

[@JoseOcandoVideos]

Great question! Webflow just released a series of courses on how to get started. The whole course is on KZbin. I recommend it!

[@abboshonaslamov3947]

@@JoseOcandoVideos ok thanks