Giter Club home page Giter Club logo

loopstudios's Introduction

loopstudios

A practical front-end landing page built using React and Styled-Components!


Overview

loopstudios is a simple landing page built with React & Styled-Components. This project came from a prompt provided by Frontend Mentor.


MVP

  • Build a proper responsive Front-End application that changes layouts depending on the browser window size, utilizing only styled-components for the responsive design

Goals

  • 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

Libraries and Dependencies

Library Description
React Used for the frontend.
Styled-Components Used for styling within the .jsx file.

Component Hierarchy

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

Time Estimates

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

Post-MVP:

  • Mobile Styling w/ Hamburger menu
  • Learn specific CSS tricks for sizing and passing images in as props to styled-components

Code Showcase:

Use this section to include a brief code snippet of functionality that you are proud of and a brief description.

Code Issues & Resolutions:

TBD

Change-Log:

2/7/2021:

   - Added a 'Change Log' to the README
   - Added 'Mobile-Styling' to POST-MVP

loopstudios's People

Contributors

ccano2011 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.