Creating a Symfony project from zero to success in 52 weeks (week 5)
This week’s task will be to design a homepage very close to the final concept.
Miss the week 4? Want to start from the beginning?
My vision of the home page is one with 100% height without vertical scrolling, so all the information that the visitor needs is in front of their eyes without further action. Regardless of the design you have chosen for your own homepage, most of the following steps are common.
Create a new layout exclusive for the homepage. It is very unlikely that the design of the homepage will be similar to the rest of the pages of your site, since it usually includes a lot of marketing and a more curated design. I created mine in ./templates/layout_home.html.twig and make it extends ‘base’ layout.
Create two fragment templates, one for the header and one for the footer. We’ll include them in the previous created layout with Twig’s include function in order to maintain the readability and code organization. I created mines in ./templates/fragments/_public_header.html.twig and ./templates/fragments/_public_footer.html.twig.
The extra classes and html tags are specific of my chosen design.
Create the main navigation menu in the header fragment. We’re using the Bootstrap’s navbar component. Add the menu items and other components you need. In my case I include ‘Product’, ‘Pricing’ and ‘Documentation’ menu items and a mini login form.
Design your footer in the footer fragment. I’ll display sponsors logos.
Get creative in the middle.
This is how my homepage will looks like:
Next week we’ll start login users.
