Quartz 4

TinDog Startup Website

8 min read

Metadata

  • đź“… Date :: 21-06-2025
  • 🏷️ Tags :: web-dev

Notes

Building a Landing Page with Bootstrap: The TinDog Project

This project-based lesson demonstrates how to apply all the learned Bootstrap concepts to build a responsive and visually appealing landing page for a fictional startup called “TinDog” (Tinder for dogs).

1. Project Overview: TinDog Landing Page

  • Concept: A modern, single-page website for a dog-matching app.
  • Key Sections:
    • Title Section: Hero section with app download buttons and a phone image.
    • Features Section: Highlights key benefits with icons.
    • Testimonials Section: Carousel for customer reviews, and a section for featured outlets.
    • Pricing Section: Displays different pricing tiers.
    • Footer Section: Standard footer with copyright and links.
  • Tools: Primarily Bootstrap components, layout (grid), utility classes, and a small amount of custom CSS.

2. Project Setup and Resources

  • Starting Files: Download the “TinDog project” zip file.
  • index.html: Contains pre-defined <section> elements for different parts of the website, helping organize your code.
  • README.md: Important resource for:
    • Goal Images: Visual targets for each section.
    • SVG Icons: Pre-copied SVG code for various icons (Apple, Google Play, Checkmark, Hat, Heart, etc.). Use these directly rather than fetching from Bootstrap’s icon site to maintain consistent sizing and styling.
    • Text Copy: All the written content for the website, mimicking a common workflow where clients provide text.
  • style.css: Includes a pre-defined gradient-background class for an animated CSS gradient.
    • To use it, add class="gradient-background" to the desired HTML element (e.g., <section>).

3. Building the Website Section by Section

3.1. Title Section (Hero)

  • Goal: Large heading, two “Download” buttons with app store icons, and a phone image.
  • Bootstrap Snippet: Look for “Heroes” in Bootstrap Examples. The “Centered screenshot” example is a good starting point.
  • Steps:

    1. Copy HTML: Copy the div element containing the hero section from the Bootstrap example.

    2. Paste: Paste it into the <section id="title"> in index.html.

    3. Include Bootstrap CSS: Crucial step! If your page looks unstyled, ensure you’ve linked the Bootstrap CDN CSS in your <head> section:

      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    4. Include Custom CSS: Link your style.css after the Bootstrap CSS to allow for overrides:

      <link rel="stylesheet" href="css/style.css">

    5. Replace Image: Change the src of the <img> tag to images/iphone.png and adjust height (e.g., 200px) for better scaling. Add alt="app demo".

    6. Update Text: Copy and paste the main heading (<h1>) text and button text from README.md. Remove the extra paragraph element if not needed.

    7. Add SVG Icons: Copy the Apple and Google Play SVG code from README.md and paste them next to the “Download” text inside their respective buttons.

    8. Button Styling: Change btn-primary to btn-light and btn-outline-secondary to btn-outline-light for the download buttons to match the design.

    9. Animated Background: Add the gradient-background class to the <section id="title"> element:

      <section id="title" class="gradient-background">
    </section>

    10. Adjust Padding: Remove py-5 (padding-top and padding-bottom 5) from the inner container or div if it causes excessive spacing. If you only want top padding, change py-5 to pt-5. The goal is to have the gradient extend fully while content is spaced correctly.

3.2. Features Section

  • Goal: Three columns, each with an icon, heading, and descriptive text.
  • Bootstrap Snippet: Look for “Features” in Bootstrap Examples (the first example is ideal).
  • Steps:

    1. Copy HTML: Copy the div.row containing the feature columns.

    2. Paste & Wrap: Paste into <section id="features">. Crucially, wrap this div.row within a div with class="container" to align it with other sections.

    3. Remove Buttons: Delete the <a> (anchor) tags that act as buttons within each feature column, as they are not part of the design.

    4. Update Text: Copy and paste headings (<h3>) and paragraph (<p>) text for each feature from README.md.

    5. Replace SVG Icons: Replace the example SVGs with <img> tags referencing images/checkmark.svg, images/mortarboard.svg (graduation hat), and images/heart.svg from your images folder. Add alt text and set height="30px" for consistent icon sizing.

    6. Custom Icon Styling: The circular background for icons is not default Bootstrap.

      • Inspect: Use Chrome DevTools to inspect the desired styling from the Bootstrap Features example.
      • Identify Custom CSS: Look for CSS rules that don’t come from utilities.css or similar general Bootstrap files (e.g., rules for icon-square).
      • Copy & Paste CSS: Copy this custom CSS (e.g., for .icon-square) from the DevTools “Styles” tab into your style.css file.
      • Apply Class: Ensure the div wrapping your icon has the correct class (e.g., class="icon-square").

    7. Section Margin: Add mt-5 (margin-top 5) to the div.container of the features section to provide spacing from the title section:

      <div class="container mt-5">
    </div>

