Styling the Landing Page

Welcome back! In the last few lessons, you built the structure and interactivity for your Cooking Helper landing page using Angular. Now, it’s time to make your app look clean, modern, and easy to use. In this lesson, you’ll learn how to add CSS styles to your landing page. Good styling helps users find what they need quickly and makes your app more enjoyable to use.

By the end of this lesson, you’ll know how to style the main sections and the search form of your Cooking Helper landing page. You’ll also see how small changes in CSS can make a big difference in how your app feels.

Let’s quickly remind ourselves of what you’ve built so far. You have a landing page with three main sections:

• A search area for finding recipes
• A section for popular recipes
• A section for a random recipe

You’ve already set up the Angular components and made the page interactive. Now, you’ll add CSS to these sections to improve their appearance. If you remember, your HTML might look something like this:

<div class="search-section">
  <form class="search-form">
    <input type="text" />
    <button>Search</button>
  </form>
</div>
<div class="popular-section">
  <!-- Popular recipes go here -->
</div>
<div class="random-section">
  <!-- Random recipe goes here -->
</div>

In this lesson, you’ll focus on styling these elements step by step.

Remember, this is the current file structure:

src/
└─ app/
    ├─ home/
    │   ├─ home.component.ts
    │   ├─ home.component.html
    │   └─ home.component.css
    ├─ models/
    │   └─ recipe.model.ts
    └─ services/
        └─ api.service.ts

Let’s start by making the main sections stand out and look organized. You want each section to have some space below it so the page doesn’t look crowded.

To do this, you’ll add a CSS rule that targets the .search-section, .popular-section, and .random-section classes. Here’s how you can do it:

.search-section,
.popular-section,
.random-section {
  margin-bottom: 2rem;
}

Explanation:

• This rule selects all three classes at once.
• margin-bottom: 2rem; adds space below each section. The rem unit is based on the root font size, so it scales well on different devices.