HTML and CSS can build a page that looks like a Facebook or Instagram profile, but only as a static website mockup. They cannot create a Facebook Page or an Instagram business account, sign anyone in, or turn a local file into a live feed. This tutorial builds the mockup first, then explains how to link to real profiles or show real posts if that is what you actually need.
Decide what “Pages” means before you start
The phrase covers three different projects, and each one needs a different tool. Choose the row that matches your goal.
As an Amazon Associate I earn from qualifying purchases.
| What you mean | What HTML and CSS do here | What they cannot do | Where to go next |
|---|---|---|---|
| A design mockup styled like a social profile | Structure and style a fictional profile page with a header, actions and a post grid | Create an account, verify a person or sign anyone in | Follow the build steps below |
| A website section that links to your profiles | Add ordinary links from your site to a Facebook or Instagram profile | Show live profile content or confirm the account exists | See “Link to real profiles” below |
| A real Facebook Page or Instagram business account | Nothing. Account creation and customization happen inside Meta’s platforms | Create or configure the account | Follow Meta’s current account instructions in Meta Blueprint |
| Real Instagram posts shown on your website | Place embed markup from a supported Meta route, where the post is eligible | Turn a static page into a live feed or embed every account or post | See “Show real Instagram posts” below |
Build the mockup, step by step
This exercise uses fictional content, so no real account, logo or brand asset is involved. Work through the steps in order.
-
Create a folder named
profile-mockupcontaining two files,index.htmlandstyles.css. Save both as UTF-8.#1 Best Overall
Sale
HTML and CSS: Design and Build Websites- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
-
Write the HTML structure. Use a
headerfor the profile summary, anavfor action links, and amainelement for the post grid. Label the content as a sample so no reader mistakes it for a real profile.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample Studio (mockup)</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header id="about" class="profile-header"> <img class="avatar" src="avatar.jpg" alt="Placeholder profile photo"> <h1>Sample Studio</h1> <p>Fictional bio for a class exercise.</p> </header> <nav class="actions" aria-label="Profile actions"> <a href="#gallery">View posts</a> <a href="#about">About</a> </nav> <main id="gallery" class="grid"> <article class="card"> <img src="post1.jpg" alt="Sample photo of a coffee cup"> </article> </main> </body> </html> -
Add the layout CSS in
styles.css. A three-column grid for posts works well on wide screens, and the avatar is cropped to a circle withobject-fit..grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; } .card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } @media (max-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } } :focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; } -
Use your own images or openly licensed photos for
avatar.jpgand the post files. Do not use Meta logos or copy a platform’s interface assets, and do not present the page as an official Meta product.What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Open
index.htmlin a browser. In Chrome or Firefox, press Ctrl+Shift+M (Windows or Linux) or Cmd+Shift+M (macOS) to open the device toolbar, then narrow the viewport to check the two-column layout.
Check the mockup for keyboard, contrast and text size
A mockup that looks right on a large screen can still fail readers. Run these checks before you call the exercise finished.
- Press Tab from the top of the page. Each link in the
navshould receive a visible focus outline from the:focus-visiblerule. - Check that body text and link colors have enough contrast against their background. The WCAG AA guideline for normal text is a contrast ratio of at least 4.5 to 1.
- Increase the browser’s default text size, or zoom the page to 200 percent, and confirm that the header and grid do not overlap or hide text.
- Confirm every image has a meaningful
altvalue, and that placeholder avatars are described as placeholders. - Resize the window below 600 pixels wide and confirm the grid drops to two columns without horizontal scrolling.
Link to real profiles
If your exercise calls for a link to a profile, use a standard anchor element with the full profile address, and describe it in your text as navigation to that profile. A link cannot show the profile’s posts or confirm that the account is active. Foundation’s responsive social media section is a useful reference for this pattern: it is a responsive HTML and SCSS section with links to Facebook and Instagram, not a native social page.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Show real Instagram posts
Showing actual Instagram content on a website is a different task from building a mockup. Pause the mockup exercise and follow Meta’s current embed documentation. Do not copy text or images from a profile into your page, and do not scrape posts; neither produces a supported embed.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallWhat the embed documentation reports
A third-party GitHub mirror of Meta’s Instagram oEmbed documentation describes oEmbed as returning embed HTML and basic metadata for presenting an Instagram post on another website or app. The same text reports limits:
- Posts from private accounts, inactive accounts, age-restricted content, and accounts that have disabled embedding cannot be embedded.
- Stories are not supported.
Because that text is a mirror rather than Meta’s own page, confirm the current limits, required permissions and rate limits in Meta’s developer documentation before you build anything.
Check these before you build
- Which account owns the posts you want to show, and whether it is public and has embedding enabled.
- Whether you need individual posts or a full profile feed. The oEmbed reference covers individual posts.
- Whether your site has a plan for the embed markup to load, and what the page looks like if a post cannot be shown.
Compare the two approaches
| Factor | Local HTML/CSS mockup | Embedded Instagram post |
|---|---|---|
| Purpose | Practice layout and styling with sample content | Show a real published post on your site |
| Layout control | Full: every element is written by you | Partial: you control the surrounding layout, not the embedded post |
| Content freshness | Manual: you edit the text and images yourself | Tied to the post as published on Instagram |
| Eligibility | None beyond your own files | Depends on the account and post; private, inactive, age-restricted or embed-disabled content is excluded, and Stories are unsupported (per the mirrored documentation) |
| Complexity | Beginner HTML and CSS | Requires following Meta’s current embed documentation; the setup steps are not covered in this tutorial |
What Meta has published about these topics
Account setup happens inside Instagram
Meta Blueprint’s beginner learning path “Bring your business online with Instagram” was published on September 23, 2021. Its lessons cover establishing an Instagram Business presence, setting up an account and customizing it. Those are platform tasks. Writing a local HTML file does not perform any of them. The course was published several years ago, so check Meta Blueprint for the current version before following it.
The 80 percent figure in context
Meta Engineering’s 2020 account of its Facebook.com redesign describes styling and rendering decisions, including dark mode, dynamic font sizes for accessibility, and image rendering performance. It reports that build-time generation of styles reduced the homepage’s CSS by 80 percent. That is Meta’s measurement of its own homepage during one redesign, not a typical result and not a benchmark for a student project. It is still a useful example of why text sizing and accessibility belong in the design from the start.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Distinction check before you publish
Before you share the page, answer this question in one sentence: which parts are your HTML and CSS design, and which parts are hosted or controlled by Meta? If your answer includes the profile, the posts, the login or the follower count, the page is a mockup of those things, not the thing itself.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
