A Website built with Bootstrap: "Owl-Vector"

Content 🔗

1. Project Overview
2. Screenshots
3. Why I built this
4. what I learned building this project.
5. Tools and resources utilized
6. Author

1. Project Overview 😄

This project involves creating a responsive landing page for a fictional illustration company called Owl-Vector. The company sells illustrations and clip art intended for developers to incorporate into their products. The plan is to further develop this project using JavaScript in the future, aiming to transition it into an e-commerce platform. The goal is to improve user experience, enable smoother transactions, and create a more dynamic online space for digital art enthusiasts.

---

check it out here

---

2. Screenshots 📷

Screenshot 1

A screenshot of the Nav and Hero section

Screenshot 2

a screenshot of the mid-section

Screenshot 3

a screenshot on a mobile device

3. Why I built this 🔨

I undertook this project as a personal challenge to assess my grasp of the Bootstrap CSS framework learned from Colt Steele's Udemy course. It was a venture I wanted to tackle independently, devoid of any guidance, where problem-solving was entirely on my shoulders. Admittedly, I hit some roadblocks, but I persisted, overcoming challenges and successfully bringing the project to fruition.

4. what I learned building this project.

• The use of CSS frameworks like this significantly streamlines the process of writing custom CSS, saving considerable time and effort.

• Utilizing Bootstrap's component classes: I became quite adept at employing Bootstrap's component class system to effortlessly translate intricate designs.

• Mastering Bootstrap's Grid system: Discovering a tool that effortlessly enables users to address responsiveness through its column and row classes forming the grid system was a revelation. This allowed me to craft a website that appeared appealing on various screen sizes.

• Creating seamless, responsive navbars: Crafting navigation bars with CSS has never been this straightforward. I successfully designed an aesthetically pleasing, responsive navbar using just a few classes.

• Mastering documentation navigation: A valuable lesson Bootstrap imparts, particularly for novice web developers, is the cultivation of a culture of diligently reading through documentation. Over time, it teaches you how to effectively reference the documentation to locate the information you need.

• Efficiency with Utility classes: Utility classes prove to be time-saving superheroes, enabling us to make minor adjustments to our elements without resorting to verbose and sometimes unnecessary CSS code.

5. Tools and resources utilized 🔧

The following tools and resources where utilized in building this project.

• HTML5
• CSS3
• Bootstrap v4.6 getbootstrap.com🔗
• Illustrations from storyset.com 🔗
• Color pallet from coolors.co 🔗
• Icons from icons8.con 🔗
• Resources from freecodecamp.org 🔗

Author 🖊️

Hi I'm Benedict, I'm learning to become a frontend developer. check out my blog where I'll be sharing my learning experiences, projects, and tips.

• Checkout it here 🔗

You can also connect with me on twitter

• Follow me 🔗