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

A brief analysis and comparison of the CSS for Twitter's PWA vs Twitter's legacy desktop website. The difference is dramatic and I'll touch on some reasons why.

Legacy site *downloads* ~630 KB CSS per theme and writing direction.

6,769 rules
9,252 selectors
16.7k declarations
3,370 unique declarations
44 media queries
36 unique colors
50 unique background colors
46 unique font sizes
39 unique z-indices

https://t.co/qyl4Bt1i5x


PWA *incrementally generates* ~30 KB CSS that handles all themes and writing directions.

735 rules
740 selectors
757 declarations
730 unique declarations
0 media queries
11 unique colors
32 unique background colors
15 unique font sizes
7 unique z-indices

https://t.co/w7oNG5KUkJ


The legacy site's CSS is what happens when hundreds of people directly write CSS over many years. Specificity wars, redundancy, a house of cards that can't be fixed. The result is extremely inefficient and error-prone styling that punishes users and developers.

The PWA's CSS is generated on-demand by a JS framework that manages styles and outputs "atomic CSS". The framework can enforce strict constraints and perform optimisations, which is why the CSS is so much smaller and safer. Style conflicts and unbounded CSS growth are avoided.
#рдЬреНрдпреЛрддрд┐рд╖_рд╡рд┐рдЬреНрдЮрд╛рди #рдордВрддреНрд░_рд╡рд┐рдЬреНрдЮрд╛рди

рдЬреНрдпреЛрддрд┐рд╖рд╛рдЪрд╛рд░реНрдп рдЕрдХреНрд╕рд░ рдЧреНрд░рд╣реЛрдВ рдХреЗ рджреБрд╖реНрдкреНрд░рднрд╛рд╡ рдХреЗ рд╕рдорд╛рдзрд╛рди рдХреЗ рд▓рд┐рдП рдордВрддреНрд░ рдЬрдк, рдЕрдиреБрд╖реНрдард╛рди рдЗрддреНрдпрд╛рджрд┐ рдмрддрд╛рддреЗ рд╣реИрдВред

рд╡реНрдпрдХреНрддрд┐ рдХреЗ рдЬрдиреНрдо рдХреЗ рд╕рдордп рдЧреНрд░рд╣реЛрдВ рдХреА рд╕реНрдерд┐рддрд┐ рд╣реА рдЙрд╕рдХреА рдХреБрдВрдбрд▓реА рдмрди рдЬрд╛рддреА рд╣реИ рдЬреИрд╕реЗ рдХрд┐ рдлрд╝реЛрдЯреЛ рдЦреАрдВрдЪ рд▓рд┐рдпрд╛ рд╣реЛ рдФрд░ рдПрдбрд┐рдЯ рдХрд░рдирд╛ рд╕рдореНрднрд╡ рдирд╣реА рд╣реИред рдЗрд╕реЗ рд╣реА "рд▓рдЧреНрди" рдХреБрдВрдбрд▓реА рдХрд╣рддреЗ рд╣реИрдВред


рд▓рдЧреНрди рдХреЗ рд╕рдордп рдЧреНрд░рд╣реЛрдВ рдХреА рдЗрд╕ рд╕реНрдерд┐рддрд┐ рд╕реЗ рд╣реА рдЬреАрд╡рди рднрд░ рдЖрдкрдХреЛ рдХрд┐рд╕ рдЧреНрд░рд╣ рдХреА рдКрд░реНрдЬрд╛ рдХреИрд╕реЗ рдкреНрд░рднрд╛рд╡рд┐рдд рдХрд░реЗрдЧреА рдХрд╛ рдирд┐рд░реНрдзрд╛рд░рд┐рдг рд╣реЛрддрд╛ рд╣реИред рд╕рд╛рде рд╕рд╛рде рджрд╢рд╛рдПрдБ, рдЧреЛрдЪрд░ рдЗрддреНрдпрд╛рджрд┐ рдЪрд▓рддреЗ рд╣реИрдВ рдкрд░ рд▓рдЧреНрди рдХреБрдВрдбрд▓реА рдХрд╛ рд░реЛрд▓ рд╕рдмрд╕реЗ рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╣реИред


