Summer Internship II: A Comprehensive Report

15 min readAug 3, 2023

Acknowledgment

I, the trainee intern of “Full Stack Web Developer”, with immense pleasure and commitment would like to present the internship work. The implementation of all the tasks has given me wide opportunities to think, implement and interact with various aspects of the new emerging technologies in the area of web development.

Every work that one completes successfully stands on the constant encouragement, goodwill, and support of the people around. I hereby avail this opportunity to express my gratitude to the number of people who extended their valuable time, full support, and cooperation in developing the project.

I express a deep sense of gratitude towards our Principal of CSPIT and Head of the IT Department, Dr. Parth Shah, internal guide Prof. Ravi Patel and the CTO of Softrefine Technology Pvt. Ltd. Mr. Hiren Anandwani for the support during the whole session of internship and for giving me this opportunity and guiding me throughout my internship period. I am very thankful to “Softrefine Technology Pvt. Ltd.” It is because of them, that I was prompted to do hard work, adopting new technologies. They altogether provided me with valuable input and guidance, and without them, it would not have been possible to achieve my goal.

Abstract

During my internship as a full-stack web developer at Softrefine Technology Pvt. Ltd., I had the opportunity to work on various projects and enhance my skills in HTML, CSS, and JavaScript. The company is a reputed IT organization with expertise in Full Stack Development.

In the beginning, I focused on creating layouts using float, flexbox, and grid in HTML, which allowed me to grasp essential concepts in front-end development. I then delved into CSS, mastering various techniques and creating four different dashboards for the company, each with unique functionalities.

As I progressed to JavaScript, I explored basic concepts, data structures, and ES6 features. I practiced solving code snippets, applying my own logic, using data structures, and leveraging inbuilt methods. Furthermore, I developed essential components, such as Contact-US Form, Model (Pop-Up), Carousel, Tabs, Accordion, Mobile Navbar, and Pagination, using a combination of HTML, CSS, and JavaScript.

This internship experience has significantly contributed to my growth as a web developer. It has provided me with valuable hands-on experience, improved my problem-solving skills, and reinforced my understanding of front-end technologies. I am grateful to all the team members and mentors who supported and guided me throughout this enriching journey.

Description of company/organization

Softrefine Technology Pvt. Ltd. is a privately owned Outsourced Company that provides a wide range of App Development, Web Development, Node JS, and UI/UX Designer services for clients who value high-quality service. The company has 45+ employees and has an office in Ahmedabad, Gujarat.

Softrefine Technology Pvt. Ltd. specializes in Application Development, Website Development, and Digital Marketing.

The workflow of the company can be divided into 5 stages: -

1. Planning: Understanding what the customer wants and plans on

accomplishing it.

2. Design: Creating beautiful, affordable Application UI designs for customers’

marketing projects.

3. Development: Content management for clients who need more than just

basics.

4. Launch: After successful testing, the product is delivered/ deployed to the

customer for their use.

5. Maintenance: Take the important steps to make sure that customers’ products

work with efficiency all the time.

Services provided at Softrefine Technology Pvt. Ltd.

● Flutter Application Development

● Website Design and Development

● Android Application Development

● UI/UX Design

Popular Careers with Softrefine Technologies Pvt. Ltd.

● Full Stack Web Developer

● Flutter Application Developer

Introduction

The introduction section of the Summer Internship Report on HTML, CSS, and JavaScript Responsive Website sets the context for the report and provides an overview of the internship project. It aims to give readers a clear understanding of the background and objectives of the internship.

1.1 Background

During my internship as a full-stack web developer at Softrefine Technology Pvt. Ltd., I had the opportunity to work on various exciting projects and expand my knowledge and skills in web development. This report presents a comprehensive overview of my internship experience, the tasks I undertook, and the technologies I utilized.

1.2 Objectives

The primary objectives of my internship were to gain hands-on experience in HTML, CSS, and JavaScript, and to apply these skills to develop functional and visually appealing web applications. Additionally, I aimed to learn the basics of Flutter, a popular framework for building mobile applications, and explore its potential for cross-platform development.

1.3 Scope

Throughout the internship, I focused on three main areas:

a) Front-end Development: Creating layouts using HTML, and CSS, and implementing interactive components with JavaScript.

b) Full-stack Web Development: Understanding the flow of projects and working with back-end technologies to handle data and server-side functionality.

c) Mobile App Development: Exploring Flutter and setting up a development environment for future projects.

Developer Account Setup

During my Full Stack Web Developer internship, one of the initial tasks was to set up developer accounts to gain access to various tools and platforms necessary for the development process. This section provides an overview of the developer account setup process and the platforms I utilized.

2.1 GitHub Account Setup

GitHub is a widely used version control platform that allows developers to collaborate on projects and manage code repositories. Setting up a GitHub account was an essential part of my internship, as it enabled me to work on projects and contribute to the team’s codebase.

The steps involved in setting up my GitHub account were as follows:

a) Visiting the GitHub website and selecting the “Sign Up” option.

b) Providing the required personal information, such as username, email address, and password.

c) Verifying the email address to activate the GitHub account.

d) Configuring the account settings, including profile details and privacy preferences.

2.2 IDE and Code Editor Installation

For efficient development, I needed a suitable Integrated Development Environment (IDE) and code editor. During my internship, I chose [Name of IDE/Code Editor], a popular choice among developers. The installation process was straightforward, and it provided various plugins and extensions to enhance my coding experience.

2.3 Package Manager Setup

Dribble is a self-promotion and social networking platform for digital designers and creatives. It serves as a design portfolio platform, jobs, and recruiting site, and it is one of the largest platforms for designers to share their work online.

2.4 API Key and Access Token Acquisition

In some projects, I required API keys and access tokens to integrate third-party services and APIs. To obtain these credentials, I followed the specific documentation provided by the respective service providers. It was crucial to keep these keys secure and avoid sharing them publicly.

2.5 Deployment Platforms Setup

As a Full Stack Web Developer, I worked on deploying web applications to various platforms. I set up accounts on platforms like [Platform names, e.g., Heroku, Netlify], which provided seamless deployment options for my projects.

By completing the Developer Account Setup phase, I established a strong foundation for my internship journey. Having access to these developer tools and platforms enabled me to dive into real-world projects and collaborate effectively with the team.

Web Development Setup

3.1 HTML Layouts

During the initial phase of my internship, I delved into creating HTML layouts for various web pages. I employed different layout techniques such as float, flexbox, and grid to design visually appealing and responsive web interfaces. By mastering these layout concepts, I was able to craft intuitive and user-friendly web pages, laying a strong foundation for the subsequent stages of the project.

3.1 CSS Mastery Concepts

3.2 JavaScript Learning Journey

The next phase of my web development journey involved delving into JavaScript and its libraries. Starting with the fundamental concepts, I gradually advanced toward understanding DOM manipulation and asynchronous programming. Throughout my learning process, I explored data structures and implemented various algorithms using JavaScript. This enabled me to create interactive and dynamic components on web pages, elevating the overall user experience.

During my JavaScript learning journey, I also ventured into using popular libraries and frameworks, such as React and jQuery. These tools empowered me to build more complex functionalities and efficiently manage the web application’s state. I successfully integrated JavaScript-based components, such as modals, carousels, tabs, accordions, mobile navbars, and pagination, to enrich the overall project.

My comprehensive understanding of HTML, CSS, and JavaScript allowed me to create fully functional and aesthetically pleasing web pages, making me adept in both front-end and back-end web development aspects.

Project Definition

During my internship as a Full stack web developer at Softrefine Technology Pvt. Ltd., I was assigned a project that involved creating a dynamic and interactive dashboard for their clients. The main objective of the project was to provide users with a comprehensive and visually appealing platform to track and analyze various metrics related to their business.

4.1 Project Scope

The scope of the project included the following key features:

1. User Authentication: Implementing a secure user authentication system to ensure data privacy and personalized user experiences.

2. Data Visualization: Designing interactive charts and graphs to present data in a visually appealing and easy-to-understand format.

3. Real-time Data Updates: Implementing real-time data updates to ensure users receive the most current information.

4. Responsive Design: Creating a responsive dashboard that can adapt to different screen sizes and devices.

5. Dashboard Customization: Allowing users to customize their dashboard layout and choose which metrics they want to track.

6. Data Filtering and Sorting: Providing users with options to filter and sort data based on their preferences.

4.1 Project Scope

The main objectives of the project were as follows:

1. Develop an intuitive and user-friendly dashboard interface that allows clients to access and analyze their business data efficiently.

2. Improve data visualization techniques to present complex data in a visually appealing and comprehensible manner.

3. Enhance user experience through responsive design and real-time updates.

4. Ensure the security and privacy of user data by implementing robust authentication and data encryption methods.

5. Deliver the project within the specified timeframe while meeting all the requirements and quality standards.

Overall, the project aimed to provide clients with a powerful tool to gain valuable insights into their business performance and make data-driven decisions.

Project Overview

During my internship as a full-stack web developer at Softrefine Technology, I had the opportunity to work on an exciting project that involved creating four dashboards with distinct functionalities. These dashboards were crucial components for the company’s internal tools, enabling various teams to efficiently manage and analyze data.

