From b2ff93471800391bd7437b9bb02194f99143fad0 Mon Sep 17 00:00:00 2001 From: Darshan C N Date: Sat, 12 Oct 2024 11:20:50 +0530 Subject: [PATCH] docs: add project description for iPhone website --- Projects/2-Intermediate/iPhone-Website.md | 44 +++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 Projects/2-Intermediate/iPhone-Website.md diff --git a/Projects/2-Intermediate/iPhone-Website.md b/Projects/2-Intermediate/iPhone-Website.md new file mode 100644 index 00000000..c1db64ed --- /dev/null +++ b/Projects/2-Intermediate/iPhone-Website.md @@ -0,0 +1,44 @@ +iPhone Website Clone + +Tier: 2-Intermediate + +Description: The iPhone Website Clone project is a modern, responsive replica of the official iPhone website using React and styled-components. The app showcases several advanced features such as smooth animations, seamless transitions between sections, and responsive design principles to adapt to different screen sizes. The goal is to create a polished, professional-looking web page similar to iPhone’s, utilizing modern web technologies. + +Purpose: This project helps you understand how to structure a complex web page, implement animations, and manage components in React. It will also introduce you to advanced CSS techniques and responsive design. + +Resources Needed: + +React +Styled-Components for styling +JavaScript for handling interactions +Assets (images, icons, etc.) can be found in the GitHub repository assets section. + +User Stories: + +User can navigate through different sections of the Apple website (iPhone, Mac, Watch, etc.) with smooth transitions. +User can view a fully responsive design that adapts to various screen sizes (mobile, tablet, and desktop). +User can see animations and smooth scrolling effects when navigating through the website. +User can interact with the navigation bar to switch between sections of the website. +User can view product details with images and text that mimics the Apple official product showcase. + +Bonus Features: + +User can see a sticky navigation bar that remains visible as they scroll. +User can experience smooth loading animations for images and text. +User can watch promotional videos embedded in the site sections. + +Useful Links and Resources: + +GitHub Repository ([Project Assets](https://github.com/adrianhajdin/iphone/blob/main/README.md)) +Styled-Components Documentation (https://styled-components.com/) +React Official Documentation + +YouTube Guide: (https://www.youtube.com/watch?v=kRQbRAJ4-Fs) + +You can follow the complete step-by-step video guide using above link for building this project by Adrian Hajdin. + +Example Projects: + + +https://github.com/darshancn/apple-website +