Conclusion

Lesson 16 of 16 in Coddy's Instagram Page Clone | Front-End Project course.

Congratulations on completing the Instagram Page Clone course!

You have created and styled a website that world-class companies and social media websites use. This will help you start, approach, and decide which technique to use when beginning a new Web Development project.

You can see the final website on the right and how easy it is to achieve that look by using proper structure, logical elements, neat styling and design, and a correct technique approaching the website.

Thank you for your dedication and hard work throughout this course. Keep coding and continue to enhance your programming!

- Zimbakov Tech

Challenge

Easy

To finalize the website and its guaranteed functionality, loading and structure do the following steps

Add the meta tag in the head to use the charset UTF-8
Add the meta tag viewport to use the full width and have a scale of 1.0
Add the lang property to the html tag to and set it to en since we are using English language

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <title>Instagram</title>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div id="background">
            <section id="profileInfo">
                <div id="left">
                    <img alt="Profile Picture" src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FB1W4ovz1wpFwKXcrZmzV%2Finjected_t0?alt=media&token=799f5980-a8c4-43a6-82ca-1f8ba57a360f">
                    <h2 id="username">zimbakovtech</h2>
                </div>
                <div id="right">
                    <div id="userTop">
                        <div class="button" id="follow">Follow</div>
                        <div class="button">Message</div>
                        <div class="button"><img src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FYGTvUtASn8CI5DiXWvFs%2Finjected_t0?alt=media&token=631ebb8f-3a01-4dec-b525-8a7460661676" alt="Add"></div>
                        <img id="more" src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FYGTvUtASn8CI5DiXWvFs%2Finjected_t1?alt=media&token=351f4b48-6f68-4cd7-83c3-0c7f67bed30b" alt="more">
                    </div>
                    <div id="infoMid">
                        <p><b>3</b> posts</p>
                        <p><b>110</b> followers</p>
                        <p><b>35</b> following</p>
                    </div>
                    <div id="bioBot">
                        <p><b>Zimbakov Tech</b><br>
                        <span style="color: grey">Tutor / Teacher</span><br>
                        Freelancer, course creator and coding tutor<br>
                        Coding | Courses | Websites | Apps<br>
                        Course Creator at Coddy, Inc</p>
                    </div>                   
                </div>
            </section>
            <hr>
            <section id="posts">
                <div id="bar">
                    <div class="option" id="active">
                        <img src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FNClQd1AbT751LPf6TLg0%2Finjected_t0?alt=media&token=a193c280-2892-48cf-a414-e84172459222" alt="Posts">
                        <p>POSTS</p>
                    </div>
                    <div class="option">
                        <img src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FNClQd1AbT751LPf6TLg0%2Finjected_t1?alt=media&token=aa5b3f29-b2ad-416e-a9cb-930cd8a857f7" alt="Reels">
                        <p>REELS</p>
                    </div>
                    <div class="option">
                        <img src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FNClQd1AbT751LPf6TLg0%2Finjected_t2?alt=media&token=a67f791f-f1f1-475b-9766-38b160bb8ed5" alt="Tagged">
                        <p>TAGGED</p>
                    </div>
                </div>
                <div id="feed">
                    <img class="post" src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FgSLCVGPMnzw5dtzxx8rE%2Finjected_t2?alt=media&token=0e2d1d14-7c25-40e9-8813-cd507c7973b8" alt="Post3">
                    <img class="post" src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FgSLCVGPMnzw5dtzxx8rE%2Finjected_t1?alt=media&token=ed9a6d5b-9c97-4296-844a-356010ffde59" alt="Post2">
                    <img class="post" src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FgSLCVGPMnzw5dtzxx8rE%2Finjected_t0?alt=media&token=898bd40a-1611-4e8c-836f-e55f3aac2aec" alt="Post1">
                </div>
            </section>
        </div>
    </body>
</html>