Lab 6 – CSS Frameworks
Learning what frameworks are and learning the differences between Functional CSS and OOCSS
Goals
Building a responsive website using the Bootstrap CSS framework, knowing the differences between the Functional CSS codes and the OOCSS codes
Description
In this lab, I recreated a complete website using the Bootstrap framework based on provided screenshots. I started by working on a small exercise where I styled a product card twice: once using functional CSS and once using OOCSS. This helped me understand the difference between both uses. After that, I built the main website using Bootstrap. I created a responsive navigation bar, a hero section with centered content, and multiple cards that adapt to different screen sizes using the grid system. I also added an image gallery using the baguetteBox library and implemented a working Bootstrap carousel. Finally, I added a footer and checked that the HTML structure was semantic and valid. This lab gave me a better understanding of when to use a CSS framework and how different CSS methods work.
Reflection
This lab helped me better understand the difference between functional CSS and OOCSS. Using Bootstrap made building a responsive layout much faster.