Most web apps on the internet today are multi-page web apps, which means they are comprised of more than one page. These pages have some sort of structure which is just the organization and design of the different components found on a web page, this structure is usually implemented using HTML. In this article, I’ll tell you how I created pages and added structure to these pages on the Whinst web app. Let’s dive in🏂🏾
Creating pages📑
Creating pages and routing in Next.js which is the frontend framework I’m using is a little different from what I’m used to but it wasn’t too difficult to learn😅. Next.js uses an interesting page and routing system by which the route of the page is a folder and the actual page is a file within the folder with the name page.tsx. When a project is first created it is initialized with a home page found in the root of the project with the name page.tsx. The image below taken from the Next.js docs shows how the routing and page system works.
To create a new page and its route in the Whinst web app I first had to create a folder with its title as the name of the route I want. I then created a file within that folder with the name page.tsx which is the actual page I wanted to create. So far I’ve done this for 3 pages in the project.
Adding structure to the pages🔧
I added structure to the pages as one of the first steps in the development process to organize them and to give me an idea of how these pages will look. I did this by first sketching some structural plans in my notebook. I prefer manually sketching as opposed to using design software because I’m not too good at using design software🥲. I then coded these sketches using HTML and Tailwind CSS. This process wasn’t too difficult because I have a good amount of experience with HTML and CSS😏. To do this I just used simple div elements to contain objects and to neatly place them in rows and columns I used CSS flexboxes.
Now that a clear page structure for all the pages has been implemented I’ve moved on to designing and making responsive each page one by one starting with the home page which is something you’ll not want to miss so stay tuned to the blog. Thanks for reading🙏.