ЁЯФе 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

рд░рд╛рдо-рд░рд╛рд╡рдг рдпреБрджреНрдз рд╕рдорд╛рдкреНрдд рд╣реЛ рдЪреБрдХрд╛ рдерд╛ред рдЬрдЧрдд рдХреЛ рддреНрд░рд╛рд╕ рджреЗрдиреЗ рд╡рд╛рд▓рд╛ рд░рд╛рд╡рдг рдЕрдкрдиреЗ рдХреБрдЯреБрдореНрдм рд╕рд╣рд┐рдд рдирд╖реНрдЯ рд╣реЛ рдЪреБрдХрд╛ рдерд╛редрд╢реНрд░реАрд░рд╛рдо рдХрд╛ рд░рд╛рдЬреНрдпрд╛рднрд┐рд╖реЗрдХ рд╣реБрдЖ рдФрд░ рдЕрдпреЛрдзреНрдпрд╛ рдирд░реЗрд╢ рд╢реНрд░реА рд░рд╛рдо рдХреЗ рдиреЗрддреГрддреНрд╡ рдореЗрдВ рдЪрд╛рд░реЛрдВ рджрд┐рд╢рд╛рдУрдВ рдореЗрдВ рд╢рдиреНрддрд┐ рдереАред
рдЕрдВрдЧрдж рдХреЛ рд╡рд┐рджрд╛ рдХрд░рддреЗ рд╕рдордп рд░рд╛рдо рд░реЛ рдкрдбрд╝реЗ рдереЗ редрд╣рдиреБрдорд╛рди рдХреЛ рд╡рд┐рджрд╛ рдХрд░рдиреЗ рдХреА рд╢рдХреНрддрд┐ рддреЛ рд░рд╛рдо рдореЗрдВ рдереА рд╣реА рдирд╣реАрдВ ред


рдорд╛рддрд╛ рд╕реАрддрд╛ рднреА рд╣рдиреБрдорд╛рди рдХреЛ рдкреБрддреНрд░рд╡рдд рдорд╛рдирддреА рдереАред рдЕрдд: рд╣рдиреБрдорд╛рди рдЕрдпреЛрдзреНрдпрд╛ рдореЗрдВ рд╣реА рд░рд╣ рдЧрдП редрд░рд╛рдо рджрд┐рдирднрд░ рджрд░рдмрд╛рд░ рдореЗрдВ, рд╢рд╛рд╕рди рд╡реНрдпрд╡рд╕реНрдерд╛ рдореЗрдВ рд╡реНрдпрд╕реНрдд рд░рд╣рддреЗ рдереЗред рд╕рдВрдзреНрдпрд╛ рдХреЛ рдЬрдм рд╢рд╛рд╕рдХреАрдп рдХрд╛рд░реНрдпреЛрдВ рдореЗрдВ рдЫреВрдЯ рдорд┐рд▓рддреА рддреЛ рдЧреБрд░реБ рдФрд░ рдорд╛рддрд╛рдУрдВ рдХрд╛ рдХреБрд╢рд▓-рдордВрдЧрд▓ рдкреВрдЫ рдЕрдкрдиреЗ рдХрдХреНрд╖ рдореЗрдВ рдЬрд╛рддреЗ рдереЗред рдкрд░рдВрддреБ рд╣рдиреБрдорд╛рди рдЬреА рд╣рдореЗрд╢рд╛ рдЙрдирдХреЗ рдкреАрдЫреЗ-рдкреАрдЫреЗ рд╣реА рд░рд╣рддреЗ рдереЗ ред


