Intro
Build and deploy a simple website using HTML, CSS, and JavaScript, with deployment to GitHub Pages Vercel
9/5/25 Updated for Vercel- See deployments
Web Dev 101- Build & Deploy Your First Website by OC Roboticsđź“ŽTODO
- Build an HTML structure
- Push to GitHub
- Deploy to
GitHub PagesVercel- Style it with CSS
- (Optional) Add JavaScript
Setup Project
Create project
- Create a project folder and cd into it
mkdir -p webdev_ws & cd webdev_wsSync Project with GitHub
- Create a repository on GitHub
- push your local repo to GitHub
Push code to GitHub
echo "# <repositoryname>" >> README.md git init git add . git commit -m "Initial commit" git remote add origin git@github.com:<github_username>/<repositoryname>.git git push -u origin master
Create a new branch
- Create a
webdev101branch and switch to it
git checkout -b webdev101- Open project in VS Code
code .Add HTML- The Structure
HTML (HyperText Markup Language) is used to define content structure (headings, paragraphs, links, etc.).
- Create
index.htmlfile and add HTML Boilerplate
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <!-- To link external styling file --> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello, world</h1> <p>Content goes here</p> <!-- To link external javascript file --> <script src="script.js"></script> </body> </html>
- Commit your changes
git add .
git commit -m "Added index.html"Preview the page with VS Code Live Server
-
Install and run the Live Server extension in VS Code
- Easily open the HTML file in a web browser and refresh automatically
-
View page by opening the URL in the browser
http://127.0.0.1:5500/index.html
Deploy your site
GitHub Pages
Note
This exercise focuses on Vercel. See GitHub Pages if you wish to deploy using that method instead
Vercel
Deploy to Vercel from GitHub
- Go to vercel.com and sign in with GitHub
- Import project- Click “Add New → Project” and select your repo
- If Vercel doesn’t auto-detect Vite, set the following options:
- Framework:
Vite - Build command:
npm run build - Output directory:
dist
- Framework:
- Click “Deploy”
- Your site will be live on a
*.vercel.appdomain
Trigger a Preview Deployment
- Push commits on the
webdev102branch to GitHub to create a Preview Deployment whenever you push to this branch
git push origin webdev102- See example
Add CSS- The Style
CSS (Cascading Style Sheets) is used to control layouts, colors, fonts, etc.
- Create
style.css
style.cssbody { font-family: sans-serif; background-color: #f5f5f5; color: #333; padding: 20px; } h1 { color: #2b7a78; } a { color: #3aafa9; text-decoration: none; }
- Commit and push your changes
git add .
git commit -m "Added style.css"
git push origin webdev101Add JavaScript— Interactivity
JavaScript makes your site interactive (e.g., having complex animations, clickable buttons, popup menus, etc.)
- First, Update
index.htmlfile to add the following code inside the<body>tag
index.html<body> <h1>Hello, world</h1> <p>Content goes here</p> <!-- Button and dynamic text --> <button onclick="changeText()">Click me</button> <p id="dynamic-text">This text will change.</p> <script src="script.js"></script>
- Create
script.js
script.jsfunction changeText() { document.getElementById("dynamic-text").innerText = "You clicked the button!"; }
- Commit and push your changes
git add .
git commit -m "Added button functionality"
git push origin webdev101Challenge
- Turn the button into a counter (Hint: Create counter variable in javascript)
Challenge
Final version
Final Checklist
đź“ŽFinal Checklist
- âś… Build an HTML structure
- âś… Push to GitHub
- âś… Deploy to
GitHub PagesVercel- âś… Style it with CSS
- âś… (Optional) Add JavaScript
Continue learning
- HTML & CSS: FreeCodeCamp- Responsive Web Design
- JavaScript: FreeCodeCamp- JavaScript