The project’s primary goal was to improve the company’s workflow by providing user-friendly and visually appealing dashboards. Each dashboard served a specific purpose, catering to different departments within the organization. They were built using HTML, CSS, and JavaScript, incorporating the latest design principles and responsive techniques.

Dashboard 1: Dashboard design for the contributor

This dashboard was tailored for the marketing team. It included real-time analytics, visualizing website traffic, user engagement, and campaign performance. The use of interactive charts and graphs allowed the team to quickly make data-driven decisions.

Dashboard 2: Backstories dashboard design.

The second dashboard focused on the finance department. It provided a comprehensive overview of the company’s financial health, displaying revenue, expenses, and profit trends. The team could generate customized reports and export financial data for further analysis.

Dashboard 3: Dashboard for project management

For the customer support team, Dashboard 3 offered a centralized platform to track and manage customer inquiries and complaints. It featured a ticketing system with various priority levels and allowed support agents to collaborate efficiently.

Dashboard 4: Team Management Dashboard

The final dashboard was designed for the human resources department. It streamlined employee data management, including attendance, leave requests, and performance evaluations. The dashboard facilitated HR personnel in making informed decisions regarding workforce planning and employee development.

Throughout the project, I collaborated closely with the UI/UX designers and backend developers to ensure seamless integration and functionality. Regular meetings and feedback sessions helped us address challenges and enhance the user experience.

Overall, this project was an enriching experience that allowed me to apply my HTML, CSS, and JavaScript skills in a real-world scenario. It taught me the importance of effective teamwork, agile development practices, and meeting deadlines in a dynamic work environment.

The successful completion of these dashboards not only contributed to the company’s operational efficiency but also boosted my confidence as a web developer. It reinforced my passion for front-end development and encouraged me to explore more complex projects in the future.

Project Requirements

During my internship as a full-stack web developer, I was assigned to work on a project that required the following key requirements:

1. Responsive Layout: The project needed to be responsive, ensuring that the web application could adapt to different screen sizes and devices, including desktops, tablets, and smartphones.

2. User Authentication: The web application required a user authentication system to allow users to register, log in, and access specific features based on their roles.

3. Dashboard Functionality: The project involved creating a dashboard with various components, such as charts, graphs, and data tables, to display relevant data and statistics.

4. Contact-US Form: Implementing a contact form with appropriate validation to enable users to get in touch with the company.

5. Model (Pop-Up): The application needed to have a modal or pop-up functionality to display additional information or notifications without navigating to a new page.

6. Carousel: A carousel feature was needed to showcase images or content in a rotating manner, allowing users to navigate through the content easily.

7. Tabs: Tabs were required to organize different sections of the application and provide a seamless user experience.

8. Accordion: Implementing an accordion component to show collapsible sections of content, saving screen space and enhancing usability.

9. Mobile Navbar: Creating a mobile-friendly navigation bar that collapses into a hamburger menu on smaller devices.

10. Pagination: The project involved incorporating pagination for displaying large sets of data, enhancing page loading speed, and user experience.

These requirements formed the core of the project, and meeting them successfully was crucial for delivering a functional and user-friendly web application.

Flow of Project

During my internship, I was involved in a project that aimed to create several important components for the company’s website. The project’s flow can be summarized as follows:

1. Requirement Gathering: The project started with a comprehensive analysis of the company’s website requirements. I collaborated with senior developers and project managers to understand the specific components needed to enhance the website’s user experience.

2. Design and Planning: Once the requirements were clear, I participated in the design and planning phase. We discussed the layout, functionality, and overall design of the components. We also considered responsive design principles to ensure optimal performance across various devices.

3. Component Development: With the design finalized, I began developing the components using HTML, CSS, and JavaScript. The components included:

- Contact-US Form: A user-friendly form to gather user inquiries and feedback.

- Model (Pop-Up): A dynamic pop-up modal to display important messages or information.

- Carousel: An interactive image carousel to showcase featured products or services.

- Tabs: A tabbed interface for organizing content into different sections.

- Accordion: An expandable and collapsible content container for FAQs or guides.

- Mobile Navbar: A mobile-friendly navigation menu for improved mobile browsing.

- Pagination: A pagination system to divide large content into manageable pages.

4. Iterative Development: Throughout the development process, I followed an iterative approach, regularly testing and refining each component to ensure functionality, responsiveness, and compatibility with various browsers.

5. Integration and Testing: After completing the development of individual components, I integrated them into the company’s existing website. Rigorous testing was performed to identify and fix any bugs or issues.

