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.
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:
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.
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.
<title>About Us | Slack</title>
<a class="navigation-item">Why Slack?</a>
<a class="navigation-item">About Us</a>
<a class="navigation-item">Your Workspaces</a>
<h1>Making work simpler, more pleasant, and more productive</h1>
<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>
<h2>70,000+ paying companies use Slack (and counting)</h2>
<div class="label">8 million daily active users</div>
<div class="label">65 companies from the Fortune 100 have paid Slack workspaces</div>
<div class="label">500,000 organizations use Slack</div>