Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 1 · 8 / 8Put your page online
Phase 1How the web works
8 topics · 2–3 wks
  1. 1What happens when you open a URL
  2. 2Reading HTML structure
  3. 3Common HTML elements
  4. 4CSS selectors and colours
  5. 5CSS boxes and spacing
  6. 6Layout with flexbox
  7. 7Browser DevTools
  8. 8Put your page online
JourneyPhase 1Put your page online
01 / 08Overview

Put your page online

You'll learn to put your profile page online with GitHub Pages, for free, with a link anyone can open.

Why it mattersA live link is proof of your work. You can share it with friends, teachers and later employers.
about 60 min·needs: Browser DevTools, Git and GitHub basics
02 / 08

Watch & read

Start with the required ones. The others are there when you need them.

Article
Publishing your websiteMDN Web Docs · 15 min · English
MMamun's noteSkim "What are the options?", then follow "Publishing via GitHub" step by step with your own profile page.
DocsOptional
Quickstart for GitHub PagesGitHub Docs · 10 min · English
MMamun's noteThe official steps, with screenshots of the Settings and Pages screens. It builds a page from a README and a theme. You will use your own index.html instead, so skip the _config.yml part.
03 / 08

Explanation

Your profile page works on your laptop. But the address starts with file://, so only you can see it. You want a real https:// link you can send to anyone.

For that, your files must sit on a server that is always on. Renting one is called hosting. GitHub Pages is free hosting for plain HTML, CSS and JavaScript, and you already have a GitHub account.

Think of it like a shop window. Your files live in a GitHub repository, like goods in a storeroom. GitHub Pages puts them in the window, at an address everyone can visit.

The steps:

  1. Create a new public repository named exactly username.github.io, with your GitHub username.
  2. Upload your files, or git push them. The main page must be called index.html.
  3. Wait a minute or two, then open https://username.github.io.
username.github.io/
  index.html
  style.css
  photo.jpg

When someone opens your address, GitHub's server answers with index.html, just like in the first topic of this phase. Then the browser asks for style.css and photo.jpg the same way.

People often name the main file Index.html or home.html. Then the address shows a 404, because the server looks for index.html exactly. The other common one: the CSS loads on your laptop but not online. Windows and macOS do not care about capital letters, but the server does. Photo.jpg is not photo.jpg. Open DevTools, check the Network tab, and fix the name.

When you read a project folder, find index.html first. Then follow each href and src in it, and check that every file it names really exists, with the same spelling.

Words to recognise
hostingGitHub Pagesrepositoryindex.htmlusername.github.iorelative pathdeploy
04 / 08

Code tour

Click a line number with a ring to read the note for that line.

index.html4 notes
<!-- index.html in the repository nusrat-dev.github.io -->
Mentor note · line 1
This file must be called index.html, all small letters. It is what the server sends for the main address.
2<!DOCTYPE html>
3<html lang="en">
4 <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Nusrat Jahan</title>
<link rel="stylesheet" href="style.css">
8 </head>
9 <body>
<img src="photo.jpg" alt="Nusrat in front of the library">
11 <h1>Nusrat Jahan</h1>
12 <a href="https://github.com/nusrat-dev">My GitHub</a>
13 </body>
14</html>
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Your GitHub username is nusrat-dev. What should the repository be called?
  2. 2 / 3Your main file is called home.html. What happens at https://nusrat-dev.github.io?
  3. 3 / 3Your HTML says src="Photo.JPG", and the file is photo.jpg. It works on your laptop. Online?
06 / 08

Explain it back

Only you can see this. Log in to keep it.0 words
07 / 08

How confident are you with Put your page online?

08 / 08

Done

You can now
Publish an HTML and CSS page to username.github.io and fix it when a file does not load.
Next: Values and variables Back to Phase 1
On this page
  1. 01Put your page online
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Quick check
  6. 06Explain it back
  7. 07Confidence
  8. 08Done
Up next · 02 / 08Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 1How the web works
8 topics · 2–3 wks
  1. 1What happens when you open a URL
  2. 2Reading HTML structure
  3. 3Common HTML elements
  4. 4CSS selectors and colours
  5. 5CSS boxes and spacing
  6. 6Layout with flexbox
  7. 7Browser DevTools
  8. 8Put your page online
JourneyPhase 1Put your page online
01 / 08Overview

Put your page online

You'll learn to put your profile page online with GitHub Pages, for free, with a link anyone can open.

Why it mattersA live link is proof of your work. You can share it with friends, teachers and later employers.
about 60 min·needs: Browser DevTools, Git and GitHub basics
02 / 08

Watch & read

Start with the required ones. The others are there when you need them.

Article
Publishing your websiteMDN Web Docs · 15 min · English
MMamun's noteSkim "What are the options?", then follow "Publishing via GitHub" step by step with your own profile page.
DocsOptional
Quickstart for GitHub PagesGitHub Docs · 10 min · English
MMamun's noteThe official steps, with screenshots of the Settings and Pages screens. It builds a page from a README and a theme. You will use your own index.html instead, so skip the _config.yml part.
03 / 08

Explanation

Your profile page works on your laptop. But the address starts with file://, so only you can see it. You want a real https:// link you can send to anyone.

