GithubHelp home page GithubHelp logo

lab-css-flexbox-slack's Introduction

Ironhack logo

CSS | Slack clone with Flexbox


Slack is a cloud-based set of team collaboration tools and services, or in simpler terms, an online chat application.

We use Slack app almost every day to keep our communications with our classmates and the Ironhack team, but today we will be focusing on their landing page. In today's lab, we'll recreate Slack's landing page while ensuring it's responsive and adapts well to different screens. You can see the web page that we will be cloning here.

The goal of the lab is to create a responsive landing page using CSS, Flexbox, and media queries.


  • Fork this repo
  • Clone this repo


  • Upon completion, run the following commands:

    git add .
    git commit -m "done"
    git push origin master
  • Create a Pull Request so that your TAs can check your work.


The starter_code folder contains all the files you'll need. The images folder contains all the images you'll need for your page, although most of them are already displayed on the page.

The index.html already contains all the text and content needed. We will be focusing on the CSS and the styling!

During each iteration, the first step you should do is to inspect the provided screenshots. These are included in each iteration, along with a preview of the final result. Use these as a starting point for implementing your styles.

Iteration 1 | Mobile Screens (width < 768px)

Mobile first right? ๐Ÿ˜‰

We will start by focusing on the styles for mobile screens first! ๐Ÿ“ฑ Oh! Remember to use Flexbox to create the layout and display the content in rows or columns from the start. You'll be working on adapting the layout to different screen sizes in the following iterations, so it's essential that you start using Flexbox from start to end!

When done, your page should look like this: Preview - Mobile

Use the following page screenshot as the guide:

Screenshot - Mobile Screens

Back to top

Iteration 2 | Small Screens (width > 768px and width < 1024px)

Let's start growing our screen size. Focus on small screens (iPads, tablets or bigger smartphones). Notice we have some changes. You need to work on the following ones:

  • The header should go from 1 column to display 2 columns; one with the content and buttons and the other with the image.
  • The company logos should be displayed in a single row
  • The images in the sections in the main part should be fully displayed and aligned to the left or right side of the page, respectively.
  • The section "Team large and small rely on Slack" should have the list items and the buttons displayed horizontally as rows.
  • The subfooter items, previously displayed as a column, should now be displayed in a single row.

When done, your page should look like this: Preview - Small Screens

Use the following page screenshot as the guide:

Screenshot - Small Screens

Back to top

Iteration 3 | Medium Screens (width > 1024px and width < 1440px)

The easiest change we will have. We'll continue by focusing on the meduim screen size devices (notebooks and bigger tablets):

  • The navbar should now display all the menu links. The previously displayed menu icon should now be hidden.
  • The sections in the main part should now display the content in 2 columns; one column for the heading and text and the other for the image.
  • The section "Welcome to your new digital HQ" should now have the buttons displayed horizontally as rows.

When done, your page should look like this: Preview - Medium Screens

Use the following page screenshot as the guide:

Screenshot - Medium Screens

Back to top

Iteration 4 | Large Screens (width > 1440px)

Last one! Some small changes and we are done! In this iteration we are targeting the large screen devices such as desktops and laptops:

  • The sign up buttons in the header should now be displayed horizontally, next to each other. Additionaly, the image shown in the header should be centered and fully visible.

When done, your page should look like this: Preview - Large Screens

Use the following page screenshot as the guide:

Screenshot - Large Screens

Back to top

Happy coding! โค๏ธ

lab-css-flexbox-slack's People


sandrabosk avatar ross-u avatar henrique-mazzoleni avatar papuarza avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.