ЁЯФе Learn @webflow in 10 tweets (even if you're a beginner) ЁЯСЗ

1/10

First: how websites are structured:

- HTML is the content on the page
- CSS is for position, fonts, colors, etc
- For dynamic sites, a database stores the content

Normally, you need code to turn this into website.

Webflow does it for you, visually! ЁЯТп
2/10

To understand Webflow:

You need to understand the box model. ItтАЩs the key to putting things where you want them to be.

- Everything on a web page is made up of boxes
- CSS let's you adjust the style and position of each box
- The most common тАЬboxтАЭ is called a div
3/10

Webflow lets you build visuallyЁЯСА, without code. Simply drag in components to build your site. Components include:

- Text
- Forms
- Images
- Video
- Buttons
- Divs (boxes to help position content where you want)
4/10

After dragging in a component, check the navigator. This is where the box model comes in.

You can see which components are within other components (inside other boxes) with indentations.

You can put as many components inside other components that youтАЩd like.
5/10

Let's talk design! When you select a component, you can style it ЁЯЦМя╕П

First add a class name, which is used for style settings. Classes are reuseable throughout your site. This saves you a TON of time later on.

Class settings include font, background, border, and MUCH more.
6/10

Moving on to position ЁЯФА

The Layout settings lets you position your content within a div on the page.

Flex is my favorite, because it makes it super easy to position things how you want.

- Choose your direction (vertical or horizontal)
- Choose your alignment
7/10

The CMS is what really makes Webflow тЬиmagicalтЬи

You can store lots of data in the backend, and display it on your site automatically.

- Collections are like a list (like blog posts)
- The collection items are like the individual blog posts inside of the collection list
8/10

Use a Collection List component to display all the items in your collection (all the blog posts, for example).

When you update your CMS, your site content updates automatically ЁЯдп

When you style one item, all items will use the same style. This saves a TON of time.
9/10

Let's talk about collection pages.

An example is an individual recipe page on a recipe blog.

If you have 100 recipes, Webflow will create 100 webpages, with the same design, AUTOMATICALLY.

It's magical ЁЯкД
10/10

Responsive design is about making your site work on every screen size.

Webflow makes this super easy!

Just click the device on the top, and adjust your styles.

Any adjustments on a larger size are automatically applied to smaller, but not the other way around.
/Bonus

That's it! If you understand these fundamentals, you'll be building Webflow sites in no time.

ЁЯСАWant to watch a tutorial walking you through each point?

Check out this beginner Webflow tutorial, building a fully functioning recipe blog ЁЯСЗ

https://t.co/TmEpbBjqBG
If you enjoyed this crash course, and want more no code tips and tutorials in the future, join the @nocodemba newsletter ЁЯСЗ

https://t.co/SZ3gpTZ842

You May Also Like

рд╢рдорд╢рд╛рди рдореЗрдВ рдЬрдм рдорд╣рд░реНрд╖рд┐ рджрдзреАрдЪрд┐ рдХреЗ рдорд╛рдВрд╕рдкрд┐рдВрдб рдХрд╛ рджрд╛рд╣ рд╕рдВрд╕реНрдХрд╛рд░ рд╣реЛ рд░рд╣рд╛ рдерд╛ рддреЛ рдЙрдирдХреА рдкрддреНрдиреА рдЕрдкрдиреЗ рдкрддрд┐ рдХрд╛ рд╡рд┐рдпреЛрдЧ рд╕рд╣рди рдирд╣реАрдВ рдХрд░ рдкрд╛рдпреА рдФрд░ рдкрд╛рд╕ рдореЗрдВ рд╣реА рд╕реНрдерд┐рдд рд╡рд┐рд╢рд╛рд▓ рдкреАрдкрд▓ рд╡реГрдХреНрд╖ рдХреЗ рдХреЛрдЯрд░ рдореЗрдВ рдЕрдкрдиреЗ рддреАрди рд╡рд░реНрд╖ рдХреЗ рдмрд╛рд▓рдХ рдХреЛ рд░рдЦ рдХреЗ рд╕реНрд╡рдпрдВ рдЪрд┐рддрд╛ рдкреЗ рдмреИрда рдХрд░ рд╕рддреА рд╣реЛ рдЧрдпреА редрдЗрд╕ рдкреНрд░рдХрд╛рд░ рдЛрд╖реА рджрдзреАрдЪрд┐ рдФрд░ рдЙрдирдХреА рдкрддреНрдиреА рдХреА рдореБрдХреНрддрд┐ рд╣реЛ рдЧрдпреАред


рдкрд░рдиреНрддреБ рдкреАрдкрд▓ рдХреЗ рдХреЛрдЯрд░ рдореЗрдВ рд░рдЦрд╛ рдмрд╛рд▓рдХ рднреВрдЦ рдкреНрдпрд╛рд╕ рд╕реЗ рддрдбрд╝рдкрдиреЗ рд▓рдЧрд╛ред рдЬрдм рдХреБрдЫ рдирд╣реАрдВ рдорд┐рд▓рд╛ рддреЛ рд╡реЛ рдХреЛрдЯрд░ рдореЗрдВ рдкрдбрд╝реЗ рдкреАрдкрд▓ рдХреЗ рдЧреЛрджреЛрдВ (рдлрд▓) рдХреЛ рдЦрд╛рдХрд░ рдмрдбрд╝рд╛ рд╣реЛрдиреЗ рд▓рдЧрд╛ред рдХрд╛рд▓рд╛рдиреНрддрд░ рдореЗрдВ рдкреАрдкрд▓ рдХреЗ рдлрд▓реЛрдВ рдФрд░ рдкрддреНрддреЛрдВ рдХреЛ рдЦрд╛рдХрд░ рдмрд╛рд▓рдХ рдХрд╛ рдЬреАрд╡рди рдХрд┐рд╕реА рдкреНрд░рдХрд╛рд░ рд╕реБрд░рдХреНрд╖рд┐рдд рд░рд╣рд╛ред

рдПрдХ рджрд┐рди рджреЗрд╡рд░реНрд╖рд┐ рдирд╛рд░рдж рд╡рд╣рд╛рдВ рд╕реЗ рдЧреБрдЬрд░ рд░рд╣реЗ рдереЗ редрдирд╛рд░рдж рдиреЗ рдкреАрдкрд▓ рдХреЗ рдХреЛрдЯрд░ рдореЗрдВ рдмрд╛рд▓рдХ рдХреЛ рджреЗрдЦ рдХрд░ рдЙрд╕рдХрд╛ рдкрд░рд┐рдЪрдп рдорд╛рдВрдЧрд╛ -
рдирд╛рд░рдж рдмреЛрд▓реЗ - рдмрд╛рд▓рдХ рддреБрдо рдХреМрди рд╣реЛ?
рдмрд╛рд▓рдХ - рдпрд╣реА рддреЛ рдореИрдВ рднреА рдЬрд╛рдирдирд╛ рдЪрд╣рддрд╛ рд╣реВрдБ ред
рдирд╛рд░рдж - рддреБрдореНрд╣рд╛рд░реЗ рдЬрдирдХ рдХреМрди рд╣реИрдВ?
рдмрд╛рд▓рдХ - рдпрд╣реА рддреЛ рдореИрдВ рднреА рдЬрд╛рдирдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдБ ред

рддрдм рдирд╛рд░рдж рдиреЗ рдЖрдБрдЦреЗрдВ рдмрдиреНрдж рдХрд░ рдзреНрдпрд╛рди рд▓рдЧрд╛рдпрд╛ ред


рддрддреНрдкрд╢реНрдЪрд╛рдд рдЖрд╢реНрдЪрд░реНрдпрдЪрдХрд┐рдд рд╣реЛ рдХрд░ рдмрд╛рд▓рдХ рдХреЛ рдмрддрд╛рдпрд╛ рдХрд┐ 'рд╣реЗ рдмрд╛рд▓рдХ! рддреБрдо рдорд╣рд╛рди рджрд╛рдиреА рдорд╣рд░реНрд╖рд┐ рджрдзреАрдЪрд┐ рдХреЗ рдкреБрддреНрд░ рд╣реЛ ред рддреБрдореНрд╣рд╛рд░реЗ рдкрд┐рддрд╛ рдХреА рдЕрд╕реНрдерд┐рдпреЛрдВ рдХрд╛ рд╡рдЬреНрд░рд╛рд╕реНрддреНрд░ рдмрдирд╛рдХрд░ рд╣реА рджреЗрд╡рддрд╛рдУрдВ рдиреЗ рдЕрд╕реБрд░реЛрдВ рдкрд░ рд╡рд┐рдЬрдп рдкрд╛рдпреА рдереАредрддреБрдореНрд╣рд╛рд░реЗ рдкрд┐рддрд╛ рдХреА рдореГрддреНрдпреБ рдорд╛рддреНрд░ 31 рд╡рд░реНрд╖ рдХреА рд╡рдп рдореЗрдВ рд╣реА рд╣реЛ рдЧрдпреА рдереА'ред

рдмрд╛рд▓рдХ - рдореЗрд░реЗ рдкрд┐рддрд╛ рдХреА рдЕрдХрд╛рд▓ рдореГрддреНрдпреБ рдХрд╛ рдХреНрдпрд╛ рдХрд╛рд░рдг рдерд╛?
рдирд╛рд░рдж - рддреБрдореНрд╣рд╛рд░реЗ рдкрд┐рддрд╛ рдкрд░ рд╢рдирд┐рджреЗрд╡ рдХреА рдорд╣рд╛рджрд╢рд╛ рдереАред
рдмрд╛рд▓рдХ - рдореЗрд░реЗ рдЙрдкрд░ рдЖрдпреА рд╡рд┐рдкрддреНрддрд┐ рдХрд╛ рдХрд╛рд░рдг рдХреНрдпрд╛ рдерд╛?
рдирд╛рд░рдж - рд╢рдирд┐рджреЗрд╡ рдХреА рдорд╣рд╛рджрд╢рд╛ред
рдЗрддрдирд╛ рдмрддрд╛рдХрд░ рджреЗрд╡рд░реНрд╖рд┐ рдирд╛рд░рдж рдиреЗ рдкреАрдкрд▓ рдХреЗ рдкрддреНрддреЛрдВ рдФрд░ рдЧреЛрджреЛрдВ рдХреЛ рдЦрд╛рдХрд░ рдмрдбрд╝реЗ рд╣реБрдП рдЙрд╕ рдмрд╛рд▓рдХ рдХрд╛ рдирд╛рдо рдкрд┐рдкреНрдкрд▓рд╛рдж рд░рдЦрд╛ рдФрд░ рдЙрд╕реЗ рджреАрдХреНрд╖рд┐рдд рдХрд┐рдпрд╛ред