Technically, you don’t need any prior knowledge to start building with Ycode, but it will help a lot when you know the basics and logic behind how things are built.
In this chapter, we’ll introduce you to the box model that web layouts use.
Box model
If you look beyond the facade that’s a web layout, you’ll see a structure of boxes that are stacked vertically below and next to each other. Each element represents a box.
Open a previous project or create a new one based on a template. In the editor, move your mouse over the canvas.
Do you see a blue border appear? That’s a box.
Boxes are needed to make your website look amazing on any device, whether that’s on a desktop, tablet or mobile. In the box model, all elements are structured in a way that makes them easily adaptable to different screen sizes.
How boxes work
Each element in your web layout is a box, and boxes can be put within other boxes. For example, a container box can have a heading box and paragraph box inside (we call this “nesting” boxes).
The cool thing about a container box is that, just like Tupperware, you can easily transport everything that’s inside. When you move a container, all the boxes that are inside will be moved too (because they’re “grouped”).
An outer box that has boxes inside is called the “parent” element, and the boxes within are the “child” elements.
Now, when you start adding more boxes, things can get a little crammed.
Let’s say you add an image box first and then a paragraph box below. You don’t want the text to touch the image—it looks much better when there’s some vertical space between the two boxes.
To create space between elements, you can use a margin and/or padding.
Margin
This adds space outside a box.
Padding
This adds space inside a box
Tip: If your container has text and a transparent background, you might only use margin or padding to add space on the top or the bottom.
When you have a container with text and a background color, you can use both margin and padding. The margin creates white space between the container and section above/below it, and the padding makes sure the text is not stuck to the box (adding space in the same background color above and below the text).
Breakpoints
Breakpoints are used in responsive design by developers and designers. It’s a defined pixel-value-point where the layout will change to better fit a screen.
For example, it's the point where the screen gets too narrow and elements are stacked below each other (versus horizontally next to each other).
To see this in action:
Open the Ycode website on desktop
Minimize the screen so you can see the window (and adjust it)
Change the width from big to small
See how the top menu bar changes from a full-text menu to a hamburger menu that you need to unfold
The moment where that change happens is called the breakpoint
