A practical front-end landing page built using React and Styled-Components!
loopstudios is a simple landing page built with React & Styled-Components. This project came from a prompt provided by Frontend Mentor.
- Build a proper responsive Front-End application that changes layouts depending on the browser window size, utilizing only styled-components for the responsive design
- Test my React knowlegde/best practices
- Improve my CSS/Styled-Components abilities
- Create a template so that I may be able to use this for future projects
Library | Description |
---|---|
React | Used for the frontend. |
Styled-Components | Used for styling within the .jsx file. |
Use this section to define your React components and the data architecture of your app. This should be a reflection of how you expect your directory/file tree to look like.
src
|__ images/
|__ desktop/
|__ pictures.jpgs
|__ mobile/
|__ pictures.jpgs
|__ Shared/
|__ Nav.jsx
|__ Footer.jsx
|__ Screens/
|__ AboutUs.jsx
|__ Header.jsx
|__ OurCreation.jsx
|__ App.js
|__ App.css
|__ index.js
|__ index.css
|__ reportWebVitals.js
|__ .gitignore
|__ package-lock.json
|__ package.json
|__ README.md
Task | Priority | Estimated Time | Time Invested | Actual Time |
---|---|---|---|---|
Determine the Component Hierarchy | H | 20 minutes | 20 minutes | TBD |
Add the content | H | 10 minutes | 20 minutes | TBD |
Style & Test | H | 5 hrs | 7 hrs | TBD |
Deploy & Test | H | 1 hrs | 30 minutes | TBD |
POST-MVP Mobile Styling | H | 3 hrs | TBD | TBD |
TOTAL | 9.5 hrs | 8hrs 10min, | TBD |
- Mobile Styling w/ Hamburger menu
- Learn specific CSS tricks for sizing and passing images in as props to styled-components
Use this section to include a brief code snippet of functionality that you are proud of and a brief description.
TBD
2/7/2021:
- Added a 'Change Log' to the README
- Added 'Mobile-Styling' to POST-MVP