← Back to Projects

Landing Page with React

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

easy

Repository

Click to open

Video

Not available

Live demo

Not available

Average duration

12 hrs

Technologies

alt text Landing page with React

🔥 This exercise is meant to be done with a partner.
   Collaborate, discuss exchange with others and your learning will be easier and faster.

Technologies: HTML, CSS, JS, React.

Let's build this landing page using React Function Components. The idea is to split Bootstrap components into different function Components, they'll be all imported in the main component Home.jsx

Please use Function Components for this

Note: the Cards have different content, think DRY (Don't repeat yourself) and declare only one component and use props to handle different content.

🌱 How to start this project

Do not clone this repository.

The first step to start coding is cloning the react boilerplate on your local computer or gitpod.

a) If using Gitpod you can clone the boilerplate by clicking here.

b) If working locally type the following command from your command line:

$ git clone https://github.com/4GeeksAcademy/react-hello `

💡 Important: Remember to create a new repository, update the remote, and upload the code to your new repository.

Then, take some minutes to build a strategy, draw it!

Strategy for building a landing page with react

The key of this project is to help you understand how to pick the components that you want to build, you have to think the best way to organize and avoid future errors. What can be re-used? If your code is tuning into something big and hard to understand you probably will need to split into components: <Jumbotron />, <Navbar />, <Card />.

That is it! Start coding your first React website. Have fun!

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

easy

Repository

Click to open

Video

Not available

Live demo

Not available

Average duration

12 hrs

All rights reserved, 4Geeks LLC 2021. Read more about 4Geeks and what we are going here.