Webflow has a problem. It’s way too awesome, really, I mean it. Webflow starts with a blank canvas and, literally, gives you the freedom to build a website to your needs and lets you embrace creative freedom. For sure, you have also the option to start with a template if you want, then you can fully customize it to your liking and no, you don’t have to write a single line of code.

Personally, I was familiar with HTML and CSS concepts before starting using webflow, and this made things so much easier for me. I knew how HTML blocks behave and how CSS works. And to make also your journey and experience with Webflow a whole lot easier, I’d suggest you to learn about how these things work. I’m not saying you should learn how to code, no, far from that, you just need to know how these things function, how they’re related, and when to use what.

As I mentioned earlier, you don’t need to write a single line of code (that doesn’t mean you can’t if you want to), but understanding the way HTML and CSS work, is basically understanding how Webflow really works, since all Webflow sites are built by using HTML blocks like sections, divs, headings, paragraphs and many other elements, all these, styled with CSS but in a visual way.

• The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The <div> tag is easily styled by using the class or id attribute.
• An element's padding area is the space between its content and its border. Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element.
• Flexbox is a layout model that allows elements to align and distribute space within a container. Using flexible widths and heights, elements can be aligned to fill a space or distribute space between elements, which makes it a great tool to use for responsive design systems.

These are just some examples from the list of principles that you need to have an understanding of when using Webflow. If you do not have this basic understanding, you might become frustrated when you drop a div into your canvas and don’t know how to adjust and style it to your needs.

To avoid all the frustration and prevent yourself from not enjoying the awesomeness of Webflow as it really is, I’d recommend taking a basic course before starting your journey with Webflow.

Today, to have a responsive website is mandatory; everybody wants a mobile version of their website, and not just mobile - all screen resolutions must be compatible, too. But, what is responsive design? You probably know by now; Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

Webflow makes this easy for you, it has several breakpoints, you can find them at the top of the screen, just by clicking on it you’ll have a visual how your design looks and then you can start adjusting it to your needs and liking.

You heard it right, by copying. After you’ve just learned basics of HTML and CSS  and have an idea of how things work and are structured in Webflow you can now create a basic Webflow landing page by dropping some elements onto the area of work. But then you want more, you want to create all these cool layouts and elements you saw online or you want to implement your super creative new design, but how?

Webflow has a long list of different templates that you can learn from. Some of them are paid and some free templates that Webflow offers for you to use as a starting point for a project. This long list of various projects can be used as a learning tool just by looking into it and understand how they were built. You can also change parameters, styles, positions etc. and see how the layout elements are affected by your changes.

• Check Webflow Templates and the one you like most
• Once you’re on the page for the chosen template, click the button that says “Preview in Designer”
• Then you’ll be taken to the Webflow designer view for that template. Click the blue eye icon
• Voilà! Now you can play around and see how each element is built.

Another place where you can find projects to help you develop your Webflow skills is Webflow Clonable Showcase. This is a list of cloneable projects created by Webflow community and can be used by anyone as a template for their project. And, just like Webflow Templates, it’s that magical little place where you can check out how other people have built their projects and actually learn from them. Everybody has it’s own style and way of doing things, and you can learn by taking something from everyone, then create your own style and way of doing things.

When you add an element on your canvas and start styling it, Webflow automatically will assign a class to it. If you add a heading, it’s going to be something like ‘Heading 7’ - depending on the element you add, but that’s not something you’d find usable or easy to remember.

What if you have a lot of elements that will have the same styling applied to them? You’re going to have through the same thing all over and over again. That would bore you to death, right? But, that’s exactly where classes come to rescue and save you time and boredom. Elements that will be given the same class name will be styled equally, meaning you have to style a specific element once, let’s take for example you need an H3 to be styled a specific way, you give it a class name then style it. If, later, you need another H3 to have the same styling, all you have to do it is give it the same class and voilà, your element is styled properly. Remember that it’s important to name your classes properly! If you have difficulties naming your classes, you could always use BEM, it’s easy to use and provides a solid style structure that remains simple and easy to understand.

Combo classes are the classes added after the first class and they are great when you need to create an exception or change a thing or two about the previous class. Let’s take the same example as before - you have an H3 with a specific style; a size of 28px, a line height of 1.5, bold and blue. You need another H3 with the same properties, only now you need it to be red. All you have to do, is to add another class after the first class and change the color of the H3. Then you can reuse this combo class whenever you need it.

Creating styles is a great way to save time by styling elements that will be used more than once through a design. Next are symbols. Symbols are any component that will be repeated throughout the project, f.e buttons, navigation bars, card elements, footers etc. Symbols will speed up the development of your project considerably. There are two types of symbols that you can create on Webflow. The first one are the symbols that have identical content per instance, which are symbols like footers or navbars. These components have the same content through all the design, therefore they are identical per each instance. If you edit one of these, they will edit everywhere in the project. The other type of symbols like cards, hero sections or buttons that have unique content per instance which are symbols that have the same layout and design, but their content is different (text, videos or images).

These were some of the most important concepts and things that you should be familiar with before starting using Webflow. I hope they were useful and will make your journey with Webflow smoother and easier.