Hello everyone and welcome to this video on Build & Prototype Pages, that will be divided into 3 parts. Today we will focus on the first stage.
This part consists in prototyping. That is, identifying and creating the elements that we are going to need to design the main structure or skeleton of the web page.
Here on the screen, we see the final goal that we want to reach.
When we move to Aptugo we'll see the Database that we need already defined. And also we'll find a single page that was automatically created by Aptugo by default, to manage data, in this case, cars. Here we already have a car loaded and it's the same one that we have in the Figma design, which means we have the backend ready to create a page exactly the same as the one you see on the screen.
Let's start by going to Pages and creating a new page that we'll call “Car details”. The pad will be "details" and the name will also be "details.tsx"
After this we drag-n-drop it inside the "Dashboard" so it's placed at the same height as "Cars". And we proceed to Save and Build.
As you can see, if we go back to this part and refresh it. We'll see that "Car details" appears, which is a blank page because we haven't defined anything in Aptugo yet.
Once we have seen this, our next step will be the following: if we enter Aptugo in the "car details" page, which is empty, we can see that all the default pages are divided into 5 stages. Before page render, which consists on what will be seen before the page is loaded, the page header, The body, the page footer, and the After page render.
Basically, the first two stages, as well as the last one, are generally used to generate logical coding and functionality that will not be seen visually on the web page.
All the elements that we are going to use to write, render or show things are going to be in the body or in the Page footer. So first we go back to Figma and divide this into 2, the Body and the Page footer.
Since this division is already made, I'm going to show it to you directly. We have a square that contains the whole body and a rectangle containing the footer. These stages are already divided in Aptugo, we already have a Body and a footer built.
What we can do now is create a container for each one to prevent them from being larger than necessary. We choose the lg option so that its width is a default screen size.
Once this is done, we go back to the design or Figma and subdivide the red boxes, into other smaller boxes, to see how many sections we would have inside each red box. We have the body splited in two and the footer into three sections.
Now we go back to Aptugo and repeat the process, only this time, using divs, we add two for the orange boxes in the Body, and three in the footer. We go back to the design once again, we have finished dividing the Red boxes and created the orange ones.
Our next step will be to divide these orange Boxes into even smaller boxes or divs. We will address this in the second part of this tutorial. Hope you enjoyed it, and as always, ¡thanks for watching!
. . .
For more details please visit: www.aptugo.com