Code Playgrounds and Hosting

Online playgrounds let you write and share code in the browser. Hosting services put your finished website on the internet for everyone to see.

Code Playgrounds

A playground is an editor in the browser that shows the result instantly. Nothing to install, and you can share your work with a link.

Use playgrounds to:

• Test an idea quickly without creating a project
• Share a small example when you ask for help online
• Show a design or animation in your portfolio

What Does Hosting Mean?

To be online, your files must sit on a computer (a server) that is always on and connected to the internet. A hosting service gives you that server, plus an address like my-site.netlify.app. You can later connect your own domain, like alibakery.pk.

Static Sites vs Dynamic Sites

GitHub Pages, Netlify and Vercel are best for static sites and front-end frameworks.

GitHub Pages

Free hosting directly from a GitHub repository.

1. Push your site to GitHub, with index.html in the main folder.
2. In the repository, open Settings, then Pages.
3. Under Build and deployment, choose Deploy from a branch, select main and / (root), and click Save.
4. After a minute, your site is live at https://username.github.io/repository-name/.

git add .
git commit -m "Update portfolio projects"
git push

To https://github.com/ayesha-dev/portfolio.git
   b2c9e04..f81a6d3  main -> main

Every push updates the live site automatically.

Netlify

1. Sign up with your GitHub account.
2. Click Add new site, then Import an existing project, and choose your repository.
3. For a plain HTML site, leave the build command empty. For a framework, Netlify fills in settings like npm run build and the output folder dist.
4. Click Deploy. You get an address like ali-bakery.netlify.app.

For a very quick test, you can also drag and drop a folder onto Netlify's deploy page.

Vercel

Vercel is made by the creators of Next.js and is excellent for React and Next.js apps.

1. Sign up with GitHub and click Add New, Project.
2. Import your repository. Vercel detects the framework automatically.
3. Click Deploy.

Deployment complete
Production: https://ali-bakery.vercel.app

Every pull request also gets its own preview link, so you can check changes before they go live.

Choosing a Host

Exercise