- This repository is built for you to be able to gain a fundamental understanding of React Functional Components. There are a few design
.png
files that you'll find inside of theassets
directory that your tasked to build out into pieces of UI using ReactJS.
- Use the design files to build out your User Interfaces.
- All components can be built out using the provided codepens that we have set up for you.
- DON'T FORGET to fork your pen.
- All styles can be achieved within the provided css pen container. Feel free to include a
cdn
for bootstrap v.4 if you'd like. Don't forget aboutclassName
vsclass
!! - Once you and your partner are finished please submit the forked Pen link to your PM.
- Work on the required features first and then move on. You can come back to Project 1 and start with the
Stretch Problem
once you're done with the requirements for Project 2.
-
Start with the
Social Card
Project-1.png
file and use this codepen to build out all the components you need to complete the project to the specification. -
The idea here is to break this
.png
file down into components. Think of each singular piece as a DOM Element and how you will be separating each as it's ownfunctional component
. -
For the react Banner part of the social card you can feel free to use this
https://ibin.co/3wnC6SgIOJud.png
in an src attribute on animg
tag. Or find one on the web and use that. -
For the Lambda Avatar feel free to use
https://ibin.co/3whrpKSBbZ81.png
or any lambda logo you may find on the web. -
Stretch Problem 1 Include the icons. This is not a trivial task.
-
Stretch Problem 2 After you build out a card, put together some mock data, and create a grid view of multiple cards.`
-
Now that you've been building out your
Social Card
use theProject-2.png
file and this codepen to build out all the components you need to build out a calculator that looks much like the one in the png. -
Stretch Problem 1 After you build out the calculator, make all of the buttons work. You have a lot of knowledge already to be able to achieve this. However feel free to research into it as much as you need.