Today I build 'Oldagram' page from Scrimba

Feel free to take a look on my work!
Oldagram Page
Source Code

This project is part of the task in 'Essential CSS Concept' chapter from Scrimba. So far the experience is good in this platform.

For this task I create the layout which similar to instagram. Basically have to use Javascript to go thru the list of object and then render out all post.

<div class="posting">
    <div class="account">
        <img src="images/avatar-vangogh.jpg" class="img-avatar" />
        <div class="account-info">
            <p class="account-name">Vincent van Gogh</p>
            <p class="account-location">Zudert, Netherlands</p>
        </div>
    </div>
    <img src="images/post-vangogh.jpg" alt="" class="post" />
    <div class="btn">
        <img src="images/icon-heart.png" alt="" class="btn-like button" />
        <img src="images/icon-comment.png" alt="" class="btn-comment button"/>
        <img src="images/icon-dm.png" alt="" class="btn-share button" />
    </div>
    <p class="num-like">21 likes</p>
    <div class="comment-section">
        <p class="username">vincey1853</p>
        <p class="comment">just took a few mushrooms lol</p>
    </div>
</div> 

This is the code format that have to create and appendChild to 'main' element after loop thru the array of posts item.

Overall flexbox is use to arrange every post arrange like the 'img-avatar' and 'account-name' with 'account-location' on side.

I did add-on the hover effect on the icon button - like, comment and share but then try to do 'likes count' when press the like button and found that it take time to do as i did not setup the firebase at first so i did not proceed it as the task main propose is to learn and apply css skill.

Tomorrow will be continue on 'Essential CSS Concept' last chapter and then continue to learn 'Essential Javascript Concept'.

Eat, sleep, code, repeat!
Andrew Tan