рдЙрдирдХреА рдЙрдкрд╕реНрдерд┐рддрд┐ рдореЗрдВ рд╣реА рд╕рд╛рд░рд╛ рдкрд░рд┐рд╡рд╛рд░ рдмрд╣реБрдд рджреЗрд░ рддрдХ рдЬреА рднрд░ рдмрд╛рддреЗрдВ рдХрд░рддрд╛ редрдлрд┐рд░ рднрд░рдд рдХреЛ рдзреНрдпрд╛рди рдЖрдпрд╛ рдХрд┐ рднреИрдпрд╛-рднрд╛рднреА рдХреЛ рднреА рдПрдХрд╛рдВрдд рдорд┐рд▓рдирд╛ рдЪрд╛рд╣рд┐рдП редрдЙрд░реНрдорд┐рд▓рд╛ рдХреЛ рджреЗрдЦ рднреА рдЙрдирдХреЗ рдорди рдореЗрдВ рд╣реВрдХ рдЙрдарддреА рдереА рдХрд┐ рдЗрд╕ рдкрддрд┐рд╡реНрд░рддрд╛ рдХреЛ рднреА рдЕрдкрдиреЗ рдкрддрд┐ рдХрд╛ рд╕рд╛рдирд┐рдзреНрдп рдЪрд╛рд╣рд┐рдП ред

рдПрдХ рджрд┐рди рднрд░рдд рдиреЗ рд╣рдиреБрдорд╛рди рдЬреА рд╕реЗ рдХрд╣рд╛,"рд╣реЗ рдкрд╡рдирдкреБрддреНрд░! рд╕реАрддрд╛ рднрд╛рднреА рдХреЛ рд░рд╛рдо рднреИрдпрд╛ рдХреЗ рд╕рд╛рде рдПрдХрд╛рдВрдд рдореЗрдВ рд░рд╣рдиреЗ рдХрд╛ рднреА рдЕрдзрд┐рдХрд╛рд░ рдкреНрд░рд╛рдкреНрдд рд╣реИ редрдХреНрдпрд╛ рдЖрдкрдХреЛ рдЙрдирдХреЗ рдорд╛рдереЗ рдкрд░ рд╕рд┐рдиреНрджреВрд░ рдирд╣реАрдВ рджрд┐рдЦрддрд╛?рдЗрд╕рд▓рд┐рдП рд╕рдВрдзреНрдпрд╛ рдкрд╢реНрдЪрд╛рдд рдЖрдк рд░рд╛рдо рднреИрдпрд╛ рдХреЛ рдХреГрдкреНрдпрд╛ рдЕрдХреЗрд▓рд╛ рдЫреЛрдбрд╝ рджрд┐рдпрд╛ рдХрд░реЗрдВ "ред
рдпреЗ рд╕реБрдирдХрд░ рд╣рдиреБрдорд╛рди рдЖрд╢реНрдЪрд░реНрдпрдЪрдХрд┐рдд рд░рд╣ рдЧрдП рдФрд░ рд╕реАрддрд╛ рдорд╛рддрд╛ рдХреЗ рдкрд╛рд╕ рдЧрдП ред


рдорд╛рддрд╛ рд╕реЗ рд╣рдиреБрдорд╛рди рдиреЗ рдкреВрдЫрд╛,"рдорд╛рддрд╛ рдЖрдк рдЕрдкрдиреЗ рдорд╛рдереЗ рдкрд░ рд╕рд┐рдиреНрджреВрд░ рдХреНрдпреЛрдВ рд▓рдЧрд╛рддреА рд╣реИрдВред" рдпрд╣ рд╕реБрдирдХрд░ рд╕реАрддрд╛ рдорд╛рддрд╛ рдмреЛрд▓реАрдВ,"рд╕реНрддреНрд░реА рдЕрдкрдиреЗ рдорд╛рдереЗ рдкрд░ рд╕рд┐рдиреНрджреВрд░ рд▓рдЧрд╛рддреА рд╣реИ рддреЛ рдЙрд╕рдХреЗ рдкрддрд┐ рдХреА рдЖрдпреБ рдореЗрдВ рд╡реГрджреНрдзрд┐ рд╣реЛрддреА рд╣реИ рдФрд░ рд╡рд╣ рд╕реНрд╡рд╕реНрде рд░рд╣рддреЗ рд╣реИрдВ "ред рдлрд┐рд░ рд╣рдиреБрдорд╛рди рдЬреА рдкреНрд░рднреБ рд░рд╛рдо рдХреЗ рдкрд╛рд╕ рдЧрдП ред
рдХреНрдпрд╛ рдЖрдк рдЬрд╛рдирддреЗ рд╣реИрдВ рдХрд┐ рдХреНрдпрд╛ рд╣реИ, рдкрд┐рддреГ рдкрдХреНрд╖ рдореЗрдВ рдХреМрд╡реЗ рдХреЛ рдЦрд╛рдирд╛ рджреЗрдиреЗ рдХреЗ рдкреАрдЫреЗ рдХрд╛ рд╡реИрдЬреНрдЮрд╛рдирд┐рдХ рдХрд╛рд░рдг!

