Fotogram is a modern virtual photo album built during the early stages of my JavaScript journey. The primary goal of this project was to master DOM manipulation and understand how to transform raw data into a dynamic, interactive user interface.
- DOM Manipulation: Creating and injecting HTML elements dynamically using JavaScript based on a data source.
- Data-to-View Rendering: Learning how to map JavaScript objects (captions, image paths, user info) into a consistent UI.
- Array Iteration: Using loops to automate the creation of the photo feed, ensuring the code is DRY (Don't Repeat Yourself).
- Responsive Layouts: Mastering CSS Flexbox and Grid to organize a complex "Social Media" style interface.
- Dynamic Feed Generation: The entire photo gallery is generated via JavaScript, allowing for easy updates by simply modifying the data array.
- Story Highlights Section: A dedicated area for featured content, demonstrating horizontal layout management.
- Clean & Minimalist UI: A focus on high-quality image presentation with clear typography.
- Mobile-First Approach: The interface is fully responsive, adapting seamlessly from desktop sidebars to compact mobile views.
The main challenge was transition from writing static code to thinking programmatically. I learned how to use JavaScript to build the structure of the page, which is essential for understanding how modern web apps function.
Ensuring that every dynamically generated "card" has the exact same structure and styling required a disciplined approach to CSS and template strings in JavaScript.
Designing a multi-section layout (Sidebar, Feed, Suggestions) that remains stable while injecting content dynamically was a great lesson in CSS specificity and flexible box models.
- JavaScript (ES6+): Core focus on DOM API and data iteration.
- HTML5: Semantic framework for the application.
- CSS3: Advanced layouts using Flexbox, Grid, and responsive design techniques.
Author: Artur Groblicki
Portfolio: Working on it 🏗️