# Struggling to Clone HackMD's Homepage with HTML and TailwindCSS ![Capture](https://hackmd.io/_uploads/B1kJFPho1x.jpg) ## Introduction My class at Blockfuse Labs was given the challenge of cloning HackMD's homepage using only HTML and TailwindCSS recently. While I have a decent grasp of HTML and CSS, I quickly realized that replicating a complex, interactive website like HackMD's homepage is no joke. The homepage is filled with dynamic elements, animations, and interactive components that require JavaScript to function properly. Since I haven't started learning JavaScript yet, I found myself struggling with certain aspects of the project, particularly with background images and embedded carousel videos. In this article, I'll walk you through my journey, section by section, highlighting the challenges I faced and how I attempted (..and i'm still attempting) to overcome them. ## The Structure of the Page ### 1. **Navigation Bar** The first section I tackled was the navigation bar. HackMD's navbar is sleek and responsive, with a logo on the left and a series of links on the right. I used TailwindCSS to style the navbar, making it fixed at the top of the page and ensuring it was responsive across different screen sizes. ```html <nav class="flex w-full flex-row items-center justify-between px-4 py-3 text-white md:px-6 before:absolute before:left-0 before:top-0 before:z-[-1] before:h-[var(--blur-before-height)] before:w-full before:bg-[#18181B80] before:backdrop-blur-[12px] before:transition-[max-height,background-color] before:duration-200 fixed top-0 z-50" style="--blur-before-height:100%"> <a class="flex" href="#"> <span class="inline-flex h-[20px] gap-1 md:h-[30px]"> <img alt="HackMD Logo" loading="lazy" width="0" height="0" decoding="async" data-nimg="1" class="inline h-full w-auto" style="color:transparent" src="./img/logo-full.svg"> </span> </a> <!-- Navigation Links --> </nav> ``` **Challenges:** - **Blur Effect:** The navbar has a blur effect that changes when you scroll. This effect is achieved using JavaScript, which I don't know yet. I tried to replicate it using CSS, but it wasn't as smooth as the original. ### 2. **Hero Section** The hero section is one of the most visually striking parts of the homepage. It features a large background image, a headline, a video and a call-to-action button. I used TailwindCSS to create a responsive layout and added a gradient background to mimic the original design. ```html <section class="relative overflow-hidden flex h-auto flex-col items-center bg-[url(&quot;./img/main-bg.svg&quot;)] bg-cover bg-center bg-no-repeat pt-[111px] md:mx-[22px] md:pt-[171px] border-t-0 corner-radius-xl"> <div class="flex flex-col items-center gap-4 px-6 md:gap-[21px]"> <span class="text-headline leading-headline font-readex-pro font-semibold tracking-[-2px] text-headline-gradient"> Build together with Markdown </span> <!-- Additional Content --> </div> </section> ``` **Challenge:** - **Background Image:** The background image in the hero section is dynamic and changes based on user interaction. Without JavaScript, I couldn't replicate this behavior. I settled for a static background image, which doesn't have the same impact. ### 3. **Testimonials Section** The testimonials section features quotes from users and logos of companies that use HackMD. I used TailwindCSS to style the quotes and logos, making sure the layout was responsive. ```html <div class="m-6 flex flex-col items-center justify-center gap-7 px-6 py-12 corner-radius-xl md:py-16 [background:linear-gradient(180deg,rgba(94,97,121,0.27)_-12.59%,rgba(94,97,121,0)_100%),#1C1C27]"> <span class="relative w-full max-w-[760px]"> <img alt="quote image top left" loading="lazy" width="42" height="42" decoding="async" data-nimg="1" class="absolute left-0 top-0 mt-[-13px]" style="color:transparent" src="./img/quote-alt.svg"> <h6 class="text-h6 leading-h6 font-readex-pro relative z-[1] font-normal text-white"> HackMD is my go-to thinkpad... </h6> <img alt="quote image top left" loading="lazy" width="42" height="42" decoding="async" data-nimg="1" class="absolute bottom-0 right-0 mb-[-8px] rotate-180" style="color:transparent" src="./img/quote-alt.svg"> </span> <!-- Logos --> </div> ``` **Challenge:** - **Dynamic Content:** The testimonials section is dynamic, with quotes and logos changing periodically. Without JavaScript, I couldn't replicate this behavior. I opted for a static layout with a single quote and a few logos. ### 4. **Features Section** The features section highlights the key functionalities of HackMD, such as document collaboration, templates, and GitHub integration. I used TailwindCSS to create a grid layout for the features, ensuring it was responsive. ```html <div class="flex flex-col items-center justify-start gap-8 px-6 pb-8 pt-12 md:gap-12 md:py-20"> <div class="relative w-full max-w-[956px]"> <h2 class="text-h2 leading-h2 font-readex-pro font-semibold relative z-[1] max-w-[662px] text-headline-gradient"> Accelerate innovation... </h2> </div> <!-- Feature Cards --> </div> ``` **Challenges:** - **Interactive Elements:** The feature cards have hover effects and animations that are triggered by user interaction. Without JavaScript, I couldn't replicate these effects. I used basic CSS hover effects, but they weren't as polished as the original. - **Embedded Carousel Videos:** This section also includes a carousel of videos that autoplay and loop. I tried to embed the videos using HTML, but without JavaScript, I couldn't create the carousel effect. The videos just stacked on top of each other. ### 5. **Footer** The footer is relatively straightforward, with links to various pages and social media icons. I used TailwindCSS to style the footer and ensure it was responsive. ```html <footer class="bg-background-default px-6 pt-14 text-white"> <div> <section class="flex flex-wrap justify-between gap-x-2 gap-y-9"> <!-- Footer Links --> </section> <!-- Social Media Icons --> </div> </footer> ``` **Challenges:** - **Dynamic Content:** The footer includes a language selector that changes the content based on the selected language. Without JavaScript, I couldn't replicate this functionality. I opted for a static footer with a single language. ## Conclusion Cloning HackMD's homepage using only HTML and TailwindCSS was a challenging but rewarding experience. While I was able to replicate the basic structure and layout, I quickly realized that many of the dynamic and interactive elements require JavaScript. This project has motivated me to start learning JavaScript so that I can take my web development skills to the next level. **What have I learned from this exercise in futility?** - **HTML and CSS are powerful**, but they have limitations when it comes to creating dynamic and interactive web pages. - **JavaScript is essential** for adding interactivity and dynamic content to a website. - **TailwindCSS is a great tool** for quickly styling and creating responsive layouts, but it can't replace the functionality provided by JavaScript. I'll just say it. While I'm excited to continue learning and improving my skills, and I look forward to revisiting this project once I have a better understanding of JavaScript, I do feel a little bit stumped as I have been trying to embed those carousel videos using only my limited knowlwdge for a while now and failing miserably.I won't give up though. I'll keep at it until I'm able to produce such masterpieces myself. Until then, I'll keep experimenting and pushing the boundaries of what I can achieve with HTML and CSS. --- **Ps:** If you have any tips or suggestions for improving my approach, feel free to share them in the comments below!(*No, really. I'm begging!*)Thank you!