About us

Learning library

For all the self-taught geeks out there, here our content library with most of the learning materials we have produces throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Machine Learning Engineering (16 weeks)

Full-Stack Software Developer

Search from all Lessons

Social & live learning

The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.

From zero to getting paid as a developer, learn the skills of today and tomorrow. Boost your professional career and be hired by a technology company.

Start Coding

← 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:

1$ 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