Project: Slack's About Page (Part 1)

June 20, 2018

We will now get started with our first serious HTML & CSS project. Our objective is to duplicate Slack’s About page. You can find it here: https://slack.com/about

Slack is a communication tool for companies — you can think of it as a messaging tool for collaboration, but focussed to meet businesses’ needs. Since the team at Slack frequently updates their about page, here is a screenshot of the page that we’ll be attempting to build by the end of the project:

Project Goal

In this part, all you have to do is think of how you’ll break the page above into various components that you just learned: What’s the header? What’s the nav? What’s the main? And so on…

Once you do, create an HTML file like the one you saw at the end of the last tutorial. Once done, you should have something that looks like this:

Goal for Part 1

Do not worry — we know it looks nothing like the beautiful page we want to build like the above screenshot. This is where the CSS is going to come in. For now though, go ahead and try your best to replicate what you see above, and look at the code below only if you need a hint!

Are you wondering how much you’ll learn by the end of the 5th part of this project? Here’s a side-by-side comparison of the original and what you’ll be building. It’s pretty much the same!

The original is on the left, what you’ll build is on the right!

In the next lesson, we will dive deeper into the Fundamentals of CSS.

Workspace

Here’s an empty workspace for you to type code. (Hit Try it Now button to activate it)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Us | Slack</title>
</head>
<body>
</body>
</html>

Solution

Note that the solution below is just one possible solution, and is still missing a few components. But it serves as a good starting point and we will build further on this as we learn more HTML and CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Us | Slack</title>
</head>
<body>
  <header>
    <div class="slack-logo">Slack</div>
    <nav>
      <a class="navigation-item">Why Slack?</a>
      <a class="navigation-item">Pricing</a>
      <a class="navigation-item">About Us</a>
      <a class="navigation-item">Your Workspaces</a>
    </nav>
  </header>
  <main>
    <article>
      <h1>Making work simpler, more pleasant, and more productive</h1>
      <section>
        <p>Slack is the collaboration hub that brings the right people together with all the right information and tools to get work done. Launched in 2014, Slack is the fastest-growing business application in history. Millions of people around the world use Slack to connect their teams, unify their systems, and drive their business forward. From Fortune 100 companies to corner markets, Slack helps people communicate better.</p>
      </section>
      <section>
        <h2>70,000+ paying companies use Slack (and counting)</h2>
      </section>
      <section>
        <div class="stat-box">
          <div class="stat">8M</div>
          <div class="label">8 million daily active users</div>
        </div>
        <div class="stat-box">
          <div class="stat">65M</div>
          <div class="label">65 companies from the Fortune 100 have paid Slack workspaces</div>
        </div>
        <div class="stat-box">
          <div class="stat">500K</div>
          <div class="label">500,000 organizations use Slack</div>
        </div>
      </section>
    </article>
  </main>
</body>
</html>