рдкреГрдереНрд╡реА рд╕реЗ рдЕрд░рдмреЛрдВ рдЦрд░рдмреЛрдВ рджреВрд░ рдпреЗ рдЧреНрд░рд╣ рдЕрдкрдиреА рдКрд░реНрдЬрд╛ рд╕реЗ рдкреГрдереНрд╡реА/рд╡реНрдпрдХреНрддрд┐ рдХреЛ рдкреНрд░рднрд╛рд╡рд┐рдд рдХрд░рддреЗ рд╣реИрдВ рдЬреИрд╕реЗ рд╣рдорд╛рд░реЗ рд╕рдмрд╕реЗ рдирд┐рдХрдЯ рдЧреНрд░рд╣ рдЪрдВрджреНрд░рдорд╛ рдЬреЛрдХрд┐ рдЬрд▓ рдХрд╛ рдХрд╛рд░рдХ рд╣реИ рдкреГрдереНрд╡реА рдФрд░ рд╢рд░реАрд░ рдХреЗ рдЬрд▓рддрддреНрд╡ рдкрд░ рдкреВрд░реНрдг рдкреНрд░рднрд╛рд╡ рд░рдЦрддрд╛ рд╣реИред
рдкреВрд░реНрдгрд┐рдорд╛ рдореЗрдВ рдЙрдЫрд╛рд▓ рдорд╛рд░рддрд╛ рд╕рдореБрджреНрд░ рдХрд╛ рдЬрд▓ рдЗрд╕рдХреА рдКрд░реНрдЬрд╛ рдХреЗ рдкреНрд░рднрд╛рд╡ рдХреЛ рджрд┐рдЦрд╛рддрд╛ рд╣реИред


рдЕрдорд╛рд╡рд╕реНрдпрд╛ рдореЗрдВ рдКрд░реНрдЬрд╛ рдХрд╛ рд╕реНрддрд░ рдХрдо рд╣реЛрдиреЗ рдкрд░ рд╡рд╣реА рд╕рдореБрджреНрд░ рд╢рд╛рдВрдд рд╣реЛрдХрд░ рдкреАрдЫреЗ рдЪрд▓рд╛ рдЬрд╛рддрд╛ рд╣реИред рдЬрд┐рд╕реЗ рдЬреНрд╡рд╛рд░-рднрд╛рдЯрд╛ рдХрд╣рддреЗ рд╣реИрдВред рдЗрд╕реА рддрд░рд╣ рдЕрдиреНрдп рдЧреНрд░рд╣реЛрдВ рдХреА рдКрд░реНрдЬрд╛ рдХреЗ рдкреНрд░рднрд╛рд╡ рд╣реЛрддреЗ рд╣реИрдВ рдЬрд┐рдиреНрд╣реЗрдВ рдпрд╣рд╛рдВ рд╕рдордЭрд╛рдирд╛ рд╕рдВрднрд╡ рдирд╣реАрдВред
рдЪрдВрджреНрд░рдорд╛ рдХреА рдпреЗ рдКрд░реНрдЬрд╛ рд╢рд░реАрд░ рдХреЛ (рдЕрдЧрд░ рдЦрд░рд╛рдм рд╣реИ) water retention, рдмреИрдЪреЗрдиреА, рдиреАрдВрдж рди рдЖрдирд╛ рдЖрджрд┐ рд▓рдХреНрд╖рдг рджрд┐рдЦрд╛рддреА рд╣реИ


рдордВрддреНрд░ рдХреНрдпрд╛ рд╣реИрдВ-
рдордВрддреНрд░ рдЗрди рдКрд░реНрдЬрд╛рдУрдВ рдХреЗ рд╕рдЯреАрдХ рдкреНрд░рдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рдкрд╛рд╕рд╡рд░реНрдб рд╣реИрдВред рдЬрд┐рдирдХреЗ рдЬрдк рд╕реЗ рд╕рдВрдмрдВрдзрд┐рдд рдЧреНрд░рд╣ рдХреА рдКрд░реНрдЬрд╛ рдХреЛ рдЬрд╛рддрдХ рдХреА рдКрд░реНрдЬрд╛ рд╕реЗ рдХрдиреЗрдХреНрдЯ рдХрд░рдХреЗ рдЙрди рдЧреНрд░рд╣реЛрдВ рдХреЗ рджреБрд╖реНрдкреНрд░рднрд╛рд╡ рдХреЛ рдХрдо рдХрд┐рдпрд╛ рдФрд░ рд╢реБрдн рдкреНрд░рднрд╛рд╡ рдХреЛ рдмрдврд╝рд╛рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред