WEB DEVELOPMENT
WORKSHOP
Learn how websites work, build your first webpage, style it with CSS, add basic JavaScript interactions, and publish your project online.
The Learning Journey
A step-by-step path from zero to a deployed website.
Final Goal
Your very own portfolio website hosted live on the internet, which you can show directly to your friends, family and employers.
Workshop Timeline
Understand & Build
- Introduction to Web Development
- Browser
- Website & Web Development
- HTML
- HTML Structure
- Basic HTML elements
- Forms
- Semantic HTML
- Build a basic webpage
Style, Interact & Deploy
- CSS
- Selectors & Box Model
- Flexbox & Responsive Design
- JavaScript
- GitHub
- Portfolio Project & Deployment
Complete Syllabus
Detailed breakdown of everything you will learn during the workshop.
Introduction to Web Development
- Intro to our workshop syllabus timeline
- Intro to browser
- Intro to website and web development
- Overview of HTML, CSS, JS and Code Editor
HTML
- What is HTML?
- Basic HTML structure
- Headings & paragraphs
- Links & images
- Lists
- Buttons
- Division tag
HTML Complete
- Forms & inputs
- Semantic elements
- Icons and fonts
- Build a basic webpage
CSS
- What is CSS?
- Types of CSS
- Selectors & classes
- Colors & fonts
- Icons
- Margin & padding
- Box model
- Flexbox
- Basic responsive design
- Style the webpage
JavaScript
- What is JavaScript?
- Connecting JS into Website
- Basic Alert button
GitHub
- What is GitHub?
- Create a repository
- Push project to GitHub
Examples & Inspiration
Websites deployed by previous students to serve as references.
tailwind-demo1
Example project / reference
davidrai.pages.dev
Example project / reference
biramarsingh
Example project / reference
Student Projects
Amazing projects built by students during the 2 Days Web Development Workshop.
Aadarsh
Student Portfolio Project
aeron
Student Portfolio Project
agrim
Student Portfolio Project
Anshika karki
Student Portfolio Project
Apekshya Rajbanshi
Student Portfolio Project
Arohi
Student Portfolio Project
asbin
Student Portfolio Project
bipin
Student Portfolio Project
bisan
Student Portfolio Project
diksha kharel
Student Portfolio Project
diwash
Student Portfolio Project
Jeshika karki
Student Portfolio Project
kapil foldeer 1
Student Portfolio Project
krisha
Student Portfolio Project
mausom project
Student Portfolio Project
Messi limbu
Student Portfolio Project
mingsoma
Student Portfolio Project
Mridula
Student Portfolio Project
Naya Website by samyog
Student Portfolio Project
neha
Student Portfolio Project
pramod bastola project
Student Portfolio Project
project new anuj,mosan
Student Portfolio Project
Salina
Student Portfolio Project
samirvai
Student Portfolio Project
sarmila
Student Portfolio Project
suwashna.n
Student Portfolio Project
workishop ranbirrr
Student Portfolio Project
Workshop Routine
🚀 Final Project
Put everything you learned together and build your own personal portfolio website.
Project Checklist
-
Build a personal portfolio
-
Make it responsive
-
Add one or two JavaScript interactions
-
Upload to GitHub
-
Deploy the website
-
Share your live website