Project 1 - Foody

My first website design!

Project Instructions

1. Create a new repository on GitHub (not GitHub Enterprise).

2. Clone down this repository and complete your work in there.

3. Use a chosen template in Adobe XD and convert the artboard into a functioning website

   • I chose this template.

4. Upload your project to your Github

   • Here's a link to my GitHub

Prerequisites

• Basic HTML knowledge
• Bascis CSS knowledge, including practice with flex boxes and grids
• GitHub account
• Adobe XD

My Process

1. Wrote out a wireframe to place all the sections and elements.
2. Built css styles for repeatable elements (buttons, text, links, similar divs, etc.).
3. Built out the HTML, including all subdivs, using the BEM naming conventions for all the classes/ids.
4. Customized all the css to match the artboard.
5. Updated css to make the website responsive.
6. Uploaded all commits to GitHub.

Deployed with:

I used GitHub to host my static site, which can be found HERE.

Screenshot:

Results

I started the project by working my way down the site, starting with the nav bar. I found this to be tedious, and didn't really help me lay everything out together, so I went back and started thinking about the website as a series of small elements. I then worked from the atomic leve (specific elements, styles, etc.) and worked my way up from there, making sure each section worked well with the ones above and below it, which was a more logical way of thinking about it.

Contributing/Future Additions

Feel free to find me on GitHub (username: zfriendly) if you're interested in contributing! I'd love to make the site more responsive, and need help formatting the hamburger drop-down menu and input boxes.

Author

• Zack Friendly