In this episode, we're setting up the foundation to display all of our employees and services on the home page. We kick things off by creating a BaseLayout
component in Vue, which will handle centering and giving a nice look to all our main content. We use some handy Tailwind classes to make sure everything is sitting pretty and responsive across different screen sizes.
Once we've got our layout nailed down, we start building out the actual employee list. We use a responsive grid to display our employees, each as a clickable card, styled with a profile photo and name. For now, the profile images are pulled from Gravatar, and we run into a small hiccup (which we fix) making sure the images display correctly.
Next up, we copy our work to create a similar section for listing out services. Each service shows its name, duration (in minutes), and price, all nicely styled and laid out in a grid. We don't have images for services, but we tweak the design to look great with just text, and make sure all the info is clearly visible.
By the end of this episode, you've got a homepage showing all your employees and services, ready for the next step: clicking on an employee to see their specific services. In the next episode, we'll refactor our code a bit to avoid repetition and add that click-to-view functionality. Stay tuned!