HTML5 Banner Generator
Overview
During my internship, under the mentorship of a senior developer, I worked on development of an HTML5 Banner Ad Generator. The tool streamlines the often complex process of creating banner ads by providing a user-friendly interface.
This tool allows users to generate and download code for HTML5 banner ads used in display advertising.
- HTML5 (Twig)
- CSS3
- Express.js (Node.js)
- Multer
- GSAP
Features & Functionality
Animations & Layout: Users can dynamically customize their banners by selecting preferred animation and size/layout of the banner. The tool offers a range of animation options, such as fade in and slide in.
Preview: The tool features an intuitive preview functionality, allowing users to visualize the banners they created and adjusting them as needed before downloading the final version of the generated code.
Assets: The user can upload their own images to be used in the banner. The upload works both as selecting from the folder and as a drag-and-drop.
Download zipped generated code: The user can then generate the HTML5 code for the banner ad, which can be downloaded as a zip folder.
Technology Stack
Built on Express.js, the project leverages the capabilities of Node.js to deliver a robust web application.
The use of Multer enhances the file upload process, ensuring a smooth and secure user experience.
App's file structure and routes
Learning Experience
This internship project offered valuable insights into the practical implementation of backend technologies and their seamless integration with frontend components. Working closely with a senior developer, I gained hands-on experience in developing full-stack solutions that balance user functionality and code efficiency.
The collaborative environment fostered a deeper understanding of best practices in code organization, debugging, and optimization.
Impact & Future Enhancements
The HTML5 Banner Ad Generator serves as a practical tool for marketing specialists and designers, facilitating the creation of customized banner ads without the need for extensive coding knowledge. The tool contributes to a simpler process for generating HTML5 banner ads, enhancing productivity for marketing teams.
As the project evolves, there is potential for further enhancements, such as expanding animation options, refining the user interface, and incorporating additional features to cater to a broader range of banner ad requirements and various asset sizes.