---
# System prepended metadata

title: How I build the hackMD landing web page with my html and css knowledge.

---

# How I build the hackMD landing web page with my html and css knowledge.
**HackMD Landing Page**
HackMD is a real-time collaborative Markdown editor designed for creating and sharing notes across various platforms. Its landing page highlights the simplicity and versatility of the tool, making it suitable for a wide range of uses from TODO lists to drafting blog posts and internal organizational documents.

The landing page emphasizes the collaborative nature of HackMD, allowing multiple users to edit documents simultaneously without the need for a login or account creation for viewing and editing.
It also showcases features such as the ability to push documents to GitHub and provides support for a variety of Markdown elements, including headers, lists, italics, bold, and web links.

HackMD's landing page also mentions the introduction of new features like Folders, which enhance the organization and management of notes.
Additionally, the platform offers tutorials and guides to help users get started and master Markdown syntax.

Building a landing page for HackMD using Tailwind CSS involves several key points to ensure a professional and user-friendly design.

* Responsive Design: Ensure that the landing page is fully responsive, adapting to different screen sizes and devices. Tailwind CSS provides utilities to make this process straightforward.
* Hero Section: Include a prominent hero section to grab the user's attention and convey the main message of HackMD. Use Tailwind CSS classes to style the section effectively.
* Customization: Tailwind CSS allows for extensive customization through utility classes and theme variables. Customize colors and other design elements to match HackMD's brand identity.
**Learning process**
I used tailwind css to build the hackMD blog page,inwhich the tailwind css is an inline css.I made used of different elements to style the blog page. As a new beginner that started tailwind css,i will say am doing good and still learning.Below is an image of the homepage i build,
![Screenshot from 2025-03-11 09-21-26](https://hackmd.io/_uploads/SyPnMuao1l.png) ![Screenshot from 2025-03-11 09-19-49](https://hackmd.io/_uploads/ry2Tfd6jkg.png)
## Conclusion
The landing page emphasizes the collaborative nature of HackMD, allowing multiple users to edit documents simultaneously without the need for a login or account creation for viewing and editing.
It also showcases features such as the ability to push documents to GitHub and provides support for a variety of Markdown elements, including headers, lists, italics, bold, and web links.



