Hey there , this is an awesome Tutorial IN WHICH I FULLY CLONED Hashnode frontend page using only plain CSS and html.

Best to sharpen your CSS Skills.

Learn advanced CSS Cloning with SOURCE CODE!!!

Best even for beginners.

All the source code need are given below in the post and all you need is just to copy paste the code and create your dream hashnode frontend.

PLease do suggest me what to clone next?

This is a best project for anyone who started coding.

Skills used:

• CSS
• HTML

Yes only this much.

Get started

The main index.html code is:

    <!-- main container  -->
    <div class="container">

        <!-- fixed left wall -->
        <div class="leftfixed">
            <div><img style="width: 160px;margin: 8px;" src="img/logo.jpg"></div>

            <div class="writebtn">
                <img src="img/plus.svg">
                <p style="margin-left: 10px;">Write</p>
            </div>


            <div class="sb"><img src="img/home.svg">Home</div>
            <div class="sb"><img src="img/explore.svg">Explore</div>
            <div class="sb"><img src="img/tags.svg">Tags</div>
            <div class="sb"><img src="img/bookmark.svg">Bookmarks</div>
            <div class="sb"><img src="img/ama.svg">AMAs</div>
            <div class="sb"><img src="img/search.svg">Search</div>
            <!-- <div class="sb"><img src="img/"></div>
            <div class="sb"><img src="img/"></div>
            <div class="sb"><img src="img/"></div> -->

            <img src="img/moon.svg">
            <img src="img/noti.svg">
            <img class="avater" src="img/avater.jpg">
        </div>


        <!-- middle part     -->

        <div class="middle-container">
            <div class="writewrap">
                <span class="ws"><img class="avater" src="img/avater.jpg"><p style="font-weight: 700;margin-left: 10px;color: #495450;">Abhiprojectz</p></span>

                <div class="ws1"><img src="img/plus.svg">
                <p style="margin-left: 10px;">Write an article...</p></div>
            </div>


            <!-- middle slab1 -->
            <div class="slab1">
                <span class="item"><img src="img/fire.svg">Best</span>
                <span class="item"><img src="img/feature.svg">Featured</span>
                <span class="item"><img src="img/recent.svg">Recent</span>
            </div>
        </div>



        <!-- right part starts  -->
        <div class="rightwall">

            <div class="elem1">
                <div class="elleft">
                    <p style="opacity: 0.7; font-weight: 900;">Become an ambassador</p>
                <p style="color: #495450;">Exclusive Hashnode features, beta access, profile ring and more</p>
                </div>

                <div class="elright">
                    <img style="width: 60px;" src="img/amba.png">
                </div>
            </div>

            <div class="elem1">
                <div class="elleft">
                    <p style="opacity: 0.7; font-weight: 900;">Become an ambassador</p>
                <p style="color: #495450;">Exclusive Hashnode features, beta access, profile ring and more</p>
                </div>

                <div class="elright">
                    <img style="width: 60px;" src="img/amba.png">
                </div>
            </div>


            <!-- footer starts here -->

            <div class="footer">
                <div class="fslab">
                    <div>
                        <ul>
                            <li>About</li>
                            <li>Hashnode APIs</li>
                            <li>Logo & media</li>
                            <li>Privacy</li>
                        </ul>
                    </div>
                    <div>
                        <ul>
                            <li>Site status</li>
                            <li>Careers</li>
                            <li>Terms of service</li>
                            <li>Support</li>
                        </ul>
                    </div>
                </div>

            </div>

© 2021 · Hashnode
        </div>

    </div>

The styling part is as follow:

@import url('https://fonts.googleapis.com/css2?family=Poppins');
body {
    background-color: #F5F7FA;
    font-family: 'Poppins', sans-serif;
}

.container {
    width: 100%;
    display: flex;
}

.leftfixed {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    align-content: center;
    width: 200px;
}

.writebtn {
    background-color: #2962FF;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 800;
    border-radius: 15px;
    margin: 5px;
    width: 100%;
}

.sb {
    color: #495450;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.sb:hover {
    background-color: #fff;
    cursor: pointer;
}

.sb > img {
    margin-right: 10px;
}

.leftfixed > img {
    cursor: pointer;
    padding: 10px;
    margin: auto;
}

.avater {
    border-radius: 100%;
    width: 30px;
    cursor: pointer;
}


.middle-container {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-content: center;
}

.writewrap {
    background-color: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    justify-content: center;
    padding:15px;

}

.ws1 {
    display: flex;
    align-items: center;
    background-color: #E5E7EB;
    padding: 20px;
    color: #495450;
    border-radius: 10px;
    margin:8px;
}

.ws {
    display: flex;
    align-items: center;
}

.slab1 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 10px;
    margin-top: 15px;
    background-color: #fff;
    border: 1px solid #E5E7EB;

}

.slab1 > span {
    margin: 10px;
    margin-right: 20px;
    display: flex;
    align-items: center;
}

.slab1 > span > img {
    margin-right: 10px;
}

.rightwall {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.elem1 {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.elleft {
    width: 75%;
}

.elright {
    display: flex;
    justify-content: space-between;
    margin: 10px;
}

.fslab {
    display: flex;
}

.fslab > div {
    width: 50%;
}

ul li {
    list-style-type: none;
}

#coding #programing #webdevelopment #CSS