Facebook Profile Page Clone

This is a minimal clone of the Facebook desktop web profile page of a person. You will type less than 50 lines to achieve this beautiful page.

This is the final view of what we will do in this project.

Before proceeding, take a look at setting up a code workspace for your projects from this article: Workspace

You can name the project folder for this project as “facebook_profile”

Begin

In your clean project folder inside your favorite editor (I am using Brackets), create a new file with Ctrl+N (File > New), then save it using Ctrl+S (File > Save). Type a “index.html” as the file name and press Enter.

It is not absolutely necessary to use index.html. You can also use home.html or profile.html; just know that the file name should end with .html. This tells the editor that we are treating this file as an HTML file for a webpage.

You now have index.html in your project folder

Now lets begin coding our profile page. Type the exclamation sign “!” and press the Tab key on the keyboard. This will prepare the basic structure of an HTML document for you.

Type an exclamation sign (Shift + 1)

Press Tab key on the keyboard to generate this basic structure

Do not worry about what just happened. As you continue to grow in code, you will understand eventually.

Now clear the “Document” part in the title element and type “Your name Profile”. For instance “Girls Code Profile”. Then save it; Ctrl+S.

change title of the page. this appears at the top of the browser

Lets have a look at our work so far. Open your File Explorer and navigate to your project folder. You will find the html file we just wrote. Double-click on it to view it in your browser.

Your icon may look different, but don’t worry.

You will realize that in the browser, nothing appears on the page. But at the top part of the browser you will see the title you gave to the webpage “Girls Code Profile”.

Now, let’s start some real cooking. Add the new codes you see in there to your code. Save it, and preview it in your browser to see what happened.

update your code to look like this

You will realize, that nothing new was shown when you viewed the page in your browser. What we just added is known as a comment. They do not appear in the browser, but they are written as personal notes to the programmer. In this case, we noted that we have to add styles, banner, and so on to our page.

Styles

Let us fulfill our first note. Add our styles.

We have added our styles. Don’t worry about this yet.

So, we just added our styles. Also known CSS Styles. These styles contain the way texts, buttons, images and other items should appear on our webpage. We will have a tutorial on that later in this series.

Banner

Let’s move on to add the banner image of our profile page.

Profile banner added

So now we have <div> appearing. This could be seen as a block. So <div> basically mean blocks. And our first <div> is the banner block. That is why it has the class “banner”.

Save the file and preview it in your browser.

Profile Detail

Now our profile detail. You should know that we are going to put it in a block too. So guess what we start with: <div>.

our profile detail block

Our profile detail block will also contain the “name and bio” block and the “about” block. Try that exercise before looking at the code below.

Clap for yourself if you had it almost like this

Name and Bio

Two more items to go… Go hard. So, we are going to add our profile image, name and bio.

Profile detail

Now save the file and preview it in your browser. Happy right??

Finally

Let’s add our about.

last show!

Save this last edit. Preview in browser. Smile.

this is how your code should like.

Congratulations, you created your first beautiful HTML page. Try to recreate it without peeping as an exercise.

Conclusion

Items you found in closed angle brackets are known as tags or elements. For instance <h3> is an h3 tag. <p> is a p tag. To find out more about a tag, just make a Google search; like “img tag in html”

you can broaden your knowledge by reading from first three or two links

Great.

Give me some claps if you liked the tutorial. You can share to your friends to have a benefit too. You can ask any question in the comments section and I will be ready to answer all.

Have a nice day.