This mockup website is a copy of the original Yelp website. It is fully responsive and allows the content to adapt to the screen size. Try it out!
Tech used: HTML and CSS
How It's Made: I used a basic layout in order to create this website. I used floats in order to best organize each of the articles in their own sections. I applied 3 different media queries that could adjust to multiple screen size. I did MobileFirst and continued towards larger screen sizes. I began with the layout that contained what I believed to be the most important content and added additional content as the screen size increased. In the mobile first media query the navigation bar was reduced to only the logo, the search form, and Hamburger. The top Restaurants were all displayed vertically. As the screen size increases the navigation and different location options begin to return.
Lessons Learned: Through this project I learned to identify the different breaking points in order to make sure the transitions between screen sizes are smooth. I also learned how to manipulate each section in order to ensure that it adapts adequately with each media query.