Narration / Transcript

Building Slack UI with pure HTML5, CSS3 and JavaScript: The power of CSS grids and flexbox

This is what the narrator says, not what the page shows: equations are read as sentences, code blocks are described, and citations are spoken as citations.

26 blocks · 493 spoken words · narrated Jul 26, 2026

  1. 0:00

    Motivation

  2. 0:02

    Sometime last year, around October, I came across this post about Slack's biggest redesign. It looked quite appealing to me and I tasked myself to make a clone of this page

  3. 0:13

    using pure CSS3 and HTML5. I also wanted to ensure that it's responsive irrespective of the screen size.

  4. 0:22

    Declaimer

  5. 0:24

    I am not fully into frontend stuff and hence not an expert. This was just for learning purposes. Comments, suggestions, and constructive criticisms are welcome.

  6. 0:35

    Source code

  7. 0:37

    The full code for the clone is on GitHub. Sirneij/slack-clone-ui

  8. 0:42

    A responsive and beautiful slack clone UI with rich text editor created from scratch using HTML5, CSS3 and Vanilla JavaScript css3 html5 javascript

  9. 0:56

    It was also hosted on GitHub pages and can be accessed here.

  10. 1:01

    Implementations and decisions

  11. 1:03

    Before starting out, I was a bit comfortable with CSS3 and HTML5, but grids and flexboxes were a bit fuzzy for me. I decided right there and then to learn these features, so the whole application was built using them.

  12. 1:19

    Starting with the container which is the wrapper for all the elements on the page: The HTML code below is 7 lines.

  13. 1:27

    I ensured that it fills the entire width and height of the screen with one column and two rows: The CSS code below is 9 lines.

  14. 1:36

    The header starts from row 1 and ends on row 2: The CSS code below is 6 lines.

  15. 1:42

    main however starts from row 2 till the end and it was also made a grid layout which comprises a sidebar (another grid layout) and body (yet another grid layout): The CSS code below is 23 lines.

  16. 1:56

    The leftmost part of the sidebar contains flexboxes, as do many other parts of the application.

  17. 2:03

    To ensure proper responsiveness, notable breakpoints were screens with maximum width of 1250px, 960px, 918px, 834px, 806px, 724px, 786px, 754px, 600px, 506px, 500px, 495px, 422px...

  18. 2:27

    That was a mouthful!!! There should be a better way!!! I couldn't figure that out though! Help me out using the comment section.

  19. 2:35

    All the styles and markups gave rise to the artifact below:

  20. 2:39

    One cool thing about the sojourn was the implementation and styling of a slack-like rich-text editor using the deprecated JavaScript's exec Command. It was fun and exciting.

  21. 2:51

    A bit of JavaScript handled the rich text editor and some toggles for showing and hiding some parts of the grids. The JavaScript code below is 19 lines.

  22. 3:02

    All vanilla!!! For the rich text editor, this MDN guide was my savior.

  23. 3:08

    That's the bit I want to talk about. Kindly check it out and make suggestions.

  24. 3:13

    Outro

  25. 3:15

    Enjoyed this article? I'm a Software Engineer and Technical Writer actively seeking new opportunities, particularly in areas related to web security, finance, health care, and education. If you think my expertise aligns with your team's needs, let's chat! You can find me on LinkedIn: LinkedIn and Twitter: Twitter.

  26. 3:36

    If you found this article valuable, consider sharing it with your network to help spread the knowledge!