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.
Replica project built purely with HTML and CSS
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.
- Live Site URL: (https://capstoneprojectgroup14.netlify.app/)
- Solution URL: (https://github.com/Topshicoder/sidehustle-capstone-project-group14)
Different members in the team committed different parts of the project to make it complete,helping each other along the way.
- Semantic HTML5 markup
- CSS custom properties
- CSS hover effects
- 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
-
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.
-
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
- The entire Group 14 team for working together and productively to make sure everyone did their part.
- Lord-sarcastic for taking us through an introductory Git course.