Learn Webflow in 16 Minutes (Crash Course)
Summary
TLDRThis video tutorial offers a quick and insightful introduction to Webflow, a web design tool, in just 16 minutes. The presenter begins by explaining the fundamental 'box model' concept, demonstrating how everything on the web is structured as boxes within boxes. Using the Apple website as an example, the presenter showcases how HTML and CSS work together. The tutorial then shifts to Webflow, starting with basic styling of the main 'body' box, progressing through navigation bar creation, and constructing page sections using div blocks. Techniques like flexbox, container usage, grid system, and CSS styling for text and images are illustrated. The video also touches on more advanced features like responsive design and animations, concluding with an encouragement to explore their full Webflow course for deeper learning.
Takeaways
- 📦 Understanding the Box Model: The foundational concept of web design is the box model, where everything on the web is essentially boxes nested within other boxes.
- 🌐 Webflow Introduction: The video provides a quick start guide to using Webflow, a powerful web design tool.
- 🎨 Styling with CSS: The script explains how to use CSS (Cascading Style Sheets) to style web elements like buttons, specifying their appearance and interaction.
- 🖼️ Inspecting Elements: The video demonstrates using the inspect tool in a browser to view and understand the structure and styling of a web page.
- 🔳 Creating and Styling Div Blocks: The basic building blocks of a webpage in Webflow are div blocks, which can be styled and named for easy reference.
- 🔧 Flexbox Layout: The video introduces the use of Flexbox for layout, which allows for easy alignment and distribution of items within a container.
- 🔘 Setting up Container Width: To ensure content is viewable and doesn't require horizontal scrolling, the script explains setting a maximum width for containers.
- 📝 Typography and Text Styling: The importance of typography is highlighted, with instructions on changing font, size, weight, and text case for headings.
- 🚗 Adding Visual Elements: The process of adding images and other visual elements to a webpage is demonstrated, including aligning and sizing them appropriately.
- 🔽 Creating Grid Layouts: The video shows how to create a three-column grid layout, a common design pattern for structuring content.
- 🎥 Page Load Animations: To enhance user experience, the script covers adding simple animations that trigger upon page load, making the webpage more engaging.
Q & A
What is the box model concept explained in the video?
-The box model concept refers to the idea that everything on the web is structured as boxes within boxes, with elements like buttons, text, and images nested inside each other, forming the layout of a webpage.
Why is it important to understand the box model before using Webflow?
-Understanding the box model is crucial because it helps in grasping how web pages are structured and styled, allowing for better design and layout control when building websites in Webflow.
What is the first step demonstrated in Webflow after explaining the box model?
-The first step demonstrated in Webflow is defining the main box or 'body' of the website, which involves setting a background color and font style to establish a base for the page's design.
How does the presenter use the styling panel in Webflow?
-The presenter uses the styling panel in Webflow to select and modify the appearance of webpage elements, such as changing background colors, fonts, and layout properties.
What is a 'div block' in Webflow, and how is it used in the video?
-A 'div block' in Webflow is a container element used to structure and organize content on the webpage. In the video, div blocks are used to create different sections of the page, like the navigation and content areas.
How does the presenter create a navigation bar in Webflow?
-The presenter creates a navigation bar by adding a div block, naming it 'nav', and then inserting elements like a menu, logo, and search icon within it. The layout is then adjusted using flexbox to distribute the elements evenly.
What is the purpose of using flexbox in the navigation bar's design?
-Flexbox is used in the navigation bar's design to provide a flexible and efficient way to layout, align, and distribute space among items within a container, even when their size is unknown or dynamic.
How does the presenter manage the layout and spacing of elements in Webflow?
-The presenter manages layout and spacing by adjusting margins and paddings to ensure elements are evenly spaced and aligned, and by using layout features like flexbox and grid to control the arrangement of components.
What method does the presenter use to highlight the 'S-Class' in the heading?
-The presenter uses a larger font size and a block display style to highlight 'S-Class' in the heading, making it stand out as a prominent element on the page.
What is the significance of the page load animation demonstrated at the end of the video?
-The page load animation is significant as it enhances the user experience by creating a visually appealing entrance for elements on the webpage, making the site more interactive and engaging for visitors.
Outlines
🚀 Introduction to Webflow and the Box Model
The video begins by introducing Webflow as a powerful tool for web design and development. Before diving into building a webpage in Webflow, the concept of the 'box model' is explained. The box model is fundamental to understanding web design, as it reveals that all elements on a webpage are essentially boxes within boxes. This concept is demonstrated using the Chrome Inspect tool on the Apple website, highlighting how HTML and CSS work together to structure and style web elements. The importance of understanding these boxes, their names (HTML tags), and their styles (CSS) is emphasized as crucial for web development.
🎨 Setting Up and Styling the Main Page
This segment guides the viewer through the initial steps of setting up a webpage in Webflow, starting with styling the main 'body' box to have a black background and white text in a specific font. The video then introduces 'div blocks' as the basic building elements in Webflow, explaining how to create a navigation bar by inserting images for a menu, logo, and search icon, and adjusting their layout using 'flexbox'. The concept of internal and external spacing within boxes is explained, demonstrating how to ensure elements are evenly spaced and correctly sized within the navigation bar.
📐 Constructing the Content Layout
The focus shifts to creating the content layout beneath the navigation bar, including handling text styling and image insertion. The presenter explains how to use headings to create a prominent title, adjust typography settings for visual appeal, and manipulate text styles for emphasis. A crucial part of this section is introducing the 'grid' feature to organize content into columns, demonstrating with a three-column layout. This part of the tutorial covers styling individual content boxes within the grid, adjusting their spacing, and applying borders to distinguish sections, except for the last box which is styled differently to omit the border.
✨ Adding Finishing Touches and Animations
In the final segment, the presenter adds finishing touches to the webpage, focusing on aesthetic enhancements and animations to improve user engagement. An introduction to 'interactions' in Webflow shows how to create page load animations that make elements appear sequentially, enhancing the visual flow of the page. The segment covers setting initial states for elements to be invisible and then animating them to full opacity, creating a dynamic loading effect. The video concludes by encouraging viewers to explore more about Webflow through a comprehensive course, highlighting the speed and ease with which a professional-looking webpage can be created using the platform.
Mindmap
Keywords
💡Webflow
💡Box Model
💡HTML
💡CSS
💡Flexbox
💡Div Block
💡Typography
💡Grid
💡Interactions
💡Responsive Design
Highlights
Webflow is a powerful tool for web design, allowing users to build web pages efficiently.
Understanding the box model is crucial before diving into Webflow, as it forms the basis of web design.
The concept of boxes within boxes is fundamental to web design, with HTML elements acting as boxes and CSS defining their style.
Webflow allows for quick customization of web pages, with the video demonstrating the creation of a page in just 16 minutes.
The body tag is considered the main box of a website in Webflow, and styling it sets the foundation for the entire page.
Webflow's interface enables easy manipulation of elements, such as changing the background color and font styles.
Div blocks, or 'div' elements, are the basic building blocks for structuring content on a web page.
Flexbox is a powerful layout tool in Webflow that allows for dynamic positioning and distribution of elements within a container.
The box model in Webflow includes settings for the space within and outside of boxes, allowing for precise control over layout and spacing.
Webflow provides an intuitive way to manage and insert assets like images and icons directly into the design interface.
Styling elements in Webflow is straightforward, with users able to quickly adjust properties like font size, color, and line height.
Webflow's grid element is a powerful tool for creating complex layouts with ease, as demonstrated by the creation of a three-column grid.
Interactivity and animations can be added to web pages in Webflow to enhance user experience and engagement.
Webflow offers a comprehensive course for those interested in learning more about its capabilities and best practices.
The video provides a fast-paced yet thorough introduction to Webflow, showcasing its potential for rapid web design and development.
Transcripts
so you've heard webflow is cool and
you're considering learning it well
on this video i'm going to give you the
basic and going to build
this page in only 16 minutes let's do
this
[Music]
all right let's get started but before
we jump into webflow i actually want to
explain a quick
concept that is super super important
before you dive into webflow so that you
understand what you're even doing
within webflow so the concept is called
the box model and here's basically what
i want to show you everything on the web
is actually boxes within boxes and
let me show you how it looks so here's
the apple website i'm going to click
i'm on chrome here i'm going to click
inspect which basically going to show
you the code for this website
so what you can see here on the top is
called html and that's the code for this
and you can see as i move through this
you actually see the boxes on this page
and it's basically just
boxes nested within boxes the button
here as you can see is a box and it's
called
a button that's the name of this box and
by giving it a style a name
basically that's what you see down here
that's the css basically that's the
style
the name defines how does it look like
so what's the font size what's the
background of this
exactly how this button looks because
it's called a
button so this is in like 30 seconds
70 percent of what you need to know
about building for the web it's
basically boxes within boxes within
boxes
these boxes have the name and the name
the style basically defines how they
look like and how they interact with one
another
now that you know this let's jump right
into webflow so
the first thing that i want to do here
before i even
start throwing things on the page is
actually define the main main box here
so as you can see we have here
body that is the main box of the website
selected and i'm going to give it
a style so that we can define it
basically what i want to do is give it a
background of black because the whole
page is going to be black
and i'm going to give it the basic kind
of fonts so that the whole font is going
to inherent
that font i'm going to use that so it's
going to be white and it's going to be
this
specific font so let's start with it on
the right here
we have the styling panel which
basically means for this specific style
how is it going to look like now i'm not
going to give it
i'm just going to click here and select
the body tag because
that's what we're styling right now and
i'm going to scroll down into a
background because basically i want to
choose
like a black background and you can see
that we've changed
the background here because we're
editing this box the body
and the next thing i want to do is in
the typography section i'm going to
choose
white because i want white text and i'm
going to choose
monster up font i think i don't know
let's start with that
all right so let's get started what do i
have here basically
i have here two kind of sections and i'm
not
building this properly as i would if
this would be a real website i just want
to show you the main
concepts here so basically there's two
things here there's the navigation
and there's the rest of the content so
let me just jump
throw in kind of like two the mace the
basic
uh boxes are called div blocks so i'm
just going to throw in two
div blocks one and then two the first
one is going to be
the navigation and i'm going to give it
a name here i'm going to call it
nav just so that now i can style
and refer to that style as we said now
it's a box with a name so that we can
give it a stop
now basically we have three things in it
we have
this hamburger menu the logo and the
search button
and i've went ahead and uploaded here
into the assets panel
a bunch of assets and so let's just
throw them inside right let me
let me throw in the menu here
and then i'm going to throw in the logo
and then i'm going to throw in the
search icon
just throwing in three images into this
box now as you can see
they're not sized properly and they're
just stacked one next to another from
left to right because that's the default
on the web we read from left to right so
that's how
things are stacked now one thing i want
to do is i want to make sure that they
are
you know uh distributed from left
center to the right and so the way that
i'm going to do this
is by changing the layout here of the
nav box
from the default which is called block
into something that's called a flexbox
it's something super super powerful i'm
not going to dive super
into this right now but by choosing this
now i can
change the justification of all the
content that's
in this box so left center right and we
also have here
space between which basically means it's
going to just space the elements
equally and that's actually good because
that's one on the left one
in the center and one in the right now
one thing that we know that we want
is and we can see it here we want kind
of equal spacing
right from the top from the bottom from
all the sides so
we're gonna go back here we have this is
called the box model right we talked
about the boxes so this is the space
within the box in the space
outside of the box so let me just pull
in and i'm gonna pull in
holding the option and shift key so that
i can pull in
from all sides at the same time i'm
going to choose 20 here so now you can
see we have
20 pixels on each side of this box kind
of spacing out
things evenly so that's good now the
only thing i want to do is to
change the sizing of this so i'm going
to add names for all of these elements
so that i can properly refer to them i'm
going to call this
menu i'm going to call this logo
and i'm going to call this search and
the only thing that i'm going to change
right now is actually the width of so
the size of this element this one let's
turn it into 30 pixels this one let's
see
50 pixels and this one maybe 25 pixels
again i'm just doing this very very fast
so we can see
that's looks pretty much okay now
next thing that we have here now for
this box
one thing that i want to do is i want to
make sure that it's not
too wide and you can see here that the
text is actually
you know not getting from edge to edge
and the reason is
that because we have wide screens these
days we have to keep the content
centered so that people don't have to
kind of move their head from side to
side
so we're using something that's called
container by container basically what we
mean is for this
box let me call this container container
container we basically set a maximum
width so if we're on a very wide screen
we don't want it to be too wide so let
me put that at 1100 pixels
just make sure that it's centered by
clicking this center button
so now we have this element centered now
we have basically two things here we
have this um
let's start with this title all new
s-class
so i'm going to drop in a title or a
heading
as it's called here so from the
typography menu from the add menu
typography
i'm going to add a heading and i'm going
to call this
the all new s-class
s class
and basically now we have a heading
because it's a heading it's already bold
and kind of
it already has some style but that's
definitely not the style that we want so
we're going to edit
this tag h1 tag for the heading and
we're going to
let's start changing the stuff here in
the typography let's change the font
to this what's the name of the font
comment
something uh we're gonna make it
normal not bold we're gonna make sure
that it's centered
we're gonna make it i don't know a
little bigger
and uh also let me look at this
yeah we want this to be all caps all in
upper capital letters so we have here
all caps
and that looks good now the only thing
is that the
s class is way bigger than the rest of
it it's still one title
and it's it makes sense to use one
element so that google knows
this is one title but we do want to give
this
as class a different style so by
selecting this you'll see we have the
brush
icon here which wraps it with another
style
so this one i'm going to call this big
h1 h1 stands for the big heading and i'm
going to make this
really really big and also i don't want
them to be on the same
on the same line i want this to take up
a whole new line
so i'm going to change the display here
into block block means this takes
the whole line from top to bottom
they're
a little bit too close to one another so
i'm also going to add a top
margin and now this looks pretty good
kind of how much how i want it all right
so
we have the navigation we have the
container within we have the h1
now we want to bring in the image of the
car so let me just
throw in the image of the car
actually from the assets panel we're
just going to throw this in
after the heading and uh yeah
boom it's right actually on top of it i
didn't have to do anything
oh yeah but because i took up this
because this big h1 is actually moving
up with the margin it's actually
already on top of it now this happens
because this is actually a png
so with a transparent background so when
it's on top
of the text it actually looks pretty
good so i don't even have to do anything
i thought i have to reposition so what
do we have to do right now we have to
create this
three column grid here i'll do that by
using an element here that's called the
grid that's a pretty powerful
pretty powerful element i'm going to put
it after
the image and i'm going to edit it i'm
going to make sure i'm going to add a
column
because it's three columns i don't need
a second row so i'm going to delete this
row
and basically we have now a three column
grid now basically you can see from the
design they actually all look the same
so we're going to create one box and
then we're going to basically duplicate
it three times
so let me throw in a div block into this
grid and of course i'm going to give it
a name so i can refer to it so i'm going
to call this
let's say feature box feature box
and in this feature box let me throw in
a title because you know we have some
title here
for example luxury all right let me copy
that
and put it here obviously it's not the
style that we want so i'm going to go
here and
edit this style i'm going to change the
font
into something thin or light
and maybe a little bit bigger
that looks all right and below it
i'm gonna put in a little bit of a text
block
actually within this feature box i'm
going to put it underneath it
this text should probably be bigger
so i'm going to give it a style and i'm
going to call this feature
text and i'm going to make it
maybe 18 pixels and i'm going to make
the line height a little bit bigger
all right now this looks alright
let me duplicate this feature box three
times so now we have three columns here
let's change the text pretty much so we
can it looks as if
we've changed the text here
and the only thing that we have left
is actually these lines
so and we need a little bit more spacing
here so let's
check the feature box and let's add a
little bit of
margin or padding from the inside of the
box let's say 15 pixels from each side
now the boxes are
better better spaced i think we'll
actually probably add a little bit more
now remember that we said this is a box
so because this is a box we can actually
if we scroll down
all the way here we can actually give
the box a border so in this case we only
want to give a border on the right side
so we're going to give it one pixel
we're going to make it white
and now we have because these are all
the same style
they're getting all the same you know
features
so all of them got the line on the right
but actually we do not want this last
one
see the last one we don't want it to
have a line so
let's add this last block only this last
feature box we're going to edit an
additional style to make it
different we're going to call this last
box so it's getting all the properties
from feature box
but some of the things are going to be
different so we're going to keep the
spacing the same
but we're going to remove this
border so now all the boxes have this
white line
except for the last one now basically we
can finish
here but let's just make it fancier let
me add some kind of an interaction or
animation just to make it a little bit
fancier
let's go here into the interaction panel
on the right and let's add a page load
animation so we have triggers
that the page triggers one of them if
i'm going to edit
is page load and this is basically
an animation or interaction that happens
after the page starts loading or
finishes loading
let me add a new animation here and
let's call this loading animation
now what i want to do is i want to make
all of these elements appear nicely one
after another so let's start by actually
saying let's hide them and then show
them when the pages load
when the page loads so i'm going to
start by choosing the image and i'm
going to choose here i can animate all
of these different properties
i'm going to choose opacity i'm going to
turn this down into 0 i'm going to
trigger here something that's called set
as initial state so
we're going to start off from zero
and then let me duplicate this element
duplicate this and then when the pages
when the page loads we're gonna bring it
back into a hundred
so this is what's going to happen now
let's do this also for the feature boxes
so i'm going to select this one and
start by hiding it set its initial state
and then let's duplicate this and this
one i want
this to happen after only after the car
loads
this is going to show so i'm going to
bring back the opacity let's trigger
that so now
car shows and then this feature box show
let's do this for these two
as well start by hiding them
zero opacity as an initial state and
then duplicating them
and then bringing back after the feature
box
animate into 100
let's do this for the last one as well
start with
opacity of zero
as an initial state duplicate and
bam bring back into 100
let's play this boom boom boom boom
and now when we're loading this page
it's going to animate
in all right so that was it
of course this was very very very fast
and of course there's
so much more depth into webflow but i
wanted to show you
what you can do really really fast if
you're interested about learning more
check out the link
in the description we have of course a
full-on course on webflow where we go
really deep hope to see you with us and
see you on the next
video bye
Ver Más Videos Relacionados
Layout Part 1A - Motivation, Divs & Spans Review
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 4
CSS Course | Make a Glassmorphic SignUp Page using Basic CSS | Mini Project | Web Development 23
Inline Vs Block Elements | Div & Span Tags Explained | Frontend Bootcamp Hindi | Ep.03
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 9
Responsive HTML Table With Pure CSS - Web Design/UI Design
5.0 / 5 (0 votes)