I am looking for a passionate and experienced webflow designer to tutor me through the steps of producing my site.
I have done a brief on wix and transiting to build this on webflow, am hitting some wall and going bonkers! haha.
I have very basic HTML knowledge, also have watched some webflow tutorial videos but I am the kind of “old-school” gal that prefers an actual person to walk me through, at the same time, explain/teach me the “concepts” of design and the webflow interface.
If you are truly passionate about webflow, and have the patience /experience in tutoring, please PM me. I am on Singapore timezone though timing is flexible for me right now.
P.S. I am NOT looking for designer/developer to complete any work.
If you have specific questions there are lots of people prepared to help answer them here on the forum. Are you able to post your Wix idea/project so we can see what you are trying to recreate here in Webflow - there might be some easy tips we can give you to get started and as you evolve the site?
If you have a budget for the tutoring instead, we could move your post to the Freelance category - just let us know
I don’t really know where to begin asking the questions, as I hit the wall as I am building the site from webflow. (I am not a web designer by profession)
this is the wix site — it is not final but most of the stuff is up ( as I found out about webflow, and thought I will just start building from scratch on webflow )
I will have a long list of questions to ask. haha… so yea, would love a tutor/mentor to guide me through ( eg. why some boxes can be adjusted and some dont…and if they can be adjusted, why does the background image move in position as well? and many more… it’s really the little questions… )
thank you sooo much if anyone can help !! i really want to get this right with webflow…
Unfortunately, it comes down to really learning some basic stuff about css layout. HTML (your pictures and text) are your content and css controls how that content is shown on a page.
The good thing is, none if it is that hard to understand if you give it a good study over the course of a few days to a week with some practice - especially with a tool like webflow.
This site below is a really nice overview of the kind of things you’ll be implementing. These are the same “rules” or “standards” a hand coder would follow. You’re simply coding “visually”… http://learnlayout.com/
Webflow university will teach you everything you need to know to implement the same stuff in that brief little css positioning overview site I just linked to. Their video tutorials and walkthroughs are second to none. They do an amazing job of breaking down the basics of how to build a site with html and css visually to someone brand new to the concept of html and css. They even offer short 1 hour “full site” builds, can’t get any better than that. Just soak up the info and practice.
It will take a bit of time and effort but you’ll be blown away with what your capable of achieving with this program if you better understand the relationship between content (html) and styling (css).
Ha! I’m old-school too. I just posted this morning about needing some help from REAL people instead of google searches. I am the same way as you. I retain better from interaction rather than videos and text. So far I’ve seen a lot of amazingly helpful and friendly people on here. By the way - what you’ve done with the site so far is fantastic. It’s almost an exact replica of your wix site. Impressive.
yea, I am going through the tutorials…I will take your suggestion and try out building “full site” builds…
I do have one question — is it possible to add social media icons/links in the nav-bar?
I tried it on webflow and wasnt able to do it successfully, and I am unable to find any solutions out of this in webflow…
if you go to the wix mock up site, https://alwaysfreewilly8.wixsite.com/mysite
the right header area is what I am referring to.
Also in a more general sense @yanhuang - a great way to further immerse yourself here in Webflow is join the chatroom on the livestreams which happen every Tuesday at 10am PST.
The link for the stream will be on a banner at the top of the forum page each tuesday, and alternates between Youtube and Crowdcast streams with @PixelGeek (also @mistercreate last week)
Absolutely. If you go to virtually any website on the web, it can be done in Webflow - it’s all just html & css in terms of layout (with some javascript making things do stuff) - don’t worry about learning that though, you can study Webflows Interactions later on after you have a firm grasp on basic layout stuff
For your specific example - you can use the “Navbar” component in Webflow.
This is a pre-built component that has some very minimal default html/css applied (which of course can and should be changed to your suiting). It also has some javascript that will allow you to easily collapse the content (image, text, links) into a dropdown menu with a little hamburger icon on smaller screens.
It has the logo floated to the left and your links to the right. To build something like your example you would want to add a few of the “link blocks” (these are pre-built components from the menu that allow you to add a link to the content within. You can then drop in an image or icon into those links blocks and set the link to go to your social network.
Sorry, I know that is more of a rough overview and not super specific but you will be hard pressed to get somebody to hold your hand through the entire site build. The beauty of Webflow is the ease of use to “visually code” with the convenience of an “undo” button. You get amazing training on the basics of how this all works via Webflow University… Study the full site builds & the individual components. Pop open the site builds from the Webflow Showcase to see how other designers have built their websites, look at the content structure of the sites, look at the styles applied, play around with the stuff - you can’t break it
I started with webflow 101…and got crashed literally. haha.
i am hitting another wall again.
at just 0:54, where the tutorial says to align left of the div block (later renamed as Hero Left), I am NOT seeing the same left alignment icon on the Navigator panel…
What is showing up on mine is the opposite ( i.e. the vertical top/down icon instead) …
Yep, in that tutorial the instructor is using a layout system called Flexbox for that hero section - it is a layout mechanism that is part of the broader, overall “CSS” specification - which of course, Webflow has integrated into it’s IDE because they rock!
Warning: More general overview/tutor type of info:
Before Flexbox came along people more commonly used the “Float” method of aligning things and still do in many cases. You’ll notice that all pieces of html content have a default nature… which is generally to align to the left of where you put it on the page. Add a picture with no CSS styles applied, it will just sit to the left of the screen. Add a Heading or Paragraph with no styles? it will just sit to the left.
You’ll use CSS (adding styles) to “override” the default nature of things.
Pay attention to that line in the third link that says “Flexbox gives you precise alignment and stacking control for all the contents inside an element…”
Every website is just a bunch of boxes, with smaller boxes inside of one giant box (the body element). These general “all purpose” boxes are called “Divs”… You can use Webflow’s pre-built components for overall structure such as the “Section” element, or the “Container” element - or you can simply create your own by dragging/dropping Div’s onto the page.
I’d encourage you to pop open some sites, go to the “navigator” panel that shows the overall structure of the site (the boxes within the boxes). In this example you will see the body at the top, then more stuff inside of it (sections), then more stuff inside of those other “sections”…
Click on those individual pieces of content or html (in this case divs, buttons, headings, paragraphs, etc) and study the styles applied. If you don’t see any styles applied to something then it must mean it is coming from something higher up in the overall stucture (CSS stands for Cascading Style Sheets - which means styles applied to certain thing then will apply to everything inside of it’s box or “cascade” if you will down, like a little waterfall onto all the other elements inside of it’s own box).
It’s why you can make the paragraph element blue and make it 40 pixels tall on the Body element (the very top level element of your site) - and everytime you place a plain old paragraph element with “no styles” on your website, just drag/drop a basic “P” element, the default will be blue text at 40px
Okay, for another example. See how I clicked on the “intro CTA” element in my screenshot? Why is that not stretching all the way across the page? The text is aligned left, but it’s not butted up against the left side of the entire page? That is the default nature right? Something must be controlling the content inside of that box to make it sit in the middle of the page like that…
Now look down into the left corner of the screenshot… It’s showing you a little “breadcrumb” structure of what stuff is inside of what boxes… The thing we clicked on is a Div called “Intro CTA”, it’s inside of a box called “Container”, which is inside of a box called “Section”, which is inside the “Body”…
The “Container” in this case happens to be a Webflow default or “pre-made” element that is just a box (just a plain old Div element) that has a Max Width setting applied - something around 960 px or so… and the left/right margins set to Auto (centers stuff that is not text, for text you can just use text-align
Now look what happens if I simply pull that box (Intro CTA) outside of the “Container” box? Everything just sitting to the left… like it should if I haven’t done anything to keep it from doing that
Now I just gave the “Intro CTA” box a width style - 500px - it’s still sitting left of the page though because that is what does by default. Just for clarity - we are very specifically talking about the box named Intro-CTA in relation to the box it sits inside of, more commonly known as it’s Parent Element. In this case Intro-CTA is a Child Element of the div called “Section” now. The “Section” by default has a max width of 100%… that basically means anything you put in it will stretch across the whole page - unless of course you give your element a width value of 500 px, then it will be 500 px wide. but it will still just sit left…
Just added a little Margin-Auto because it centers stuff. Boom our 500px box is now centered in the middle of our page
I know this wasn’t some kind of ground-breaking tutorial here but it’s the kind of thinking you’ll need to employ if you want full control over what your site looks like… It’s just a lot of studying up and playing around with stuff (not your site obvioiusly, open some “Read Only” linkes from the showcase mentioned earlier, or in the example provided above it’s the “Flexbox Game” link I provided that will pop open the designer…
Just check stuff out, study up, and practice… Wonder how those display properties sitting up at the top work? You can google it, it doesn’t absolutely have to come from Webflow - this is all basic html/css layout stuff used universally throughout the internet…
Another great place to learn very basic & fundamental stuff. Just click on “Learn HTML” or “Learn CSS”… Again, this stuff is universal - apply the same exact principles you learn at the link above to your Webflow site builds
Webflow makes much more sense if you have a basic understanding of the CSS box model. I personally found the video tutorials at Treehouse | Sign In the most immersive learning experience I’ve ever had with just about anything. Much better than real life lessons, because you get full atention, get to pause the tutor, change his speed of talking and there are assignments that are checked every episode. If you want to learn it, go teamtreehouse.
(not an affiliate of team treehouse just love the learning method)
p.s. it has a point system so you get badges and high scores and stuff its just like playing a game.
I never liked w3schools much, altho they contain the most info on the subjects, but to me CSS tricks website is a lot better with more real life examples. Combine those two for learning the lingo and you’re a rock solid webflow designer in no time.
You would be smart to get at least a basic grasp of these concepts because even with webflow, making websites that translate crossdevice/crossbrowser is not easy. However, combining the stuff I learned from teamtreehouse with the graphical interface of building html & css elements with webflow have given me a pretty solid foundation to build websites.
Anywho, cheers and goodluck. If you still feel you need a personal tutor, you can add me on skype and I can answer your questions, but as other people said, making your questions and the answers to them available for the world by posting them on this forum, is much more valuable in a broader sense.
I would agree - I spent time learning the basics of html+css in my spare time before finding Webflow - but progress any deeper was slow - however put the two together and the concepts click into place so much quicker. Webflow is complimentary to learning code and vice versa.
thanks marijin!
that looks like a great site. yes i have zero background in understanding the principles of CSS… which makes the learning curve a little steep…
One other thing I’d like to suggest to you as a professional troubleshooter is:
Whenever you can’t wrap your head around a problem or something just doesn’t work the way it should, go do something else entirely. Take a walk, a shower, anything, just a take a break from staring at the screen. I’ve been working in IT for 20 years and almost every time I came up with the solution to a problem was when I wasn’t trying to find it. The mind works peculiar in that regard, you feed it with a problem and when you allow it to enter your subconscious thoughts, it will come up with solutions that are very hard to think of when you are consciously trying to find it by means of deduction or other logical systems.
)
- it’s all just html & css in terms of layout (with some javascript making things do stuff) - don’t worry about learning that though, you can study Webflows Interactions later on after you have a firm grasp on basic layout stuff 