рд╢реНрд░рд╛рджреНрдз рдкрдХреНрд╖ рдореЗрдВ рдХреМрдУрдВ рдХрд╛ рдмрдбрд╝рд╛ рд╣реА рдорд╣рддреНрд╡ рд╣реИред рдХрд╣рддреЗ рд╣реИ рдХреМрдЖ рдпрдо рдХрд╛ рдкреНрд░рддреАрдХ рд╣реИ, рдпрджрд┐ рдЖрдкрдХреЗ рд╣рд╛рдереЛрдВ рджрд┐рдпрд╛ рдЧрдпрд╛ рднреЛрдЬрди рдЧреНрд░рд╣рдг рдХрд░ рд▓реЗ, рддреЛ рдРрд╕рд╛ рдорд╛рдирд╛ рдЬрд╛рддрд╛ рд╣реИ рдХрд┐ рдкрд┐рддрд░реЛрдВ рдХреА рдХреГрдкрд╛ рдЖрдкрдХреЗ рдКрдкрд░ рд╣реИ рдФрд░ рд╡реЗ рдЖрдкрд╕реЗ рдЦрд╝реБрд╢ рд╣реИред


рдХреБрдЫ рд▓реЛрдЧ рдХрд╣рддреЗ рд╣реИрдВ рдХреА рд╡реНрдпрдХреНрддрд┐ рдорд░рдХрд░ рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ рдХреМрд╡реЗ рдХреЗ рд░реВрдк рдореЗрдВ рдЬрдиреНрдо рд▓реЗрддрд╛ рд╣реИ рдФрд░ рдЙрд╕реЗ рдЦрд╛рдирд╛ рдЦрд┐рд▓рд╛рдиреЗ рд╕реЗ рд╡рд╣ рднреЛрдЬрди рдкрд┐рддрд░реЛрдВ рдХреЛ рдорд┐рд▓рддрд╛ рд╣реИ

рд╢рд╛рдпрдж рд╣рдо рд╕рдмрдиреЗ рдЕрдкрдиреЗ рдШрд░ рдХреЗ рдХрд┐рд╕реА рдмрдбрд╝реЗ рдмреБрдЬрд╝реБрд░реНрдЧ, рдХрд┐рд╕реА рдкрдВрдбрд┐рдд рдпрд╛ рдЬреНрдпреЛрддрд┐рд╖рд╛рдЪрд╛рд░реНрдп рд╕реЗ рдпреЗ рд╕реБрдирд╛ рд╣реЛрдЧрд╛ред рд╡реЗ рдЕрдирдЧрд┐рдирдд рдХрд┐рд╕реНрд╕реЗ рд╕реБрдирд╛рдПрдВрдЧреЗ, рдХрд╣реЗрдВрдЧреЗ рдмрдбрд╝реЗ рдмреБрдЬрд╝реБрд░реНрдЧ рдХрд╣ рдЧрдП рдЗрд╕реАрд▓рд┐рдП рдРрд╕рд╛ рдХрд░рдирд╛

рд╢рд╛рдпрдж рд╣реА рд╣рдореЗрдВ рдХреЛрдИ рдЗрд╕рдХреЗ рдкреАрдЫреЗ рдХрд╛ рд╡реИрдЬреНрдЮрд╛рдирд┐рдХ рдХрд╛рд░рдг рдмрддрд╛ рд╕рдХреЗред

