My process

1. Started with mobile screen version on the file index.html.
2. Used flex layout to make it in column for the mobile setup.
3. Did some adjustment to make cleaner the code.
4. Did the locations.html section.
5. Used also in here the flexbox layout to make it in column.
6. Used @media query to make the tablet version.
7. Used Grid Layout for the middle grid.
8. Used @media query to make the desktop version.
9. Also for the desk version I've used the grid layout.
10. Added some ':hover' on the button and the principal images

Built with

• HTML
• CSS custom properties
• Flexbox
• Mobile-first workflow
• CSS Grid Layout

What I learned

With this project I've learned the most important specifics for the grid layout. By now, I know how the set columns and rows in the grid layout

Continued development

On the next works I'll focus again on the Grid Layout, 'cause I think that's a powerful tool.

Also, I think it's time to start to learning some JS basics to make bigger projects.

Useful resources

https://www.youtube.com/watch?v=rg7Fvvl3taU

Used this youtube video from Kevi Powell to understand better the grid layout. Very useful and clear.

Also used the "HTML&CSS" book from John Duckett.

Author

• Angelo Barbarulo
• GitHub - @Jorahhh
• Frontend Mentor - @Jorahhh

Acknowledgments

/