|
|
|
@ -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
|
|
|
|
|
|
|
|
|
Darshan C N
11 months ago