Web Development Community

Show community info

Post something interesting…

Link

Poll

Quiz

Tutorial

Course

Main

Commonlounge is a community of learners who learn together. Get started with the featured resources above, ask questions and discuss related stuff with everyone.

discussion

Anant JainWeb Develo…Last updated 2 months ago

Pro Content

Project: Slack's About Page (Part 6)

This is for Pro Members

We like how far you've come. Upgrade today and get access to all quizzes, assignments and projects.

Limited-time discount for early adopters: Pro Membership is only $.% OFF

Already a member? Sign in.

Start your free 7-day trial →

Copied

NaN.

discussion

Sudhakar ShahWeb Develo…Last updated 6 months ago

Personal Project Ideas

Hi,

I am relatively free this semester of college and wanted to do few small self projects to improve my CV and also learn new skills. I have done few basic python scraping projects and simple backend web app with node. I want to do a such a project that might attract recruiters when I apply for my year 3 summer internship next semester. Also i am looking to improve my software development skills.I read many online answers for ideas but all seem to confuse me. Do u have any idea of a good project.

P.S: I have decent amount of knowledge of ML and a willing to learn new stuffs for 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:

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.

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>