рд╣рдорд╛рд░реЗ рдЛрд╖рд┐ рдореБрдирд┐ рдФрд░ рдкреМрд░рд╛рдгрд┐рдХ рдХрд╛рд▓ рдореЗрдВ рд░рд╣рдиреЗ рд╡рд╛рд▓реЗ рд▓реЛрдЧ рдореБрд░реНрдЦ рдирд╣реАрдВ рдереЗ! рдХрднреА рд╕реЛрдЪрд┐рдпреЗрдЧрд╛ рдХреМрд╡реЛрдВ рдХреЛ рдкрд┐рддреГ рдкрдХреНрд╖ рдореЗрдВ рдЦрд┐рд▓рд╛рдИ рдЦреАрд░ рд╣рдорд╛рд░реЗ рдкреВрд░реНрд╡рдЬреЛрдВ рддрдХ рдХреИрд╕реЗ рдкрд╣реБрдВрдЪреЗрдЧреА?

рд╣рдорд╛рд░реЗ рдЛрд╖рд┐ рдореБрдирд┐ рд╡рд┐рджреНрд╡рд╛рди рдереЗ, рд╡реЗ рдЬреЛ рдмрд╛рдд рдХрд░рддреЗ рдпрд╛ рдХрд╣рддреЗ рдереЗ рдЙрд╕рдХреЗ рдкреАрдЫреЗ рдХреЛрдИ рди рдХреЛрдИ рд╡реИрдЬреНрдЮрд╛рдирд┐рдХ рдХрд╛рд░рдг рдЫреБрдкрд╛ рд╣реЛрддрд╛ рдерд╛ред

рдПрдХ рдмрд╣реБрдд рд░реЛрдЪрдХ рддрдереНрдп рд╣реИ рдкрд┐рддреГ рдкрдХреНрд╖, рднрд╛рджреЛ( рднрд╛рджреНрд░рдкрдж) рдкреНрд░рдХреГрддрд┐ рдФрд░ рдХрд╛рдХ рдХреЗ рдмреАрдЪред

рдПрдХ рдмрд╛рдд рдЬреЛ рдХрд╣ рд╕рдХрддреЗ рдХрд┐ рд╣рдо рд╕рдм рдиреЗ рд╕реНрд╡рддрдГ рдЙрдЧ рдЖрдпреЗ рдкреАрдкрд▓ рдпрд╛ рдмрд░рдЧрдж рдХрд╛ рдкреЗрдбрд╝/ рдкреМрдзрд╛ рдХрд┐рд╕реА рди рдХрд┐рд╕реА рджреАрд╡рд╛рд░, рдкреБрд░рд╛рдиреА

рдЗрдорд╛рд░рдд, рдкрд░реНрд╡рдд рдпрд╛ рдЕрдЯреНрдЯрд╛рд▓рд┐рдХрд╛рдУрдВ рдкрд░ рдЬрд╝рд░реВрд░ рджреЗрдЦрд╛ рд╣реЛрдЧрд╛ред рджреЗрдЦрд╛ рд╣реИ рди?

рдЬрд╝рд░рд╛ рд╕реЛрдЪрд┐рдпреЗ рдкреАрдкрд▓ рдпрд╛ рдмрд░рдЧрдж рдХреА рдмреАрдЬ рдХреИрд╕реЗ рдкрд╣реБрдВрдЪреЗ рд╣реЛрдВрдЧреЗ рд╡рд╣рд╛рдБ рддрдХ?┬ардЗрдирдХреЗ рдмреАрдЬ рдЗрддрдиреЗ рд╣рд▓реНрдХреЗ рднреА рдирд╣реАрдВ рд╣реЛрддреЗ рдХреЗ рд╣рд╡рд╛ рдЙрдиреНрд╣реЗрдВ рдЙрдбрд╝рд╛рдХреЗ рд▓реЗ рдЬрд╛ рд╕рдХреЗред