Build and publish your first web page: a Profile Card that grows into a Profile Page.
No installs required. We’ll use Tailwind via CDN and GitHub’s web editor.
index.html— starter profile card (Tailwind CDN already linked)assets/— images you can use (optional placeholder included)docs/screenshots/— put your how-to screenshots here (placeholders referenced below)
-
Fork this repo (top-right button)
Screenshot placeholder:
-
Open in a GitHub Codespace
- Click the green “Code” button → select the Codespaces tab → click “Create codespace on main”
- Wait for it to load (it’ll look like VS Code in your browser).
Screenshot:
-
Start a Live Preview (Live Server)
-
In the Codespace terminal (bottom panel), type:
npx live-server
-
After a few seconds, a preview panel or link will open (something like
https://<username>-<repo>-<id>.app.github.dev) -
Every time you save your file, the page refreshes automatically.
Screenshot:
-
Make your changes! Add new sections, personalize your card.
-
If you don't have an image have AI imagine one of you!
-
Click Commit in the source control sidebar.
Screenshot:
-
- Go to Settings → Pages
- Under Build and deployment, set Source = Deploy from a branch
- Choose Branch =
mainand Folder =/ (root), then Save - Wait ~30s. Your site URL appears at the top of the Pages section.
Screenshots:
Goal: One centered card with an image, name, short bio, and a button that links to your GitHub.
Suggested changes:
- Replace the image with your own (or use
assets/shuri.jpg) - Try color classes:
text-blue-600,bg-violet-200,text-green-700 - Add spacing:
p-6,mt-4,mb-2 - Round things:
rounded-lg,rounded-full - Shadow:
shadow,shadow-lg
Turn the card into a full personal page. Add sections:
<!-- Example sections to add below your card -->
<section id="about" class="mt-8">…</section>
<section id="projects" class="mt-8">…</section>
<section id="contact" class="mt-8">…</section>Ideas:
- Use a simple grid or flex layout for the Projects section
- Add buttons/links to other sites
- Create a color theme with consistent
text-*andbg-*classes
Stretch goals
- Responsive tweaks:
md:grid md:grid-cols-2 - Hover effects:
hover:scale-105,hover:bg-… - Dark mode toggle (bonus): swap classes on the
<body>
HTML (structure)
<div>— invisible box for grouping content<h1>–<h3>— headings/titles<p>— paragraph text<img src="" alt="">— images<a href="">— links (can look like buttons with classes)
Tailwind CSS (style)
- Color:
text-blue-600,bg-gray-100 - Size:
text-2xl,w-1/2 - Spacing:
p-6,m-4,mt-2 - Layout:
flex,grid,justify-center,items-center,gap-4 - Borders & rounding:
border,rounded-xl - Shadow:
shadow,shadow-lg
Tailwind CSS
- Docs: https://tailwindcss.com/docs
- Playground: https://play.tailwindcss.com/
HTML & CSS Learning
- MDN HTML Guide: https://developer.mozilla.org/en-US/docs/Web/HTML
- MDN CSS Guide: https://developer.mozilla.org/en-US/docs/Web/CSS
- HTML Elements Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Deploying
- GitHub Pages Intro: https://pages.github.com/
- Driver: types the code
- Navigator: reads instructions, spots mistakes, explains what’s happening
- Switch every 5–7 minutes
- Say errors out loud before fixing—debugging is a team sport
Prompts you can try:
- “Explain what this HTML tag does:
<img>.” - “Suggest 3 Tailwind class combos for a modern button.”
- “Why isn’t my image showing? Here’s my code: …”
Always read the code it suggests and test small changes.
- My site is live on GitHub Pages
-
index.htmlincludes my name, image, and links - I added at least one extra section
- I submitted my URL via the class form
- Pages 404? Wait 1–2 minutes, then refresh.
- Styles not working? Make sure the Tailwind CDN
<script>is still in<head>. - Broken image? Check the URL and that
https://is valid. - Nothing centered? Ensure the
<body>hasmin-h-screen flex items-center justify-center.
You may use this starter for learning and non-commercial demos.
Replace or remove this section if your org has a standard license.