Capstone update and Foundation Framework


Things are moving along well for our capstone project, PlanIt, and it’s exciting to see everything coming together! I finished the majority of the front-end code while my teammates worked on several of the backend functions and features. We have now begun connecting the front-end code with the back-end code to have a fully working web application!

As I mentioned in my previous blog post, starting with wireframes was a really helpful strategy for me as I prepared to do the front-end coding. I was able to return to the wireframes as I developed each of the pages to refer to what we wanted the end result to look like. I also mentioned I would share another neat tool with you… and it’s called Foundation Framework!

At the beginning of the project, I did a technical evaluation for the front-end stack to see what technologies and tools might be useful for making our web application look modern, professional, and responsive (meaning that it should look nice whether the user was on their laptop computer or mobile phone). I decided to move forward with Foundation, which I hadn’t used before working on this project.

Per the Foundation website, Foundation is “Foundation is the first and most advanced responsive front-end framework in the world.” According to Foundation, it is used by several well-known companies, such as Adobe, Disney, National Geographic, and more!

Using a front-end framework, like Foundation, can help you save time when developing front-end code, and the detailed documentation and tutorials made it easy for me to start incorporating it into the code for our web application. I quickly learned how to override the Foundation CSS with my own by using an app.css file and was able to incorporate Foundation elements to make the website responsive to the size of the browser screen.

I am excited to continue working my team to finalize our PlanIt web site and see our design fully come to life!

Image from https://get.foundation/

Print Friendly, PDF & Email

Leave a Reply

Your email address will not be published. Required fields are marked *