iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
HTML and CSS can build a web page that looks like a Facebook or Instagram profile. They cannot create a Facebook Page, an Instagram business account, a working login, or a live feed. This tutorial builds a clearly labeled social-style mockup, shows how to link a website to real profiles, and explains where live embeds stop.
Which kind of “Pages” you mean
The phrase “Facebook and Instagram pages” can mean three different things. Only the first is something HTML and CSS produce by themselves.
| What you mean | What it is | Can HTML and CSS produce it? |
|---|---|---|
| A website mockup styled like a social media page | A static page you design, with fictional or licensed content | Yes |
| A website section that links to social profiles or embeds posts | Links and embedded post markup on your own site | Links, yes. Live embeds only through Meta’s supported route, with limits |
| A real Facebook Page or Instagram business account | An account on Meta’s platforms, with its own settings and audience | No. It is created and managed inside Meta’s products |
If your course or project means the third option, skip to the section on account setup. The rest of this guide assumes the first two.
Recommended Free Tools
What HTML and CSS do in this project
- HTML defines the structure: a header, a profile summary, navigation, and a grid of posts.
- CSS defines the presentation: colors, spacing, the grid layout, and how the page reflows on a narrow screen.
- Neither language signs anyone in, verifies identity, or fetches new posts. A static file shows exactly what you typed, until you edit it again.
Build the mockup
- Create a project folder. On Linux or macOS, run
mkdir sample-mockup, thencd sample-mockup, thentouch index.html style.css. On Windows, create two empty text files namedindex.htmlandstyle.cssin one folder. - Paste the markup from the next section into
index.html, and the stylesheet intostyle.css. Keep both files in the same folder. The link in the markup uses a relative path, so the stylesheet loads only when the two files sit together. - Open
index.htmlin a browser. Double-click the file, or press Ctrl+O (Cmd+O on macOS) and choose it. Expected result: a sticky top bar, a profile header with a grey circle for the avatar, and a grid of six square tiles. - Narrow the browser window below 600 pixels. Expected result: the profile header stacks vertically and the grid changes from three columns to two.
The markup
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Sample Studio (design mockup)</title>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<header class='topbar'>
<span class='wordmark'>Sample Studio</span>
<nav aria-label='Mockup navigation'>
<a href='#posts'>Posts</a>
<a href='#about'>About</a>
</nav>
</header>
<main>
<section class='profile' id='about'>
<div class='avatar' aria-hidden='true'></div>
<div>
<h1>Sample Studio</h1>
<p>Fictional account for a design exercise. Not a real profile.</p>
<button type='button'>Follow (demo only)</button>
</div>
</section>
<section id='posts' class='grid' aria-label='Sample posts'>
<article class='card'>Sample post 1</article>
<article class='card'>Sample post 2</article>
<article class='card'>Sample post 3</article>
<article class='card'>Sample post 4</article>
<article class='card'>Sample post 5</article>
<article class='card'>Sample post 6</article>
</section>
</main>
</body>
</html>The stylesheet
:root {
--bg: #fafafa;
--text: #262626;
--muted: #6b6b6b;
--accent: #0b5cad;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.5;
background: var(--bg);
color: var(--text);
}
.topbar {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: #fff;
border-bottom: 1px solid #dbdbdb;
}
.topbar nav a {
margin-left: 1rem;
color: var(--accent);
}
main {
max-width: 900px;
margin: 0 auto;
padding: 1rem;
}
.profile {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1.5rem 0;
}
.profile p {
color: var(--muted);
}
.avatar {
flex-shrink: 0;
width: 96px;
height: 96px;
border-radius: 50%;
background: #8a9bb0;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.card {
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
background: #dbe3ec;
}
a:focus-visible,
button:focus-visible {
outline: 3px solid #000;
outline-offset: 2px;
}
@media (max-width: 600px) {
.profile {
flex-direction: column;
text-align: center;
}
.grid {
grid-template-columns: repeat(2, 1fr);
}
}Three choices in this markup matter beyond appearance. The page uses header, nav, and main so a screen reader can jump between regions. The avatar is decorative, so it is hidden from assistive technology with aria-hidden. The button is labeled as a demo, because it does nothing when clicked and a visitor should not assume it does.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Link a website to real profiles
An ordinary anchor is the simplest and most reliable connection between your site and a Facebook or Instagram profile. It is navigation: clicking it sends the visitor to the platform, where the profile’s own settings and content apply. Your page does not display that profile’s posts or follower count.
<nav aria-label='Social links'>
<a href='https://example.com/your-profile' target='_blank' rel='noopener noreferrer'>Instagram profile (sample link)</a>
</nav>The target='_blank' attribute opens the link in a new tab. If you use it, say so in the link text or nearby, because a visitor who expects the same tab may be surprised. The rel='noopener noreferrer' attribute prevents the new page from accessing your page’s window object. Replace the example address with the real profile address you have permission to link to.
Embed real Instagram posts
Showing an actual Instagram post on your own page is a different task from styling a mockup. It depends on a platform route, and that route has limits.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
What the embed route covers
Meta’s Instagram oEmbed reference describes returning embed HTML and basic metadata so that a specific Instagram post can appear in another website or app. The copy of that reference reviewed for this guide was a third-party reproduction, and such copies can lag behind Meta’s own pages. Confirm current permissions, access requirements, rate limits, and account eligibility in Meta’s official developer documentation (Meta for Developers) before you write any implementation code.
Known limits
- Posts from private accounts are not available through the route described in that reference.
- Inactive accounts, age-restricted accounts, and accounts that have disabled embedding are excluded.
- Instagram Stories are unsupported.
- The reference covers individual posts. It does not describe embedding a full profile feed as a live, always-current stream, so a live feed is outside what this tutorial can build.
What to avoid
Do not copy post images or captions into your page by hand or with a scraper to imitate an embed. That approach is not a supported way to show Instagram content, and the copied material will not update when the original post changes. If an embed is blocked for a given post, link to the post instead.
Check accessibility before you publish
- Keyboard focus: press Tab through the page. Each link and button should show the visible outline defined by the
:focus-visiblerule. - Contrast: body text (#262626 on #fafafa) and muted caption text (#6b6b6b on #fafafa) both clear the WCAG AA threshold of 4.5:1 for normal text by the standard luminance formula. Re-check any colors you change.
- Text resizing: the stylesheet uses
remunits, so text scales with the browser’s default font size. Set the browser’s default size to a larger value and confirm that the layout still reads. - Narrow screens: at 600 pixels or less, the profile should stack and the grid should drop to two columns without horizontal scrolling.
Meta’s own engineering team describes similar concerns in its account of the Facebook.com redesign, including dynamic font sizes for accessibility and dark mode. That account is a useful reference for what production teams weigh, though it is written for a very large product and does not translate directly to a student 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
What Meta’s redesign figure does and does not show
Meta Engineering’s 2020 account of the Facebook.com redesign reports that build-time generation of styles reduced the homepage’s CSS by 80 percent. That is Meta’s figure for its own homepage. It is not a typical result, and it is not a benchmark for a beginner’s mockup, which is small enough that build tooling makes little difference.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Creating a real Page or account is a separate task
Meta Blueprint’s beginner learning path “Bring your business online with Instagram” was published on September 23, 2021. Its listed lessons cover establishing an Instagram business presence, setting up an account, and customizing it. That sequence happens inside Instagram and related Meta tools, not in a local HTML file. Meta changes its account setup screens over time, so follow the current Meta instructions rather than an older screenshot.
Quick Recap
Choosing the right approach
| Approach | Typical purpose | Who controls the content | Limits | Build effort |
|---|---|---|---|---|
| Local mockup | Practise layout and styling | You, by editing the files | None from Meta; content is static | Low |
| Profile link | Send visitors to a profile | The platform controls the profile | The destination’s own visibility rules apply | Low |
| Post embed | Show a specific Instagram post | Meta supplies the embed markup | Account and post restrictions listed above; Stories not supported | Higher; depends on Meta’s current workflow |
| Real Page or business account | A live business presence | Meta and the account owner | Meta’s account rules | Platform-specific setup, not HTML or CSS |
Check before you publish
- Label the page as a mockup or design exercise in the title or a visible note.
- Use only sample text and images you own or are licensed to use. Leave out Facebook and Instagram logos and screenshots, which can suggest endorsement.
- Describe every social link as navigation to a profile, not as a feed or live connection.
- Confirm which parts of the finished page are your HTML and CSS, and which parts are hosted or controlled by Meta.
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.
