My First Design Published on CodePen Using Bootstrap
Maria GeogiToday marks an exciting milestone for me as I’ve just published my very first personal project on CodePen. This design is a small website built using the popular framework Bootstrap, and as a beginner developer, this step feels like an important achievement.
Why Bootstrap?
Bootstrap has always been appealing to me because of its simplicity and ease of use. For someone starting out in web development, the grid system, pre-designed components, and responsive features that come out-of-the-box make it a perfect tool. Instead of reinventing the wheel with complex CSS, I was able to quickly bring my vision to life using Bootstrap’s classes.
The Design Concept
The design I created is simple yet functional. It's a personal portfolio template featuring a clean, responsive layout. It includes:
- A navbar that collapses on smaller screens.
- A hero section with a large background image and call-to-action buttons.
- Cards to showcase portfolio items, each of them designed using Bootstrap's card component.
- A contact form at the bottom, styled entirely using Bootstrap’s form utilities.
The most satisfying part was seeing how responsive it looked across different devices, all without writing much custom CSS. Bootstrap’s grid system handled the layout beautifully.
What I Learned
Throughout the process, I learned not only how to utilize Bootstrap but also how to better structure HTML and CSS. Publishing on CodePen also helped me familiarize myself with the platform, where I could instantly see the results of my code, make changes on the fly, and even share my work with others.
Publishing this project feels like an important step in my web development journey. It’s not just about creating something functional, but about gaining the confidence to share my work with the world.