From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Build the title

Build the title

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Build the title

“

In this session, we will build a fantastic title component for our React application. I'll guide you through each step, building it from the ground up. The title component is already present in the app component, but it is empty for now. Let's move to title.jsx. Ok, let's add some content. I've added an h1 tag inside the div. This h1 tag contains the text Properties for Rent. But we can't see it at the moment because it is covered by the header. We need to add some margin at the top of the app component to push it down. Moving to app.jsx. Let's add a class name App to our App component. Moving to App.css, let's add some margin at the top of the App component. 4 rem is enough to make the title visible. But in small screens, the header is taller and covers the title. This means we need a bigger margin top in small screens. Let's add a media query that targets screens with a maximum width of 800 pixels. For these smaller screens, I've increased the top margin of the .app class to 10rem…

Contents