3.3. Testimonials Section

  • Goal: A rotating carousel with dog images and quotes, followed by a section featuring company logos.

  • Steps (Carousel):

    1. Bootstrap Snippet: Go to “Components” → “Carousel” in Bootstrap docs. Find a basic example with indicators and images.
    2. Copy & Paste: Copy the Carousel HTML into <section id="testimonials">.
    3. Wrap in Container: Wrap the entire carousel div inside a div with class="container" to ensure alignment.
    4. Update Images: Set src for carousel <img> tags to images/couple.jpg, images/dog-img.jpg, and images/lady-img.jpg. Add alt text.
    5. Adjust Text: Change the <h1> to <h2> for the main quote, as <h1> should only appear once per page. Update the text within the <h2> and paragraph elements with quotes/names from README.md.
    6. Profile Image Styling:

      • Add a custom class like profile-img to your dog profile image (e.g., dog-img.jpg).

      • In style.css, define rules for .profile-img:

        .profile-img {
    height: 100px;
    border-radius: 50%; /* Makes image circular */
}

      • Add mt-5 to the profile-img for vertical spacing.

      • Add mt-2 to the text below the image for spacing.

  • Steps (Featured Logos):

    1. Grid Layout: Below the carousel (but still within the testimonials section), create a new div with class="container" and inside that a div with class="row".
    2. Columns: For each logo, create a div with responsive column classes. The goal specified “3 columns on desktop, 12 on mobile”: class="col-lg-3 col-sm-12".
    3. Add Images: Inside each column, place an <img> tag for images/techcrunch.png, images/mashable.png, images/bizinsider.png, and images/tnw.png. Add alt text.
    4. Image Sizing: Set height="30px" on each logo <img> for consistent sizing.

3.4. Pricing Section

  • Goal: Three pricing cards with details and a button, preceded by a title and subtitle.
  • Bootstrap Snippet: Look for “Examples” → “Pricing” in Bootstrap docs. The three-card layout is perfect.
  • Steps:
    1. Copy HTML (Pricing Table): Copy the div.row containing the three pricing cards.
    2. Paste & Wrap: Paste into <section id="pricing">. Wrap this div.row within a div with class="container".
    3. Copy HTML (Title): Copy the div containing the pricing title and subtitle from the Bootstrap example.
    4. Paste Title: Paste it at the beginning of your pricing div.container.
    5. Update Text: Replace all text within the pricing cards and the title/subtitle with content from README.md. Change the <h1> for the pricing title to <h2>.
    6. Color Scheme: The example uses Bootstrap’s primary blue. Your goal is a “dark” scheme.
      • Use Ctrl+F (Cmd+F) to search for “primary” within the pricing section’s HTML.
      • Carefully replace btn-primary with btn-dark and btn-outline-primary with btn-outline-dark where appropriate. Do not use “Replace All” globally as it might affect unintended areas.
  • Goal: Simple footer with copyright and possibly social links.
  • Bootstrap Snippet: Look for “Snippets” → “Footers” in Bootstrap Examples. Choose a simple one.
  • Steps:
    1. Copy HTML: Copy the div.container for the footer.
    2. Paste: Paste into <section id="footer">.
    3. Remove Logo: Delete the <a> tag that links to the Bootstrap logo.
    4. Update Copyright: Change the paragraph text to &copy; Copyright TinDog.
    5. Remove Border: Locate and remove the border-top class from the relevant footer element (e.g., the footer tag itself or a container div) if it’s present and not desired.
    6. Animated Background: Add the gradient-background class to the <section id="footer"> element.
    7. Adjust Margin: If there’s unwanted white space at the bottom, look for my-5 (margin-y 5) or similar margin classes in the footer’s parent elements (like the container). Change my-5 to mt-5 to keep top margin but remove bottom margin.

4. Key Takeaways from the Project

  • Rapid Development: Bootstrap significantly speeds up the creation of complex, modern websites.
  • Component-Based Design: Leveraging pre-built components (buttons, cards, navbars, carousels) is central to efficient Bootstrap development.
  • Responsive by Default: Bootstrap’s grid system and components are designed to be responsive, adapting well to different screen sizes.
  • Customization: While Bootstrap provides strong defaults, you can customize it by:
    • Overriding CSS (ensure your custom CSS loads after Bootstrap).
    • Replacing text and images.
    • Using SVG icons directly or via image tags.
  • Workflow: Common web development involves taking client-provided text (“copy”) and integrating it into pre-designed or framework-based layouts.
  • Bootstrap vs. Native CSS (Flexbox/Grid):
    • Bootstrap: Excellent for quickly “throwing down components” and achieving a modern look with consistent design. Ideal for rapid prototyping and general-purpose websites.
    • Flexbox/Grid (Native CSS): Offer more granular control for highly custom or “pixel-perfect” layouts. Essential for understanding underlying CSS principles and for bespoke designs.

References

Graph View

Backlinks