sidehustle-capstone-project-group14

Frontend Mentor - Order summary card solution

This is a solution to the Order summary card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• Our process
  • Built with
  • What we learnt
  • Useful resources
• Authors
• Acknowledgments

Overview

• This is a group project focused on the replication of the given image of an Order Summary Card using purely HTML and CSS.

The challenge

Users should be able to:

• Build out the Order Summary Card component and get it looking as close to the design as possible.
• Enable users to see hover states for interactive elements.

Screenshot

Links

• Live Site URL: (https://capstoneprojectgroup14.netlify.app/)
• Solution URL: (https://github.com/Topshicoder/sidehustle-capstone-project-group14)

Our process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS hover effects

What we learnt

• How to plan out and create efficient project structure and architecture
• Effective distribution of tasks and responsibilities to team members
• The basics of GitHub: Creation of repositories, committing, pushing, pulling etc.
• Familiarization with less common elements and tags
• How to work with CSS layouts, the Box Model, borders and fonts
• How to improve design responsiveness with media queries

Useful resources

• https://www.google.com/amp/s/www.freecodecamp.org/news/how-to-write-a-good-readme-file/amp/ - This is an amazing article that helped in understanding how to write a good README file for the GitHub project. Recommend it to anyone still learning this concept.

• https://www.w3schools.com/css/css_align.asp - This website provided great insight on how to centre HTML elements with CSS. Recommend it to anyone interested in learning this concept.

• https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/ - This is another website that helped in learning about CSS position property. It is an awesome resource and would recommend it to anyone trying to learn about this property as well.

• https://www.youtube.com/watch?v=8JJ101D3knE Programming with Mosh - This in-depth Git Youtube tutorial teaches you everything you need to learn Git basics.

• https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/ - This blog post beautifully outlines the step-by-step procedures in hosting your website for free. Definitely recommending giving it a read. Anyone interested in learning about free website hosting.

Authors

•  GROUP 14
  

• Abijo Abimbola Oluwasayo
• Olanrewaju Wakilat Adeola
• David Temitope
• Oluwaseyi Abiodun
• Abanum Oliseyenum A.
• Ann Opare-Akonor
• Adekunle Agbonhin
• Moyinoluwa Babalola
• Onyeachonam Daniel
• Okeke Onyebuchi Hyacinth
• Faruk Oluwaseun
• Segun Abolaji

Acknowledgments

• Thanks to Lord Sarcastic for taking us on intro to GitHub and to all Group 14 members for their efforts and great intellectual input towards the completion of this project. Special thanks to Sayo, Tope, Olise and Mr. Segun for their enormous contributions, without which the completion of this project would have been almost impossible. Finally, I would like to thank Sidehustle for granting us the opportunity to partake in this internship and making this project possible. Special thanks to our mentors Mr. Faruq Abdulazeez and Mr. Damilare Oyetade whose teachings helped bring us this far.