Food Explorer

Ever loved a design you saw online and wanted to replicate it? The Food Explorer website was one of those tasks during our responsive section. A great idea if you love a design but aren’t sure how they managed to create it. It’s as easy as grabbing some images and lorem ipsum and piecing things together until you’re satisfied with the results.

HTML 5 icon CSS 3 icon JavaScript icon jQuery icon Github icon SASS icon

 The Planning

This project was a responsive website that we were asked to work in groups of two to complete. We were given three very different projects to choose from, each with their own set of challenges. The task was to take a photograph of the completed site, some images and GIFs showing the responsive layout at different points and turn it into a website that functioned like the examples we were given.

Food Explorer Original Files given to groups

 The Design

Food Explorer Original Desktop View

For this project we were given all the design aspects and asked to recreate what we saw. We were introduced to Github, the Github GUI, SASS and the Windows Powershell for this project. Our github repository was already created for us but we learned how to sync and pull files to and from it and work together to make this project functional. At the same time we were learning about responsive design. This project was done desktop down.

 The Code

Although this code was already on Github from when we completed it in class, it was in a private repository so I moved it to my own account and organized my code into a development and minified distribution setup similar to my other projects.

Food Explorer Github Repository

When we began this project we learned about .scss partials and how to link them to compile into .css. We also learned about mixins and variables in order to code using the DRY method. Another useful tool we learned about during this project was appendaround.js in order to move the search bar around the page!

Food Explorer .scss file structure
Appendaround.js used in header

<header>
    <div class="inner-wrapper">
        <div class="logo">
            <picture>
                <source srcset="images/small_logo.jpg" media="(max-width: 420px)">
                <img srcset="images/logo.png" alt="FoodExplorer Logo">
            </picture>
        </div>
        
        <div class="search02" data-set="search-move"></div>
        
        <div class="social-media" data-set="social-move">
            <ul class="social-links">
                <li><a href="#" class="social facebook">Facebook</a></li>
                <li><a href="#" class="social google">Google +</a></li>
                <li><a ahef="#" class="social twitter">Twitter</a></li>
            </ul>
        </div>
        
           <button class="btn-mobile-menu">Menu</button>      
    </div> 
</header>