Chapter 2: The Web in a Nutshell
Unlike many other website builders, learning to design and develop websites in Webflow efficiently and with confidence requires a good understanding of how modern websites are structured. In fact, it may even be argued that it is a prerequisite to learning Webflow. Spending some time grasping these foundational concepts will help you unlock the true power and unique value of Webflow.
In this chapter, we'll take a closer look at two of these foundational concepts. First, we'll explore the CSS box model, a set of rules and constructs that govern how websites are structured. Understanding the box model will give you an appreciation for how websites are laid out and why, all of which will directly help you in understanding how Webflow works.
With some basic understanding of the box model in place, we'll then take a closer look at two of the main technologies that underpin the entire visual web: Hypertext Markup Language (HTML) and Cascading Stylesheets (CSS). We'll cover how HTML is used as the actual building blocks of websites and how CSS is used to stylize them.
If a website were a wall, HTML would represent the actual bricks that construct it, CSS would govern the aesthetic look and feel of the individual bricks, and the CSS box model would be the set of rules that bind it all together.
If you're an absolute beginner in these topics, please note that this chapter is not an exhaustive overview of HTML and CSS, nor is it meant to be. We'll be covering the bare essentials that will set you up for success in Webflow. If you're already very comfortable with HTML and CSS, you may choose to skip straight to the next chapter.
Specifically, in this chapter, we'll cover the following topics:
- The box model
- The basics of HTML and CSS
The box model
Before beginning to build websites in Webflow, it is crucial to get some basic understanding of the box model. Indeed, it is a concept that underpins how all websites are structured, and in my experience, has been the main point of friction for people who were looking to get started with Webflow without prior web development experience.
The basic implications of the box model (also referred to as the CSS box model) can be summarized in the following simple directives:
- Web pages are made out of boxes of content.
- Each box consists of a variety of different pieces that make up the box. We will look at this in more detail in The anatomy of a box section later in this chapter.
- Some boxes can have other boxes inside of them, though it's not necessary.
- Boxes can be stacked on top of each other, vertically above or horizontally next to each other.
- Boxes also generally understand their placement in relation to the boxes around them, so changing one box's placement or inner dimensions may affect other boxes.
- Boxes have implicit names but can also be named explicitly in order to aid in identifying individual boxes.
And that's it.
There's obviously a lot more nuance to these rules, but that's essentially the high-level breakdown. Now let's examine how these boxes play out in practice.
Boxes in boxes
Take a look at the following screenshot from www.cnn.com. Do you notice any logical groupings of content into boxes? Take a minute or two to identify as many as you can.
Figure 2.1 – Screenshot of the CNN home page
I've included my take on it in Figure 2.2:
Figure 2.2 – The boxes of the CNN home page
Did this surprise you?
There are many ways in which boxes can be arranged to lay out content, and my attempt is only my best guess as to how the developers at CNN went about it. For instance, if you were to take a look at the navigation menu at the top of the page, the entire menu is a single rectangular box. Inside of it, the logo and the individual page links make up other boxes that are laid out side by side. At the far-right end of the menu are some utility links, including the Profile, Search, and Language options. These are inside their own boxes. Together, these utility links could make up a collective box of their own.
The rest of the page itself is then broken up into roughly three columns of content, each column representing its own box. Together, the three columns find themselves in a larger box. The content itself is also built up with images and text, again (you guessed it) bounded in their own boxes.
In fairness, a page like the CNN website may be an easy one to demonstrate boxes of content; its visual appearance immediately conveys a structured and rigid feel.
Let's take a look at another example: https://www.meta-craft.com/. At first glance, this example may look less boxy.
Figure 2.3 – The website of product development agency Meta Craft
Take a minute or two to slice this section of the web page up into smaller boxes. How difficult was it?
I've included my take on this in Figure 2.4:
Figure 2.4 – Possible boxes for the Meta Craft home page
And, again, the actual separation of the content into boxes may differ, but the central point is the same: websites are made up of many boxes of content, no matter how non-box-like they may appear.
But how does all this play out in practice and what does it mean for you?
Implications for designers
If you're a web designer and this is your first time hearing about the box model, then what you've read so far may have caused you to reflect on your own design process. If not, consider the following few points.
At the time of writing, the most common user interface design tools include the likes of Figma, Sketch, and Adobe XD. If you're at all involved in website or mobile app design, it's very likely that you're using these tools in your daily work.
The main commonality between all these tools (and many other similar ones) is their infinite canvas on which you can add objects to your heart's desire, with hardly any constraints. Even though modern features such as Smart Layout in Sketch or Auto-Layout in Figma introduce helpful constraints that have been welcomed by designers, they still are not a true reflection of the box model, nor are they intended to be.
For example, in Figure 2.5, we see a glimpse of Figma's infinite canvas, which allows the designer to create or add a large number of assets and screens with hardly any restrictions on orientation or layout:
Figure 2.5 – Figma's infinite canvas
In fact, so far, the tools are largely agnostic to any specific rules, leaving it to the designer to decide what is necessary based on the needs at hand.
And this is why, I believe, designers can have a tough time switching to a tool like Webflow. Whereas Figma, Sketch, and Adobe XD allow freeform design, Webflow, on the other hand, rigidly sticks to the box model. It's a shift in paradigm that's crucial to make in order to be successful in Webflow.
But this is also where Webflow shines and why it can be such a powerful addition to your design and development process. Specifically, designing in Webflow will help you learn the language of how websites are built, which in turn, will flow back into your design process. Going forward, any designs you create in your favorite UI design tools can then be tempered by the constraints that the box model sets. In effect, you'll start thinking like a developer. And if you're ever collaborating with other developers, you'll be able to articulate your design decisions using language that they are familiar with.
Crucially, Webflow is not just another design tool. With it, you are in fact building the actual web page in a visual way. Furthermore, unlike most design software such as Sketch and Figma, any designs you create on a page in Webflow affect all screen sizes simultaneously, making it a powerful way to build websites responsively.
The anatomy of a box
We've talked a lot about boxes and how they make up the overall look and feel of a website. But now let's take a single box and examine it up close, X-ray style.
Figure 2.6 – The anatomy of a box as per the standard CSS box model
Let's break the box down into its individual parts:
- Content: This constitutes the actual content that is meant to be displayed on the website and can take the form of multiple types, including text, images, videos, embedded media, and so on.
- Padding: This refers to the space between the content and any border around it. Padding can be defined on all four sides of the content – left, top, right, and bottom.
- Border: This wraps around the content and the padding. If defined, the border can have a number of different styling attributes applied to it, including how wide it is, what color, whether it is a solid line or dashed, and more.
- Margin: This refers to the outer space between the box and the rest of the content on the web page. Like padding, margins can be defined on all four sides of the box.
When content is added to a page, unless widths and heights are explicitly stated, the content will try to fill any provided space. Furthermore, according to the standard CSS box model rules, any padding, borders, and margins added to the content are then added to the size of the content in order to calculate the total size of the entire box that it represents.
Important Note
If you're thinking that the standard CSS box model rule of making padding, border, and margin sizes additive to the size of the content makes things a little odd, you're not alone. The alternate CSS box model was created in response to this and states that the size of the content is inclusive of the size of the padding and border. Margins will still need to be added to the content width. In this book, we will be using the standard CSS box model exclusively, but if you're interested in learning more about the alternate model, read this: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model.
We've been talking a lot about boxes of content and how they can be placed, positioned, and stylized, including their inner components, but how are all these different attributes actually defined?
Turns out, boxes are mostly just abstract models. The real technologies that help give them form and structure are HTML and CSS. In the next section, we'll take a closer look at these and give a basic foundation of how they work so that you're set up for success in Webflow.
The basics of HTML and CSS
At their core, HTML and CSS are the main technologies and building blocks of websites. Whereas HTML is a markup language used to define what specific content types are being displayed, called elements, CSS is the language that then defines what shape or form, called attributes, that content appears in on the page.
If you were to describe a face in HTML and CSS, the former would enumerate elements such as eyes, nose, and lips, and the latter would list out attributes such as blue, pointed, and thin.
One of the challenges for newcomers to HTML and CSS is simply knowing what types of elements can be defined and what attributes can be applied to them. Indeed, over the years, the lists of both have only grown.
While doing an exhaustive overview of all that HTML and CSS have to offer is far beyond the scope of this book, in this section, we'll cover some basic rules, elements, and attributes that will hopefully help you to grasp how websites are generally built. The hope, then, is that this will help demystify how Webflow allows you to control these items.
HTML
If you ever look at a page of HTML, you'll find it is made up of a series of elements that come together to define the content that appears on a web page. As such, it is often referred to as a markup language, that is, it's used to lay out and format elements on the page. In the context of websites, these elements can include paragraphs, links, headings, images, and more.
In Webflow, all HTML elements will be visible in the Navigator panel on the left side of the screen, which we'll see more of in Chapter 3, Setting Up Your First Project.
In addition, HTML also uses special elements that define whether a group of elements belong together in a defined section of the page. For instance, a group of paragraphs and images can come together to form the BODY of the page. Likewise, a group of links and text can form the FOOTER of the page, too.
All elements, whether grouped or not, are defined by tags. Most tags have opening <TAG NAME> and closing </TAG NAME> brackets around the element that they are defining. Here is a simple example:
<p>The quick brown fox jumped over the lazy dog</p>
This piece of HTML is defining a paragraph element by wrapping a piece of text in between an opening <p> tag and a closing </p> tag. This paragraph element, then, is essentially a box of content. By default, it will have no border, no padding, and no margins defined.
By default, most elements are displayed as what are called block-level elements while some others are displayed as inline-block elements. It is worth knowing the difference between them.
Block-level elements occupy a block of space of their own that is not shared with any other blocks. When added to a page, they automatically start on a new line and try to fill up the entire horizontal space available while pushing other surrounding content underneath. Block-level elements are usually also given dimensions for their widths and heights. In addition, they can have top and bottom margins defined.
Here are some of the common block-level elements that you will likely become familiar with when building websites:
- h1, h2, h3, h4, h5: These define the main header sizes that will be found on the web page, from largest to smallest.
- body: This constitutes the main area of the web page wherein most of the visible content will be located. This is where most styling properties are also defined such that they get passed down to any children elements, that is, any elements that are nested inside the body.
- p: These represent paragraph elements, which are effectively the main pieces of text on the page. As we've already seen, anything in between an opening <p> tag and closing </p> tag is considered a single paragraph element. So, if you wanted to create a second paragraph of text, you would have to start a new paragraph element.
- div: Beginners usually stumble over this element. A div element is essentially an empty container that is used to group together any number of other elements. For example, if you wanted to group an <h1> heading, three <p> paragraphs, along with an <img> image, then you could wrap them all up in between an opening <div> tag and a closing </div> tag. You would then be able to manipulate the div element to affect how the grouped elements work together.
We could keep going but, again, the intent here isn't to be exhaustive. Rather, for now, it's good enough to understand the general gist of how block-level elements work.
In contrast, inline-block elements behave differently. These constitute elements that do not start on a new line. Furthermore, they take up only as much space as they need and generally do not have top and bottom margins defined.
Common examples of inline-block elements include the following:
- Hyperlinks, defined by the <a> and </a> opening and closing tags, respectively.
- <span> elements, which are groups of text that are isolated usually for the purpose of adding special styling or effects.
- img elements, which can be placed almost anywhere on the page and allow text to flow around them.
One last thing to note is that HTML allows you to forcibly make block-level elements behave like inline elements and vice versa. Don't let this confuse you too much. Once we start developing your first website in Webflow in Chapter 4, Building Above the Fold, you'll see how easy and useful that functionality will be.
So, putting a number of these elements together, here's what a simple HTML snippet could look like:
<html>
<body>
<h1>Welcome to my Awesome Site!</h1>
<div>
<h2>A collection of links and quotes that inspire me </h2>
<img src="welcome_image.png" />
<p>Take a look around and I hope you see something that inspires you too.
</p>
</div>
</body>
</html>
All HTML documents are required to open with the <html> tag and close with the </html> tag. These tags essentially let the web browser know that everything enclosed between the tags is meant to be interpreted as HTML.
Inside, we see a <body> section that contains an <h1> header, followed by a <div> section, which encloses more content inside of it. Note that almost every tag that is opened is eventually closed off.
Don't worry if all this still feels a bit tricky to grasp. Indeed, there are many more nuances we haven't covered yet.
Tip
If you're still curious about how HTML looks, there are two ways you can quickly explore this.
The easiest way is to open a website in the Chrome web browser. Then, right-click anywhere on the page and select the option called Inspect. This will reveal the underlying HTML code that marks up the page. You can do this in other browsers too, but the steps are a little more involved. We'll leave it to you to look up resources on how to achieve it.
Secondly, you can open up a new blank document in Notepad on Windows or an editor such as TextEdit on Mac. Type anything in, such as, Hello world!. Then save the file in the format filename.html. Next, open up the file with your favorite browser. You should notice it appear. You can now inspect the HTML code of this page as you did in the previous paragraph.
Building in Webflow circumvents the need to code any HTML by hand as it will generate all the required code behind the scenes for you. As we dive deeper into practical examples over the next chapters, you'll be introduced to more characteristics of HTML and how Webflow can be used to quickly and visually manipulate them all.
And now that we've taken a brief look at how HTML dictates what content elements are included in a page, it's time to examine how these content elements can be stylized.
CSS
Like HTML, CSS is a language that has a strict syntax that governs how websites appear. It defines a set of parameters for the HTML elements. So, while HTML defines the content on the page, CSS dresses it up. And while they work together to shape a web page, they are typically saved in separate files and can exist independently of each other.
In Webflow, all CSS properties are visible and configurable on the right side of the screen in the Style panel. We'll be exploring this in more detail in Chapter 3, Setting Up Your First Project, as well.
The main advantage of separating content from style is to increase the efficiency of building and updating websites. Various HTML web pages can all refer to the same CSS rules. If the look and feel of a button, for example, needs to change, then all you need to do is update its styling attribute in one CSS file rather than having to individually change all the web pages that contain the button. As you can imagine, this is a major time-saver.
So how do you define these styling rules in CSS?
It turns out that most HTML elements have associated styling attributes. These attributes can be manipulated directly in the HTML file; however, for the reasons of efficiency we have mentioned, the more recommended approach is to list the attributes out with their appropriate settings in a separate CSS file.
As long as the HTML file references the CSS file, the browser will reconcile the HTML and CSS attributes, and render the web page accordingly.
For a successful reconciliation to happen, a few conditions need to be met:
- The CSS file that the HTML is referencing needs to identify a specific HTML element by type or name.
- Once the element is identified, the CSS file needs to specify which attributes of the HTML element it is looking to change.
- The CSS file then sets the values of the attributes.
Figure 2.7 shows a very simple example of how this can happen:
Figure 2.7 – HTML and CSS working in tandem to help render a web page in the web browser
In the example, the HTML page has listed out three elements: a body, a div block, and an h1 block inside of it.
On the CSS page, the body tag is referenced by using the body { } notation. Inside it, the Work Sans font is selected by using the font-family attribute. This is telling the browser that all text that is enclosed in the BODY element of the page should be displayed in the Work Sans font. Note that this also trickles down to any other HTML elements that are enclosed in the body tag (that is, to the children elements of body).
The div block is one such child element. It is referenced by pointing directly to the div tag using the div notation. Under it, a number of attributes are listed, including padding (which are set here using pixels) and the HEX code of the background color of the div block itself.
Next, the h1 element is directly referenced by using the .h1 notation. Then, under this, the font color and size are directly being manipulated. Notice how we don't specify the font name again here? This is because the h1 element is a child of the div element that was a child element of body. By default, children will look to inherit values of their parents unless the child explicitly sets the attribute and overrides it. Since no override values are set here, h1 inherits the last font name that was specified on a parent element. In this case, it happens to be Work Sans, which was specified in body.
The end result is a marriage of the HTML and CSS instructions, revealing a large heading that says, Welcome back, John! in the Work Sans font, written against an aqua-colored background. Since the h1 element is block-level, and no explicit sizing was defined, it takes up the entire width of the screen. It also respects the padding amounts that were set.
At its core, CSS is simple in that it is just a list of attributes and settings. However, one of the things beginners struggle with is knowing exactly which attributes are available to manipulate for each HTML element. And generally, practice and repetition are the best teachers for this.
But the beauty of using Webflow to build websites is that nearly every CSS attribute you'd need to stylize pages is visually available for you to manipulate to your heart's desire with immediate visual feedback. No more digging around references and no tedious refreshing of pages.
In effect, the learning curve then shifts more to how to understand and take full advantage of the attributes at hand.
At this point, you may also be wondering how CSS differentiates between multiple HTML elements of the same type; for example, if there were multiple div blocks, headings, and paragraphs, how would CSS be able to pinpoint which ones need specific styling?
This is where the concept of classes comes in. All elements can be classified by identifiers called class names. Elements that are similar to each other can then be given the same class name; any styling properties we apply to an element with a class name will then get passed to all other elements that share the same class name. In Webflow, we'll be using a lot of class names to identify and organize our content.
But rather than spending more time here going through the various nuances of CSS rules and attributes, we'll leave it to the following chapters to gradually reveal increasingly more powerful and complex capabilities where you'll have the opportunity to learn them while putting them into practice.
Summary
We started this chapter by examining the CSS box model and its implications for web development. We learned to dissect websites as groupings of boxes of content, all of which can be manipulated in various ways. We also discussed why thinking about the box model can help improve one's design process as it more accurately reflects the way websites are actually developed. More relevantly, we learned that in order to be successful in Webflow, you have to shift your thought process away from the free-form nature of modern user interface tools and think more along the lines of the box model.
We then took a high-level overview of two of the most fundamental technologies of web development: HTML and CSS. We saw that HTML is a language that defines the content elements that make up a web page. We took a look at some basic HTML elements and how they can be structured together with some very basic examples. We then looked at how CSS complements HTML by marking up the styling and presentation of the HTML elements. We saw some basic examples of styling attributes that CSS can manipulate and how it all comes together to render a web page.
In the next chapter, we will begin our dive into Webflow. We'll get introduced to the very first project that we'll be building out and then spend some time quickly setting up our first Webflow project. Things are going to start getting real!