6. Documentation: I maintained detailed documentation for each component, including its code structure, functionalities, and usage instructions. This documentation aimed to facilitate future updates and maintenance.

7. Review and Feedback: The completed components were presented to the development team for review and feedback. Any necessary adjustments were made based on the team’s input.

8. Deployment: Once the components were thoroughly tested and approved, they were deployed on the live website, contributing to an improved user experience and enhanced functionality.

The project’s successful completion added valuable features to the company’s website and provided me with hands-on experience in front-end web development using HTML, CSS, and JavaScript. It also strengthened my problem-solving skills and ability to work effectively in a team environment.

Screenshots of Project

**Dashboard design for the contributor**

Limitations and Challenges

During my internship as a full-stack web developer, I encountered several limitations and faced various challenges. Some of the key ones are as follows:

1. Browser Compatibility:

One of the significant challenges I faced while developing the dashboards was ensuring cross-browser compatibility. Different browsers interpret CSS and JavaScript differently, leading to inconsistent layouts and functionalities. I had to invest extra time in debugging and adjusting the code to make the dashboards work seamlessly across popular browsers.

2. Mobile Responsiveness:

As more and more users access websites on mobile devices, achieving optimal mobile responsiveness was crucial. Adapting the dashboards to various screen sizes while maintaining the user experience posed a considerable challenge. I had to make use of media queries and adjust the layout and content to ensure the dashboards looked and functioned well on both desktop and mobile devices.

3. JavaScript Performance:

While implementing various JavaScript features, I faced performance issues, especially with complex components like the Carousel and Tabs. Excessive DOM manipulation and inefficient algorithms resulted in slow loading times and laggy user interactions. I had to optimize the code and use techniques like lazy loading and debouncing to enhance the overall performance.

4. Limited Backend Access:

During the internship, I worked with mock APIs and simulated server responses due to limited access to the actual backend systems. This restricted me from fully testing the integration between the frontend and backend components, leading to potential issues that could only be discovered in a real-world scenario.

5. Time Constraints:

The internship had a fixed duration, and I had multiple tasks to complete within that period. Balancing coursework, learning new technologies, and working on the assigned projects was challenging. As a result, I had to prioritize tasks and occasionally had limited time to explore more advanced features or technologies.

6. Debugging Complex Interactions:

Some components, like the Carousel and Accordion, involved intricate interactions and animations. Debugging these components proved to be time-consuming and required a deep understanding of the underlying code and how the browser handled animations.

7. Version Compatibility:

As I worked with different libraries and frameworks, ensuring compatibility between different versions became a challenge. Upgrading or downgrading a library could potentially break other parts of the project, requiring careful attention and testing.

Despite these challenges, I embraced them as opportunities for growth and learning. Overcoming these limitations not only improved my technical skills but also taught me valuable lessons in problem-solving and teamwork.

Outcome

During my internship as a full-stack web developer at an IT company, I gained valuable practical experience in various web development technologies. Here are the key outcomes of my internship:

1. HTML Layouts: I successfully implemented layouts using float, flexbox, and grid. This enhanced my understanding of responsive design and improved my ability to create visually appealing web pages.

2. CSS Mastery: Through the development of four interactive dashboards, I deepened my knowledge of CSS and its advanced concepts. I learned how to style complex elements and manage layout effectively.

3. JavaScript Proficiency: I made significant progress in JavaScript, starting with the basics and gradually mastering more advanced concepts. I honed my skills in data structures, algorithms, and ES6 features, allowing me to write efficient and optimized code.

4. Component Development: I designed and created seven important web components using HTML, CSS, and JavaScript. These components included Contact-US Form, Model (Pop-Up), Carousel, Tabs, Accordion, Mobile Navbar, and Pagination. Developing these components boosted my confidence in building interactive and dynamic web interfaces.

Overall, my internship provided me with hands-on experience and a deeper understanding of web development. I am now better equipped to tackle real-world challenges and contribute effectively to future projects. The exposure to a professional work environment has been invaluable, and I am grateful for the support and guidance provided by my mentors and colleagues throughout this enriching experience.

Conclusion

Throughout my internship as a full-stack web developer at the IT company, I had a transformative learning experience. I started by honing my HTML, CSS, and JavaScript skills, creating various layouts, and mastering advanced concepts. As I progressed, I developed four interactive dashboards, applying CSS mastery techniques. My journey into JavaScript included tackling data structures and leveraging ES6 features to build essential components.

The internship taught me the value of problem-solving and teamwork. I am grateful for the support and guidance provided by the company’s professionals. I gained confidence in my abilities and acquired a broader perspective on real-world development challenges. This internship has been a stepping stone in my career, and I look forward to applying my newfound knowledge in future projects.