Webflow Tutorial - Mint Redesign Concept
HTML-код
- Опубликовано: 5 авг 2024
- - NEW SKILLSHARE CLASS -
Hey all! I just launched a new course called "Webflow for Beginners". Most of the tutorials I do on RUclips 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 
Хобби
Best Webflow tutorial so far! =) (and that is takin into account that Webflows own tutorials are amazingly good!)
Great videos Jose. Very informative (even though I have been using Webflow for several months). Much appreciated.
Awesome tutorial. The way you explain is so great!!!!!
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.
Great Work!
Very clear explanation, especially about ems of parent and current element and grids.
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
Thanks for the kind words. I'm a bit of an accountant at heart, so I really like things to be organized and neat :)
Thank you very much for streamlined info... please continue to help us.
Great video. Really shows multiple aspects of webflow.
Thank you this was great! You explained things very well.
It’s amazing❤️❤️❤️ so beautiful website!
thank you so much - this was really helpful!
Amaziiiing work!!
Do more of these please.
The only one I know is Nelson.
And both of you guys are great!
Thanks Elyas! Much appreciated. I hope to have another upload in the next couple of weeks :)
I think Jose videos are even better 😉
Who is Nelson
Great video. Thanks!
Super helpful Jose! Thanks for sharing!
Great Job Jose.
It was a good tutorial Jose. Keep it up!
thanks for the video!
Awesome brooo
THIS IS THE BEST WEBFLOW TUTORIAL ON RUclips! Thank you
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
Great stuff, almost no one explain mobile views as you do!
Thanks Michal! I'm currently planning a video on tips for creating a responsive site. Stay tuned!
you are awesome
I just join your skillshare course 😁
You should sell this to Intuit! Awesome tutorial!
I would watch a tutorial from you for designing using Figma!
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!
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?
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.
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?
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!
Hey Jose. Just curious what the software is called you are using side by side with web flow at 6:48
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.
Slightly late to the party here but do you have the assets for this tutorial still...?
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.
If you look closely at when he says that he uses EMs for his font sizes, PX is actually selected instead of EM
Jose, and Idea why i can't Align text to right @ 15:47?
Maybe what dimensions did you use to export the swoop?
I wish you can share the assets for this tutorial. I would love to try designing this in webflow, just for exercise.
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.
you should have provided file that you are using, it would be really helpful!
For mobile view?
How can I make my navlink buttons work?
like when you press one, it redirects you to a specific page
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
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/
@@JoseOcandoVideos Thank you Jose
Great tutorial! However navbar isn't responsive with the changes you've made. Thanks anyway!
Great job how a tutorial of how illustrations were made please
Oh! I never thought about doing a tutorial on design elements like that. Thanks for the idea Kay!
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
Great question! Webflow just released a series of courses on how to get started. The whole course is on RUclips. I recommend it!
@@JoseOcandoVideos ok thanks
This is rather complicated. I prefer to code it all, but that CMS is what makes this worth especially compared to WordPress
That's fair. But, totally agree the CMS makes Webflow quite powerful. Thanks for watching!