/slack

Primary LanguageHTML

Congratulations for reaching the optional challenges! Today you can choose between two paths:

  • if you want to keep building complex interfaces, stay on this Slack Copycat challenge;
  • if you'd rather learn about Web Accessibility, you can jump to the next challenge.

Background & Objectives

Build a copycat of Slack using the techniques you have learned in this morning's lecture, and previous lectures.

For this challenge you can use both your own css and Bootstrap, as in the head we have both:

 <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

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

For this challenge the components you need are:

  • sidebars.css
  • badges.css
  • channels.css
  • messages.css (for the individual .message design )
  • chat.css (the white section where the .message will be placed + the input to write a message.)

And you will have one layout:

  • slack.css (for the general layout structure of the page).

⚠️ You are designing a static Slack page, no need to be able to switch conversation on the sidebar or actually post a message!

Tips & Resources