For that, your files must sit on a server that is always on. Renting one is called hosting. GitHub Pages is free hosting for plain HTML, CSS and JavaScript, and you already have a GitHub account.

Think of it like a shop window. Your files live in a GitHub repository, like goods in a storeroom. GitHub Pages puts them in the window, at an address everyone can visit.

The steps:

  1. Create a new public repository named exactly username.github.io, with your GitHub username.
  2. Upload your files, or git push them. The main page must be called index.html.
  3. Wait a minute or two, then open https://username.github.io.
username.github.io/
  index.html
  style.css
  photo.jpg

When someone opens your address, GitHub's server answers with index.html, just like in the first topic of this phase. Then the browser asks for style.css and photo.jpg the same way.

People often name the main file Index.html or home.html. Then the address shows a 404, because the server looks for index.html exactly. The other common one: the CSS loads on your laptop but not online. Windows and macOS do not care about capital letters, but the server does. Photo.jpg is not photo.jpg. Open DevTools, check the Network tab, and fix the name.

When you read a project folder, find index.html first. Then follow each href and src in it, and check that every file it names really exists, with the same spelling.

Words to recognise
hostingGitHub Pagesrepositoryindex.htmlusername.github.iorelative pathdeploy
04 / 08

Code tour

Click a line number with a ring to read the note for that line.

index.html4 notes
<!-- index.html in the repository nusrat-dev.github.io -->
Mentor note · line 1
This file must be called index.html, all small letters. It is what the server sends for the main address.
2<!DOCTYPE html>
3<html lang="en">
4 <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Nusrat Jahan</title>
<link rel="stylesheet" href="style.css">
8 </head>
9 <body>
<img src="photo.jpg" alt="Nusrat in front of the library">
11 <h1>Nusrat Jahan</h1>
12 <a href="https://github.com/nusrat-dev">My GitHub</a>
13 </body>
14</html>
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Your GitHub username is nusrat-dev. What should the repository be called?
  2. 2 / 3Your main file is called home.html. What happens at https://nusrat-dev.github.io?
  3. 3 / 3Your HTML says src="Photo.JPG", and the file is photo.jpg. It works on your laptop. Online?
06 / 08

Explain it back

Only you can see this. Log in to keep it.0 words
07 / 08

How confident are you with Put your page online?

08 / 08

Done

You can now
Publish an HTML and CSS page to username.github.io and fix it when a file does not load.
Next: Values and variables Back to Phase 1
On this page
  1. 01Put your page online
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Quick check
  6. 06Explain it back
  7. 07Confidence
  8. 08Done
Up next · 02 / 08Watch & read

Your profile page works on your laptop. But the address starts with file://, so only you can see it. You want a real https:// link you can send to anyone.

For that, your files must sit on a server that is always on. Renting one is called hosting. GitHub Pages is free hosting for plain HTML, CSS and JavaScript, and you already have a GitHub account.

Think of it like a shop window. Your files live in a GitHub repository, like goods in a storeroom. GitHub Pages puts them in the window, at an address everyone can visit.

The steps:

  1. Create a new public repository named exactly username.github.io, with your GitHub username.
  2. Upload your files, or git push them. The main page must be called index.html.
  3. Wait a minute or two, then open https://username.github.io.
username.github.io/
  index.html
  style.css
  photo.jpg

When someone opens your address, GitHub's server answers with index.html, just like in the first topic of this phase. Then the browser asks for style.css and photo.jpg the same way.

People often name the main file Index.html or home.html. Then the address shows a 404, because the server looks for index.html exactly. The other common one: the CSS loads on your laptop but not online. Windows and macOS do not care about capital letters, but the server does. Photo.jpg is not photo.jpg. Open DevTools, check the Network tab, and fix the name.

When you read a project folder, find index.html first. Then follow each href and src in it, and check that every file it names really exists, with the same spelling.

Words to recognise
hostingGitHub Pagesrepositoryindex.htmlusername.github.iorelative pathdeploy

Your profile page works on your laptop. But the address starts with file://, so only you can see it. You want a real https:// link you can send to anyone.

For that, your files must sit on a server that is always on. Renting one is called hosting. GitHub Pages is free hosting for plain HTML, CSS and JavaScript, and you already have a GitHub account.

Think of it like a shop window. Your files live in a GitHub repository, like goods in a storeroom. GitHub Pages puts them in the window, at an address everyone can visit.

The steps:

  1. Create a new public repository named exactly username.github.io, with your GitHub username.
  2. Upload your files, or git push them. The main page must be called index.html.
  3. Wait a minute or two, then open https://username.github.io.
username.github.io/
  index.html
  style.css
  photo.jpg

When someone opens your address, GitHub's server answers with index.html, just like in the first topic of this phase. Then the browser asks for style.css and photo.jpg the same way.

People often name the main file Index.html or home.html. Then the address shows a 404, because the server looks for index.html exactly. The other common one: the CSS loads on your laptop but not online. Windows and macOS do not care about capital letters, but the server does. Photo.jpg is not photo.jpg. Open DevTools, check the Network tab, and fix the name.

When you read a project folder, find index.html first. Then follow each href and src in it, and check that every file it names really exists, with the same spelling.

Words to recognise
hostingGitHub Pagesrepositoryindex.htmlusername.github.iorelative pathdeploy