This repository contains my frontend development internship projects completed during the DecodeLabs Internship Program. The projects are organized into separate folders to keep the repository clean, professional, and easy to navigate.
Each project focuses on improving practical frontend development skills using HTML5, CSS3, JavaScript, responsive design, accessibility, SEO basics, and interactive web development concepts.
DecodeLabs-Internship/
│
├── Project-1/
├── Project-2/
├── Project-3/
└── README.md
| Project | Title | Focus Area | Folder | Live Demo |
|---|---|---|---|---|
| Project 1 | Frontend Website | HTML, CSS, responsive layout, accessibility | View Project-1 | Live Demo |
| Project 2 | FluidWeb Studio | Responsive multi-page website, CSS Grid, Flexbox, SEO | View Project-2 | Live Demo |
| Project 3 | Interactify | JavaScript interactivity, DOM manipulation, dynamic UI updates | View Project-3 | Live Demo |
Project-1 contains the first frontend development project completed during the DecodeLabs internship.
- Multi-page frontend website
- HTML5 structure
- CSS3 styling
- Responsive layout
- Flexbox and CSS Grid usage
- Accessibility-focused page
- Services and contact sections
- Clean navigation and organized UI
Project-1/
https://official-rayyan.github.io/DecodeLabs-Internship/Project-1/
Project-2 contains a modern responsive frontend website named FluidWeb Studio. This project focuses on mobile-first responsive design, professional UI layout, CSS Grid, Flexbox, media queries, animations, accessibility, and basic SEO practices.
- Fully responsive multi-page website
- Mobile-first design approach
- Responsive hamburger navigation
- Active navbar highlighting
- CSS Grid and Flexbox layouts
- Smooth scroll reveal animations
- Contact form interaction using JavaScript
- Responsive footer with SVG social icons
- SEO meta tags
- Open Graph social sharing tags
- Professional portfolio, case study, process, and FAQ pages
index.html
portfolio.html
case-study.html
process.html
faq.html
Project-2/
https://official-rayyan.github.io/DecodeLabs-Internship/Project-2/
Project-3 contains a modern JavaScript-based interactive website named Interactify. This project focuses on adding interactivity to a webpage using JavaScript, DOM manipulation, event listeners, dynamic content updates, and user interface state changes.
- JavaScript-powered interactive website
- Dark mode toggle with LocalStorage
- Mobile menu toggle
- Dynamic greeting message
- Interactive feature cards
- Interaction playground
- Live interaction score counter
- Project filter gallery
- Project search functionality
- FAQ accordion
- Contact form validation
- Character counter
- Live message preview
- Toast notifications
- Copy email button
- Back to top button
- Active navbar highlighting
- Responsive design
- Accessibility improvements
- SEO meta tags
- Open Graph social preview tags
index.html
concepts.html
documentation.html
Project-3/
https://official-rayyan.github.io/DecodeLabs-Internship/Project-3/
- HTML5
- CSS3
- JavaScript
- DOM Manipulation
- LocalStorage
- CSS Grid
- Flexbox
- Media Queries
- Responsive Design
- Accessibility
- SEO Basics
- Git
- GitHub
DecodeLabs-Internship/
│
├── Project-1/
│ ├── images/
│ ├── index.html
│ ├── about.html
│ ├── accessibility.html
│ ├── contact.html
│ ├── css.html
│ ├── flexbox.html
│ ├── grid.html
│ ├── html.html
│ ├── responsive.html
│ ├── services.html
│ ├── style.css
│ └── README.md
│
├── Project-2/
│ ├── assets/
│ ├── index.html
│ ├── portfolio.html
│ ├── case-study.html
│ ├── process.html
│ ├── faq.html
│ ├── style.css
│ ├── script.js
│ ├── README.md
│ ├── robots.txt
│ └── sitemap.xml
│
├── Project-3/
│ ├── images/
│ ├── index.html
│ ├── concepts.html
│ ├── documentation.html
│ ├── style.css
│ ├── script.js
│ ├── README.md
│ ├── .gitignore
│ └── LICENSE
│
└── README.md
- Clone or download this repository.
git clone https://github.com/official-rayyan/DecodeLabs-Internship.git- Open the repository folder.
cd DecodeLabs-Internship- Open the folder in VS Code.
code .- Open the project folder you want to view.
Project-1/
Project-2/
Project-3/
- Open the
index.htmlfile in your browser.
You can also use the Live Server extension in VS Code.
After enabling GitHub Pages for this repository, the projects can be accessed using the following links:
Project 1:
https://official-rayyan.github.io/DecodeLabs-Internship/Project-1/
Project 2:
https://official-rayyan.github.io/DecodeLabs-Internship/Project-2/
Project 3:
https://official-rayyan.github.io/DecodeLabs-Internship/Project-3/
Through these projects, I practiced and improved:
- Writing semantic HTML
- Styling websites with CSS
- Building responsive layouts
- Using Flexbox and CSS Grid
- Creating multi-page websites
- Applying accessibility basics
- Adding SEO meta tags
- Using JavaScript for interactivity
- Manipulating the DOM
- Handling user events
- Creating dynamic UI updates
- Organizing projects professionally
- Uploading and maintaining projects on GitHub
html
css
javascript
frontend
frontend-development
web-development
responsive-design
css-grid
flexbox
dom-manipulation
interactive-website
accessibility
seo
decodelabs
internship-project
Muhammad Rayyan
Frontend Development Intern
DecodeLabs Internship Program
GitHub: official-rayyan
This repository is created for learning, internship submission, and portfolio purposes.