Final Year Diploma Web Project (Part 1) — HTML Progress & Folder Structure Overview
📝 𝐃𝐞𝐬𝐜𝐫𝐢𝐩𝐭𝐢𝐨𝐧:
This is the first part of my Final Year Diploma Web Project Series!
In this video, I’ve completed the HTML structure and added essential image assets for the main pages — Home, Services, Portfolio, Team and Contact Us.
It’s a great start toward building a complete, responsive and dynamic web project step-by-step.
Final-Year-Diploma-Web-Project/
├── 📁 html/
│ ├── index.html → Main homepage
│ ├── services.html → Services section page
│ ├── portfolio.html → Portfolio page
│ ├── team.html → Team page
│ └── contact.html → Contact page
│
├── 📁 css/
│ ├── variables.css → Global colors, fonts, spacing
│ ├── style.css → Main stylesheet
│ ├── responsive.css → Mobile & tablet responsiveness
│ ├── animations.css → Hover & scroll effects
│ └── utilities.css → Reusable helper classes (.text-center etc.)
│
├── 📁 javaScript/
│ ├── script.js → Main JavaScript file
│ ├── navbar.js → Navigation toggle / active state
│ ├── scroll-effects.js → Scroll-based animations
│ ├── form-validation.js → Contact form validation
│ └── ui-handler.js → Dark mode, popups, etc. (optional)
│
├── 📁 images/
│ ├── 📁 favicon/
│ │ └── favicon.ico
│ │
│ ├── 📁 parallax/
│ │ ├── home.avif
│ │ ├── services.avif
│ │ └── team.avif
│ │
│ ├── 📁 portfolio/
│ │ ├── database-development.jpg
│ │ └── portfolio-website.png
│ │
│ ├── 📁 services/
│ │ ├── app-development.jpg
│ │ ├── ui-ux.jpg
│ │ └── web-development.jpg
│ │
│ └── 📁 team/
│ ├── alyan-picture.jpg
│ ├── rehan-picture.jpg
│ └── yasir-picture.jpeg
│
├── 📁 fonts/
│ └── Poppins-Regular.ttf
│
├── 📁 data/
│ ├── site-info.json → Basic site metadata
│ ├── team.json → Team members data
│ └── services.json → List of offered services
│
├── 📁 docs/
│ ├── project-report.pdf → Final documentation/report
│ └── 📁 screenshots/
│ ├── homepage-preview.png
│ ├── responsive-view.png
│ └── structure-preview.png
│
├── 📁 backup/ (No Add)
│ ├── old-style.css
│ └── old-index.html
│
├── README.md → Project overview & folder structure
├── LICENSE → License info (MIT)
├── manifest.json → Web manifest (for PWA/meta data)
├── sitemap.xml → SEO sitemap
├── robots.txt → Search engine crawl settings
├── credits.txt → Contributors & acknowledgements
└── .gitignore → Git ignored files/folders
🔗 𝐆𝐢𝐭𝐇𝐮𝐛 𝐑𝐞𝐩𝐨𝐬𝐢𝐭𝐨𝐫𝐲 (𝐂𝐨𝐦𝐢𝐧𝐠 𝐒𝐨𝐨𝐧):
Stay tuned — full project with source code will be uploaded soon to my GitHub profile:
https://github.com/YasirAwan4831/Fina...
𝐅𝐨𝐥𝐥𝐨𝐰 𝐌𝐲 𝐖𝐨𝐫𝐤:
𝐋i𝐧k𝐞d𝐈n: / yasirawan4831
𝕏: https://github.com/YasirAwan4831
𝐀s𝐚n𝐢: https://asani.pk/profile/yasirawan4831
#WebDevelopment #FinalYearProject #DiplomaProject #HTML #CSS #JavaScript #Frontend #backend #fullstack #CodingJourney #LearningByDoing #GitHubProjects #WebDevelopment #DiplomaProject #HTMLCSSJS #FrontendDevelopment #PortfolioWebsite #StudentProject #GitHubProjects #FinalYearProject #fullstackdevelopment #YasirAwan #YasirTech #YasirAwan4831