Caren Kedis

How I Used ChatGPT to Build the Frontend

Throughout the development of the frontend for this project, I used ChatGPT extensively as a coding assistant, design advisor, and learning resource. In total, I had 28 focused chat sessions, all of which contributed to specific parts of the user interface. Since I was using the free version of ChatGPT, which limits the number of interactions per chat, I split my work into smaller chunks and opened new chats as I moved through the different stages of the UI.

Here’s how ChatGPT supported me in the process:

HTML & Layout Structuring

In the early stages, I asked ChatGPT to help me create the basic layout structure for the application using semantic HTML. These chats covered:

Designing a clean page structure with header, navigation, and main content
Tips on accessibility (e.g., using aria- labels properly)
How to structure forms for better UX

CSS & Styling Help

I relied on GPT to help me write CSS for responsive and visually appealing components. I focused on:

Creating a consistent color scheme and typography
Working with margins, paddings, and positioning
Making cards, buttons, and modals look modern
Applying hover states and transitions for interactivity

I also got suggestions on how to use online resources like CSS color palette generators, which I then combined with the code.

Bootstrap Integration

I explored how to use Bootstrap 5 to speed up development. ChatGPT helped me with:

Structuring grid layouts and containers
Using Bootstrap components like navbars, dropdowns, and alerts
Customizing Bootstrap themes to match my color palette
Understanding class utilities (e.g., spacing, alignment, visibility)

Debugging & Refactoring

In the later chats, I often used GPT to debug styling issues, fix broken layouts, or refactor messy CSS. Some examples:

Troubleshooting z-index issues with modals
Solving alignment problems in flex/grid
Cleaning up repeated styles with classes and variables